Input utente nei componenti Dash

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

Perché l'input utente?

Alcuni usi utili degli input utente:

Filtrare su un ampio intervallo numerico (input number)
- Immagina un menu a discesa con 2000 valori "year"!
Filtrare con corrispondenza di testo (input search o text)
Creare un login (input password e email/text)

Input utente in Dash

Un input utente è un Input di dash core components (dcc.Input)

Serve un id per l'integrazione nel callback
Il type predefinito è text
Il placeholder mostra un testo guida in grigio

Una piccola immagine di un rettangolo con bordo nero contenente un testo grigio attenuato: "Enter your text"

dcc.Input(
    id='my_input',
    type='text',
    placeholder="Enter your text")

Usare l'input

L'input diventa una variabile Python
Usata con il callback

# @callback()
def update_plot(entered_data):
    fig = px.scatter(
    data_frame=sales, 
    y='OrderValue', x='Quantity',
    , title=f'{entered_data}')
    return fig

Tipi di input utente

Alcuni sono immediati: 'text', 'number', 'password', 'email'
Altri sono più specializzati:
- 'range' crea uno slider di intervallo
- 'tel' e 'url' per numeri di telefono e URL di siti web
Alcuni sono avanzati:
- 'search' e 'hidden' richiedono interazioni avanzate del browser

Limitare l'input utente

L'argomento type imposta automaticamente alcune limitazioni.

Es.: un tipo email richiede il formato [email protected]

dcc.Input(
    id='my_input',
    type='email',
    placeholder="Enter your email")

Una gif di una casella di input in cui qualcuno inserisce le parole 'some-text', poi il mouse esce dalla casella e il bordo diventa rosso, indicando un errore. Il mouse rientra e aggiunge '@gmail.com' alla fine, e all'uscita non compare errore

Restrizioni aggiuntive

Un tipo number accetta solo numeri
- In più: min e max impostano limiti numerici
- minLength / maxLength per input text
Un tipo text ha anche pattern per la validazione regex

Una gif di una piccola casella con frecce su/giù a destra. Il mouse clicca per ottenere 1, poi 0 col tasto giù. Si digita 249 senza effetto, poi 251: compare un bordo rosso che indica errore.

dcc.Input(
    id='my_input',
    type='number',
    max=250)

Attivare/disattivare un input

Disattiva un input via codice con disabled

Rendi obbligatorio l'uso con required

Argomenti True/False di dcc.Input()

Una gif di una casella di input che il mouse prova a selezionare senza riuscirci. Il testo nella casella è "A disabled input"

dcc.Input(id='my_input', disabled=True)

Una gif di una casella di input in cui il mouse entra ed esce senza inserire testo. All'uscita appare un bordo rosso, indicando un errore. Il testo nella casella è "A Required input"

dcc.Input(id='my_input', required=True)

Quando aggiornare

dcc.Input(id='my_input', type='text',
          debounce=False)

Filtrare per R, Re, Red, Redd

Una gif di un input di testo con il placeholder 'Filter Product Descriptions'. Il testo viene digitato una lettera alla volta e il grafico sotto si aggiorna riducendo i dati. Il testo digitato è R-E-D-D. Alla fine non c'è alcun dato, segno che nessuna descrizione contiene "redd"

Esercitiamoci!

Creare dashboard con Dash e Plotly