Användarinput i Dash-komponenter

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

Varför användarinput?

Några användbara tillämpningar av användarinput:

Filtrering över ett stort talintervall (number-input)
- Tänk dig en dropdown med 2 000 årsvärden!
Filtrering med textmatchning (search- eller text-input)
Skapa en inloggning (password- och email/text-input)

Användarinput i Dash

En användarinput är en Input-typ i Dash Core Components (dcc.Input)

Ett id krävs för callback-integration
type är som standard text
placeholder visar tonad vägledningstext

En liten bild av en rektangel med svart kant, inuti vilken tonad grå text visar "Enter your text"

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

Använda input

Input blir en Python-variabel
Används i callback

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

Typer av användarinput

Några är enkla: 'text', 'number', 'password', 'email'
Några är mer specialiserade:
- 'range' skapar ett intervallreglage
- 'tel' och 'url' används för telefonnummer och webbadresser
Några är avancerade:
- 'search' och 'hidden' innebär avancerad webbläsarinteraktion

Begränsa användarinput

Argumentet type ställer automatiskt in vissa begränsningar.

T.ex. kräver typen email formatet något@något.com

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

En gif av ett textfält där någon skriver "some-text," och musen lämnar fältet, vilket gör att kanten runt fältet blir röd och indikerar ett fel. Musen återvänder och lägger till "@gmail.com" i slutet, vilket inte ger något fel när musen lämnar fältet

Ytterligare begränsningar

Typen number tillåter endast siffror
- Dessutom: min och max sätter numeriska gränser
- minLength / maxLength för text-input
Typen text har även pattern för regex-validering

En gif av en liten ruta med upp- och nedpilar till höger. Musen klickar för att visa siffran 1, sedan (efter att ha klickat på nedpilen) ändras den till noll. Siffran 249 skrivs in utan reaktion, men när 251 skrivs visas en röd kant runt fältet som indikerar ett fel.

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

Aktivera och inaktivera input

Inaktivera ett input programmatiskt med disabled

Gör det obligatoriskt med required

Sant/falskt-argument i dcc.Input()

En gif av ett rektangulärt inputfält som en mus försöker klicka i men inte kan. Texten i fältet är "A disabled input"

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

En gif av ett rektangulärt inputfält som en mus klickar i och sedan ut ur utan att skriva något. En röd kant visas runt fältet när musen klickar utanför, vilket indikerar ett fel. Texten i fältet är "A Required input"

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

När ska uppdatering ske?

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

Filtrerar efter R, Re, Red, Redd

En gif av ett textfält med platshållartexten "Filter Product Descriptions". Text skrivs in ett tecken i taget och grafen nedan uppdateras för att visa färre datapunkter för varje tecken. Texten som skrivs är R-E-D-D. När allt är inskrivet visas ingen data, vilket indikerar att inga datapunkter innehåller "redd" i beskrivningskolumnen

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly