Rozmístění komponent Dash

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

HTML a web

HTML: jazyk pro strukturování webových stránek

HTML: dřevěná konstrukce domu
- Určuje umístění objektů
CSS: barva stěn místnosti
- Styl (např. barva pozadí) objektů

Oficiální logo HTML. Nápis HTML modrým písmem

Oficiální logo CSS. Nápis CSS modrým reliéfním písmem

Tagy Div a H

Dash používá dash.html jako rozhraní mezi HTML a Pythonem

Dva důležité HTML struktury (tagy):

Tagy Div: klíčové pro strukturování webových stránek
- Lze mít mnoho různě velkých divů s různým obsahem
Tagy H: nadpisy různých velikostí (H1 > H6)

Použití tagů Div a H

Vnější div (vše uvnitř)
Vnitřní div: červené pozadí
Div s modrým pozadím
- Tagy H uvnitř
Část style zatím ignorujte – o CSS později!

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

Zobrazení našeho příkladu

Obrázek modrého rámečku s tečkovaným okrajem. V levém horním rohu je vyplněný červený rámeček. Pod ním je vyplněný modrý rámeček s textem 'This box' a 'another title'

Povšimněte si:

Div s červeným pozadím
Div s modrým pozadím a tagy H

Náš příklad v Dash

Rekreace HTML příkladu v 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'})
    ]

Analýza rozvržení

HTML tagy odpovídají html.() v Dash
- html.Div() = <div>
- html.H1() = <h1>
Poslední div má argument children
- Seznam objektů umístěných dovnitř
Lze vložit i komponenty dcc.Graph()

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

Grafy v rozvržení

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

Animovaný gif s vodorovným sloupcovým grafem celkových tržeb na ose x podle země na ose y v prohlížeči Chrome. Země mají různé barvy. Myš se pohybuje nad grafem a poté přejde do adresního řádku se serverovou adresou

Přidání další struktury

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

Animovaný gif stejné aplikace jako v předchozím cvičení. Sloupcový graf je posunut níže na stránce a nad ním je malý světle modrý rámeček

Pojďme si procvičit!

Tvorba dashboardů s Dash a Plotly