Данные в видео:
product,price,category,month
Laptop,1200,Electronics,January
Phone,800,Electronics,January
Chair,150,Furniture,February
Table,300,Furniture,March
Camera,600,Electronics,March
TV,1400,Electronics,April
Sofa,900,Furniture,AprilК этому моменту наше приложение уже стало довольно серьёзным. Оно состоит из нескольких страниц, умеет работать с данными, строить графики и сохранять состояние пользователя. Однако появляется новая задача — сделать интерфейс удобным.
Очень часто начинающие разработчики добавляют новые таблицы, графики и настройки просто друг за другом. В результате пользователь открывает страницу и видит длинное полотно информации, которое приходится бесконечно прокручивать. Даже если данные полезные, работать с таким приложением становится неудобно.
Именно поэтому хорошие dashboards уделяют большое внимание организации интерфейса. Пользователь должен быстро понимать:
- где находится нужная информация;
- какие элементы связаны между собой;
- как переключаться между различными представлениями данных.
Для решения этих задач Streamlit предоставляет несколько очень полезных инструментов, среди которых tabs, columns и expander. Кроме того, сегодня мы поговорим о структуре проекта. Пока приложение небольшое, организация файлов может казаться неважной. Но по мере роста dashboard правильная структура начинает экономить огромное количество времени. К концу урока наш проект станет более аккуратным как с точки зрения интерфейса, так и с точки зрения организации кода.
Что вы узнаете в рамках статьи
В этом уроке мы научимся группировать информацию внутри страницы и создавать более удобный пользовательский интерфейс.
Мы разберём:
- как создавать вкладки через
tabs; - как размещать элементы рядом друг с другом с помощью
columns; - как скрывать второстепенную информацию через
expander; - как организовывать структуру файлов в Streamlit-проекте;
- какие подходы помогают поддерживать dashboard по мере его роста.
Ключевые термины
tabs— механизм создания вкладок внутри страницы.columns— способ размещения элементов в несколько колонок.expander— раскрывающийся блок для скрытия информации.- Структура проекта — организация файлов и папок внутри приложения.
- Layout — схема расположения элементов интерфейса.
Когда одной страницы уже недостаточно
Представьте dashboard, который содержит таблицу, несколько графиков, показатели, настройки фильтрации и дополнительную информацию. Если просто выводить всё подряд, пользователь очень быстро теряется. Даже хорошие данные могут выглядеть неудобно, если интерфейс организован плохо. Поэтому одна из задач разработчика заключается не только в отображении информации, но и в её грамотной организации.
Tabs — вкладки внутри страницы
Начнём с вкладок. Иногда разные блоки информации логически связаны между собой, но показывать их одновременно неудобно. Например, отдельные вкладки могут содержать таблицу, графики и статистику.
Вместо создания отдельных страниц можно использовать вкладки.
tab1, tab2, tab3 = st.tabs([
"Таблица",
"Графики",
"Статистика"
])
Теперь каждая вкладка может содержать собственный набор элементов.
with tab1:
st.dataframe(df)
with tab2:
st.write("Графики")
with tab3:
st.write("Статистика")
В результате интерфейс становится намного компактнее.
Когда использовать tabs
Вкладки хорошо подходят в тех случаях, когда пользователь работает с одними и теми же данными, но хочет видеть их в разных представлениях. Например, одна вкладка может показывать таблицу, другая — график, третья — дневную статистику, четвёртая — месячную, а ещё одна — сырые или уже обработанные данные. Если же разделы сильно отличаются по смыслу, обычно лучше использовать отдельные страницы.
Columns — размещаем элементы рядом
До этого момента все элементы отображались друг под другом. Иногда это удобно, но для dashboards гораздо чаще используется размещение блоков рядом.
Например, мы хотим показать две метрики:
col1, col2 = st.columns(2)
Теперь каждая колонка может содержать собственные элементы.
with col1:
st.metric("Продажи", 15000)
with col2:
st.metric("Заказы", 320)
В результате показатели будут находиться рядом. Такой подход используется практически в любом dashboard.
Использование columns для графиков
Колонки отлично подходят не только для метрик.
Например:
col1, col2 = st.columns(2)
with col1:
st.pyplot(fig1)
with col2:
st.pyplot(fig2)
Вместо длинной вертикальной страницы пользователь увидит более компактный интерфейс.
Expander — скрываем второстепенную информацию
Иногда часть информации нужна пользователю лишь время от времени. Это может быть служебная информация, отладочные данные, подробная статистика или описание показателей. Если постоянно выводить такие данные на экран, интерфейс быстро становится перегруженным и менее удобным для работы.
Для решения этой проблемы существует expander.
with st.expander("Подробная информация"):
st.write(df.describe())
Теперь информация будет скрыта до тех пор, пока пользователь сам не захочет её открыть.
Когда использовать expander
Раскрывающиеся блоки особенно полезны для дополнительной статистики, пояснений, справочной информации и редко используемых настроек. Главное правило простое: если информация нужна не всем пользователям и не постоянно, её часто имеет смысл помещать в expander, чтобы не перегружать интерфейс.
Структура проекта
Теперь поговорим о коде.
До сих пор структура проекта выглядела примерно так:
project/
│
├── app.py
├── sales.csv
├── pages/
Для небольших примеров этого достаточно. Но когда приложение начинает расти, появляется желание разделить код по назначению.
Например:
project/
│
├── app.py
├── data/
│ └── sales.csv
│
├── pages/
│ ├── analytics.py
│ ├── charts.py
│ └── raw_data.py
│
├── components/
│ └── metrics.py
Такой подход делает проект намного понятнее. Разработчику не приходится искать нужный код среди сотен строк в одном файле.
Почему структура становится важной
Пока приложение занимает 50 строк, разницы почти нет. Но когда проект разрастается до нескольких страниц, множества графиков и десятков widgets, хорошая структура начинает серьёзно упрощать разработку.
Кроме того, правильно организованный проект проще:
- дорабатывать;
- тестировать;
- показывать другим разработчикам;
- публиковать в портфолио.
Наиболее частые ошибки
- Слишком много элементов на одной странице
Пользователь начинает теряться в интерфейсе. В таких ситуациях стоит использовать tabs, columns или отдельные страницы. - Чрезмерное использование tabs
Большое количество вкладок усложняет навигацию и делает интерфейс менее понятным. - Слишком много информации внутри expander
Если важные данные постоянно скрыты, пользователю становится неудобно работать с dashboard. - Весь код находится в одном файле
По мере роста проекта такой подход начинает серьёзно затруднять поддержку приложения.
Наиболее частые вопросы
- Что лучше использовать: страницы или tabs?
Если разделы сильно отличаются по назначению, лучше использовать страницы. Если это разные представления одних и тех же данных, обычно подходят tabs. - Можно ли создавать вложенные columns?
Да, но злоупотреблять этим не стоит, иначе интерфейс становится сложным. - Обязательно ли использовать expander?
Нет, но он помогает уменьшить визуальный шум на странице. - Когда стоит задуматься о структуре проекта?
Чем раньше, тем лучше. Даже небольшой проект выигрывает от понятной организации файлов.
Итоги
Сегодня мы научились организовывать интерфейс Streamlit-приложения и познакомились с инструментами, которые используются практически в каждом серьёзном dashboard.
Мы разобрали вкладки, колонки и раскрывающиеся блоки, а также поговорили о структуре проекта и организации файлов. Благодаря этим инструментам приложение становится более удобным для пользователя, а код — более понятным для разработчика.
Теперь наш dashboard не только умеет работать с данными и строить графики, но и выглядит значительно аккуратнее и профессиональнее. Следующие уроки будут посвящены развитию функциональности приложения и превращению его в полноценный инструмент для работы с данными.