Inizia subitoInizia gratis

Correggere un dashboard malfunzionante

Oh no! Durante il passaggio in produzione del tuo dashboard interattivo delle vendite, il file si è corrotto. La maggior parte dei file è stata recuperata; tuttavia, alcune funzioni ed elementi cruciali presentano delle lacune, soprattutto attorno alla funzione di callback attivata.

Puoi usare le tue conoscenze sui callback di Dash per sistemare questo dashboard?

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Imposta la variabile country_filter su 'All Countries' sotto la riga 34 in modo che compaia al caricamento della pagina.
  • Assicurati che il DataFrame ecom_sales non venga sovrascritto all'interno della funzione update_plot sotto la riga 36 usando un metodo di copia.
  • Restituisci la figura bar_fig_major_cat dalla funzione update_plot sotto la riga 45, così la figura Plotly viene nuovamente renderizzata.

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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)
Modifica ed esegui il codice