Composants interactifs

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Améliorer l'interactivité

Quelques composants interactifs utiles :
- dcc.Checklist() = Cases à cocher
- dcc.RadioItems() = Boutons radio
- dcc.Slider() / dcc.RangeSlider() = Curseurs de sélection
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Semblables aux curseurs mais pour les dates

Curseurs

Slider : faites glisser pour une valeur unique

Range Slider : faites glisser pour deux valeurs

Rappel : peut être relié à un callback
- Met à jour des graphiques ou des composants

Un curseur :

Un GIF montrant un curseur bleu sur fond noir avec, dessous, le texte indiquant la valeur sélectionnée. La souris saisit le cran du curseur et le fait monter, ce qui augmente la valeur affichée.

Un curseur de plage :

Un GIF montrant un curseur de plage bleu sur fond noir avec, dessous, le texte indiquant deux valeurs sélectionnées. La souris saisit chaque extrémité du curseur et les déplace, ce qui modifie les valeurs affiché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
Possibilité de limiter 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, un calendrier s'ouvre, puis le 2 juillet 2025 est choisi ; le calendrier se referme et la date du sélecteur est mise à jour.

Sélecteur de plage de dates

Similaire à DatePickerSingle

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

Définissez un start_date et un end_date initiaux

Un GIF d'un sélecteur de plage de dates. Deux champs affichent des dates de juillet 2025. En cliquant sur le second, un calendrier apparaît avec la plage en vert ; une nouvelle plage est choisie, ce qui met à jour les dates.

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