Пользовательский ввод в компонентах Dash

Создание дашбордов с помощью Dash и Plotly

Alex Scriven

Data Scientist

Зачем нужен пользовательский ввод?

Примеры применения пользовательского ввода:

Фильтрация по большому числовому диапазону (ввод типа number)
- Представьте выпадающий список с 2000 значениями годов!
Фильтрация по тексту (ввод типа search или text)
Создание формы входа (ввод типа password и email/text)

Пользовательский ввод в Dash

Пользовательский ввод — это компонент Input из dash core components (dcc.Input)

id обязателен для интеграции с callback
type по умолчанию принимает значение text
placeholder отображает подсказку бледным текстом

Небольшое изображение прямоугольника с чёрной рамкой, внутри которого бледно-серым цветом написано «Enter your text»

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

Использование ввода

Ввод становится переменной Python
Используется внутри callback

# @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' — для телефонных номеров и URL-адресов
Продвинутые типы:
- 'search' и 'hidden' требуют расширенного взаимодействия с браузером

Ограничение пользовательского ввода

Аргумент type автоматически задаёт ограничения.

Например, тип email требует формата [email protected]

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

Анимация текстового поля ввода: пользователь вводит «some-text,» и убирает курсор, после чего рамка поля становится красной — ошибка. Затем курсор возвращается и к тексту добавляется «@gmail.com», и при повторном уходе курсора ошибки не возникает

Дополнительные ограничения

Тип number допускает только числа
- Дополнительно: min и max задают числовые границы
- minLength / maxLength — для ввода типа text
Тип text поддерживает pattern для валидации через регулярные выражения

Анимация небольшого поля с кнопками увеличения и уменьшения значения. Мышь кликает, устанавливая число 1, затем стрелкой вниз уменьшает до 0. Вводится число 249 — всё в порядке. При вводе числа 251 вокруг поля появляется красная рамка, сигнализирующая об ошибке.

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

Управление состоянием поля ввода

Отключите поле программно с помощью disabled

Сделайте поле обязательным с помощью required

Аргументы True/False компонента dcc.Input()

Анимация прямоугольного поля ввода, в которое мышь пытается кликнуть, но не может. Внутри поля написано «A disabled input»

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

Анимация прямоугольного поля ввода: мышь кликает внутрь и выходит, не введя текст. После выхода курсора вокруг поля появляется красная рамка — ошибка. Внутри поля написано «A Required input»

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

Когда обновлять данные

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

Фильтрация по R, Re, Red, Redd

Анимация текстового поля с placeholder-текстом «Filter Product Descriptions». Текст вводится побуквенно, и график ниже обновляется с каждой буквой, показывая всё меньше данных. Введено «R-E-D-D». После ввода всех букв данных нет, что означает отсутствие точек с «redd» в столбце описания

Давайте потренируемся!

Создание дашбордов с помощью Dash и Plotly