Composantes interactives

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Améliorer l'interactivité

Quelques composantes interactives utiles :
- dcc.Checklist() = Cases à cocher
- dcc.RadioItems() = Boutons radio
- dcc.Slider() / dcc.RangeSlider() = Sélecteurs à curseur
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Comme des curseurs, mais pour les dates

Curseurs

Curseur : glisser pour une seule valeur

Curseur d'intervalle : glisser pour deux valeurs

Rappel : peut être lié à un rappel (callback)
- Mettre à jour des graphiques ou des composantes

Un curseur :

Un GIF d'un curseur bleu sur fond noir avec du texte dessous indiquant la valeur sélectionnée. La souris saisit le curseur et le fait glisser vers le haut, ce qui augmente la valeur indiquée.

Un curseur d'intervalle :

Un GIF d'un curseur d'intervalle bleu sur fond noir avec du texte dessous indiquant les deux valeurs sélectionnées. La souris saisit chaque extrémité et les fait glisser, ce qui modifie les valeurs indiquées.

Curseurs dans Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Arguments clés :

min/max : bornes du curseur
value : sélection initiale
step : incrément par cran
vertical : orientation horizontale ou verticale

Sélecteurs de date dans Dash

DatePickerSingle : sélectionner une date unique

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = sélection initiale
initial_visible_month = mois affiché dans la fenêtre
Limiter au besoin avec min_date_allowed et max_date_allowed

Un GIF d'un sélecteur de date courant. Un champ affiche le 1er juillet 2025. La souris clique, le calendrier s'ouvre, puis sélectionne le 2 juillet 2025 ; le calendrier se referme et la date affichée change.

Sélecteur d'intervalle de dates

Semblable à DatePickerSingle

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

Définir un start_date et un end_date initiaux

Un GIF d'un sélecteur d'intervalle de dates. Deux champs affichent des dates en juillet 2025. La souris clique le second champ ; un calendrier avec l'intervalle en vert s'ouvre, puis un nouvel intervalle est choisi et les dates changent.

Mettre à jour des graphiques

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@callback(
    Output(component_id='sales_cat', 
           component_property='figure'),
    Input(component_id='sale_date', 
           component_property='date'))

def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)

    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]

    # Créer la figure
    return fig

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly