Uživatelské vstupy v komponentách Dash

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

Proč uživatelský vstup?

Praktické použití uživatelských vstupů:

Filtrování v širokém číselném rozsahu (vstupy number)
- Představte si rozbalovací seznam s 2 000 hodnotami roku!
Filtrování podle shody textu (vstupy search nebo text)
Vytvoření přihlášení (vstupy password a email/text)

Uživatelský vstup v Dash

Uživatelský vstup je komponenta Input z Dash Core Components (dcc.Input)

id je povinné pro integraci s callbackem
type má výchozí hodnotu text
placeholder zobrazuje šedý nápovědy text

Malý obdélník s černým ohraničením a šedým textem „Enter your text" uvnitř

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

Použití vstupu

Vstup se stává Pythoní proměnnou
Používá se společně s callbackem

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

Typy uživatelských vstupů

Jednoduché typy: 'text', 'number', 'password', 'email'
Specializované typy:
- 'range' vytvoří posuvník rozsahu
- 'tel' a 'url' jsou pro telefonní čísla a webové adresy
Pokročilé typy:
- 'search' a 'hidden' zahrnují pokročilou interakci s prohlížečem

Omezení uživatelského vstupu

Argument type automaticky nastavuje omezení.

Např. typ email vyžaduje formát [email protected]

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

Animace textového pole, do kterého je zadán text „some-text". Po opuštění pole se jeho okraj zčervená, což signalizuje chybu. Poté je přidáno „@gmail.com" a po opuštění pole se žádná chyba neobjeví.

Další omezení

Typ number povoluje pouze čísla
- Dále: min a max nastavují číselné limity
- minLength / maxLength pro textové vstupy (text)
Typ text podporuje také pattern pro validaci pomocí regulárních výrazů

Animace malého pole s šipkami nahoru a dolů. Kliknutím se zobrazí číslo 1, poté 0. Zadání čísla 249 nevyvolá chybu, ale číslo 251 způsobí červené ohraničení pole signalizující chybu.

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

Přepínání vstupu

Vstup programově deaktivujete pomocí disabled

Vstup učiníte povinným pomocí required

Argumenty True/False v dcc.Input()

Animace vstupního pole, do kterého nelze kliknout. Text uvnitř zní „A disabled input".

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

Animace vstupního pole, do kterého myš klikne a odejde bez zadání textu. Pole se ohraničí červeně, což signalizuje chybu. Text uvnitř zní „A Required input".

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

Kdy aktualizovat

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

Filtrování pro R, Re, Red, Redd

Animace textového vstupu se zástupným textem „Filter Product Descriptions". Text je zadáván po jednom písmenu a graf níže se vždy aktualizuje. Zadaný text je R-E-D-D. Po zadání všech písmen nejsou k dispozici žádná data, což indikuje, že žádné záznamy neobsahují „redd" ve sloupci popisu.

Pojďme si procvičit!

Tvorba dashboardů s Dash a Plotly