Inizia subitoInizia gratis

Selettore data per i dati di vendita

La dashboard interattiva delle vendite che hai creato è stata un successo; tuttavia, per il team vendite è fondamentale monitorare le vendite giornaliere per analizzare pattern e trend. Ti è stato chiesto se puoi estendere il tuo lavoro includendo un filtro per visualizzare le vendite per categoria principale in una data specifica?

Sembra proprio un compito per un selettore di data!

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Crea un componente selettore di data chiamato dcc.DatePickerSingle con l'identificatore sale_date sotto la riga 18.
  • Imposta il parametro date all'11 aprile 2011 sotto la riga 23 per mostrarlo come data iniziale visibile.

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
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'),
        # Create a date picker with identifier
        ____(
            id='____',
            min_date_allowed=ecom_sales['InvoiceDate'].min(),
            max_date_allowed=ecom_sales['InvoiceDate'].max(),
            # Set the initial visible date
            date=date(____),
            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'})
]

@callback(
    Output(component_id='sales_cat', component_property='figure'),
    Input(component_id='sale_date', component_property='date')
)
def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)
    if input_date:
        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 bar_fig_major_cat

if __name__ == '__main__':
    app.run(debug=True)
Modifica ed esegui il codice