Componenti interattivi

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

Migliorare l'interattività

Alcuni componenti interattivi utili:
- dcc.Checklist() = Caselle di spunta
- dcc.RadioItems() = Pulsanti di opzione
- dcc.Slider() / dcc.RangeSlider() = Selettori a cursore
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Simili ai cursori ma per le date

Slider

Slider: trascina per un singolo valore

Range Slider: trascina per due valori

Promemoria: puoi collegarlo a un callback
- Aggiorna grafici o componenti

Un slider:

Una gif di uno slider blu su sfondo nero con del testo sotto che indica il valore selezionato. Il mouse afferra il cursore e lo sposta verso l'alto di alcune posizioni, facendo aumentare il valore indicato sotto.

Un range slider:

Una gif di un range slider blu su sfondo nero con del testo sotto che indica i due valori selezionati. Il mouse afferra ciascun lato del cursore e lo sposta su e giù di alcune posizioni, facendo cambiare i valori indicati sotto.

Slider in Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Argomenti principali:

min/max : Limiti dello slider
value : Selezione iniziale
step : Incremento per ogni tacca
vertical : Orientamento orizzontale o verticale

Selettori di data in Dash

DatePickerSingle: Seleziona una singola data

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = selezione iniziale
initial_visible_month = mese mostrato nel popup
Facoltativo: limita min_date_allowed e max_date_allowed

Una gif di un tipico selettore di date. C'è un campo con il 1° luglio 2025 come data corrente. Il mouse clicca, appare un calendario. Si seleziona il 2 luglio 2025, il calendario si chiude e la data nel selettore cambia.

Selettore intervallo date

Simile a DatePickerSingle

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

Imposta start_date ed end_date iniziali

Una gif di un tipico selettore di intervallo di date. Ci sono due campi con date di luglio 2025. Il mouse clicca il secondo campo: appare un calendario con l'intervallo evidenziato in verde; si seleziona un nuovo intervallo e le date cambiano.

Aggiornare i grafici

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@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]

    # Crea fig
    return fig

Esercitiamoci!

Creare dashboard con Dash e Plotly