Poziționarea componentelor Dash

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

HTML și web-ul

HTML: limbaj pentru structurarea site-urilor web

HTML: structura de lemn a unei case
- Stabilește plasarea obiectelor
CSS: culoarea de vopsea a unei camere
- Stilul (ex.: culoarea de fundal) al obiectelor

Logo-ul oficial HTML. Scrie HTML cu litere albastre

Logo-ul oficial CSS. Scrie CSS cu litere albastre în relief

Tagurile Div și H

Dash folosește dash.html ca interfață între HTML și Python

Două structuri HTML importante ('taguri'):

Tagurile Div: esențiale pentru structurarea site-urilor
- Pot exista mai multe div-uri de dimensiuni și conținut diferit
Tagurile H: titluri de dimensiuni diferite (H1 > H6)

Utilizarea tagurilor Div și H

Div general (conține totul)
Div interior: fundal roșu
Div cu fundal albastru
- Taguri H în interior
Ignorați partea style - mai multe despre 'CSS' mai târziu!

<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>

Exemplul nostru afișat

O imagine cu o casetă albastră cu chenar punctat. În interior, ocupând colțul stânga-sus, se află o casetă roșie plină. Dedesubt este o casetă albastră plină cu textul „This box" și „another title" înăuntru

Observați:

Div cu fundal roșu
Div cu fundal albastru și taguri H

Exemplul nostru în Dash

Recrearea exemplului HTML cu Dash

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'})
    ]

Analiza structurii layout-ului

Tagurile HTML corespund lui html.(){{1}} în Dash
- html.Div() = <div>
- html.H1() = <h1>
Ultimul div are un argument children
- O listă de obiecte incluse
Putem adăuga și componente dcc.Graph() înăuntru!

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})
]

Grafice în layout

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)
]

Un gif cu un grafic bar orizontal al vânzărilor totale pe axa x și țara pe axa y, într-un browser Chrome. Țările au culori diferite. Mouse-ul trece peste grafic și apoi în bara de adrese URL cu adresa serverului

Adăugarea mai multă structură

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)
]

Un gif cu aceeași aplicație ca în exercițiul anterior, dar graficul bar a fost mutat mai jos, iar deasupra apare o casetă mică albastru-deschis

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly