- Подготовка данных
1.1. Постановка задачи и анализ датасета
1.2. Создание физической модели
1.3. Загрузка данных
1.4. Создание логической модели - Анализ данных
2.1. Построение OLAP-представления - Презентация
3.1. Контейнеры, виджеты, настройка UI
3.2. События, фильтры
В предыдущей статье мы создали аналитическую панель с виджетами, отображающими бизнес-данные. В последней статье цикла настроим фильтры для обеспечения интерактивности дашборда.
К этому моменту мы уже разместили фильтры на аналитической панели: фильтр по месяцу с типом “Выпадающий список”, фильтр по сегменту клиентов с типом “Иерархический список” и фильтр по категории товара с типом “Переключатель”.
В рамках этой статьи :
- свяжем фильтры с источниками данных
- настроим связи фильтров с виджетами
- настроим кроссфильтрацию виджетов между собой
- настроим внешний вид фильтров для соответствия макету
Шаг 1. Настройка источников данных у фильтров
1. Фильтр по месяцу (выпадающий список)
Представляет собой фильтр с выпадающим списком из месяцев. У нас уже есть источник “Динамика продаж и прибыли”, по строкам которого располагаются месяцы:
Можем этот источник переиспользовать. Перетащим его в область фильтра:
2. Фильтр по сегменту клиентов (список с множественным выбором)
Представляет собой список с множественным выбором сегментов клиентов. В данном случае у нас тоже уже есть подходящий источник, который содержит в качестве измерения сегменты клиентов. Но в данном случае пойдем другим путем и рассмотрим еще один тип источников “Иерархия OLAP”. Этот тип источника предназначен исключительно для использования в виджетах навигации (списках). Данный источник не используется в остальных виджетах, так как в нем не используются числовые показатели (меры).
- На вкладке аналитической панели “Данные” создайте новый источник с типом “Иерархия OLAP”
- В открывшемся окне заполните поля:
Заголовок: “Сегменты клиентов”
Куб: выберете куб “superStoreUS”
Иерархия: выберете из выпадающего списка “Сегмент клиента”
Корневой элемент: “Сегмент клиента”
- Сохраните источник
- Перенесите его в область фильтра “Иерархический список”
3. Фильтр по категории товара (переключатель)
Для этого источника повторим процедуру - создадим отдельный источник с типом “Иерархия OLAP”
- Создайте источник с типом “Иерархия OLAP” и заполните поля, как на скриншоте:
- Сохраните источник
- Перенесите его в область фильтра “Переключатель”
Шаг 2. Настройка связей фильтров с виджетами
В AlphaBI взаимодействия виджетов реализуется с помощью событий, которые настраиваются для конкретных виджетов через передачу значения одного виджета в переменную источника другого виджета.
Т.е. чтобы связать виджет-фильтр с другим виджетом, необходимо:
- в источнике другого виджета создать переменную
- в настройках виджета-фильтра задать событие, которое будет при выборе элемента в фильтре передавать значение этого элемента в переменную, созданную на предыдущем шаге.
Если виджеты имеют один и тот же источник данных, то они будут связаны автоматически, т.е. при проваливании в определенный элемент в одном виджете, аналогичное событие произойдет во всех других виджетах.
Соответственно – настраивать связь между виджетами необходимо будет только в случае, если у них будут разные источники.
Пошагово свяжем три фильтра на аналитической панели со всеми остальными виджетами. И начнем с фильтра по месяцу.
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. Настройка кроссфильтрации виджетов между собой
В системе возможно настроить связи не только между фильтром и виджетом, но и между виджетом и виджетом. Рассмотрим пример кроссфильтрации, в которой круговая диаграмма “Продажи по сегментам клиентов” и линейный график “Динамика продаж и прибыли” будут выступать в качестве фильтров. Т.е. при клике на сегмент этих виджетов связанные с ними виджеты будут отфильтровываться по значению выбранного сегмента. Алгоритм настройки кроссфильтрации аналогичен рассмотренному выше. Круговая диаграмма будет фильтровать виджеты по сегментам клиентов, а линейный график по месяцам и дням в соответствии с выбранной точкой на этих виджетах.
Все необходимые переменные в источниках уже созданы на предыдущем шаге. Осталось настроить события в этих двух виджетах.
- Для виджета “Продажи по сегментам клиентов” настройте событие “При выборе элемента” по следующей схеме:
- Для виджета “Динамика продаж и прибыли” настройте событие “При выборе элемента” по следующей схеме:
- Сохраните аналитическую панель и проверьте корректность настроенных фильтров.
Шаг 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 завершён. Теперь вы знаете, как собрать отчет от подключения к источнику, обработки данных, построения кубов до визуализации данных, и готовы к созданию своих собственных дашбордов!