Гайд. Часть 3.1. Контейнеры, виджеты, настройка UI

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

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

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

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

В дашбордах предусмотрено добавление и перемещение контейнеров и виджетов с помощью технологии drag&drop. Действия совершаемые с контейнерами и с виджетами можно отменить, либо повторить, можно просмотреть историю действий и перейти на любой хистори-пойнт.

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

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

Виджет - объект, который предназначен для отображения бизнес-данных на аналитической панели.

В Alpha BI виджеты подразделяются на 3 группы: “Виджеты”, “Диаграммы” и “Навигация”.

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

image
image296×445 56.7 KB

В группу “Виджеты” входят OLAP-представление для отображения информации в табличном виде и HTML-виджет для отображения информации в уникальном формате с помощью технологий HTML, CSS и Javascript:

image
image210×133 14 KB

Виджеты “Навигации” предназначены для выполнения различных действий и добавления интерактивности на аналитической панели:

image
image218×341 41.1 KB

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

В прошлой статье мы уже создали аналитическую панель “SuperStoreUS”. Продолжим работать с ней.

Верстка дашборда

  1. Начнем с задания верстки дашборда. При создании аналитической панели рабочая область уже включает корневой контейнер, который будет содержать все элементы панели. На скриншоте ниже обозначен желтым цветом. Перейдите по кнопке image в настройки корневого контейнера и задайте свойство “Размещение элементов” вертикально.

image
image670×446 32.2 KB

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

image
image891×359 26.8 KB

В свойствах контейнеров задайте заголовки: “Контейнер 1” для верхнего и “Контейнер 2” для нижнего.

image
image535×490 28 KB

  1. В контейнер “Контейнер 2” добавьте два виджета “OLAP-представление”

image
image887×352 33.4 KB

Есть возможность перемещать виджеты и контейнеры в рамках одного контейнера и из одного контейнера в другой с помощью drag-and-drop. Для перемещения виджетов выделите пиктограмму image в наименовании виджета/контейнера и, удерживая ее, переместите виджет в нужное положение или в необходимый контейнер.

  1. Внутрь контейнера “Контейнер 1” переместите еще два контейнера и одну столбчатую диаграмму. Контейнерам задайте заголовки: “Контейнер 3” - для левого и “Контейнер 4” - правого.

image
image885×355 45.8 KB

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

image
image884×367 40 KB

  1. В контейнере “Контейнер 4” задайте в настройках размещение элементов вертикально. Затем добавьте в него навигационный виджет “Переключатель” и еще один контейнер с заголовком “Контейнер 5”.

image
image886×359 48.2 KB

  1. И в последнюю очередь добавляем в контейнер “Контейнер 5” две диаграммы: “Круговую диаграмму” и “Столбчатую диаграмму”.

image
image885×354 51.9 KB

  1. Зададим относительные размеры размещенных на аналитическую панель объектов. Для этого в настройках как виджетов, так и контейнеров есть свойство “Доля”. Настройте это свойство согласно следующей таблице:
Виджет/контейнер Доля
Контейнер 1 3
  Контейнер 3 1
    Выпадающий список 1
    Иерархический список 3
  Контейнер 4 4
    Переключатель 1
    Контейнер 5 3
       Круговая диаграмма 1
       Столбчатая диаграмма 1
  Столбчатая диаграмма 2
Линейная диаграмма 2
Контейнер 2 2
  OLAP-представление 1
  OLAP-представление 1

В итоге сверстанный дашборд будет иметь следующий вид:

image
image884×425 31.4 KB

  1. Теперь перенесите источники со вкладки “Данные”, созданные в рамках предыдущей статьи, в область каждого виджета:

image
image1915×773 103 KB

Другой способ выбора источника для виджета - перейти в настройки виджета по кнопке image и в окне свойств выбрать источник из выпадающего списка:

image
image684×625 21.3 KB

Настройка виджетов

Зададим настройки для каждого виджета, настроив их внешний вид

Виджет “Динамика продаж и прибыли”

Начнем с линейной диаграммы. Для этого перейдем в окно настроек виджета по кнопке image.

Общие настройки

  • Задайте заголовок “Динамика продаж и прибыли”
  • Задайте цвет фона заголовка “#ffffff”

image
image566×514 39.7 KB

Настройка осей

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

image
image666×369 25.4 KB

  • В разделе “Заголовок” заполните параметры:

   Text: “Продажи”
   Цвет: “#be593b”
   Размер: 11
   Поворот: 270

image
image746×279 17 KB

  • В разделе “Текст” заполните параметры:

   Цвет: “#be593b”
   Размер: 13

image
image749×279 14.9 KB

  • В разделе “Сетка” укажите прозрачность 0,05. Выключите дополнительную сетку

image
image747×375 20.9 KB

  • В разделе “Обводка” для прозрачности и толщины задайте нулевые значения

image
image746×185 11.3 KB

  • По хлебным крошкам вернитесь в раздел “Оси” и по кнопке image создайте вторую ось.
  • Для второй оси задайте наименование “Ось Прибыль”
  • Активируйте опцию “Сокращать значения”
  • В разделе “Заголовок” заполните параметры:

   Text: “Прибыль”
   Цвет: “#181482”
   Размер: 11
   Поворот: 270
   Смещение: 0

  • В разделе “Текст” заполните параметры:

   Цвет: “#181482”
   Размер: 13

  • В разделе “Сетка” укажите прозрачность 0,05. Выключите дополнительную сетку
  • В разделе “Обводка” для прозрачности и толщины задайте нулевые значения

Настройки серий

  • Перейдите в раздел “Серии”. Создадим две серии: “Продажи” и “Прибыль”. По кнопке image создайте первую серию и двойным кликом откройте окно ее настроек.
  • В разделе “Основное” задайте:

   Заголовок: “Продажи”
   Поле источника: “Продажи”
   Тип серии: “Линия”

image
image763×303 24.9 KB

  • В разделе “Значения” укажите в качестве шаблона подписей - [[value]] и положение “Отображать снизу”

image
image750×288 20.4 KB

  • Задайте прозрачный фон, установив значение ползунка в ноль

image
image746×133 6.62 KB

  • Укажите цвет обводки линии графика “#be593b”

image
image745×181 11.7 KB

  • Установите тип маркета “Круг” с цветом “#be593b” и размером “5”.

image
image740×380 27.1 KB

  • Добавьте вторую серию с заголовком “Прибыль”, полем источника “Прибыль” и типом серии “Линия”
  • В разделе “Значения” укажите в качестве шаблона подписей - [[value]]
  • Задайте прозрачный фон, установив значение ползунка в ноль
  • Укажите цвет обводки линии графика “#181482”
  • Установите тип маркера “Круг” с цветом “#181482” и размером “5”.

Настройка легенды

  • Перейдите в раздел “Легенда”.
  • Измените положение легенды на “Отображать сверху”, цвет на серый ”#a7ada9” и размер на “14”
  • Отключите опцию “Автоподбор” для отступов
  • Установите значения отступов:

   Сверху: -13
   Снизу: 0
   Слева: 13
   Справа: 20

image
image750×621 36.7 KB

Настройка категории

  • Перейдите в меню “Категории”
  • В разделе “Текст” измените цвет на “#a7ada9”

image
image756×334 18.7 KB

  • Для сетки и обводки задайте толщину, равной нулю

image
image747×377 21.6 KB

Настройка UI с помощью CSS

  • Для настройки заголовка и границ виджета воспользуемся разделом “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;
}

Здесь задается размер заголовка и его выравнивание по центру. А также устанавливаются границы виджета с указанием радиуса скругления углов, толщины, цвета и типа линии.

Итоговый вид виджета:

image
image898×130 19.9 KB

Виджет “Продажи по сегментам клиентов”

Перейдем к настройке второго виджета с круговой диаграммой.

Общие настройки

  • Задайте заголовок “Продажи по сегментам клиентов”
  • В разделе “Данные” выберете показатель “Продажи, тыс ₽”
  • Задайте цвет фона заголовка “#ffffff”

Настройка цветов

  • Перейдите в раздел “Цвета”
  • Добавьте 4 строки и укажите следующие цвета: “#317fd2”, “#1a1684”, “#bf5b3b”, “#501157”

680×214 8.05 KB

Настройка легенды

  • Перейдите в раздел “Легенда”
  • Измените положение легенды на “Отображать справа”
  • Установите цвет на “#a7ada9”
  • Отключите автоподбор отступов
  • Установите значения отступов:

   Сверху: 0
   Снизу: 0
   Слева: 0
   Справа: 5

Настройка надписей

  • Перейдите в раздел “Надписи”
  • Задайте шаблон для текста надписей: [[percents]]%
  • Установите радиус отступов в значение “1”.

Настройка UI с помощью CSS

  • Пропишите следующие 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;
}

Итоговый вид виджета:

539×278 8.66 KB

Виджет “Прибыль корпоративного сегмента по региону”

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

Общие настройки

  • Задайте заголовок “Прибыль корпоративного сегмента по региону”
  • Задайте цвет фона заголовка “#ffffff”

Настройка серий

  • Перейдите в раздел “Серии”. По кнопке создайте серию и двойным кликом откройте окно ее настроек.
  • В разделе “Основное” задайте:

   Заголовок: “Прибыль”
   Поле источника: “Прибыль, тыс ₽”
   Тип серии: “Столбец”

  • Для значений задайте:

   Шаблон: [[value]]
   Цвет: “#ffffff”
   Положение: “Отображать слева”

  • Для фона задайте синий цвет: “#317fd2”
  • Для обводки задайте нулевую толщину

Настройка легенды

  • Перейдите в раздел “Легенда”
  • Отключите отображение легенды

Настройка оси

  • Перейдите в раздел “Оси”
  • В подразделе “Текст” отключите опцию “Включить”
  • Для сетки задайте нулевую толщину
  • Отключите дополнительную сетку
  • Для обводки задайте нулевую толщину

Настройка объема

  • Перейдите в раздел “Объем”
  • Активируйте опцию “Повернуть”

Настройка категорий

  • Перейдите в раздел “Категории”
  • Установите положение “Отображать слева”
  • Для текста меток задайте серый цвет “#a7ada9”
  • Для сетки и обводки задайте нулевую толщину

Настройка UI с помощью CSS

  • Пропишите следующие 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;
}

Итоговый вид виджета:

540×277 3.58 KB

Виджет “Прибыль по сегментам клиентов”

Настроим четвертый виджет со столбчатой диаграммой

Общие настройки

  • Задайте заголовок “Прибыль по сегментам клиентов”
  • Задайте цвет фона заголовка “#ffffff”

Настройка серий

  • Перейдите в раздел “Серии”. По кнопке создайте серию и двойным кликом откройте окно ее настроек.
  • В разделе “Основное” задайте:

   Заголовок: “Прибыль”
   Поле источника: “Прибыль, тыс ₽”
   Тип серии: “Столбец”

  • Для значений задайте:

   Шаблон: [[value]]
   Цвет: “#000000”
   Положение: “Отображать слева”

  • Для обводки задайте нулевую толщину
  • Задайте условное раскрашивание столбцов. Для этого раскройте секцию “Условное раскрашивание” и выберете опцию “Включить”
  • Нажмите на кнопку “Добавить условие”. В созданной строке укажите цвет “#317fd2” и условие [[text]]=='Corporate'.
  • Повторите это действие для еще трех условий:

   Цвет: “#1a1684”, условие: [[text]]=='Home Office'
   Цвет: “#bf5b3b”, условие: [[text]]=='Consumer'
   Цвет: “#501157”, условие: [[text]]=='Small Business'

653×305 13.6 KB

Настройка легенды

  • Перейдите в раздел “Легенда”
  • Отключите отображение легенды

Настройка оси

  • Перейдите в раздел “Оси”
  • В подразделе “Текст” отключите опцию “Включить”
  • Для сетки задайте нулевую толщину
  • Отключите дополнительную сетку
  • Для обводки задайте нулевую толщину

Настройка объема

  • Перейдите в раздел “Объем”
  • Активируйте опцию “Повернуть”

Настройка категорий

  • Перейдите в раздел “Категории”
  • Установите положение “Отображать слева”
  • Для текста меток задайте серый цвет “#a7ada9”
  • Для сетки и обводки задайте нулевую толщину

Настройка UI с помощью CSS

  • Пропишите следующие 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;
}

Итоговый вид виджета:

550×382 4.43 KB

Виджет “Прибыль и продажи (менеджер/округ)”

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

Общие настройки

  • Задайте заголовок “Прибыль и продажи (менеджер/округ)”
  • Задайте цвет фона заголовка “#ffffff”

Настройка внешнего вида

  • Закрасим шапку таблицы в зеленый цвет. Для этого перейдите на вкладку “Данные” и откройте источник “Прибыль и продажи по менеджерам/округам”.
  • В источнике перейдите на вкладку “Стили”. В разделе “Столбцы” укажите цвет фона “#a2e3b4”.

1326×371 48.9 KB

  • Строки с итогами выделим жирным начертанием. Для этого воспользуемся функционалом условного форматирования.
  • Перейдите на вкладку “Запрос” источника. Нажмите на кнопку рядом с пунктом “Условное форматирование”. В открывшемся окне заполните поле “Наименование”. В поле “Иерархия” выберете иерархию “Менеджер/Регион”.
    879×271 12.5 KB
  • Откройте поле “Элемент” по кнопке и выберете элементы иерархии, которые хотите выделить жирным начертанием. Нажмите “Выбрать”.

610×431 9.44 KB

  • Перейдите на вкладку “Стили” и выберете жирное начертание для элементов и ячеек. Нажмите “Применить”.

494×606 15 KB

  • В итоге таблица примет вид:

1320×356 65.6 KB

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

Включение дополнительных функций

  • В настройках виджета добавьте дополнительные функции для таблиц: возможность экспорта в Excel и возможность переключить таблицу на плоское табличное представление. Для этого в настройках в разделе “Функции” активируйте опции “Экспорт в Excel” и “Отображается” для свойства “Табличное представление Drill down детализации”.

663×431 10.6 KB

Настройка UI с помощью CSS

  • Пропишите следующие 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;
}

Итоговый вид виджета:

953×255 8.89 KB

Виджет “Заказанные товары по категориям”

Настроим визуальное оформления второй таблицы.

Общие настройки

  • Задайте заголовок “Заказанные товары по категориям”
  • Задайте цвет фона заголовка “#ffffff”

Настройка внешнего вида

  • Закрасим шапку таблицы в зеленый цвет. Для этого перейдите на вкладку “Данные” и откройте источник “Заказанные товары по категориям”.

  • В источнике перейдите на вкладку “Стили”. В разделе “Столбцы” укажите цвет фона “#a2e3b4”.

  • Строки с итогами выделим жирным начертанием. Для этого воспользуемся функционалом условного форматирования.

  • Перейдите на вкладку “Запрос” источника. Нажмите на кнопку рядом с пунктом “Условное форматирование”. В открывшемся окне заполните поле “Наименование” (“Всего”). В поле “Иерархия” выберете иерархию “Товар”.

  • Откройте поле “Элемент” по кнопке и выберете элементы иерархии, которые хотите выделить жирным начертанием. Нажмите “Выбрать”.

294×194 4.22 KB

  • Перейдите на вкладку “Стили” и выберете жирное начертание для элементов и ячеек. Нажмите “Применить”.
  • В итоге таблица примет вид:

805×223 6.55 KB

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

Включение дополнительных функций

  • В настройках виджета добавьте дополнительные функции для таблиц: возможность экспорта в Excel и возможность переключить таблицу на плоское табличное представление. Для этого в настройках в разделе “Функции” активируйте опции “Экспорт в Excel” и “Отображается” для свойства “Табличное представление Drill down детализации”.

Настройка UI с помощью CSS

  • Пропишите следующие 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;
}

Итоговый вид виджета:

954×252 11.1 KB

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