Posizionare i componenti Dash

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

HTML e il web

HTML: linguaggio per strutturare i siti web

HTML: la struttura in legno di una casa
- Definisce il posizionamento degli oggetti
CSS: il colore della pittura di una stanza
- Stile (es. colore di sfondo) degli oggetti

il logo ufficiale di html. c'è scritto HTML in blu

il logo ufficiale di css. c'è scritto css in blu in rilievo

Tag Div e H

Dash usa dash.html per fare da ponte tra HTML e Python

Due strutture HTML importanti («tag»):

Tag div: fondamentali per strutturare i siti
- Puoi avere molti div di dimensioni diverse con contenuti diversi
Tag H: titoli di dimensioni diverse (H1 > H6)

Usare i tag Div e H

Div generale (contiene tutto)
Div interno: sfondo rosso
Div con sfondo azzurro
- Tag H all'interno
Ignora la parte style – parleremo di «CSS» dopo!

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

Il nostro esempio visualizzato

Immagine di un riquadro blu con bordo tratteggiato. In alto a sinistra c'è un riquadro rosso pieno. Sotto c'è un riquadro azzurro con le scritte 'This box' e 'another title'

Nota bene:

Div con sfondo rosso
Div con sfondo azzurro e tag H

Il nostro esempio in Dash

Ricreare l'esempio HTML con 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'})
    ]

Scomporre il layout

I tag HTML corrispondono a html.() in Dash
- html.Div() = <div>
- html.H1() = <h1>
L'ultimo div ha l'argomento children
- Un elenco di oggetti da inserire
Possiamo inserire anche componenti 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})
]

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

Una GIF di un grafico a barre orizzontali delle vendite totali sull'asse x per paese sull'asse y in un browser Chrome. I paesi hanno colori diversi. Il mouse passa sul grafico e poi sulla barra degli URL con l'indirizzo del server

Aggiungere più struttura

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

Una GIF della stessa app dell'esercizio precedente; il grafico a barre è stato spinto verso il basso nella pagina e sopra c'è un piccolo riquadro azzurro

Esercitiamoci!

Creare dashboard con Dash e Plotly