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

टूटा हुआ डैशबोर्ड ठीक करना

ओह नहीं! जब आपने अपना इंटरैक्टिव सेल्स डैशबोर्ड प्रोडक्शन में ट्रांसफ़र किया, तो फ़ाइल करप्ट हो गई. ज़्यादातर फ़ाइलें रिकवर हो गईं; लेकिन ट्रिगर्ड callback फ़ंक्शन से जुड़ी कुछ अहम फ़ंक्शंस और एलिमेंट्स में खामियाँ रह गई हैं.

क्या आप Dash callbacks के अपने ज्ञान का उपयोग करके इस डैशबोर्ड को ठीक कर सकते हैं?

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

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

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

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

  • लाइन 34 के नीचे country_filter वैरिएबल को 'All Countries' पर सेट करें ताकि पेज लोड होते ही यह दिखे.
  • लाइन 36 के नीचे update_plot फ़ंक्शन के अंदर कॉपी मेथड का उपयोग करके सुनिश्चित करें कि ecom_sales DataFrame ओवरराइट न हो.
  • लाइन 45 के नीचे update_plot फ़ंक्शन से bar_fig_major_cat फ़िगर रिटर्न करें, ताकि Plotly फ़िगर दोबारा रेंडर हो.

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

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

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')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'

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('Country Select'),
        dcc.Dropdown(
            id='country_dd',
            options=['United Kingdom', 'Germany', 'France', 'Australia', 'Hong Kong'],
            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='major_cat'),
        html.H2('Major Category', style={'border': '2px solid black', 'width': '200px', 'margin': '0 auto'})],
        style={'width': '700px', 'display': 'inline-block'})
]

@callback(
    Output(component_id='major_cat', component_property='figure'),
    Input(component_id='country_dd', component_property='value')
)

def update_plot(input_country):
    # Set a default value
    country_filter = '____'
    # Ensure the DataFrame is not overwritten
    sales = ____.____(deep=True)
    if input_country:
        country_filter = input_country
        sales = sales[sales['Country'] == country_filter]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    bar_fig_major_cat = px.bar(
        title=f'Sales in {country_filter}', data_frame=ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category',
                 color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
   	# Return the figure
    ____

if __name__ == '__main__':
    app.run(debug=True)
कोड संपादित करें और चलाएँ