शुरू करेंमुफ़्त में शुरू करें

कंडीशनल ड्रॉपडाउन विकल्प

ई-कॉमर्स कंपनी में एक सीनियर परचेज़िंग ऑफ़िसर ने एक दिलचस्प समस्या रखी है। उनका मौजूदा डैशबोर्ड, जो आइटम्स की माइनर कैटेगरी के लिए महीनेवार सेल्स दिखाता है, में दो-स्तरीय ड्रॉपडाउन (मेजर कैटेगरी और माइनर कैटेगरी) है, जिसमें बहुत ज़्यादा विकल्प हैं। आपको बताया गया है कि खासतौर पर यह खीज पैदा करता है कि दूसरी ड्रॉपडाउन में कुछ ऐसे विकल्प भी दिखते हैं जिन्हें चुना ही नहीं जा सकता।

आप स्टेकहोल्डर को भरोसा दिलाते हैं कि आप मदद कर सकते हैं — यह आपके लिए चेनड कॉलबैक्स का इस्तेमाल करके एक कंडीशनल ड्रॉपडाउन बनाने का बढ़िया मौका है।

यह अभ्यास पाठ्यक्रम का हिस्सा है

Dash और Plotly के साथ डैशबोर्ड बनाना

पाठ्यक्रम देखें

अभ्यास निर्देश

  • लाइन 31 के नीचे एक कॉलबैक बनाएँ, जो major_cat_dd ड्रॉपडाउन की वैल्यू के आधार पर minor_cat_dd ड्रॉपडाउन की options को अपडेट करे.
  • वैरिएबल relevant_minor_options (लाइन 39 के नीचे) को फिर से फ़ॉर्मेट करके ऐसी डिक्शनरीज़ की सूची में बदलें, जिनमें label और value कीज़ समान हों.
  • लाइन 43 के नीचे एक और कॉलबैक बनाएँ, जो minor_cat_dd ड्रॉपडाउन की वैल्यू के आधार पर sales_line ग्राफ़ की figure को अपडेट करे.

इंटरैक्टिव व्यावहारिक अभ्यास

इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।

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)
कोड संपादित करें और चलाएँ