Создание продвинутой многостраничной интерактивной аналитической панели с динамической фильтрацией, живыми KPI и богатой визуальной аналитикой с помощью Panel

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

Установка зависимостей

Мы установим все необходимые зависимости и загрузим Panel, hvPlot, Pandas и NumPy, чтобы панель работала без сбоев в Colab.

«`python
import sys, subprocess

def install_deps():
pkgs = [«panel», «hvplot», «pandas», «numpy», «bokeh»]
subprocess.check_call([sys.executable, «-m», «pip», «install», «-q»] + pkgs)

try:
import panel as pn
import hvplot.pandas
import pandas as pd
import numpy as np
except ImportError:
install_deps()
import panel as pn
import hvplot.pandas
import pandas as pd
import numpy as np

pn.extension()
«`

Генерация данных

Мы создадим полный год синтетических данных временных рядов для сегментов и регионов, предоставив обширный набор данных для исследования.

«`python
rng = np.random.default_rng(42)
dates = pd.date_range(«2024-01-01″, periods=365, freq=»D»)
segments = [«A», «B», «C»]
regions = [«North», «South», «East», «West»]

base = pd.DataFrame(
{
«date»: np.tile(dates, len(segments) * len(regions)),
«segment»: np.repeat(segments, len(dates) * len(regions)),
«region»: np.repeat(np.tile(regions, len(segments)), len(dates)),
}
)
base[«traffic»] = (
100
+ 40 np.sin(2 np.pi * base[«date»].dt.dayofyear / 365)
+ rng.normal(0, 15, len(base))
)
«`

Создание интерактивных виджетов

Мы создадим интерактивные виджеты и логику фильтрации, которая управляет всей панелью. Мы подключим график временных рядов к виджетам, используя реактивный @pn.depends, что позволит нам мгновенно изменять сегменты, регионы, показатели, диапазоны дат и окна сглаживания.

«`python
segment_sel = pn.widgets.CheckBoxGroup(name=»Segment», value=segments[:2], options=segments, inline=True)
region_sel = pn.widgets.MultiChoice(name=»Region», value=[«North»], options=regions)
metric_sel = pn.widgets.Select(name=»Metric», value=»traffic», options=[«traffic», «conversions», «revenue»])
date_range = pn.widgets.DateRangeSlider(
name=»Date Range»,
start=df[«date»].min(),
end=df[«date»].max(),
value=(df[«date»].min(), df[«date»].max()),
)
smooth_slider = pn.widgets.IntSlider(name=»Rolling Window (days)», start=1, end=30, value=7)
«`

Визуализация данных

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

«`python
@pn.depends(segmentsel, regionsel, metricsel, daterange)
def segment_bar(segment, region, metric, drange):
data = filtered_df(segment, region, drange)
if data.empty:
return pn.pane.Markdown(«### Нет данных для агрегирования»)
agg = data.groupby(«segment»)[metric].sum().sort_values(ascending=False)
return agg.hvplot.bar(title=f»{metric.title()} by Segment», yaxis=None)
«`

Живые KPI

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

«`python
kpi_source = df.copy()
kpi_idx = [0]

def computekpi(slicedf):
if slice_df.empty:
return 0, 0, 0
totalrev = slicedf[«revenue»].sum()
avgconv = slicedf[«conversions»].mean()
cr = (slicedf[«conversions»].sum() / slicedf[«traffic»].sum()) * 100
return totalrev, avgconv, cr

kpi_value = pn.indicators.Number(name=»Общий доход (окно)», value=0, format=»$0,0″)
conv_value = pn.indicators.Number(name=»Средние конверсии», value=0, format=»0.0″)
cr_value = pn.indicators.Number(name=»Коэффициент конверсии», value=0, format=»0.00%»)
«`

Сборка панели

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

«`python
controls = pn.WidgetBox(
«### Глобальные элементы управления»,
segment_sel,
region_sel,
metric_sel,
date_range,
smooth_slider,
sizingmode=»stretchwidth»,
)

page_overview = pn.Column(
pn.pane.Markdown(«## Обзор: фильтрованные временные ряды»),
controls,
timeseries_plot,
)

page_insights = pn.Column(
pn.pane.Markdown(«## Аналитика по сегментам и регионам»),
pn.Row(segmentbar, regionheatmap),
)

page_live = pn.Column(
pn.pane.Markdown(«## Живое окно KPI (моделируемый поток данных)»),
pn.Row(kpivalue, convvalue, cr_value),
)

dashboard = pn.Tabs(
(«Обзор», page_overview),
(«Аналитика», page_insights),
(«Живые KPI», page_live),
)

dashboard
«`

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

1. Какие библиотеки и инструменты используются для создания продвинутой многостраничной интерактивной аналитической панели в данном руководстве?

В статье упоминаются следующие инструменты и библиотеки: Panel, hvPlot, Pandas, NumPy, Bokeh.

2. Какие типы данных используются для генерации синтетических данных временных рядов в этом руководстве?

В статье для генерации синтетических данных временных рядов используются случайные числа, а также датафреймы Pandas для создания структуры данных.

3. Какие виджеты и элементы управления используются для фильтрации данных на интерактивной панели?

В статье используются CheckBoxGroup, MultiChoice, Select, DateRangeSlider и IntSlider для создания интерактивных виджетов и элементов управления.

4. Как осуществляется визуализация данных на интерактивной панели в этом руководстве?

В статье описывается создание дополнительных визуальных слоёв, таких как гистограмма на уровне сегментов и тепловая карта регион-сегмент, которые реагируют на глобальные фильтры.

5. Какие компоненты используются для создания многостраничного макета интерактивной панели?

В статье используются Column, Row и Tabs для организации панели в виде обзорной страницы, страницы с аналитикой и страницы с живыми KPI.

Источник