Plotly Dash est un framework Python performant permettant de construire des applications web analytiques. Reposant sur Flask, Plotly.js et React.js, Dash permet de concevoir des interfaces utilisateur hautement personnalisées en utilisant exclusivement le langage Python. Il est particulièrement adapté aux data scientists et ingénieurs travaillant sur le traitement de données.

Installation de l'environnement

Pour commencer à utiliser Dash, il est nécessaire d'installer la bibliothèque principale ainsi que ses dépendances pour la gestion des composants HTML et graphiques :

pip install dash
pip install plotly
pip install pandas

Structure d'une application Dash

Une application Dash se divise généralement en deux segments distincts :

• Le Layout : définit l'apparence visuelle et l'organisation des composants (titres, graphiques, menus déroulants).
• L'Interactivité : gérée par des fonctions de rappel (callbacks), elle définit comment l'application réagit aux entrées de l'utilisateur.

Mise en œuvre technique

L'exemple suivant illustre comment intégrer plusiuers instances Dash au sein d'un serveur Flask existant, tout en manipulant des données avec Pandas pour générer des graphiques interactifs.

# -*- coding: utf-8 -*-
import pandas as pd
import numpy as np
from flask import Flask
import dash
from dash import dcc, html
import plotly.express as px
import plotly.graph_objs as go

# Initialisation du serveur Flask
serveur_web = Flask(__name__)

# Configuration des différentes routes Dash
interface_demo = dash.Dash(__name__, server=serveur_web, url_base_pathname='/visualisation/')
interface_barres = dash.Dash(__name__, server=serveur_web, url_base_pathname='/stats-barres/')

# Préparation d'un jeu de données fictif
dates_series = ["2023-05-01", "2023-05-02", "2023-05-03", "2023-05-04"]
valeurs_metriques = [12, 45, 33, 58]
commentaires = [
   "Analyse matinale des flux de données entrantes.",
   "Pic de trafic observé suite à la mise à jour système.",
   "Maintenance préventive effectuée sur les serveurs.",
   "Stabilisation des performances globales du cluster."
]

df_donnees = pd.DataFrame({
   "date": dates_series,
   "valeur": valeurs_metriques,
   "description": commentaires
})

def formater_infobulles(data_list, limite=40):
   """Découpe le texte pour un affichage propre dans les graphiques Plotly."""
   resultats = []
   for texte in data_list:
       if pd.isna(texte):
           continue
       blocs = [texte[i:i+limite] for i in range(0, len(texte), limite)]
       resultats.append("<br>".join(blocs))
   return resultats

# Création du graphique linéaire avec Plotly Express
fig_principale = px.line(
   df_donnees,
   x='date',
   y='valeur',
   title="Évolution des indicateurs",
   labels={"date": "Période", "valeur": "Intensité"},
   template="plotly_white"
)

# Personnalisation des données au survol
fig_principale.update_traces(
   customdata=formater_infobulles(df_donnees["description"]),
   hovertemplate='Date: %{x}<br>Valeur: %{y}<br>Note: %{customdata}'
)

# Définition de la mise en page de la première instance
interface_demo.layout = html.Div([
   html.H1("Tableau de bord de monitoring"),
   html.Div([
       html.Label("Filtre de recherche :"),
       dcc.Input(id="input-recherche", type="text", placeholder="Saisir un tag..."),
   ]),
   dcc.Graph(id="graphique-evolution", figure=fig_principale)
])

# Définition de la mise en page pour les diagrammes en barres
interface_barres.layout = html.Div([
   html.H2("Répartition par catégories"),
   dcc.Graph(
       id='bar-chart',
       figure={
           'data': [
               {'x': df_donnees['date'], 'y': df_donnees['valeur'], 'type': 'bar', 'name': 'Volume'}
           ],
           'layout': {'title': 'Analyse comparative des volumes'}
       }
   )
])

@serveur_web.route('/')
def index():
   return "Serveur de visualisation actif. Accédez aux routes /visualisation/ ou /stats-barres/."

if __name__ == '__main__':
   serveur_web.run(debug=True, port=8050)

Optimisation de l'affichage des graphiques

Pour ajuster finement l'apparence des composants au survol (hover text), l'utilisation de la propriété customdata combinée au hovertemplate est la méthode la plus robuste. Cela permet d'injecter des données supplémentaires sans surcharger l'axe des ordonnées.

Si vous travaillez dans un environnement de type Jupyter Noteobok, il est impératif d'initialiser le mode hors ligne pour visualiser les graphiques directement dans la cellule de sortie :

import plotly.offline as pyo
pyo.init_notebook_mode(connected=True)

Gestion des multiples routes

L'utilisation d'un objet Flask comme serveur parent (paramètre server dans le constructeur Dash) permet de faire cohabiter plusieurs micro-applications au sein du même processus, facilitant ainsi le déploiement de portails de données complexes.