Positionner les composants Dash

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

HTML et le web

HTML : langage de structuration des sites web

HTML : l'ossature en bois d'une maison
- Définit l'emplacement des éléments
CSS : la couleur de peinture d'une pièce
- Style (p. ex. couleur de fond) des éléments

le logo officiel HTML. Il est écrit HTML en bleu

le logo officiel CSS. Il est écrit CSS en relief bleu

Balises div et h

Dash utilise dash.html pour faire le lien entre HTML et Python

Deux structures HTML importantes (« balises ») :

Balises div : essentielles pour structurer un site
- Possibilité de multiples div de tailles variées avec divers contenus
Balises h : titres de tailles différentes (H1 > H6)

Utiliser les balises div et h

Div globale (tout est à l'intérieur)
Div interne : fond rouge
Div au fond bleu
- Balises h à l'intérieur
Ignorez la partie style – nous verrons le « CSS » plus tard !

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

Affichage de notre exemple

Image d'un cadre bleu à bordure en pointillés. En haut à gauche, une zone rouge pleine. En dessous, une zone bleue pleine avec le texte « This box » et « another title » à l'intérieur

À noter :

Div au fond rouge
Div au fond bleu avec balises h

Notre exemple dans Dash

Recréer l'exemple HTML avec 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'})
    ]

Décomposer la mise en page

Les balises HTML correspondent à html.() dans Dash
- html.Div() = <div>
- html.H1() = <h1>
La dernière div a un argument children
- Une liste d'objets à y insérer
On peut aussi y mettre des composants 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})
]

Graphiques dans la mise en page

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 d'un diagramme en barres horizontal : ventes totales en abscisse par pays en ordonnée, dans Chrome. Les pays ont des couleurs différentes. La souris survole le graphe puis la barre d'URL avec l'adresse du serveur

Ajouter davantage de structure

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 de la même application que précédemment ; toutefois, le graphique en barres est repoussé vers le bas, avec un petit carré bleu clair au-dessus

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly