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?
This exercise is part of the course
Building Dashboards with Dash and Plotly
Exercise instructions
- Set the
country_filter
default value to'All Countries'
below line34
so this appears on page load. - Ensure that the
ecom_sales
DataFrame is not overwritten inside the triggered function whenever there is user interactivity below line36
. - Return the appropriate object from the triggered function below line
45
, so the Plotly figure is re-rendered.
Hands-on interactive exercise
Have a go at this exercise by completing this sample code.
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)