Aan de slagBegin gratis

Een kapot dashboard repareren

O nee! Tijdens het overzetten van je interactieve verkoopdashboard naar productie is het bestand beschadigd. De meeste bestanden zijn hersteld; alleen missen er in een paar cruciale functies en elementen stukken, vooral rond de callback-functie die wordt getriggerd.

Kun je met je kennis van Dash-callbacks dit dashboard repareren?

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Stel de variabele country_filter in op 'All Countries' onder regel 34, zodat dit bij het laden van de pagina verschijnt.
  • Zorg ervoor dat de DataFrame ecom_sales niet wordt overschreven in de functie update_plot onder regel 36 door een kopieermethode te gebruiken.
  • Retourneer de bar_fig_major_cat-figure vanuit de functie update_plot onder regel 45, zodat de Plotly-figure opnieuw wordt gerenderd.

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'),
        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)
Code bewerken en uitvoeren