Callbacks în Dash

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

Ce sunt callbacks-urile?

Funcționalitate declanșată de interacțiune
- Utilizatorul interacționează cu un element
  - -> Se declanșează o funcție Python
    - --> Se produce o modificare

De ce? Îmbunătățește interactivitatea ✨

Callbacks în Dash

Începeți cu funcția decorator
- Utilizează from dash import Input, Output
Output: unde se trimite valoarea returnată
- component_id: identifică componenta
- component_property: ce va fi modificat
Input: ce declanșează callback-ul
- component_property: ce se folosește în funcție

@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

Dropdown-uri în Dash

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

Listă de valori

Un callback cu dropdown

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

Primul nostru dropdown

Un gif al unui browser Chrome cu un grafic de tip bară pentru vânzări totale (axa x) și țară (axa y), cu un meniu dropdown deasupra care are opțiunile Titlu 1 și Titlu 2. Gif-ul arată selectarea fiecărei opțiuni, iar titlul graficului se schimbă corespunzător

Dropdown ca filtru

Caz frecvent – dropdown-ul filtrează DataFrame-ul graficului

# @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

Filtrul în acțiune

Un gif al unui browser Chrome cu un grafic de tip bară pentru vânzări totale (axa x) și țară (axa y), cu un meniu dropdown deasupra care afișează nume de țări. Gif-ul arată selectarea fiecărei opțiuni, iar titlul și graficul se actualizează corespunzător

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly