Интерактивные компоненты

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

Alex Scriven

Data Scientist

Расширение интерактивности

Полезные интерактивные компоненты:
- dcc.Checklist() = флажки
- dcc.RadioItems() = переключатели
- dcc.Slider() / dcc.RangeSlider() = ползунки
- dcc.DatePickerSingle() / dcc.DatePickerRange() = выбор дат

Ползунки

Slider: перетащите для выбора одного значения

Range Slider: перетащите для выбора двух значений

Напоминание: можно связать с callback
- Обновляет графики или компоненты

Ползунок:

Анимация синего ползунка на чёрном фоне с текстом ниже, показывающим выбранное значение. Мышь перемещает маркер ползунка вверх на несколько позиций, увеличивая отображаемое значение.

Диапазонный ползунок:

Анимация синего диапазонного ползунка на чёрном фоне с текстом ниже, показывающим два выбранных значения. Мышь перемещает каждый из маркеров ползунка вверх и вниз, изменяя отображаемые значения.

Ползунки в Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Основные аргументы:

min/max : границы ползунка
value : начальное значение
step : шаг между делениями
vertical : горизонтальная или вертикальная ориентация

Выбор дат в Dash

DatePickerSingle: выбор одной даты

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = начальная дата
initial_visible_month = месяц, отображаемый во всплывающем окне
Опционально: ограничьте min_date_allowed и max_date_allowed

Анимация стандартного выбора даты. В поле ввода указана дата 1 июля 2025 г. Мышь нажимает на поле, открывается календарь. Выбирается другая дата — 2 июля 2025 г. — календарь закрывается, и в поле отображается новая дата.

Выбор диапазона дат

Аналогично DatePickerSingle

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

Задайте начальные start_date и end_date

Анимация выбора диапазона дат. Два поля ввода показывают даты в июле 2025 г. Мышь нажимает на второе поле, открывается календарь с выделенным зелёным диапазоном, затем выбирается новый диапазон и даты изменяются.

Обновление графиков

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@callback(
    Output(component_id='sales_cat', 
           component_property='figure'),
    Input(component_id='sale_date', 
           component_property='date'))

def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)

    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]

    # Create fig
    return fig

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

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