Руководство по созданию приложения для обработки данных на интерфейсе
Делиться
Это третья статья из короткой серии о разработке панелей управления данными с использованием новейших инструментов разработки на базе Python: Streamlit, Gradio и Taipy.
Исходный набор данных для каждой панели одинаков, но хранится в разных форматах. Насколько это возможно, я постараюсь сделать макеты панелей для каждого инструмента похожими друг на друга и имеющими одинаковую функциональность.
Я уже написал версии Streamlit и Gradio. Версия Streamlit получает исходные данные из базы данных Postgres. Версии Gradio и Taipy получают данные из файла CSV. Ссылки на другие статьи вы найдете в конце этой.
Что такое Тайпи?
Taipy — это относительно новый веб-фреймворк на основе Python, который стал известен пару лет назад. Согласно его веб-сайту, Taipy — это …
«… библиотека Python с открытым исходным кодом для создания готового к производству front-end и back-end в кратчайшие сроки. Знания в области веб-разработки не требуются! »
Целевая аудитория Taipy — специалисты по данным, специалисты по машинному обучению и инженеры по данным, которые могут не иметь большого опыта в разработке front-end приложений, но обычно свободно владеют Python. Taipy позволяет достаточно легко создавать front-end с использованием Python, так что это выигрыш для всех.
Вы можете начать использовать Taipy бесплатно. Если вам нужно использовать его как часть предприятия, с выделенной поддержкой и масштабируемостью, платные планы доступны на ежемесячной или ежегодной основе. Их веб-сайт предоставляет больше информации, на которую я дам ссылку в конце этой статьи.
Почему стоит использовать Taipy, а не Gradio или Streamlit?
Как я показал в этой и двух других статьях, с помощью всех трех фреймворков можно разрабатывать очень похожие результаты, поэтому возникает вопрос: почему следует использовать один, а не другой?
Хотя Gradio отлично подходит для быстрого создания демонстраций ML, а Streamlit отлично подходит для интерактивного исследования данных, оба они работают по принципу простоты, который может стать ограничением по мере роста амбиций вашего приложения. Taipy вступает в игру, когда ваш проект должен перейти от простого скрипта или демонстрации к надежному, производительному и поддерживаемому приложению.
Вам следует настоятельно рассмотреть возможность выбора Taipy вместо Streamlit/Gradio, если:
- Производительность вашего приложения имеет решающее значение
- Ваш отдельный файл сценария становится неуправляемо длинным и сложным.
- Вам необходимо создавать многостраничные приложения со сложной навигацией.
- Вашему приложению требуется анализ сценария «что если» или выполнение сложного конвейера.
- Вы создаете производственный инструмент для бизнес-пользователей, а не просто внутреннюю исследовательскую панель.
- Вы работаете в команде и вам нужна чистая, удобная для поддержки кодовая база.
Короче говоря, выбирайте Gradio для демонстраций. Выбирайте Streamlit для интерактивного исследования. Выбирайте Taipy , когда будете готовы создавать высокопроизводительные, масштабируемые и производственные приложения для обработки корпоративных данных.
Что мы будем разрабатывать
Мы разрабатываем панель управления данными. Нашими исходными данными будет один CSV-файл, содержащий 100 000 синтетических записей о продажах.
Фактический источник данных не так уж важен. Он может быть с таким же успехом сохранен в виде файла Parquet, в SQLite или Postgres, или в любой базе данных, к которой вы можете подключиться.
Вот как будет выглядеть наша окончательная панель инструментов.
Состоит из четырех основных разделов.
- Верхняя строка позволяет пользователю выбрать конкретные даты начала и окончания и/или категории продуктов с помощью выбора дат и раскрывающегося списка соответственно.
- Вторая строка, «Ключевые показатели», предоставляет обобщенную сводку выбранных данных.
- Раздел «Визуализации» позволяет пользователю выбрать один из трех графиков для отображения входного набора данных.
- Раздел Raw Data — это именно то, чем он себя называет. Это табличное представление выбранных данных эффективно просматривает базовый файл данных CSV.
Использовать панель инструментов просто. Сначала отображается статистика по всему набору данных. Затем пользователь может сузить фокус данных, используя 3 поля выбора в верхней части дисплея. Графики, ключевые показатели и разделы необработанных данных динамически обновляются, чтобы отражать выбор пользователя.
Исходные данные
Как уже упоминалось, исходные данные панели мониторинга содержатся в одном файле с разделенными запятыми значениями (CSV). Данные состоят из 100 000 синтетических записей, связанных с продажами. Вот первые десять записей файла.
+———-+————+————+—————-+————-+————+————+———+———————+ | order_id | order_date | customer_id| customer_name | product_id | product_names | categories | quantity | price | total | +———-+————+————+—————-+————-+————+————+———-+———————+ | 0 | 08.01.2022 | 245 | Клиент_884 | 201 | Смартфон | Электроника| 3 | 90,02 | 270,06 | | 1 | 19.02.2022 | 701 | Клиент_1672 | 205 | Принтер | Электроника| 6 | 12,74 | 76,44 | | 2 | 01.01.2017 | 184 | Customer_21720 | 208 | Блокнот | Канцелярские принадлежности | 8 | 48,35 | 386,8 | | 3 | 09/03/2013 | 275 | Customer_23770 | 200 | Ноутбук | Электроника| 3 | 74,85 | 224,55 | | 4 | 23/04/2022 | 960 | Customer_23790 | 210 | Шкаф | Офис | 6 | 53,77 | 322,62 | | 5 | 10/07/2019 | 197 | Customer_25587 | 202 | Письменный стол | Офис | 3 | 47,17 | 141,51 | | 6 | 12/11/2014 | 510 | Customer_6912 | 204 | Монитор | Электроника| 5 | 22,5 | 112,5 | | 7 | 12/07/2016 | 150 | Customer_17761 | 200 | Ноутбук | Электроника| 9 | 49,33 | 443,97 | | 8 | 12/11/2016 | 997 | Customer_23801 | 209 | Кофеварка | Электроника| 7 | 47,22 | 330,54 | | 9 | 23/01/2017 | 151 | Customer_30325 | 207 | Ручка | Канцелярские принадлежности | 6 | 3,5 | 21 | +———-+————+————+—————-+—————+————+———-+———————+
А вот код Python, который вы можете использовать для генерации набора данных. Он использует библиотеки NumPy и Pandas Python, поэтому убедитесь, что обе установлены перед запуском кода.
# сгенерируйте CSV-файл с 100000 записей # импортируйте polars как pl import numpy как np from datetime import datetime, timedelta def generate(nrows: int, filename: str): names = np.asarray( [ «Ноутбук», «Смартфон», «Стол», «Стул», «Монитор», «Принтер», «Бумага», «Ручка», «Блокнот», «Кофеварка», «Шкаф», «Пластиковые стаканчики», ] ) categories = np.asarray( [ «Электроника», «Электроника», «Офис», «Офис», «Электроника», «Электроника», «Канцелярские принадлежности», «Канцелярские принадлежности», «Канцелярские принадлежности», «Электроника», «Офис», «Разное», ] ) product_id = np.random.randint(len(names), size=nrows) quantity = np.random.randint(1, 11, size=nrows) price = np.random.randint(199, 10000, size=nrows) / 100 # Генерация случайных дат между 2010-01-01 и 2023-12-31 start_date = datetime(2010, 1, 1) end_date = datetime(2023, 12, 31) date_range = (end_date — start_date).days # Создание случайных дат в виде np.array и преобразование в строковый формат order_dates = np.array([(start_date + timedelta(days=np.random.randint(0, date_range))).strftime('%Y-%m-%d') for _ in range(nrows)]) # Определение столбцов columns = { «order_id»: np.arange(nrows), «order_date»: order_dates, «customer_id»: np.random.randint(100, 1000, size=nrows), «customer_name»: [f»Customer_{i}» for i in np.random.randint(2**15, size=nrows)], «product_id»: product_id + 200, «product_names»: names[product_id], «categories»: categories[product_id], «quantity»: quantity, «price»: price, «total»: price * quantity, } # Создать Polars DataFrame и записать в CSV с явным разделителем df = pl.DataFrame(columns) df.write_csv(filename, Separater=',',include_header=True) # Обеспечить использование запятой в качестве разделителя # Сгенерировать 100 000 строк данных со случайной order_date и сохранить в CSV generate(100_000, «/mnt/d/sales_data/sales_data.csv»)
Установка и использование Taipy
Установка Taipy проста, но перед кодированием лучше всего настроить отдельную среду Python для всей вашей работы. Я использую Miniconda для этой цели, но вы можете использовать любой метод, подходящий для вашего рабочего процесса.
Если вы хотите воспользоваться Miniconda и у вас ее еще нет, вам необходимо сначала установить Miniconda.
После создания среды переключитесь на нее с помощью команды «activate» , а затем запустите «pip install», чтобы установить необходимые библиотеки Python.
#создаем нашу тестовую среду (базу) C:Usersthoma>conda create -n taipy_dashboard python=3.12 -y # Теперь активируем ее (базу) C:Usersthoma>conda activate taipy_dashboard # Устанавливаем библиотеки python и т. д. (taipy_dashboard) C:Usersthoma>pip install taipy pandas
Кодекс
Я разобью код на разделы и объясню каждый из них по мере продвижения.
Раздел 1
from taipy.gui import Gui import pandas as pd import datetime # Загрузка данных CSV csv_file_path = r»d:sales_datasales_data.csv» try: raw_data = pd.read_csv( csv_file_path, parse_dates=[«order_date»], dayfirst=True, low_memory=False # Подавить предупреждение dtype ) if «revenue» not in raw_data.columns: raw_data[«revenue»] = raw_data[«quantity»] * raw_data[«price»] print(f»Data uploaded successful: {raw_data.shape[0]} rows») except Exception as e: print(f»Error loading CSV: {e}») raw_data = pd.DataFrame() categories = [«All Categories»] + raw_data[«categories»].dropna().unique().tolist() # Определение параметры визуализации в виде правильного списка chart_options = [«Доход с течением времени», «Доход по категориям», «Лучшие продукты»]
Этот скрипт подготавливает данные о продажах для использования в нашем приложении визуализации Taipy. Он делает следующее:
- Импортирует необходимые внешние библиотеки, а также загружает и предварительно обрабатывает наши исходные данные из входного CSV-файла.
- Рассчитывает производные показатели, такие как доход.
- Извлекает соответствующие параметры фильтрации (категории).
- Определяет доступные параметры визуализации.
Раздел 2
start_date = raw_data[«order_date»].min().date() если не raw_data.empty иначе datetime.date(2020, 1, 1) end_date = raw_data[«order_date»].max().date() если не raw_data.empty иначе datetime.date(2023, 12, 31) selected_category = «Все категории» selected_tab = «Доход с течением времени» # Установить выбранную вкладку по умолчанию total_revenue = «$0.00» total_orders = 0 avg_order_value = «$0.00» top_category = «N/A» income_data = pd.DataFrame(columns=[«order_date», «revenue»]) category_data = pd.DataFrame(columns=[«categories», «revenue»]) top_products_data = pd.DataFrame(columns=[«product_names», «revenue»]) def apply_changes(state): filtered_data = raw_data[ (raw_data[«order_date»] >= pd.to_datetime(state.start_date)) & (raw_data[«order_date»] <= pd.to_datetime(state.end_date)) ] if state.selected_category != "All Categories": filtered_data = filtered_data["categories"] == state.selected_category] state.revenue_data = filtered_data.groupby("order_date")["revenue"].sum().reset_index() state.revenue_data.columns = ["order_date", "revenue"] print("Данные о доходе:") print(state.revenue_data.head()) state.category_data = filtered_data.groupby("categories")["revenue"].sum().reset_index() state.category_data.columns = ["categories", "revenue"] print("Данные категории:") print(state.category_data.head()) state.top_products_data = ( filtered_data.groupby("product_names")["revenue"] .sum() .sort_values(ascending=False) .head(10) .reset_index() ) state.top_products_data.columns = ["product_names", "revenue"] print("Данные о лучших продуктах:") print(state.top_products_data.head()) state.raw_data = filtered_data state.total_revenue = f"${filtered_data['revenue'].sum():,.2f}" state.total_orders = filtered_data["order_id"].nunique() state.avg_order_value = f"${filtered_data['revenue'].sum() / max(filtered_data['order_id'].nunique(), 1):,.2f}" state.top_category = ( filtered_data.groupby("categories")["revenue"].sum().idxmax() if not filtered_data.empty else "N/A" ) def on_change(state, var_name, var_value): if var_name in {"start_date", "end_date", "selected_category", "selected_tab"}: print(f"Обнаружено изменение состояния: {var_name} = {var_value}") # Отладка apply_changes(state) def on_init(state): apply_changes(state) import taipy.gui.builder as tgb def get_partial_visibility(tab_name, selected_tab): возвращает "block", если tab_name == selected_tab, иначе "none"
Устанавливает начальную и конечную даты по умолчанию и начальную категорию. Также начальная диаграмма будет отображаться как Revenue Over Time . Заполнитель и начальные значения также устанавливаются для следующего:-
- total_revenue . Установите на «$0.00».
- total_orders. Установить на 0.
- avg_order_value. Установите на «$0.00».
- top_category. Установите значение «N/A».
Пустые фреймы данных устанавливаются для:-
- income_data. Столбцы: [«order_date», «revenue»].
- category_data. Столбцы: [«категории», «доход»].
- top_products_data. Столбцы: [«product_names», «revenue»].
Определена функция apply_changes . Эта функция запускается для обновления состояния при применении фильтров (например, диапазона дат или категории). Она обновляет следующее:-
- Тенденции динамики доходов.
- Распределение доходов по категориям.
- 10 лучших продуктов по выручке.
- Сводные показатели (общий доход, общее количество заказов, средняя стоимость заказа, высшая категория).
Функция on_change срабатывает всякий раз, когда изменяется любой из выбранных пользователем компонентов.
Функция on_init срабатывает при первом запуске приложения.
Функция get_partial_visibility определяет свойство отображения CSS для элементов пользовательского интерфейса на основе выбранной вкладки.
Раздел 3
с tgb.Page() как страница: tgb.text(«# Панель показателей эффективности продаж», mode=»md») # Раздел фильтров с tgb.part(class_name=»card»): с tgb.layout(columns=»1 1 2″): # Расположить элементы в 3 столбца с tgb.part(): tgb.text(«Фильтровать с:») tgb.date(«{start_date}») с tgb.part(): tgb.text(«До:») tgb.date(«{end_date}») с tgb.part(): tgb.text(«Фильтровать по категории:») tgb.selector( value=»{selected_category}», lov=categories, dropdown=True, width=»300px» ) # Раздел показателей tgb.text(«## Ключевые показатели», mode=»md») с tgb.layout(columns=»1 1 1 1″): с tgb.part(class_name=»metric-card»): tgb.text(«### Общий доход», mode=»md») tgb.text(«{total_revenue}») с tgb.part(class_name=»metric-card»): tgb.text(«### Общее количество заказов», mode=»md») tgb.text(«{total_orders}») с tgb.part(class_name=»metric-card»): tgb.text(«### Средняя стоимость заказа», mode=»md») tgb.text(«{avg_order_value}») с tgb.part(class_name=»metric-card»): tgb.text(«### Верхняя категория», mode=»md») tgb.text(«{top_category}») tgb.text(«## Визуализации», mode=»md») # Селектор для визуализаций с уменьшенной шириной с tgb.part(style=»width: 50%;»): # Уменьшить ширину раскрывающегося списка tgb.selector( value=»{selected_tab}», lov=[«Доход с течением времени», «Доход по категориям», «Лучшие продукты»], dropdown=True, width=»360px», # Уменьшить ширину раскрывающегося списка ) # Условная визуализация диаграмм на основе selected_tab с tgb.part(render=»{selected_tab == 'Доход с течением времени'}»): tgb.chart( data=»{revenue_data}», x=»order_date», y=»revenue», type=»line», title=»Доход с течением времени», ) с tgb.part(render=»{selected_tab == 'Доход по категориям'}»): tgb.chart( data=»{category_data}», x=»categories», y=»revenue», type=»bar», title=»Revenue by Category», ) с tgb.part(render=»{selected_tab == 'Top Products'}»): tgb.chart( data=»{top_products_data}», x=»product_names», y=»revenue», type=»bar», title=»Top Products», ) # Таблица необработанных данных tgb.text(«## Raw Data», mode=»md») tgb.table(data=»{raw_data}»)
Этот раздел кода определяет внешний вид и поведение всей страницы и разделен на несколько подразделов.
Определение страницы
tgp.page(). Представляет основной контейнер панели инструментов, определяющий структуру и элементы страницы.
Макет панели инструментов
- Отображает заголовок: «Панель мониторинга эффективности продаж» в режиме Markdown (mode=»md»).
Раздел Фильтры
- Размещено в части в стиле карточки , которая использует макет из 3 колонок — tgb.layout(columns=»1 1 2″) — для упорядочивания фильтров.
Фильтрующие элементы
- Начальная дата. Выбор даты tgb.date(«{start_date}») для выбора начала диапазона дат.
- Дата окончания. Выбор даты tgb.date(«{end_date}») для выбора конца диапазона дат.
- Фильтр категорий.
- Раскрывающийся селектор tgb.selector для фильтрации данных по категориям.
- Заполняется с использованием категорий, например, «Все категории» и доступных категорий из набора данных.
Раздел ключевых показателей
Отображает сводную статистику в четырех метрических карточках, организованных в макет из 4 столбцов:
- Общий доход. Показывает значение total_revenue.
- Всего заказов. Отображает количество уникальных заказов (total_orders).
- Средняя стоимость заказа. Показывает avg_order_value.
- Лучшая категория. Отображает название категории, приносящей наибольший доход.
Раздел визуализации
- Раскрывающийся список позволяет пользователям переключаться между различными визуализациями (например, «Доход с течением времени», «Доход по категориям», «Лучшие продукты»).
- Ширина раскрывающегося списка уменьшена для компактного пользовательского интерфейса.
Условная визуализация диаграмм
- Доход с течением времени. Отображает линейную диаграмму income_data, показывающую тенденции дохода с течением времени.
- Доход по категориям. Показывает столбчатую диаграмму category_data для визуализации распределения дохода по категориям.
- Лучшие продукты. Отображает столбчатую диаграмму top_products_data, показывающую 10 лучших продуктов по доходу.
Таблица необработанных данных
- Отображает необработанный набор данных в табличном формате.
- Динамически обновляется на основе примененных пользователем фильтров (например, диапазон дат, категория).
Раздел 4
Gui(page).run( title=»Панель управления продажами», dark_mode=False, debug=True, port=»auto», allow_unsafe_werkzeug=True, async_mode=»threading» )
Этот последний короткий раздел визуализирует страницу для отображения в браузере.
Запуск кода
Соберите все приведенные выше фрагменты кода и сохраните их в файл, например, taipy-app.py. Убедитесь, что ваш исходный файл данных находится в правильном месте и правильно указан в вашем коде. Затем вы запускаете модуль так же, как и любой другой код Python, вводя его в терминал командной строки.
питон taipy-app.py
Через секунду или две вы увидите открытое окно браузера с вашим приложением для работы с данными.
Краткое содержание
В этой статье я попытался предоставить исчерпывающее руководство по созданию интерактивной панели мониторинга эффективности продаж с помощью Taipy, используя CSV-файл в качестве исходных данных.
Я объяснил, что Taipy — это современный фреймворк с открытым исходным кодом на основе Python, который упрощает создание панелей мониторинга и приложений, управляемых данными. Я также дал несколько советов о том, почему вы можете захотеть использовать TaiPy вместо двух других популярных фреймворков, Gradio и Streamlit.
Разработанная мной панель мониторинга позволяет пользователям фильтровать данные по диапазонам дат и категориям продуктов, просматривать ключевые показатели, такие как общий доход и наиболее эффективные категории, изучать визуализации, такие как тенденции доходов и наиболее эффективные продукты, а также перемещаться по необработанным данным с помощью пагинации.
Это руководство предоставляет комплексную реализацию, охватывающую весь процесс от создания выборочных данных до разработки функций Python для запроса данных, создания графиков и обработки ввода пользователя. Этот пошаговый подход демонстрирует, как использовать возможности Taipy для создания удобных и динамических панелей мониторинга, что делает его идеальным для инженеров и ученых, которые хотят создавать интерактивные приложения для работы с данными.
Хотя я использовал CSV-файл в качестве источника данных, изменение кода для использования другого источника данных, например, системы управления реляционными базами данных (СУРБД) типа SQLite, не должно вызвать затруднений.
Более подробную информацию о Taipy можно найти на их сайте https://taipy.io/
Чтобы просмотреть две мои другие статьи TDS о создании панелей мониторинга данных с использованием Gradio и Streamlit, щелкните ссылки ниже.
Панель приборов Gradio
Подсветка панели приборов
Источник: towardsdatascience.com
