Intrări utilizator în componentele Dash

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

De ce intrări utilizator?

Câteva utilizări practice ale intrărilor:

Filtrare pe intervale numerice mari (intrări number)
- Imaginați-vă un dropdown cu 2000 de valori „an"!
Filtrare după text (search sau intrări text)
Creare de autentificare (intrări password și email/text)

Intrări utilizator în Dash

O intrare utilizator este componenta Input din Dash Core Components (dcc.Input)

id este obligatoriu pentru integrarea în callback
type va fi implicit text
placeholder afișează text orientativ estompat

O imagine mică cu un dreptunghi cu chenar negru, în care apare textul gri estompat „Enter your text"

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

Utilizarea intrării

Intrarea devine o variabilă Python
Utilizată în callback

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

Tipuri de intrări utilizator

Unele sunt directe: 'text', 'number', 'password', 'email'
Unele sunt mai specializate:
- 'range' generează un slider de interval
- 'tel' și 'url' sunt pentru numere de telefon și URL-uri
Unele sunt avansate:
- 'search' și 'hidden' implică interacțiuni avansate cu browserul

Restricționarea intrărilor utilizator

Argumentul type setează automat unele restricții.

Ex., tipul email necesită formatul [email protected]

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

Un gif cu o casetă de text în care cineva scrie „some-text", apoi mută cursorul în afara casetei, care devine roșie, indicând o eroare. Cursorul revine și adaugă „@gmail.com" la final, fără a genera eroare la ieșire

Restricții suplimentare

Tipul number permite doar numere
- Suplimentar: min și max setează limite numerice
- minLength / maxLength pentru intrări de tip text
Tipul text acceptă și pattern pentru validare regex

Un gif cu o casetă mică cu butoane de incrementare/decrementare. Cursorul face clic pentru a obține 1, apoi 0. Se tastează 249 fără reacție, dar 251 generează un chenar roșu indicând o eroare.

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

Activarea/dezactivarea unei intrări

Dezactivați o intrare programatic cu disabled

Faceți-o obligatorie cu required

Argumente True/False ale dcc.Input()

Un gif cu o casetă de intrare pe care cursorul încearcă să o acceseze, fără succes. Textul din casetă este „A disabled input"

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

Un gif cu o casetă de intrare în care cursorul face clic și iese fără a introduce text. Apare un chenar roșu indicând o eroare. Textul din casetă este „A Required input"

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

Când se actualizează

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

Filtrare pentru R, Re, Red, Redd

Un gif cu o casetă de text cu textul placeholder „Filter Product Descriptions". Textul este introdus literă cu literă, iar graficul de mai jos se actualizează afișând mai puține date. Textul introdus este R-E-D-D. După introducerea completă, nu există date disponibile, indicând că niciun punct nu conține „redd" în coloana de descriere

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly