Пирог и Пончик

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

Блоки конструктора

Логика работы конструктора для данного дэша представлена в расширенном руководстве пользователя.

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

Максимальное число сегментов

Для дэшей типов “Пончик” и “Пирог” возможно объединение части сегментов в один блок. Для этого нужно:

Зайти в режим редактирования дэша и открыть конструктор;
Настроить число именованных сегментов в поле “Максимальное число сегментов”. Например, если указать в поле 10 сегментов, то на дэше будет 10 подписанных сегментов и еще один сегмент, объединяющий все остальные.
По умолчанию обобщающий сегмент называется “Прочее”, но его можно переименовать в поле “Название блока”Прочее”“.
Цвет блока можно поменять в одноименном пункте. Выбрать нужны оттенок можно в палитре или из списка предложенных цветов, а также, указав код цвета по системе Hex или RGBA.

Паллета цветов

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

Для добавление цвета в паллету цветов необходимо нажать кнопку “Добавить цвет” и выбрать цвет для палитры:

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

к сведению

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

Ниже представлен вариант отображения дэша “Пирог” с указанной палитрой цветов:

JSON-конфигурация

Ключи title (глава 1.2.1), description (глава 1.2.2), frame (глава 1.2.3), bgImage работают аналогично описанию в руководстве по конфигурации дэшлетов в соответствующих блоках.

Далее представлена таблица ключей, поддерживаемых дэшами “Пирог” и “Пончик”.

dataSource

Опции koob, dimensions, measures, limit, sortBy, xAxis, yAxis и filters из секции dataSource подробно описаны в руководстве по конфигурации дэшлетов (глава 1.2.4).

Название ключа	Возможные значения	Описание
title	Строка, LPE-выражение	Указание заголовка для показателя, отображаемого в легенде и всплывающей подсказке (если редактируется показатель, лежащий на оси Y), либо изменение подписи показателя на оси (если редактируется показатель, лежащий на оси Х)
color	Строка	Указание цвета для показателя. Работает только для показателей, лежащих на оси Y. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.)
format	Строка	Отображение значения в тултипе и в подписях на графике в соответствии с указанным форматом. Указывается для фактов либо для размерностей, лежащих на оси Y. Все варианты форматов описаны в руководстве по конфигурации дэшлетов

Правила указания данных стилей представлены в руководстве по конфигурации дэшлетов (глава 1.2.4).

AlwaysLast - Независимо от включенной сортировки набора данных показатель будет отображаться последним:

"dataSource":{
    "koob":"ch.max_example",
    "style":{
        "category":{
            "Специалисты":{
                        "options":[
                                "AlwaysLast",
                        ],
            },
        },
    },
}

display

Название ключа	Возможные значения	Описание
limit	Число	Обрезает ось-X на заданное значение
tooltip	строка, либо JSON-конфигурация дэша	Отображение кастомного тултипа (с дэшем внутри, отображение LaTex-формулы, HTML). Подробнее в руководстве по конфигурации дэшлетов (1.2.6.2).
bgColor	Строка	Указание цвета фона дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.)
headerStyle	объект	Используется для указания стилей заголовка дэша

echart

Дэш “Пирог”/“Пончик” можно стилизовать, используя общие опции для графиков echart и конфигурацию для type: pie. Ознакомиться с полным пакетом ключей вы можете здесь. Ниже будут представлены примеры использования объекта echart:

Указание стилей подписей на графике и отображение их внутри пирога

echart: {
   series: {
     label: {
       color: 'red',
       fontSize: 16,
       fontWeight: 'bold',
       position: 'inside',
     },
   },
 },

Отображение легенды справа от дэша

  echart: {
    legend: {
      top: '1%',
      left: '60%',
      width: '4%',
      orient: 'vertical',
      textStyle: {
        overflow: 'break', 
      },
    },
    series: {
      center: [
        '30%',
        '50%',
      ],
    },
  },

options

Описывает различные дополнительные настройки при отображении деша.

Пример указания:

"options": ["DisplayAllBadges","!DisplayLegend"].

Название ключа	Описание
Fixed	При включенной опции дэш закреплен на экране при скроллировании
DisplayAllBadges	Показать все подписи на графиках без учета пересечений значений
DisplayBadgesPercent	Отобразить только относительные величины
DisplayBadgesValue	Отобразить только абсолютные величины
DisplayBadgesLabel	Отобразить только наименование показателя
!TopBarMenu	Скрыть меню визеля
!TopBar	Скрыть заголовок дэша
!DisplayLegend	Скрыть легенду на графике
TooltipXAxisTitle	Отображение полного наименования показателя размерности в всплывающей подсказке (тултипе)
ModalDrilldown	Подключение старого варианта иерархии для дэша (Модальное окно с горизонтальными столбцами)
!Expanded	Сокрытие возможности разворачивания дэша на весь экран
Hidden	Сокрытие дэша
Transparent	Фон дэша соответствует фону подложки дэшборда
!DisplayCenterLabel	Скрывает значение суммы показателей в центре (работает только для дэша “Пончик”

onClickDataPoint

Поле onClickDataPoint описывает поведение клиентской части LuxmsBI при нажатии на один из указанных показателей в LPE-выражении, используемом для описания поведения.

Ниже в таблице приведены доступные функции для данного дэша. Описание работы с ними представлено в одноименном разделе руководства по конфигурации дэшлетов (глава 1.2.12)

Название функции	Описание
setKoobFilters	Фильтрация дэшей по значению размерности при нажатии на данное значение размерности.
navigate	Переключение на указанный в выражении дэшборд/датасет.
openModal	При нажатии на точку (сегмент) дэша откроется модальное окно с дэшем, id которого указано в конфигурационном файле.
navigateUrl	Используется для перехода на внешний источник с подстановкой значения.
menuItem	Используется для совместного использования hierarchy и функций onClickDataPoint.

Пирог и Пончик

Блоки конструктора​

Максимальное число сегментов​

Паллета цветов​

JSON-конфигурация​

dataSource​

display​

echart​

options​

onClickDataPoint​