Dash components की पोज़िशनिंग

Dash और Plotly के साथ डैशबोर्ड बनाना

Alex Scriven

Data Scientist

HTML और वेब

HTML: वेबसाइट की संरचना की भाषा

HTML: घर की लकड़ी की ढांचा
- ऑब्जेक्ट्स की जगह तय करें
CSS: कमरे का पेंट रंग
- ऑब्जेक्ट्स की स्टाइल (जैसे, background color)

आधिकारिक HTML लोगो. इसमें नीले अक्षरों में HTML लिखा है

आधिकारिक CSS लोगो. इसमें नीली उभरी हुई लिखावट में css लिखा है

Div और H टैग

Dash, HTML और Python के बीच इंटरफेस के लिए dash.html उपयोग करता है

दो महत्वपूर्ण HTML स्ट्रक्चर ('tags'):

Div टैग: वेबसाइट स्ट्रक्चर के लिए अहम
- अलग आकार के कई div, अंदर अलग चीजें हो सकती हैं
H टैग: अलग आकार के टाइटल (H1 > H6)

Div और H टैग का उपयोग

ओवरऑल div (सब कुछ अंदर)
अंदर का div: लाल बैकग्राउंड
नीले बैकग्राउंड वाला div
- अंदर H टैग
style भाग अनदेखा करें - 'CSS' आगे आएगा!

<div>
  <div style="background-color: red; 
              width:250; height:250;">
  </div>
  <div style="background-color: lightblue; 
              width:250; height:250;">
    <h1>This box</h1>
    <h2>Another Title</h2>
  </div>
</div>

हमारा उदाहरण प्रदर्शित

एक नीले बॉक्स की छवि जिसमें डॉटेड बॉर्डर है. अंदर, ऊपर-बाएँ कोने में भरा हुआ लाल बॉक्स है. इसके नीचे भरा हुआ नीला बॉक्स है जिसमें 'This box' और 'another title' लिखा है

ध्यान दें:

लाल बैकग्राउंड वाला div
H टैग के साथ नीला बैकग्राउंड div

Dash में हमारा उदाहरण

Dash से HTML उदाहरण दोहराना

from dash import Dash, html
app = Dash()
app.layout = [
    html.Div(style={'height':250, 'width':250, 'background-color':'red'}),
    html.Div(children=[
        html.H1("This box"),
        html.H2("Another Title")], 
        style={'background-color':'lightblue'})
    ]

लेआउट को तोड़कर समझें

HTML टैग, Dash html.() से मैप होते हैं
- html.Div() = <div>
- html.H1() = <h1>
आखिरी div में children आर्ग्युमेंट है
- अंदर जाने वाली ऑब्जेक्ट्स की लिस्ट
आप dcc.Graph() components भी अंदर रख सकते हैं!

from dash import Dash, html
app.layout = [
  html.Div(
    style={'background-color':'red', 
           'height':250, 'width':250}),
  html.Div(
  children=[
      html.H1("This box"),
      html.H2("Another Title")]
    ,style={'background-color':'lightblue', 
              'height':250, 'width':250})
]

लेआउट में ग्राफ

bar_fig_country = px.bar(ecom_sales, 
 x='Total Sales ($)', y='Country',
 color='Country', color_discrete_map=
 {'United Kingdom':'lightblue', 
 'Germany':'orange', 'France':'darkblue', 
 'Australia':'green', 'Hong Kong':'red'})
app = Dash()

app.layout = [
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

एक GIF: Chrome ब्राउज़र में क्षैतिज बार चार्ट, x-धुरी पर कुल बिक्री और y-धुरी पर देश. देशों के रंग अलग हैं. माउस ग्राफ पर और फिर URL बार (सर्वर पता) पर जाता है

और संरचना जोड़ना

app.layout = [
  html.Div(style={
    'width':150,'height':150, 
    'background-color':'lightblue'}),
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

उसी ऐप का GIF जैसा पिछले अभ्यास में, लेकिन बार चार्ट पेज में नीचे धकेला गया है, और ऊपर एक छोटा हल्का नीला बॉक्स है

अभ्यास करते हैं!

Dash और Plotly के साथ डैशबोर्ड बनाना