Un callback avec sélecteur de date

Oh non ! Cela recommence. Le tableau de bord avec sélecteur de date que vous avez créé a été corrompu, et le code du callback est illisible.

Vous souvenez-vous comment intégrer un composant de sélection de date à un callback pour remettre le tableau de bord sur les rails ?

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec Dash et Plotly</cours>

Voir le cours

Instructions de l’exercice

Créez un callback et reliez le composant sale_date au graphique sales_cat sous la ligne 31.
Utilisez de façon conditionnelle le paramètre input_date pour filtrer la colonne InvoiceDate du DataFrame sales sous la ligne 38.
Renvoyez la figure bar_fig_major_cat pour l’afficher dans l’application Dash sous la ligne 45.

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from datetime import datetime, date
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'
ecom_sales['InvoiceDate'] = pd.to_datetime(ecom_sales['InvoiceDate'])

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('Sale Date Select'),
        dcc.DatePickerSingle(
            id='sale_date',
            min_date_allowed=ecom_sales['InvoiceDate'].min(),
            max_date_allowed=ecom_sales['InvoiceDate'].max(),
            date=date(2011, 4, 11),
            initial_visible_month=date(2011, 4, 11),
            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='sales_cat'),
        html.H2('Daily Sales by Major Category', style={'border': '2px solid black', 'width': '400px', 'margin': '0 auto'})], 
    	style={'width': '700px', 'display': 'inline-block'})
]
# Create a callback and link
@callback(
    ____(component_id='____', component_property='____'),
    ____(component_id='____', component_property='____')
)
def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)
    # Conditionally filter the DataFrame using the input
    if ____:
        sales = sales[sales['InvoiceDate'] == input_date]
    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 on: {input_date}', data_frame=ecom_bar_major_cat, orientation='h',
        x='Total Sales ($)', y='Major Category')
    # Return the figure to render
    return ____

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

Modifier et exécuter le code