Пользовательские элементы управления — Streamlit: создание интерактивных dashboards на Python

Данные в видео:

product,price,category,country
Laptop,1200,Electronics,Germany
Phone,800,Electronics,France
Chair,150,Furniture,Italy
Table,300,Furniture,Germany
Camera,600,Electronics,Spain
Bike,1600,Sport,Spain

На прошлом уроке мы создали первый dashboard, загрузили CSV-файл и вывели таблицу в интерфейсе Streamlit. Уже тогда приложение выглядело намного интереснее обычного Python-скрипта, но пока что оно оставалось “статичным”. Данные просто отображались на экране, а пользователь никак не мог с ними взаимодействовать. И вот здесь начинается самая интересная часть Streamlit.

Настоящий dashboard — это не просто таблица и графики. Главная идея dashboard-приложений заключается в интерактивности. Пользователь должен иметь возможность:

выбирать категории;
изменять период;
фильтровать данные;
переключать режимы отображения;
управлять тем, что происходит на экране.

Представьте обычную аналитическую систему. Руководитель открывает dashboard и хочет посмотреть:

продажи только за текущий месяц;
только определённую категорию товаров;
или только данные по конкретной стране.

Если приложение не умеет это делать, оно быстро превращается просто в красивую картинку. Именно поэтому пользовательские элементы управления — одна из важнейших частей Streamlit.

Что вы узнаете в рамках статьи

В этом уроке вы познакомитесь с основными элементами управления Streamlit и научитесь связывать их с DataFrame.

Мы разберём, как работают:

выпадающие списки;
множественный выбор;
ползунки;
чекбоксы;
переключатели;
выбор даты;
боковую панель.

Ключевые термины

Widget — интерактивный элемент интерфейса в Streamlit.
selectbox — выпадающий список для выбора одного значения.
multiselect — элемент для выбора нескольких значений одновременно.
slider — ползунок для выбора числового значения или диапазона.
checkbox — флажок с двумя состояниями: включён или выключен.
radio — переключатель для выбора одного варианта из нескольких.
date_input — элемент выбора даты.
sidebar — боковая панель Streamlit, в которой обычно размещают фильтры и элементы управления.
Фильтрация данных - Отбор только тех строк DataFrame, которые соответствуют определённым условиям.

Почему интерактивность так важна

До этого момента наш dashboard был не динамическим. Таблица отображается, всё работает… но проблема в том, что пользователь ничего не контролирует. А теперь представьте, что данных уже не 5 строк, а 50 тысяч. Просто смотреть на огромную таблицу становится бессмысленно. Хочется выбрать нужную категорию, ограничить диапазон цен, оставить только определённые даты и так далее. Именно здесь Streamlit начинает раскрывать себя по-настоящему.

Подготовка данных

Для начала немного расширим наш CSV-файл:

product,price,category,country
Laptop,1200,Electronics,Germany
Phone,800,Electronics,France
Chair,150,Furniture,Italy
Table,300,Furniture,Germany
Camera,600,Electronics,Spain

Этого уже достаточно для первых фильтров.

Selectbox — выбор одного значения

Начнём с одного из самых популярных элементов Streamlit. selectbox создаёт выпадающий список, из которого пользователь может выбрать одно значение.

Например:

category = st.selectbox(
    "Выберите категорию",
    df["category"].unique()
)

Здесь происходит сразу несколько вещей. Сначала Streamlit создаёт выпадающий список. Затем в него передаются уникальные категории из DataFrame. А выбранное пользователем значение сохраняется в переменную category.

И вот это очень важный момент. Практически все widgets Streamlit работают именно так:

вы отображаете элемент;
пользователь взаимодействует с ним;
Streamlit возвращает выбранное значение обратно в Python-код.

Теперь самое интересное — используем выбранную категорию для фильтрации таблицы.

filtered_df = df[df["category"] == category]

st.dataframe(filtered_df)

После выбора категории таблица автоматически изменится. Именно в этот момент приложение начинает ощущаться как настоящий dashboard.

Multiselect — выбор нескольких значений

Но что делать, если пользователь хочет выбрать сразу несколько категорий?

Например:

Electronics;
Furniture.

Для этого существует multiselect.

categories = st.multiselect(
    "Выберите категории",
    df["category"].unique()
)

Теперь пользователь может выбрать несколько значений одновременно.

Фильтрация будет выглядеть так:

filtered_df = df[df["category"].isin(categories)]

Slider — работа с диапазонами

Очень часто в dashboards используются диапазоны:

цена;
возраст;
рейтинг;
количество заказов.

Для таких задач отлично подходит slider.

Например:

max_price = st.slider(
    "Максимальная цена",
    min_value=0,
    max_value=2000,
    value=1000
)

Теперь пользователь может двигать ползунок и изменять максимальную цену.

Фильтрация:

filtered_df = df[df["price"] <= max_price]

И снова таблица изменяется автоматически. Но slider умеет работать не только с одним значением, а ещё и с диапазоном. Это особенно удобно, когда нужно выбрать диапазон цен, возрастной интервал, минимальное и максимальное значение.

Например:

price_range = st.slider(
    "Диапазон цен",
    min_value=0,
    max_value=5000,
    value=(500, 2000)
)

Теперь в интерфейсе появятся сразу два ползунка: минимальное значение, максимальное значение. Важно понимать, что в этом случае slider возвращает не одно число, а кортеж из двух значений: (min_price, max_price). То есть переменная price_range будет содержать примерно такие данные: (500, 2000).

Чаще всего такой результат сразу распаковывают:

min_price, max_price = st.slider(
    "Диапазон цен",
    min_value=0,
    max_value=5000,
    value=(500, 2000)
)

После этого диапазон можно использовать в фильтрации:

filtered_df = df[
    (df["price"] >= min_price) &
    (df["price"] <= max_price)
]

Это один из самых популярных сценариев использования slider в аналитических dashboards, потому что пользователи почти всегда хотят гибко ограничивать диапазоны значений.

Checkbox — включение и отключение логики

Иногда пользователю нужно просто:

показать что-то;
скрыть что-то;
включить режим.

Для этого используется checkbox.

show_table = st.checkbox("Показать таблицу")

Теперь можно написать:

if show_table:
    st.dataframe(df)

Checkbox особенно полезен для:

скрытия блоков;
переключения режимов;
отображения дополнительных данных.

Radio — переключение режимов

radio похож на selectbox, но отображает варианты сразу на экране.

chart_type = st.radio(
    "Тип графика",
    ["Line", "Bar", "Pie"]
)

Такой подход часто используют для:

выбора режима отображения;
переключения между графиками;
настройки dashboard.

Date Input — работа с датами

Практически любой dashboard рано или поздно начинает работать с датами.

Streamlit позволяет очень легко добавить выбор даты:

selected_date = st.date_input(
    "Выберите дату"
)

После этого пользователь сможет выбрать дату прямо в интерфейсе приложения. Позже мы будем использовать даты для полноценной фильтрации данных по периодам.

Sidebar — боковая панель

Сейчас интерфейс начинает становиться довольно перегруженным. Если все filters размещать в основной части страницы, dashboard быстро превращается в хаос. Именно поэтому Streamlit предоставляет sidebar.

Например:

category = st.sidebar.selectbox(
    "Выберите категорию",
    df["category"].unique()
)

Теперь widget появится слева в боковой панели. И это уже выглядит намного профессиональнее. На практике большинство filters обычно выносят именно в sidebar.

Собираем первый интерактивный dashboard

Теперь объединим всё вместе.

import streamlit as st
import pandas as pd

df = pd.read_csv("sales.csv")

st.title("Dashboard продаж")

category = st.sidebar.selectbox(
    "Категория",
    df["category"].unique()
)

max_price = st.sidebar.slider(
    "Максимальная цена",
    0,
    2000,
    1000
)

filtered_df = df[
    (df["category"] == category)
    & (df["price"] <= max_price)
]

st.dataframe(filtered_df)

И вот теперь приложение начинает выглядеть как настоящий dashboard. Пользователь управляет фильтрами, изменяет данные на экране и взаимодействует с интерфейсом. Причём всё это написано исключительно на Python.

Наиболее частые ошибки

Пустой DataFrame после фильтрации

Очень частая ситуация — пользователь выбирает фильтры, после которых не остается ни одной строки.

Например:

слишком узкий диапазон цены;
категория без данных;
слишком строгие условия фильтрации.

В результате таблица становится пустой. Это не обязательно означает ошибку в коде — иногда просто нет данных, подходящих под выбранные условия.

Ошибка при использовании `isin()`

Новички часто пишут так:

df["category"] == categories

Но проблема в том, что categories — это список значений.

В таких случаях нужно использовать isin():

df["category"].isin(categories)

Именно isin() позволяет проверить, входит ли значение в список выбранных элементов.

Слишком много widgets в основной части страницы

Когда фильтров становится много, интерфейс начинает выглядеть перегруженным и неаккуратным.

Например:

несколько selectbox;
sliders;
checkboxes;
date_input;
multiselect.

Если все разместить в основной части страницы, dashboard становится неудобным. Поэтому элементы управления обычно переносят в sidebar.

Slider работает неправильно из-за типов данных

Иногда данные из CSV читаются не как числа, а как строки. Например "1200" вместо: 1200.

Из-за этого:

slider может работать некорректно;
фильтрация начинает вести себя странно;
сравнение значений перестает работать как ожидается.

В таких ситуациях нужно проверять типы данных в DataFrame и при необходимости преобразовывать их через astype() или pd.to_numeric().

Наиболее частые вопросы

Почему Streamlit сразу обновляет таблицу?
Потому что Streamlit автоматически перезапускает приложение после изменения widget. Это одна из ключевых особенностей framework.
Можно ли использовать несколько filters одновременно?
Да. Более того, именно так обычно и строятся dashboards.
Sidebar — обязательная часть dashboard?
Нет. Но на практике это очень удобный способ организовать интерфейс.
Можно ли создавать собственные widgets?
Да. Streamlit поддерживает кастомные компоненты, но это уже более продвинутая тема.

Итоги

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

Кроме того, мы увидели, насколько удобно Streamlit позволяет строить интерфейсы. Буквально несколькими строками кода можно создать систему фильтрации, которая в других технологиях потребовала бы полноценной frontend-разработки.

На следующем уроке мы сделаем dashboard ещё интереснее: добавим графики, визуализацию и начнём превращать данные в полноценную аналитическую панель.

Что вы узнаете в рамках статьи

Ключевые термины

Почему интерактивность так важна

Подготовка данных

Selectbox — выбор одного значения

Multiselect — выбор нескольких значений

Slider — работа с диапазонами

Checkbox — включение и отключение логики

Radio — переключение режимов

Date Input — работа с датами

Sidebar — боковая панель

Собираем первый интерактивный dashboard

Наиболее частые ошибки

Пустой DataFrame после фильтрации

Ошибка при использовании isin()

Слишком много widgets в основной части страницы

Slider работает неправильно из-за типов данных

Наиболее частые вопросы

Итоги

Ошибка при использовании `isin()`