Для реализации сценариев динамической фильтрации данных на дашбордах можно использовать связку виджетов навигации «Ввод числа»/«Ползунок» и Blockly. Рассмотрим практические кейсы по числовым значениям.
Кейс 1. Фильтрация по пороговому значению с помощью виджета «Ползунок»
Допустим, у нас есть дашборд с данными по бюджетам городов. Нужно, чтобы пользователь мог в реальном времени менять минимальный порог бюджета и видеть только те города, которые соответствуют заданному критерию.
Шаг 1. Создание аналитической панели
- Открываем редактор создания аналитической панели.
- Добавляем виджет «Ползунок» на панель с обычным контейнером и столбчатую диаграмму для визуализации.
Шаг 2. Настройка виджета «Ползунок»
- Задаем заголовок (например, «Фильтр по бюджету»).
- Указываем минимальное и максимальное значение (например, от 1000 до 100 000).
- Настраиваем шаг изменения «Статический шаг» (например, 1000).
- Проверяем и при необходимости изменяем символ десятичного разделителя (по умолчанию «,» возможно задать любой символ).
- Настраиваем внешний вид полосы прокрутки ползунка (регулируем толщину, задаем степень скругления углов).
- Кастомизируем маркер (бегунок): выбираем форму бегунка (круг, прямоугольник, ромб, треугольники - 4 направления), цвет заливки и параметры обводки.
- Можно добавить второй маркер в режиме работы с диапазонами значений.
Измененный виджет после кастомизации
Шаг 3. Подготовка источника данных
- Создаем источник данных типа OLAP с переменной «Бюджет городов» (тип — Вещественное число).
- Добавляем иерархию (например, «Город») на ось строк.
- В настройках иерархии задаем фильтрацию по мере.
Это условие оставит только города, у которых бюджет больше значения из переменной «Бюджет городов».
Шаг 4. Настройка обработчика событий в Blockly
- В виджете «Ползунок» открываем настройки события «При изменении значения».
- Добавляем обработчики «Источник OLAP переменная «Бюджет города» установить значение» и обработчик виджета «Фильтр по бюджету» - получить значение.
- Сохраняем изменения.
5.
Результат
При перемещении маркера ползунка диаграмма динамически обновляет данные, отображая только те города, где бюджет превышает заданное значение. На рисунке ниже представлен пример фильтрации: исходный набор данных (все города) сравнивается с отфильтрованным списком, в котором остались только города с бюджетом свыше 11 720 тыс. руб.
Кейс 2. Точная фильтрация по году через «Ввод числа»
Рассмотрим вариант, когда требуется применить фильтрацию по точному совпадению числового значения, введённого пользователем. Предположим на графике требуется отразить данные по бюджету в разных городах за конкретный год из периода 2015-2016 гг.
Шаг 1. Добавление виджета
- Добавляем виджет на аналитическую панель аналогично предыдущему примеру.
Шаг 2. Подготовка источника данных для виджета
- Создаем источник данных типа OLAP с переменной «Год» (тип — Целое число).
- Добавляем иерархию на ось фильтров, в формуле нужно задать условие фильтрации элементов иерархии с преобразованием элементов в целое число, оставляя только те, у которых числовое значение имени элемента равно значению параметра переменной «Год».
FILTER([year].[year_h].[year_l].Members,
CInt([year].[year_h].[year_l].CurrentMember.Name)=${Год}
)
Это условие оставит только города с бюджетом равное значению из переменной «Год».
Шаг 3. Настройка виджета «Ввод числа»
- Задаем заголовок, минимальное и максимальное значения, настраиваем шаг изменения «Статический шаг».
- В разделе «Способ применения ввода» выбираем один из двух вариантов: «После нажатия Enter» и «После ввода». Выбор варианта зависит от конкретной задачи: мгновенное применение или отложенное действие после подтверждения. Если необходимо, чтобы фильтр применялся автоматически сразу после выбора значения на ползунке, следует выбрать опцию «После ввода». Этот вариант удобен, когда нужно мгновенно обновить данные без дополнительных действий. Если же требуется применить фильтр только после того, как пользователь введет числовое значение и подтвердит его нажатием клавиши Enter, то лучше выбрать вариант «После нажатия Enter». Этот способ полезен, например, когда нужно избежать частых обновлений данных во время ввода или при работе с точными числовыми параметрами.
- Настраиваем размер шрифта, цвет шрифта, обводки, заливки.
Шаг 4. Настройка обработчика событий в Blockly
В настройках виджета «Ввод числа» переходим в событие «При изменении значения». Добавляем обработчики «Источник OLAP «Муниципальные финансы: 2015 vs 2016» установить значение» и обработчик виджета - «получить начальное значение».
Результат
При указании года в виджете «Ввод числа» график автоматически отображает данные, соответствующие введенному значению.
Кейс 3. Фильтрация данных по диапазону значений
Иногда необходимо отображать данные, попадающие в определенный диапазон (например, зарплаты от 20 000 до 50 000 ₽). Рассмотрим настройку фильтрации с автоматическим обновлением графика при изменении диапазона.
Шаг 1. Подготовка данных
- Создаем источник данных (например, OLAP-куб), где есть информация по регионам и количеству вакансий с указанием зарплат.
- Добавляем две переменные вещественного типа «Зарплата от» (минимальное значение диапазона) и «Зарплата до» (максимальное значение диапазона).
- Настраиваем фильтр регионов, который оставляет только те регионы, где зарплата попадает в выбранный диапазон, по формуле:
FILTER(
[dim_region].[region_hier].[subject].MEMBERS,
([Measures].[zarplata] >= ${зарплата от} OR ${зарплата от} = 0) AND
([Measures].[zarplata] <= ${зарплата до} OR ${зарплата до} = 0)
)
В формуле используется условие
OR ${зарплата от} = 0 , что означает, что при значении 0 фильтр не применяется.
Шаг 2. Настройка ползунка
- Задаем диапазон значений в свойствах виджета (например, от 0 до 1 000 000 ₽).
- Привязываем ползунок к данным в разделе «События» через переменные «Зарплата от» и «Зарплата до», чтобы график обновлялся автоматически при перемещении ползунка.
Результат
Теперь, просто двигая ползунок, вы можете мгновенно видеть, как меняется распределение вакансий по регионам в выбранном диапазоне зарплат. Если установить диапазон от 20 000 до 50 000 ₽ , на останутся только регионы с выбранным диапазоном зарплат.
Кейс 4. Анализ «Что-если» с использованием виджета «Ползунок»
Анализ «Что-если» применяется для прогнозирования изменения ключевых показателей при различных сценариях.
Такой анализ помогает:
- оценить, как скажется рост или сокращение бюджета на финансах городов;
- выявить города, которые окажутся в зоне риска при урезании финансирования;
- смоделировать разные сценарии для планирования.
Шаг 1. Подготовка источника данных
- Создаем источник (например, OLAP-куб) с городами и их бюджетами за год (факт).
- Создаем переменную вещественного типа «Изменение бюджета в %», которая будет принимать значения от -100% до +100%.
- Настраиваем пересчет бюджета по формуле: Бюджет (факт) × (1 + [Изменение бюджета в %] / 100).
Шаг 2. Настраиваем ползунок
- В свойствах виджета в разделе «Значения» задаем диапазон от -100% до +100%.
- В разделе «Ползунок» в области «Полоса прокрутки» можно выделить «Цветовые сегменты» например, красным выделяем отрицательные значения (уменьшение бюджета), зеленым — положительные (рост).
- В разделе «События» привязываем ползунок к данным OLAP-куба через переменную вещественного типа «Изменение бюджета в %» для автоматического обновления.
Результат
Перемещая ползунок, пользователь получает мгновенную визуализацию изменений городских бюджетов. При установке +5% отображается равномерный рост финансирования, а при -10% видны муниципалитеты в зоне риска, выделенные красным цветом.
Кейс 5. Динамический топ-N: Интерактивный рейтинг регионов с настройкой количества отображаемых записей
Виджеты позволяют гибко настраивать глубину анализа данных — вы можете сами выбирать, сколько строк показывать в рейтинге. Это удобно как для быстрого обзора ключевых показателей, так и для детального изучения данных.
Шаг 1. Подготовка источника данных
- Создаем источник (например, OLAP-куб) с информацией о городах и показателями рождаемости.
- Далее создаем переменную «Топ-N» (целочисленную, от 0 до 10), которая будет определять, сколько регионов отображать.
- Настраиваем фильтр для отбора топовых городов по формуле:
TopCount([city].[city_h].[city_l].Members, ${Топ-N},
[Measures].[fact])
Шаг 2. Настраиваем виджет навигации «Ввод числа»
-
В настройках виджета в разделе «Значения» указываем диапазон от 0 до 10. Выбираем способ применения ввода числового значения. При выборе «После нажатия Enter» обновление на графике будет только после подтверждения ввода клавишей Enter в поле ввода числа.
-
В разделе «События» привязываем ползунок к данным OLAP-куба через переменную целого типа «Топ-N» для обновления данных на графике…
Результат
После настройки виджета «Ввод числа» можно быстро переключаться между разными уровнями детализации. Например, выбрав топ-3, на графике увидим только 3 региона с самыми высокими показателями - это помогает избегать перегруженности графика.
Дополнительная настройка: выбор диапазона (от и до)
Если нужно выводить не просто топ-N, а диапазон (например, с 3-го по 7-е место), можно:
- Создать две переменные целочисленного типа отвечающие за «от» и «до», например, «Топ-start» и «Топ-end».
- Использовать формулу в расчетном элементе, которая непосредственно ссылается на созданные переменные «Топ-start» и «Топ-end», чтобы динамически фильтровать данные и отображать только те города, которые попадают в заданный диапазон рейтинга.
IIF(
RANK(
[city].[city_h].CurrentMember,
ORDER(
[city].[city_h].Levels(1).Members,
[Measures].[fact],
BDESC
)
) >= ${Топ-start}
AND RANK(
[city].[city_h].CurrentMember,
ORDER(
[city].[city_h].Levels(1).Members,
[Measures].[fact],
BDESC
)
) <= ${Топ-end},
[Measures].[fact],
NULL
)
Формула проверяет ранг (позицию) каждого региона в общем списке, отсортированном по убыванию показателя рождаемости ([Measures].[fact] ), и возвращает значение только для тех записей, которые попадают в указанный диапазон.
1). RANK([city].[city_h].CurrentMember, ORDER(...))
- Определяет позицию текущего региона в рейтинге (например, 1-е, 2-е, 3-е место и т. д.).
- Сортировка (
ORDER) выполняется по убыванию (BDESC) значения показателя ([Measures].[fact]).
2). >= ${Топ-start} AND <= ${Топ-end}
- Проверяет, попадает ли ранг региона в заданный диапазон.
- Например, если Топ-start = 3, а Топ-end = 7, то будут показаны только регионы, занимающие 3-е, 4-е, 5-е, 6-е и 7-е места.
3). IIF(условие, [Measures].[fact], NULL)
- Если условие выполняется (ранг в диапазоне), возвращается значение показателя.
- Если нет — возвращается
NULL, и запись не отображается.
- В настройках событий виджета выбрать диапазон из источника OLAP и привязать его к переменным «Топ-start» и «Топ-end».
Результат
После настройки диапазона с помощью переменных «от» и «до» вы получаете гибкий инструмент для анализа данных. Вместо того чтобы показывать весь рейтинг целиком, система будет отображать только те города, которые попадают в заданный вами интервал.
Кейс 6. Динамическая подсветка: как выделить диапазон на графике с помощью виджета «Ввода числа»
В этом кейсе мы разберем, как:
Настроить цвет столбцов диаграммы на основе данных из OLAP-куба (например, загружая HEX-коды из атрибутов уровня).
Использовать виджет “Ввод числа”, чтобы подсвечивать данные по заданному диапазону (например, отображать только города с бюджетом от определенного уровня).
Шаг 1. Подготовка источника данных
- Создаем источник данных типа OLAP с переменной «Топ-start» (тип — Целое число).
- Добавляем иерархию (например, «Город») на ось строк.
Шаг 2. Настройка виджета «Ввод числа»
- Задаем заголовок (например, «Фильтр по бюджету»).
- Указываем минимальное и максимальное значение.
- Настраиваем шаг изменения «Статический шаг».
- Проверяем и при необходимости изменяем символ десятичного разделителя (по умолчанию «,» возможно задать любой символ).
- Задаем постфикс “руб”, так как единицей измерения бюджета в нашем случае будет российский рубль.
Шаг 3. Настройка обработчика событий в Blockly
- В виджете «Ввод числа» открываем настройки события «При изменении значения».
- Добавляем обработчики «Источник OLAP с переменной «Топ-start» и связываем с обработчиком виджета «Получить начальное значение».
- Сохраняем изменения.
Шаг 4. Настройка цвета столбцов диаграммы
1.В свойствах столбчатой диаграммы переходим в раздел «Серии» задаем цвет условного форматирования и условие. В нашем примере необходимо выделить города с бюджетом выше введенного значения переменной «Топ-start», поэтому используем условие: [[value]] >= [[$Топ-start]]
где:
[[value]] - значение меры,
>= - оператор сравнения больше или равно,
[[$Топ-start]] - Уникальное имя (значение) переменной источника, где `Топ-start` - название переменной из OLAP-источника или код параметра из источника типа “Реестр”.
Результат
При вводе значения в числовое поле виджета навигации «Ввод числа» диаграмма динамически обновляется, выделяя цветом только те города, где бюджет превышает заданный порог. На изображении ниже представлен пример такого условного форматирования: из исходного набора данных выделены только те города с бюджетом свыше 82 000 тыс. руб.
Кейс 7. Градусник KPI: интерактивный контроль выполнения плана
Интерактивный «градусник» на дашборде позволяет гибко фильтровать данные по уровню выполнения плана, автоматически скрывая нерелевантные показатели. Решение снижает когнитивную нагрузку, упрощает анализ и реализуется в аналитических панелях через кастомные параметры и условное форматирование виджета навигации. Особенно полезно для мониторинга продаж и сравнения эффективности подразделений.
Шаг 1. Настройка виджета «Ползунок»
- Указываем заголовок (например, «Процент выполнения плана»).
- Определяем минимальное и максимальное значение.
- Настраиваем «Статический шаг» изменения.
- Оформляем внешний вид полосы прокрутки ползунка (регулируем толщину, задаем степень скругления углов). Настраиваем условное форматирование для диапазонов: выполнение плана от 0 до 100% и перевыполнение от 100 до 200%.
- Кастомизируем маркер (бегунок): выбираем форму бегунка (круг, прямоугольник, ромб, треугольник в одном из четырех направлений), цвет заливки и параметры обводки.
Шаг 3. Подготовка источника данных
- Создаем источник данных типа OLAP с переменными «Процент-start» (тип — Вещественное число).
- Добавляем иерархию (например, «Отдел») на ось строк.
- Настраиваем фильтр по условию отфильтровывать данные больше переменной «Процент-start»
Шаг 4. Настройка обработчика событий в Blockly
- В виджете «Ползунок» открываем настройки события «При изменении значения».
- Добавляем обработчики «Источник OLAP переменной» установить значение» и обработчик виджета «Процент-start» - получить значение.
- Сохраняем изменения.
Шаг 5. Кастомизация ширины столбцов на графике
При отображении нескольких рядов данных («Факт» и «План») в столбчатой диаграмме стандартное наложение столбцов может приводить к перекрытию значений. В нашем решении (подробнее см. кейс) мы реализовали кастомизацию через обработчик события столбчатой диаграммы «Выполнить код», где задается разная ширина столбцов.
$widget.down('#chart').on('beforecreatechart', (pie, chartConfig) => {
// Включаем группировку столбцов
chartConfig.clustered = true;
// Устанавливаем отступ между группами столбцов (в процентах)
chartConfig.columnSpacing = 20; // 20% отступ между группами
// Устанавливаем отступ внутри группы столбцов
chartConfig.columnWidth = 0.8; // 80% от доступной ширины
chartConfig.graphs.map((graph, i) => {
if (i === 0) {
// Первый столбец шире
graph.columnWidth = 0.6;
} else {
graph.columnWidth = 0.4;
}
});
});
Такой подход сохраняет компактность визуализации одновременно устраняя проблему перекрытия данных и улучшая читаемость показателей.
Результат
При перемещении ползунка диаграмма мгновенно обновляет данные, отображая только те отделы, где процент выполнения плана соответствует заданному уровню процента. На рисунке ниже представлен пример фильтрации: исходный набор данных (все отделы) сравнивается с отфильтрованным списком, где остались только отделы, перевыполнившие план.
