Гайд. Часть 3.2. События, фильтры

В данном цикле статей пошагово рассмотрим создание аналитической панели (дашборда) в BI-системе Alpha BI: от подключения к источнику до готовой панели. В каждой статье цикла будет описан этап создания дашборда:
  1. Подготовка данных
    1.1. Постановка задачи и анализ датасета
    1.2. Создание физической модели
    1.3. Загрузка данных
    1.4. Создание логической модели
  2. Анализ данных
    2.1. Построение OLAP-представления
  3. Презентация
    3.1. Контейнеры, виджеты, настройка UI
    3.2. События, фильтры

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

К этому моменту мы уже разместили фильтры на аналитической панели: фильтр по месяцу с типом “Выпадающий список”, фильтр по сегменту клиентов с типом “Иерархический список” и фильтр по категории товара с типом “Переключатель”.

В рамках этой статьи :

  1. свяжем фильтры с источниками данных
  2. настроим связи фильтров с виджетами
  3. настроим кроссфильтрацию виджетов между собой
  4. настроим внешний вид фильтров для соответствия макету

Шаг 1. Настройка источников данных у фильтров

1. Фильтр по месяцу (выпадающий список)

Представляет собой фильтр с выпадающим списком из месяцев. У нас уже есть источник “Динамика продаж и прибыли”, по строкам которого располагаются месяцы:

Можем этот источник переиспользовать. Перетащим его в область фильтра:

2. Фильтр по сегменту клиентов (список с множественным выбором)

Представляет собой список с множественным выбором сегментов клиентов. В данном случае у нас тоже уже есть подходящий источник, который содержит в качестве измерения сегменты клиентов. Но в данном случае пойдем другим путем и рассмотрим еще один тип источников “Иерархия OLAP”. Этот тип источника предназначен исключительно для использования в виджетах навигации (списках). Данный источник не используется в остальных виджетах, так как в нем не используются числовые показатели (меры).

  • На вкладке аналитической панели “Данные” создайте новый источник с типом “Иерархия OLAP”

  • В открывшемся окне заполните поля:

   Заголовок: “Сегменты клиентов”
   Куб: выберете куб “superStoreUS”
   Иерархия: выберете из выпадающего списка “Сегмент клиента”
   Корневой элемент: “Сегмент клиента”

  • Сохраните источник
  • Перенесите его в область фильтра “Иерархический список”

3. Фильтр по категории товара (переключатель)

Для этого источника повторим процедуру - создадим отдельный источник с типом “Иерархия OLAP”

  • Создайте источник с типом “Иерархия OLAP” и заполните поля, как на скриншоте:

  • Сохраните источник
  • Перенесите его в область фильтра “Переключатель”

Шаг 2. Настройка связей фильтров с виджетами

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

Т.е. чтобы связать виджет-фильтр с другим виджетом, необходимо:

  1. в источнике другого виджета создать переменную
  2. в настройках виджета-фильтра задать событие, которое будет при выборе элемента в фильтре передавать значение этого элемента в переменную, созданную на предыдущем шаге.

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

Соответственно – настраивать связь между виджетами необходимо будет только в случае, если у них будут разные источники.

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

1. Фильтр по месяцу (выпадающий список)

Фильтр по месяцу свяжем со всеми виджетами кроме виджета “Динамика продаж и прибыли”. Все эти виджеты построены на 4-х источниках:

  • “Прибыль и продажи по менеджерам/округам”,
  • “Заказанные товары по категориям”,
  • “Продажи по сегментам клиентов”,
  • “Прибыль корпоративного сегмента по региону”.

Во всех этих источниках необходимо создать переменные “Месяц”. Для создания переменной выполните следующую последовательность действий:

  • Перейдите в источник “Прибыль и продажи по менеджерам/округам” на вкладке “Данные”.
  • В источнике перейдите на вкладку “Запрос”.
  • Нажмите на напротив пункта “Переменные”.
  • В открывшемся окне заполните следующие поля:

   Наименование переменной: “Месяц”,
   Тип значения: “Элемент иерархии”,
   Иерархия: “Дата заказа.Период”
   Значение: выберете элемент “Июнь”, раскрыв элемент “2015 год”, в качестве элемента по умолчанию

  • Перенесите переменную “Месяц” в ось “Фильтры”

  • Ранее в статье, посвященной построению OLAP-представлений, были созданы в рассматриваемом источнике расчетные элементы “Продажи прошлого месяца” и “Прибыль накоп с нач года”, которые рассчитывались относительно фиксированного элемента (февраль 2015 года). Теперь с введением переменной, значение которой будет меняться в зависимости от выбранного пользователем значения в фильтре, можем эту переменную использовать в обеих формулах, переписав их следующим образом:

Формула для расчетной меры “Продажи прошлого месяца”:

sum(
  ParallelPeriod(
    [order_date].[period_ymd_hier].[month],
    1,
    ${Месяц}
  ),
  [Measures].[sales]
)

Формула для расчетной меры “Прибыль накоп с нач года”:

SUM(
  PeriodsToDate(
    [order_date].[period_ymd_hier].DefaultMember,
    ${Месяц}
  ),
  [Measures].[profit]
)

В обеих формулах мы заменили элемент [order_date].[period_ymd_hier].[2015].[2] на переменную ${Месяц}.

  • Сохраните источник.

Следующим шагом необходимо настроить событие у фильтра, которое будет передавать значение в переменную “Месяц” источника “Прибыль и продажи по менеджерам/округам”. Для настройки события выполните следующую последовательность действий:

  • Перейдите в настройки виджета-фильтра с выпадающим списком.

  • В окне свойств задайте заголовок фильтра “Месяц”.
  • Перейдите в подраздел «События»
  • Напротив поля “При выборе элемента” нажмите кнопку . Откроется окно обработчика событий:
  • На вкладке “Blockly” настройка событий осуществляется с помощью специальных блоков. В меню слева раскройте элемент “Источники”, выберете источник “Прибыль и продажи по менеджерам/округам” и перетащите на схему события первый блок.

В блоке выберете переменную “Месяц”.

  • Далее в меню слева найдите и нажмите на пункт “Элемент”. Выберете блок

Перенесите его на схему, присоединив к первому блоку справа. В блоке выберете элемент “Значение”

  • Сохраните событие, нажав на кнопку «Ок».
  • Проверьте работу фильтра. Выберете в нем любой месяц и убедитесь, что виджет-таблица “Прибыль и продажи (менеджер/округ)” меняется соответствующим образом.

  • Теперь по аналогии создайте переменные “Месяц” в трех оставшихся источниках: “Заказанные товары по категориям”, “Продажи по сегментам клиентов”, “Прибыль корпоративного сегмента по региону”. В качестве Значения в каждой из них выберете элемент “2015 год”.

  • Перенесите переменную в каждом источнике в ось “Фильтры”.
  • Донастройте событие фильтра, добавив в него блоки с упомянутыми источниками и соединив их между собой следующим образом:

  • Сохраните событие и проверьте, что фильтр работает ожидаемым образом.

2. Фильтр по сегменту клиентов (список с множественным выбором)

Фильтр по сегменту клиентов свяжем с виджетами: “Динамика продаж и прибыли”, “Прибыль и продажи (менеджер/округ)”, “Заказанные товары по категориям”.

  • Во всех источниках этих виджетов создайте переменную “Сегмент” и перенесите ее в ось “Фильтры”.

  • Перейдите в настройки фильтра и задайте ему заголовок “Сегмент”.
  • В настройках фильтра перейдите в подраздел “События” и настройте событие “При выборе элемента” следующим образом:

  • Сохраните событие и проверьте, что фильтр работает ожидаемым образом.

3. Фильтр по категории товара (переключатель)

Фильтр по категории товара свяжем со всеми виджетами-диаграммами и виджетами-таблицами.

  • Во всех источниках этих виджетов создайте переменную “Категория товара” и перенесите ее в ось “Фильтры”, кроме источника “Заказанные товары по категориям”. В этом источнике иерархия “Категория товара”, на основе которой создается переменная, уже содержится в структуре OLAP-представления и из-за этого система не даст добавить переменную в ось “Фильтры”. Поэтому в данном случае созданную переменную необходимо перенести в ось “Строки”, предварительно удалив оттуда иерархию “Категория товара”.

  • Перейдите в настройки фильтра и задайте ему заголовок “Выбор категории”.
  • В настройках фильтра перейдите в подраздел “События” и настройте событие “При выборе элемента” следующим образом:

  • Сохраните событие и проверьте, что фильтр работает ожидаемым образом.

Шаг 3. Настройка кроссфильтрации виджетов между собой

В системе возможно настроить связи не только между фильтром и виджетом, но и между виджетом и виджетом. Рассмотрим пример кроссфильтрации, в которой круговая диаграмма “Продажи по сегментам клиентов” и линейный график “Динамика продаж и прибыли” будут выступать в качестве фильтров. Т.е. при клике на сегмент этих виджетов связанные с ними виджеты будут отфильтровываться по значению выбранного сегмента. Алгоритм настройки кроссфильтрации аналогичен рассмотренному выше. Круговая диаграмма будет фильтровать виджеты по сегментам клиентов, а линейный график по месяцам и дням в соответствии с выбранной точкой на этих виджетах.

Все необходимые переменные в источниках уже созданы на предыдущем шаге. Осталось настроить события в этих двух виджетах.

  1. Для виджета “Продажи по сегментам клиентов” настройте событие “При выборе элемента” по следующей схеме:

  1. Для виджета “Динамика продаж и прибыли” настройте событие “При выборе элемента” по следующей схеме:

  1. Сохраните аналитическую панель и проверьте корректность настроенных фильтров.

Шаг 4. Настройка внешнего вида фильтров для соответствия макету

На данном этапе настройка фильтров на аналитической панели завершена. Остался последний штрих - оформить фильтры согласно макету. А именно, покрасить фильтры в желтый цвет, заголовки разместить по центру, отформатировать их. У фильтра по категории товара кнопки центрировать, увеличить в размере и окрасить в черный цвет активную кнопку.

1. Фильтр по месяцу

  • Перейдите в настройки виджета и укажите для фона заголовка и виджета желтый цвет “#edeaa5

  • В подразделе CSS вставьте следующий код:
{{id}} .x-panel-header-title-default {
  font-size: 15px;
  font-weight: 700;
  display: flex !important;
  justify-content: center;
}

{{id}} {
  border-radius: 4px;
  border: 1px solid gray !important;
}

{{id}} .x-header {
    height: 30px;
}

{{id}} .x-panel-bodyWrap {
  background-color: #edeaa5;
}

{{id}} .x-form-text-default {
  background-color: #edeaa5;
}

Здесь задается размер заголовка и его выравнивание по центру. Устанавливаются границы виджета с указанием радиуса скругления углов, толщины, цвета и типа линии. Фон виджета окрашивается в желтый цвет (настройка фона виджета в свойствах окрашивает виджет не целиком)

2. Фильтр по сегменту клиента

  • Перейдите в настройки виджета и укажите для фона заголовка и виджета желтый цвет “#edeaa5
  • В подразделе CSS вставьте следующий код:
{{id}} .x-panel-header-title-default {
  font-size: 15px;
  font-weight: 700;
  display: flex !important;
  justify-content: center;
}

{{id}} {
  border-radius: 4px;
  border: 1px solid gray !important;
}

{{id}} .x-header {
  height: 30px;
}

{{id}} .x-toolbar-default {
  background-color: #edeaa5;
  border: 1px solid #edeaa5 !important;
}

{{id}} .x-panel-bodyWrap {
  background-color: #edeaa5;
}

{{id}} .x-grid-item {
  background-color: #edeaa5;
}

{{id}} .x-tree-checkbox {
  color: black !important;
}

{{id}} .x-tree-view {
  background-color: #edeaa5;
}

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

3. Фильтр по категории товара

  • Перейдите в настройки виджета и укажите для фона заголовка и виджета желтый цвет “#edeaa5
  • В подразделе CSS вставьте следующий код:
{{id}} .x-panel-header-title-default {
  font-size: 15px;
  font-weight: 700;
  display: flex !important;
  justify-content: center;
}

{{id}} {
  border-radius: 4px;
  border: 1px solid gray !important;
}

{{id}} .x-header {
  height: 30px;
}

{{id}} .x-panel-bodyWrap {
  background-color: #edeaa5;
}

{{id}} .x-segmented-button {
  display: flex !important;
  justify-content: space-around;
}

{{id}} .x-btn-plain-button-small {
  width: 32%;
  height: 30px !important;
}

{{id}} .x-btn.x-btn-pressed.x-btn-plain-button-small {
  background-color: black;
}

{{id}} .x-btn-inner-plain-button-small {
  color: #646d82;
}

{{id}} .x-btn-button {
  border: 1px solid black !important;
}

Здесь помимо настроек, общих с предыдущими виджетами, дополнительно настраивается внешний вид кнопок фильтра

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

На этом ознакомительный гайд по работе в системе AlphaBI завершён. Теперь вы знаете, как собрать отчет от подключения к источнику, обработки данных, построения кубов до визуализации данных, и готовы к созданию своих собственных дашбордов!