Dash -- Layout¶

On connait la puissance d'un petit dessin vs un long discours et on a vu qu'en affichant les bons graphes on peut faire ressortir des informations de données. On va maintenant regarder comment assembler ces graphes et ajouter des curseurs qui permettent de les contrôler pour chercher une information ou surveiller un flux de données par exemple.

Pour cela on fabrique son tableau de bord qui est un mélange de

  • HTML pour la partie mise en page
  • Plotly pour les graphes
  • Dash pour les composants d'interaction comme les curseurs, menus... et pour l'assemblage du tout.

Installation de Dash sur sa machine¶

Comme indiqué ci-dessus cette partie utilise Dash qui n'est pas intégré dans Jupyter Notebook. Aussi cela demande que vous installiez tout ce qui est nécessaire sur votre machine comme indiqué ici.

Premier tableau de bord¶

Dash propose un tutorial bien fait que je suis. Le premier exemple en est extrait en 90 %, voir ici.

Pour ce premier exemple on met

  • du texte en HTML dans un grand conteneur html.Div qui contient plusieurs enfants (ce qui permet de construire un arbre sachant que tous les composants ont un argument children).
    • un titre de niveau 1 avec html.H1
    • un conteneur avec html.Div pour y ranger du texte
    • du texte en Markdown avec dcc.Markdown
    • une figure Plotly encapsulé dans un dcc.Graph
In [1]:
%%writefile /tmp/dash1.py
# -*- coding: utf-8 -*-
import dash
from dash import dcc
from dash import html
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data
        on more than one line in the code.
    '''),

    dcc.Markdown("And a __line__ in Markdown which makes life so *easy*"),
    
    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(host="0.0.0.0", debug=True, port=8051) # 0.0.0.0 is needed for Docker
    

Writing /tmp/dash1.py

Maintenant que la cellule ci-dessus a été enregistrée dans /tmp/dash1.py on peut lancer le serveur Dash qui va l'executer.

Attention : Lorsqu'on lance Dash dans un conteneur Docker, il est nécessaire d'utiliser l'adresse host='0.0.0.0' qui indique à Docker de choisir la bonne adresse. Dans ce cas Dash indique qu'il tourne sur 0.0.0.0:8051 mais il faut traduire par http://127.0.0.1:8051/ si on fait tourner le Docker localement ou http://python3.mooc.lrde.epita.fr:8051 si on est sur le site de l'ÉPITA.

Lorsqu'on utilise Dash sur sa machine sans Docker, alors on n'indique pas host et l'application tourne sur l'adresse locale c.a.d. http://127.0.0.1:8051/.

Si vous lancez cette application sur le serveur web de l'EPITA alors vous allez entrer en collision avec l'application lancée par les autres. Aussi il est préférable de recopier le code sur sa machine et de le lancer localement (si on fait tourner cette feuille Jupyter sur sa machine, alors tout va bien, on peut lancer la cellule suivante sans risque).

Pour arrêter le serveur Dash il suffit d'arrêter la cellule.

In [2]:
!python3 /tmp/dash1.py 

Dash is running on http://0.0.0.0:8051/

 * Serving Flask app 'dash1'
 * Debug mode: on
^C

La documentation des composants est sur :

  • Dash HTML pour l'affichage HTML
  • Dash Core pour le Markdown, l'affichage de figures et les interactions qu'on verra à la feuille suivante.

Plus d'information sur la partie HTML¶

Le tutorial officiel de la mise en page montre en plus

  • comment personnaliser le rendu (couleur, police) sans pour autant parler des CSS alors qu'il est possible d'indiquer avec l'argument className le style désiré (html.Div(className="alert", children="...")
  • comment utiliser les composants interactif d'HTML comme les boutons, menus, glissières...

Il est conseillé de lire cette présentation qui est bien plus complète que cette page.

In [ ]: