A dropdown for sales by country

As you were working away at your desk, the global sales manager for the global e-commerce company visited with a new data viz challenge. She noted that the recent sales graphs you produced were interesting, but she wanted to be able to filter and focus on only one country at a time and see the category aggregation data update.

You gladly accept the challenge, comforted that your expertise in Dash callbacks will be just the thing to breathe some interactive life into your Dash app.

The manager noted that it is important to use the corporately approved, abbreviated country names in the dropdown:

UK = United Kingdom, GM = Germany, FR = France, AUS = Australia, HK = Hong Kong.

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

Add a dropdown component with an identifier of country_dd below line 22 so it can be linked to the callback.
Set the dropdown options to the Country names (in this order: UK = United Kingdom, GM = Germany, FR = France, AUS = Australia, HK = Hong Kong) such that the abbreviation is visible to the end-user, but the full name is passed to the callback below line 24.
Add a component that will render a Plotly figure with an identifier of major_cat below line 35 so it can be linked to the callback.
Set the input and output of the callback to link the dropdown to the graph component below lines 47 and 49.

Hands-on interactive exercise

Have a go at this exercise by completing this sample code.

import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output
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.Dash(__name__)

app.layout = html.Div([
  html.Img(src=logo_link,style={'margin':'30px 0px 0px 0px' }),
  html.H1('Sales breakdowns'),
  html.Div(
    children=[
    html.Div(
        children=[
        html.H2('Controls'),
        html.Br(),
        html.H3('Country Select'),
        # Add a dropdown with identifier
        dcc.____(____='country_dd',
        # Set the available options with noted labels and values
        options=[
            {'____':'____', '____':'____'},
            {'____':'____', '____':'____'},
            {'____':'____', '____':'____'},
            {'____':'____', '____':'____'},
            {'____':'____', '____':'____'}],
            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(children=[
            # Add a graph component with identifier
            dcc.____(____='major_cat'),
            html.H2('Major Category', 
            style={ 'border':'2px solid black', 'width':'200px', 'margin':'0 auto'})
            ],
             style={'width':'700px','display':'inline-block'}
             ),
    ])], 
  style={'text-align':'center', 'display':'inline-block', 'width':'100%'}
  )

@app.callback(
    # Set the input and output of the callback to link the dropdown to the graph
    ____(component_id='____', component_property='____'),
    ____(component_id='____', component_property='____')
)

def update_plot(input_country):
    country_filter = 'All Countries'
    sales = ecom_sales.copy(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 bar_fig_major_cat


if __name__ == '__main__':
    app.run_server(debug=True)

Edit and Run Code