Benutzereingaben in Dash-Komponenten

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

Warum Benutzereingaben?

Einige nützliche Anwendungen von Benutzereingaben:

Filtern über große Zahlenbereiche (number-Eingaben)
- Stell dir ein Dropdown mit 2000 „year"-Werten vor!
Filtern per Textabgleich (search- oder text-Eingaben)
Login erstellen (password und email/text-Eingabe)

Benutzereingaben in Dash

Eine Benutzereingabe ist ein Input-Typ der dash core components (dcc.Input)

Eine id ist für die Callback-Integration erforderlich
type ist standardmäßig text
placeholder zeigt ausgegrauten Hinweistext

Ein kleines Bild eines Rechtecks mit schwarzem Rand und ausgegrautem Text „Enter your text" darin

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

Eingaben verwenden

Die Eingabe wird zu einer Python-Variablen
Verwendet im Callback

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

Typen von Benutzereingaben

Manche sind simpel: 'text', 'number', 'password', 'email'
Manche sind spezieller:
- 'range' erzeugt einen Range-Slider
- 'tel' und 'url' sind für Telefonnummern und Website-URLs
Manche sind fortgeschritten:
- 'search' und 'hidden' erfordern erweiterte Browser-Interaktion

Eingaben beschränken

Das Argument type setzt automatisch einige Einschränkungen.

Z. B. erfordert email das Format [email protected]

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

Ein GIF eines Eingabefelds, in das jemand „some-text" eingibt und die Maus das Feld verlässt; der Rand wird rot und zeigt einen Fehler. Dann ergänzt die Person „@gmail.com", und beim Verlassen tritt kein Fehler mehr auf

Weitere Einschränkungen

number erlaubt nur Zahlen
- Zusätzlich setzen min und max Zahlenlimits
- minLength/maxLength für text-Eingaben
text hat außerdem pattern für Regex-Validierung

Ein GIF eines kleinen Felds mit Auf-/Ab-Pfeilen rechts. Die Maus klickt auf die Pfeile, um 1 zu erzeugen, dann wieder auf 0. 249 wird eingegeben (keine Aktion sichtbar), dann 251, was einen roten Rahmen als Fehler anzeigt.

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

Eingabe umschalten

Eingabe programmatisch mit disabled deaktivieren

Nutzung mit required erzwingen

True/False-Argumente von dcc.Input()

Ein GIF eines rechteckigen Eingabefelds, in das der Mauszeiger nicht klicken kann. Im Feld steht „A disabled input"

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

Ein GIF eines rechteckigen Eingabefelds, in das die Maus klickt und wieder hinausgeht, ohne Text einzugeben. Beim Verlassen erscheint ein roter Rahmen als Fehler. Im Feld steht „A Required input"

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

Wann aktualisieren?

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

Filtern nach R, Re, Red, Redd

Ein GIF eines Texteingabefelds mit dem Platzhalter „Filter Product Descriptions". Es wird Buchstabe für Buchstabe getippt, und das Diagramm darunter zeigt jeweils weniger Daten. Getippt wird R-E-D-D. Am Ende sind keine Daten mehr verfügbar, da keine Beschreibungen „redd" enthalten

Lass uns üben!

Dashboards mit Dash und Plotly erstellen