Інтерактивні компоненти

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

Alex Scriven

Data Scientist

Посилення інтерактивності

Корисні інтерактивні компоненти:
- dcc.Checklist() = Прапорці
- dcc.RadioItems() = Радіокнопки
- dcc.Slider() / dcc.RangeSlider() = Слайдери
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Подібні до слайдерів, але для дат

Слайдери

Слайдер: перетягніть для одного значення

Діапазонний слайдер: перетягніть для двох значень

Нагадування: можна прив'язати до 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