Koşullu açılır menü seçenekleri

E-ticaret şirketindeki kıdemli bir satın alma sorumlusu ilginç bir sorun ortaya koydu. Küçük kategori ürünler için ay bazında satışları gösteren mevcut panellerinde, çok fazla seçeneği olan iki seviyeli bir açılır menü (ana kategori ve alt kategori) var. Özellikle can sıkıcı olan, ikinci açılır menüde seçilemeyen bazı seçeneklerin görünüyor olması.

Paydaşa yardımcı olabileceğini söylüyorsun — bu, koşullu bir açılır menü üretmek için zincirli geri çağırmaları kullanman için harika bir fırsat.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

kursunun bir parçasıdır

Kursu Görüntüle

Egzersiz talimatları

major_cat_dd açılır menü değerine bağlı olarak minor_cat_dd açılır menüsünün options değerini güncellemek için 31. satırın altında bir geri çağırma oluştur.
39. satırın altında yer alan relevant_minor_options değişkenini, label ve value anahtarları aynı olan sözlüklerden oluşan bir listeye dönüştür.
minor_cat_dd açılır menü değerine göre sales_line grafiğinin figure değerini güncelleyen başka bir geri çağırmayı 43. satırın altında oluştur.

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

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)

Kodu Düzenle ve Çalıştır