Rappels dans Dash

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Qu'est‑ce qu'un rappel ?

Fonction déclenchée par une interaction
- Une personne interagit avec un élément
  - -> Une fonction Python est déclenchée
    - --> Quelque chose change

Pourquoi ? Pour rendre l'application interactive ✨

Rappels dans Dash

Commencez par la fonction décorateur
- Utilise from dash import Input, Output
Output : où envoyer la valeur de retour
- component_id : identifier le composant
- component_property : ce qui sera modifié
Input : ce qui déclenche le rappel
- component_property : à utiliser dans la fonction déclenchée

@callback(

   Output(component_id='my_plot', 
          component_property='figure'),

   Input(component_id='my_input', 
          component_property='value')

)

def some_function(data):
    # Subset Data
    # Recreate Figure
    return fig

Listes déroulantes dans Dash

dcc.Dropdown(id='title_dd',
             options=['Title 1', 'Title 2'])

Liste de valeurs

Un rappel avec liste déroulante

app.layout =[

  dcc.Dropdown(id='title_dd',
      options=['Title 1', 'Title 2']),

  dcc.Graph(id='my_graph')])

@callback(
    Output(component_id='my_graph', 
           component_property='figure'),

    Input(component_id='title_dd', 
           component_property='value')
)

# @callback()
def update_plot(selection):
    title = "None Selected"
    if selection:
        title = selection

    bar_fig = px.bar(
      data_frame=ecom_sales, 
      title=f'{title}',
      x='Total Sales ($)', y='Country')

  return bar_fig

Notre première liste déroulante

Un GIF d'un navigateur Chrome affichant un diagramme à barres des ventes totales (axe des x) par pays (axe des y) avec, au‑dessus, une liste déroulante proposant Title 1 et Title 2. Le GIF montre la sélection de chaque option, et le titre du graphique change selon la valeur choisie

Liste déroulante comme filtre

Cas courant : la liste déroulante filtre le DataFrame du graphique

# @callback()
def update_plot(input_country):
    country = 'All Countries'

    sales = ecom_sales.copy(deep=True)

    if input_country:
        country = input_country
        sales = sales[sales['Country'] == country]

        bar_fig = px.bar(
            data_frame=sales, title=f"Sales in {country}",
            x='Total Sales ($)', y='Country')
    return bar_fig

Le filtre en action

Un GIF d'un navigateur Chrome affichant un diagramme à barres des ventes totales (axe des x) par pays (axe des y) avec, au‑dessus, une liste déroulante de noms de pays. Le GIF montre la sélection de chaque pays ; le titre du graphique s'adapte et le graphique se filtre à une seule barre

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly