ÎncepețiÎncepe gratuit

Opțiuni condiționate în dropdown

Un ofițer senior de achiziții din compania de e-commerce a ridicat o problemă interesantă. Dashboard-ul lor existent, care afișează vânzările pe lună pentru categoriile minore de produse, are un dropdown pe două niveluri (categorie majoră și categorie minoră) cu mult prea multe opțiuni. Ți se explică că este deosebit de enervant că în al doilea dropdown apar opțiuni care nu pot fi selectate.

Îi asiguri pe cei implicați că îi poți ajuta – este o oportunitate excelentă să folosești callback-uri înlănțuite pentru a crea un dropdown condiționat.

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu Dash și Plotly

Vezi cursul

Instrucțiuni pentru exercițiu

  • Creează un callback după linia 31 pentru a actualiza opțiunile dropdown-ului minor_cat_dd pe baza valorii dropdown-ului major_cat_dd.
  • Reformatează variabila relevant_minor_options (după linia 39) într-o listă de dicționare cu chei identice label și value.
  • Creează un alt callback după linia 43 care să actualizeze graficul sales_line – proprietatea figure – pe baza valorii dropdown-ului minor_cat_dd.

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
major_categories = list(ecom_sales['Major Category'].unique())
minor_categories = list(ecom_sales['Minor Category'].unique())
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_country = ecom_sales.groupby('Country')['OrderValue'].agg(['sum', 'count']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)'})

app = Dash()

app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
  html.H1('Sales breakdowns'),
  html.Div([
    html.H2('Controls'),
    html.Br(),
    html.H3('Major Category Select'),
    dcc.Dropdown(
      id='major_cat_dd',
      options=[{'label':category, 'value':category} for category in major_categories],
      style={'width':'200px', 'margin':'0 auto'}),
    html.Br(),
    html.H3('Minor Category Select'),
    dcc.Dropdown(id='minor_cat_dd', style={'width':'200px', 'margin':'0 auto'})],
    style={'width':'350px', 'height':'350px', 'display':'inline-block', 
           'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  dcc.Graph(id='sales_line',style={'width':'700px', 'height':'650px','display':'inline-block'})
]

# Create a callback from the Major Category dropdown to the Minor Category Dropdown
@callback(
    Output('____', '____'),
    Input('major_cat_dd', 'value'))

def update_minor_dd(major_cat_dd):
    major_minor = ecom_sales[['Major Category', 'Minor Category']].drop_duplicates()
    relevant_minor_options = major_minor[major_minor['Major Category'] == major_cat_dd]['Minor Category'].values.tolist()
    # Set up the Major Category options with the same label and value
    formatted_relevant_minor_options = [{'label':____, 'value':____} for ____ in ____]
    return formatted_relevant_minor_options

# Create a callback for the Minor Category dropdown to update the line plot
@callback(
    Output('____', '____'),
    Input('minor_cat_dd', 'value'))

def update_line(minor_cat):
    minor_cat_title = 'All'
    ecom_line = ecom_sales.copy()
    if minor_cat:
        minor_cat_title = minor_cat
        ecom_line = ecom_line[ecom_line['Minor Category'] == minor_cat]
    ecom_line = ecom_line.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    line_graph = px.line(ecom_line, x='Year-Month',  y='Total Sales ($)', title=f'Total Sales by Month for Minor Category: {minor_cat_title}')
    return line_graph

if __name__ == '__main__':
    app.run(debug=True)
Editează și rulează codul