Pozycjonowanie komponentów Dash

Tworzenie dashboardów z Dash i Plotly

Alex Scriven

Data Scientist

HTML i internet

HTML: język strukturyzowania stron internetowych

HTML: szkielet drewniany domu
- Definiuje rozmieszczenie elementów
CSS: kolor ścian w pokoju
- Styl obiektów (np. kolor tła)

Oficjalne logo HTML z napisem HTML w niebieskim kolorze

Oficjalne logo CSS z napisem CSS w niebieskim wypukłym stylu

Tagi Div i H

Dash używa dash.html do interfejsu między HTML a Pythonem

Dwie ważne struktury HTML (tagi):

Tagi Div: kluczowe dla struktury stron
- Można tworzyć wiele divów różnych rozmiarów z różną zawartością
Tagi H: tytuły różnych rozmiarów (H1 > H6)

Używanie tagów Div i H

Zewnętrzny div (zawiera wszystko)
Wewnętrzny div: czerwone tło
Div z niebieskim tłem
- Tagi H wewnątrz
Pominąć część style – więcej o CSS później!

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

Nasz przykład na ekranie

Obraz niebieskiego prostokąta z przerywaną ramką. W lewym górnym rogu znajduje się wypełniony czerwony prostokąt. Poniżej widoczny jest wypełniony niebieski prostokąt z tekstami „This box" i „another title" w środku

Zwróć uwagę:

Div z czerwonym tłem
Div z niebieskim tłem i tagami H

Nasz przykład w Dash

Odtworzenie przykładu HTML w 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 układu

Tagi HTML odpowiadają html.()
- html.Div() = <div>
- html.H1() = <h1>
Ostatni div ma argument children
- Lista obiektów umieszczonych wewnątrz
Można w nim umieszczać 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})
]

Wykresy w układzie

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

Animacja poziomego wykresu słupkowego z całkowitą sprzedażą na osi X i krajami na osi Y w przeglądarce Chrome. Kraje mają różne kolory. Kursor przesuwa się po wykresie, a następnie do paska adresu URL z adresem serwera

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

Animacja tej samej aplikacji co w poprzednim ćwiczeniu, jednak wykres słupkowy został przesunięty niżej, a nad nim widoczne jest małe jasnoniebieskie pole

Czas na ćwiczenia!

Tworzenie dashboardów z Dash i Plotly