Positionner les composants Dash

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

HTML et le Web

HTML : langage pour structurer les sites Web

HTML : la charpente d'une maison
- Place les éléments
CSS : la couleur de peinture d'une pièce
- Style des éléments (p. ex., couleur d'arrière-plan)

le logo officiel HTML. On y lit HTML en lettres bleues

le logo officiel CSS. On y lit 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
- Plusieurs divs 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 à l'intérieur)
Div interne : arrière-plan rouge
Div à arrière-plan bleu
- Balises H à l'intérieur
Ignorez la partie style – on verra « CSS » plus loin !

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

Notre exemple affiché

Image d'un carré bleu à bordure en pointillé. En haut à gauche, un carré rouge rempli. Dessous, un carré bleu rempli avec les mots « This box » et « another title »

À noter :

Div à arrière-plan rouge
Div à arrière-plan bleu avec balises H

Notre exemple dans Dash

Reproduire 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>
Le dernier div a un argument children
- Liste d'objets à inclure
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 à barres horizontal des ventes totales sur l'axe des x par pays sur l'axe des y dans le navigateur Chrome. Les pays ont des couleurs différentes. La souris survole le graphique puis la barre d'URL indiquant l'adresse du serveur

Ajouter plus 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 dans l'exercice précédent ; toutefois, le diagramme à barres est repoussé vers le bas de la page, et un petit carré bleu pâle se trouve au-dessus

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly