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

चेन को और आगे बढ़ाएँ

आपका conditional dropdown बहुत सफल रहा! इससे डैशबोर्ड सुथरा हो गया और यूज़र एक्सपीरियंस भी बेहतर हुआ। जब आपने यह प्रोडक्ट डेमो किया, तो स्टेकहोल्डर ने कुछ अपडेट्स जोड़ने को कहा.

पहला, वे minor category के लिए एक डिफ़ॉल्ट वैल्यू चुनना चाहते हैं ताकि ग्राफ़ पर हमेशा कुछ न कुछ दिखे। आपको इसे हासिल करने का एक तरीका सूझा है: पहले बनाए गए दो callbacks के बीच एक अतिरिक्त chained callback जोड़ दीजिए.

दूसरा, वे ग्राफ़ के नीचे एक शीर्षक चाहते हैं जो यूज़र्स को याद दिलाए कि चुनी हुई minor category किस major category से संबंधित है। अलग से एक और callback बनाने के बजाय, आपको लगता है कि चुनी हुई major category को एक अतिरिक्त आउटपुट में भेजकर यह काम हो सकता है.

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

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

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

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

  • लाइन 37 के नीचे एक callback बनाइए जो major_cat_dd dropdown की value से ट्रिगर हो और minor_cat_dd dropdown के options तथा chosen_major_cat_title एलिमेंट—दोनों—को आउटपुट दे.
  • लाइन 52 के नीचे एक और callback बनाइए जो minor_cat_dd dropdown के लिए उसकी options प्रॉपर्टी अपडेट होने पर एक डिफ़ॉल्ट value सेट करे.

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

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

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
import random
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'}),
  html.Div([
    dcc.Graph(id='sales_line'),
    html.H3(id='chosen_major_cat_title')],
    style={'width':'700px', 'height':'650px','display':'inline-block'})
]

# Create a callback to set minor values and HTML output
@callback(
   Output('____', '____'),
   Output('____', 'children'),
   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()
    minor_options = [{'label':x, 'value':x} for x in relevant_minor_options]
    if not major_cat_dd:
        major_cat_dd = 'None Selected'
    major_cat_title = f'This is in the Major Category of: {major_cat_dd}'
    return minor_options, major_cat_title

# Create a callback to set a default minor category value
@callback(
    Output('____', '____'),
    Input('____', '____'))

def select_minor_cat(options):
    chosen_val = 'None'
    if options:
        vals = [x['value'] for x in options]
        chosen_val = random.choice(vals)
    return chosen_val
  
@callback(
    Output('sales_line', 'figure'),
    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)
कोड संपादित करें और चलाएँ