Gebruikersinvoer in Dash-componenten

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

Waarom gebruikersinvoer?

Handige toepassingen van invoer:

Filteren over grote bereiken (number-inputs)
- Denk aan een dropdown met 2000 jaartallen!
Filteren met tekstmatch (search of text)
Login maken (password en email/text)

Gebruikersinvoer in Dash

Een gebruikersinvoer is een Dash Core Components Input (dcc.Input)

Een id is vereist voor callbacks
type is standaard text
placeholder toont vervaagde hulptriestekst

Een kleine rechthoek met zwarte rand en vervaagde grijze tekst: "Enter your text"

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

De invoer gebruiken

Invoer wordt een Python-variabele
Gebruikt in de callback

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

Typen gebruikersinvoer

Eenvoudig: 'text', 'number', 'password', 'email'
Meer gespecialiseerd:
- 'range' maakt een range-slider
- 'tel' en 'url' voor telefoonnummers en website-urls
Geavanceerd:
- 'search' en 'hidden' vereisen geavanceerde browserinteractie

Invoer beperken

Het argument type stelt automatisch beperkingen in.

Bijv. email vereist het formaat [email protected]

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

Een gif van een invoervak waarin iemand 'some-text' typt; bij het verlaten kleurt de rand rood (fout). De muis gaat terug en voegt '@gmail.com' toe; bij verlaten geen fout.

Extra beperkingen

number staat alleen cijfers toe
- Extra: min en max zetten grenzen
- minLength / maxLength voor text-inputs
text heeft ook pattern voor regex-validatie

Een gif van een klein vak met pijltjes omhoog/omlaag. Klikken geeft 1, daarna 0. 249 wordt getypt (oké), 251 geeft een rode rand (fout).

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

Een input toggelen

Schakel een input uit met disabled

Verplicht invoer met required

True/False-argumenten van dcc.Input()

Een gif van een rechthoekig invoervak waar niet in geklikt kan worden. Tekst: "A disabled input"

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

Een gif van een rechthoekig invoervak waar wel in geklikt wordt maar zonder tekst. Bij verlaten verschijnt een rode rand (fout). Tekst: "A Required input"

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

Wanneer updaten

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

Filtert op R, Re, Red, Redd

Een gif van een tekstinvoer met placeholder 'Filter Product Descriptions'. Er wordt letter voor letter getypt (R-E-D-D) en de grafiek filtert mee; eindigt zonder data.

Laten we oefenen!

Dashboards bouwen met Dash en Plotly