Ввід користувача в компонентах Dash

Створення дашбордів з Dash і Plotly

Alex Scriven

Data Scientist

Навіщо ввід користувача?

Деякі корисні сценарії вводу:

Фільтрація у великому числовому діапазоні (ввід number)
- Уявіть випадачку з 2000 значень «year»!
Фільтрація за збігом тексту (ввід search або text)
Створення входу в систему (ввід password та email/text)

Користувацький ввід у Dash

Поле вводу — це тип Input з dash core components (dcc.Input)

Для зворотних викликів потрібен id
type типово дорівнює text
placeholder показує напівпрозору підказку

Невелике зображення прямокутника з чорною рамкою та сірим напівпрозорим текстом «Enter your text» всередині

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

Використання вводу

Ввід стає змінною Python
Використовується у зворотному виклику

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

Типи вводу користувача

Деякі прості: 'text', 'number', 'password', 'email'
Деякі спеціалізовані:
- 'range' створює повзунок діапазону
- 'tel' і 'url' — для телефонів і вебадрес
Деякі розширені:
- 'search' і 'hidden' залучають розширену взаємодію з браузером

Обмеження вводу користувача

Аргумент type автоматично накладає обмеження.

Напр., тип email вимагає формат [email protected]

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

GIF: у текстове поле вводять «some-text», після виходу курсора рамка червоніє (помилка). Потім додають «@gmail.com», і помилка зникає після виходу

Додаткові обмеження

Тип number дозволяє лише числа
- Додатково: min і max задають межі
- minLength / maxLength для вводу text
Тип text також має pattern для перевірки regex

GIF: невелике поле з кнопками вгору/вниз праворуч. Кліки змінюють значення на 1, потім на 0. Вводять 249 — без реакції; вводять 251 — зʼявляється червона рамка (помилка).

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

Увімкнення/вимкнення поля вводу

Вимкніть поле програмно через disabled

Зробіть обовʼязковим через required

Булеві аргументи в dcc.Input()

GIF: прямокутне поле вводу, у яке курсор намагається клікнути, але не може. Текст усередині: «A disabled input»

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

GIF: прямокутне поле вводу. Курсор входить і виходить без тексту; після виходу зʼявляється червона рамка (помилка). Текст усередині: «A Required input»

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

Коли оновлювати

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

Поступова фільтрація за R, Re, Red, Redd

GIF: текстове поле з плейсхолдером «Filter Product Descriptions». Текст вводять по одній літері, і графік нижче щоразу фільтрується сильніше. Введено R-E-D-D; наприкінці даних немає — жодного опису з «redd».

Давайте потренуємось!

Створення дашбордів з Dash і Plotly