Bắt đầu ngayBắt đầu miễn phí

Fixing a broken dashboard

Oh no! While transferring your interactive sales dashboard to production, the file was corrupted. Most of the files were recovered; however, some crucial functions and elements have gaps, largely around the triggered callback function.

Can you use your knowledge of Dash callbacks to fix this dashboard?

Bài tập này là một phần của khóa học

Building Dashboards with Dash and Plotly

Xem khóa học

Hướng dẫn bài tập

  • Set the country_filter variable to 'All Countries' below line 34 so this appears on page load.
  • Ensure that the ecom_sales DataFrame is not overwritten inside the update_plot function below line 36 by using a copy method.
  • Return the bar_fig_major_cat figure from the update_plot function below line 45, so the Plotly figure is re-rendered.

Bài tập tương tác thực hành trực tiếp

Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.

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)
Chỉnh sửa và Chạy Mã