Obiettivo:
Creare una dashboard interattiva completa utilizzando Dash, che è un framework Python eccellente per creare applicazioni web analitiche.
Il codice in Python:
import dash
from dash import dcc, html, Input, Output
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
from datetime import datetime, timedelta
import numpy as np
# Creiamo alcuni dati di esempio
def generate_sample_data():
# Generazione date per ultimi 30 giorni
dates = [(datetime.now() - timedelta(days=x)).strftime('%Y-%m-%d') for x in range(30)]
# Creazione dati delle vendite
sales = np.random.randint(100, 1000, size=30)
# Creazione dati dei prodotti
products = ['Prodotto A', 'Prodotto B', 'Prodotto C', 'Prodotto D']
product_sales = {product: np.random.randint(50, 200, size=30) for product in products}
# Creazione DataFrame principale
df = pd.DataFrame({
'Data': dates,
'Vendite_Totali': sales
})
# Aggiunta vendite per prodotto
for product in products:
df[product] = product_sales[product]
return df
# Inizializzazione dell'app Dash
app = dash.Dash(__name__)
# Generazione dati
df = generate_sample_data()
# Layout dell'applicazione
app.layout = html.Div([
html.H1('Dashboard Vendite',
style={'textAlign': 'center', 'color': '#2c3e50', 'marginBottom': 30}),
# Prima riga con KPI
html.Div([
html.Div([
html.H4('Vendite Totali'),
html.H2(id='total-sales')
], className='kpi-box', style={'width': '30%', 'display': 'inline-block',
'textAlign': 'center', 'padding': '20px',
'backgroundColor': '#ecf0f1', 'borderRadius': '5px'}),
html.Div([
html.H4('Media Giornaliera'),
html.H2(id='daily-average')
], className='kpi-box', style={'width': '30%', 'display': 'inline-block',
'textAlign': 'center', 'padding': '20px', 'marginLeft': '20px',
'backgroundColor': '#ecf0f1', 'borderRadius': '5px'}),
], style={'marginBottom': 30}),
# Seconda riga con grafici
html.Div([
# Grafico temporale
html.Div([
html.H3('Andamento Vendite'),
dcc.Graph(id='time-series-chart')
], style={'width': '60%', 'display': 'inline-block'}),
# Grafico a torta
html.Div([
html.H3('Distribuzione Prodotti'),
dcc.Graph(id='pie-chart')
], style={'width': '40%', 'display': 'inline-block'}),
]),
# Controlli
html.Div([
html.H3('Filtri'),
dcc.DatePickerRange(
id='date-range',
start_date=df['Data'].min(),
end_date=df['Data'].max(),
display_format='YYYY-MM-DD'
),
], style={'marginTop': 30}),
], style={'padding': '20px'})
# Callback per aggiornare i KPI
@app.callback(
[Output('total-sales', 'children'),
Output('daily-average', 'children')],
[Input('date-range', 'start_date'),
Input('date-range', 'end_date')]
)
def update_kpis(start_date, end_date):
filtered_df = df[(df['Data'] >= start_date) & (df['Data'] <= end_date)] total_sales = filtered_df['Vendite_Totali'].sum() daily_avg = filtered_df['Vendite_Totali'].mean() return f"€ {total_sales:,.0f}", f"€ {daily_avg:,.0f}" # Callback per aggiornare il grafico temporale @app.callback( Output('time-series-chart', 'figure'), [Input('date-range', 'start_date'), Input('date-range', 'end_date')] ) def update_timeseries(start_date, end_date): filtered_df = df[(df['Data'] >= start_date) & (df['Data'] <= end_date)] fig = go.Figure() fig.add_trace(go.Scatter(x=filtered_df['Data'], y=filtered_df['Vendite_Totali'], mode='lines+markers', name='Vendite Totali')) fig.update_layout( title='Andamento Vendite nel Tempo', xaxis_title='Data', yaxis_title='Vendite (€)', template='plotly_white' ) return fig # Callback per aggiornare il grafico a torta @app.callback( Output('pie-chart', 'figure'), [Input('date-range', 'start_date'), Input('date-range', 'end_date')] ) def update_piechart(start_date, end_date): filtered_df = df[(df['Data'] >= start_date) & (df['Data'] <= end_date)]
product_columns = ['Prodotto A', 'Prodotto B', 'Prodotto C', 'Prodotto D']
product_totals = filtered_df[product_columns].sum()
fig = px.pie(values=product_totals.values,
names=product_totals.index,
title='Distribuzione Vendite per Prodotto')
return fig
if __name__ == '__main__':
app.run_server(debug=True)
Obiettivi del codice:
La dashboard che abbiamo creato serve come strumento strategico per il controllo di gestione e il supporto decisionale.
Analizziamo come ogni componente contribuisce agli obiettivi aziendali:
Monitoraggio delle Performance di Vendita La funzione generate_sample_data() non è solo un generatore di dati casuali, ma rappresenta la base per il monitoraggio delle performance di vendita. In un contesto reale, questi dati provengono dal sistema gestionale e permettono di:
- Valutare l’andamento del fatturato nel tempo
- Identificare trend stagionali o ciclici
- Confrontare le performance con i periodi precedenti
- Misurare l’efficacia delle strategie di vendita
Il Layout della Dashboard supporta il processo decisionale attraverso una gerarchia informativa chiara: L’header con il titolo principale stabilisce immediatamente il contesto dell’analisi. La sezione KPI fornisce una vista immediata delle metriche fondamentali per valutare la salute del business. I grafici principali permettono un’analisi più dettagliata, mentre i filtri consentono di focalizzare l’attenzione su periodi specifici.
Analisi Multi-dimensionale I componenti interattivi permettono un’analisi dinamica che supporta diversi livelli decisionali:
- Il management strategico può valutare trend di lungo periodo
- I manager operativi possono analizzare performance settimanali o mensili
- Il team vendite può monitorare risultati giornalieri Questa flessibilità permette di adattare l’analisi alle esigenze di diversi stakeholder aziendali.
Supporto alle Decisioni Strategiche Le visualizzazioni forniscono insight cruciali per diverse aree decisionali:
Il grafico temporale supporta:
- Previsioni di vendita basate su trend storici
- Valutazione dell’impatto di campagne marketing
- Identificazione di pattern stagionali
- Analisi della velocità di crescita o declino
Il grafico a torta aiuta a:
- Ottimizzare il mix di prodotti
- Allocare risorse di marketing
- Gestire l’inventario
- Identificare opportunità di cross-selling
I KPI in tempo reale permettono:
- Monitoraggio continuo degli obiettivi
- Identificazione tempestiva di problemi
- Valutazione immediata dell’impatto delle decisioni
- Confronto con target predefiniti
Analizziamo le componenti principali:
- Struttura dei Dati:
- Abbiamo creato una funzione
generate_sample_data()che simula dati di vendita realistici - I dati includono vendite giornaliere totali e vendite per singolo prodotto
- Le date coprono gli ultimi 30 giorni
- Abbiamo creato una funzione
- Layout della Dashboard:
- Header con il titolo principale
- Una sezione KPI che mostra metriche chiave
- Due grafici principali: un grafico temporale e un grafico a torta
- Filtri per selezionare il periodo di interesse
- Componenti Interattivi:
- Un selettore di intervallo date che permette di filtrare i dati
- Grafici che si aggiornano automaticamente quando cambi le date
- KPI che si aggiornano in tempo reale
- Visualizzazioni:
- Grafico temporale che mostra l’andamento delle vendite
- Grafico a torta che mostra la distribuzione delle vendite per prodotto
- KPI che mostrano il totale vendite e la media giornaliera
Per utilizzare questa dashboard, dovrai installare le dipendenze necessarie:
import dash from dash import dcc, html, Input, Output import pandas as pd import plotly.express as px import plotly.graph_objects as go from datetime import datetime, timedelta import numpy as np
Queste righe importano tutte le librerie necessarie. Dash è il framework principale per creare la dashboard, mentre dcc (Dash Core Components) e html forniscono i componenti per costruire l’interfaccia. Plotly viene utilizzato per creare i grafici, e pandas per la gestione dei dati.
Passiamo alla generazione dei dati:
def generate_sample_data():
dates = [(datetime.now() - timedelta(days=x)).strftime('%Y-%m-%d') for x in range(30)]
sales = np.random.randint(100, 1000, size=30)
products = ['Prodotto A', 'Prodotto B', 'Prodotto C', 'Prodotto D']
product_sales = {product: np.random.randint(50, 200, size=30) for product in products}
Questa funzione crea dati di esempio. Prima genera una lista di date per gli ultimi 30 giorni, poi crea valori casuali per le vendite totali e per ogni prodotto. I dati vengono organizzati in un DataFrame di pandas, che è una struttura dati tabellare molto efficiente per l’analisi.
La creazione dell’applicazione Dash:
app = dash.Dash(__name__) df = generate_sample_data()
Qui inizializziamo l’applicazione Dash e generiamo i nostri dati di esempio.
Il layout dell’applicazione è una parte cruciale:
app.layout = html.Div([
html.H1('Dashboard Vendite'),
# Prima riga con KPI
html.Div([
html.Div([
html.H4('Vendite Totali'),
html.H2(id='total-sales')
]),
html.Div([
html.H4('Media Giornaliera'),
html.H2(id='daily-average')
]),
]),
Il layout viene costruito utilizzando componenti HTML di Dash. La struttura è gerarchica: abbiamo un contenitore principale (Div) che contiene vari elementi come titoli (H1) e sezioni per i KPI. Ogni elemento può avere uno stile personalizzato e un ID unico che verrà utilizzato per gli aggiornamenti dinamici.
I callbacks sono il cuore della interattività:
@app.callback(
[Output('total-sales', 'children'),
Output('daily-average', 'children')],
[Input('date-range', 'start_date'),
Input('date-range', 'end_date')]
)
def update_kpis(start_date, end_date):
filtered_df = df[(df['Data'] >= start_date) & (df['Data'] <= end_date)]
total_sales = filtered_df['Vendite_Totali'].sum()
daily_avg = filtered_df['Vendite_Totali'].mean()
return f"€ {total_sales:,.0f}", f"€ {daily_avg:,.0f}"
I callbacks sono funzioni che vengono eseguite quando cambiano determinati input. In questo caso, quando l’utente modifica l’intervallo di date (input), la funzione ricalcola le statistiche di vendita (output) per quel periodo specifico. Il decoratore @app.callback definisce quali sono gli input e gli output della funzione.
Per i grafici, abbiamo callbacks simili:
@app.callback(
Output('time-series-chart', 'figure'),
[Input('date-range', 'start_date'),
Input('date-range', 'end_date')]
)
def update_timeseries(start_date, end_date):
filtered_df = df[(df['Data'] >= start_date) & (df['Data'] <= end_date)]
fig = go.Figure()
fig.add_trace(go.Scatter(x=filtered_df['Data'],
y=filtered_df['Vendite_Totali'],
mode='lines+markers'))
Questo callback aggiorna il grafico temporale. Quando cambiano le date, viene creato un nuovo grafico utilizzando solo i dati del periodo selezionato. Plotly.graph_objects (go) viene utilizzato per creare visualizzazioni personalizzate.
Infine, abbiamo il codice per avviare il server:
if __name__ == '__main__':
app.run_server(debug=True)
Questa parte avvia il server web quando esegui lo script. L’opzione debug=True attiva la modalità di sviluppo, che include funzionalità utili come il ricaricamento automatico quando modifichi il codice.
La struttura complessiva del codice segue un pattern comune nelle applicazioni web:
- Configurazione e importazioni
- Preparazione dei dati
- Definizione del layout
- Implementazione della logica interattiva (callbacks)
- Avvio del server
Ogni callback nella dashboard segue lo stesso principio: ascolta i cambiamenti negli input (come il selettore di date), elabora i dati in base a questi input, e aggiorna gli output corrispondenti (come i grafici o i KPI).
