Aan de slagBegin gratis

Een dropdown voor verkoop per land

Terwijl je aan het werk was, kwam de global sales manager van het e-commercebedrijf langs met een nieuwe uitdaging. Ze vond de recente verkoopgrafieken die je maakte mooi, maar wil graag op land filteren en de categoriegegevens live zien bijwerken.

Ze benadrukte dat je de goedgekeurde landnamen moet gebruiken: United Kingdom, Germany, France, Australia en Hong Kong.

🛑 Opmerking: Mogelijk moet je de modus Volledig scherm gebruiken om het dashboard correct te bekijken met alle elementen naast elkaar.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Voeg onder regel 16 een keuzelijstcomponent dcc.Dropdown met de identifier country_dd toe om in een callback te gebruiken.
  • Stel onder regel 30 de input en output van de callback in om de country_dd-keuzelijst te koppelen aan de major_cat-grafiek.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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'),
        # Add a dropdown with identifier
        dcc.____(
            ____='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(
    # 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(debug=True)
Code bewerken en uitvoeren