Dane wejściowe użytkownika w komponentach Dash

Tworzenie dashboardów z Dash i Plotly

Alex Scriven

Data Scientist

Po co dane wejściowe użytkownika?

Przydatne zastosowania danych wejściowych:

Filtrowanie w szerokim zakresie liczbowym (wejścia number)
- Wyobraź sobie listę rozwijaną z 2000 wartościami roku!
Filtrowanie na podstawie dopasowania tekstu (wejścia search lub text)
Tworzenie logowania (wejścia password i email/text)

Dane wejściowe użytkownika w Dash

Dane wejściowe użytkownika to komponent Input z Dash Core Components (dcc.Input)

id jest wymagane do integracji z callbackiem
type domyślnie przyjmuje wartość text
placeholder wyświetla przyciemniony tekst pomocniczy

Mały prostokąt z czarną ramką, wewnątrz którego widnieje przyciemniony szary tekst „Enter your text".

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

Korzystanie z danych wejściowych

Dane wejściowe stają się zmienną Pythona
Używane z callbackiem

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

Typy danych wejściowych użytkownika

Proste typy: 'text', 'number', 'password', 'email'
Bardziej wyspecjalizowane:
- 'range' tworzy suwak zakresu
- 'tel' i 'url' służą do numerów telefonów i adresów URL
Zaawansowane:
- 'search' i 'hidden' wymagają zaawansowanej interakcji z przeglądarką

Ograniczanie danych wejściowych

Argument type automatycznie ustawia pewne ograniczenia.

Np. typ email wymaga formatu [email protected]

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

Animacja GIF pola tekstowego, w którym wpisano „some-text". Po opuszczeniu pola jego ramka zmienia kolor na czerwony, sygnalizując błąd. Następnie kursor wraca do pola i dopisuje „@gmail.com" – po opuszczeniu pola błąd nie pojawia się.

Dodatkowe ograniczenia

Typ number akceptuje wyłącznie liczby
- Ponadto: min i max ustalają granice numeryczne
- minLength / maxLength dla wejść text
Typ text obsługuje również pattern do walidacji regex

Animacja GIF małego pola z przyciskami góra/dół. Kliknięcia zmieniają wartość – pojawia się 1, potem 0. Wpisano 249 bez błędu, jednak wpisanie 251 powoduje pojawienie się czerwonej ramki sygnalizującej błąd.

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

Przełączanie stanu wejścia

Wyłącz wejście programowo za pomocą disabled

Wymuś jego użycie za pomocą required

Argumenty True/False w dcc.Input()

Animacja GIF prostokątnego pola wejściowego, w które kursor próbuje kliknąć, lecz nie może. Wewnątrz widnieje tekst „A disabled input".

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

Animacja GIF prostokątnego pola wejściowego, w które kursor klika, a następnie wychodzi bez wpisywania tekstu. Po opuszczeniu pola pojawia się czerwona ramka sygnalizująca błąd. Wewnątrz widnieje tekst „A Required input".

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

Kiedy aktualizować

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

Filtrowanie dla R, Re, Red, Redd

Animacja GIF pola tekstowego z tekstem zastępczym „Filter Product Descriptions". Tekst jest wpisywany literka po literce, a wykres poniżej za każdym razem wyświetla mniej danych. Wpisano R-E-D-D. Po wpisaniu całości brak danych na wykresie wskazuje, że żaden opis nie zawiera ciągu „redd".

Czas na ćwiczenia!

Tworzenie dashboardów z Dash i Plotly