Kom igångKom igång gratis

En rullgardinsmeny för försäljning per land

Medan du arbetade vid ditt skrivbord kom den globala försäljningschefen från e-handelsföretaget förbi med en ny utmaning. Hon gillade de senaste försäljningsgraferna du hade skapat, men vill kunna filtrera per land och se kategoridata uppdateras i realtid.

Hon betonade att de godkända landnamnen ska användas: United Kingdom, Germany, France, Australia och Hong Kong.

🛑 Obs! Du kan behöva aktivera läget Helskärm för att se dashboarden korrekt med alla element sida vid sida.

Den här övningen är en del av kursen

Bygg dashboards med Dash och Plotly

Visa kurs

Övningsinstruktioner

  • Lägg till en rullgardinskomponent dcc.Dropdown med identifieraren country_dd under rad 16 – den ska användas i en callback-funktion.
  • Ange indata och utdata för callback-funktionen under rad 30 för att koppla rullgardinsmenyn country_dd till grafen major_cat.

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

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)
Redigera och kör kod