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

Расширенные настройки виджетов Luxms BI

Дэшлет (дэш) - зарезервированное место на дэшборде какого-либо из датасетов, являющееся контейнером для конкретного визеля, но не равный ему

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

Настройки дэша включают в себя тип дэша и JSON структуру, описывающую содержимое дэша.

Типы дэшей в Luxms BI

Тип дэша (view_class) - это строка, указывающая тип визеля, который нужно отобразить в данном дэшлете. Ниже представлен список типов дэшей, доступных “из коробки”.

1. Аналитические:

1.1 Столбики горизонтальные (bar)

Столбики горизонтальные

Представляет данные в виде горизонтального столбчатого графика.

1.2 Линия (line)

Линия

Представляет данные в виде линейного графика.

1.3 Столбики вертикальные (column)

Столбики

Представляет данные в виде вертикального столбчатого графика.

1.4 Области-штабели (stacked-area)

Области

1.5 Штабели горизонтальные (stacked-bar)

Штабели горизонтальные

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

1.6 Штабели вертикальные (stacked-column)

Штабели вертикальные

Представляет данные в виде столбчатого графика с накоплением.

1.7 Точки (scatter)

Точки

Точечный график (множество точек, не соединенных между собой).

1.8 Сплайн (spline)

Сплайн

Представляет данные виде плавного линейного графика.

1.9 Водопад (waterfall)

Водопад

Визуальное представление для факторного анализа.

1.10 Спидометр (gauge)

Спидометр

Представляет данные на текущий момент в соответствии с нормативными значениями.

1.11 Спидометр полукруглый (semicircle)

Полукруглый спидометр

Представляет данные на текущий момент в соответствии с нормативными значениями.

1.12 Термометр (thermometer)

Термометр

Представляет данные на текущий момент в соответствии с нормативными значениями.

1.13 Пирог (pie)

Пирог

Показывает долевое отношение нескольких значений на текущий момент.

1.14 Пончик

Пончик

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

1.15 Весы (scales)

Весы

Показывает отношение двух значений на текущий момент.

1.16 Воронка (funnel)

Воронка

Представляет данные на текущий момент в виде воронки.

1.17 Радар (radar)

Радар

Представляет данные на текущий момент в виде радиальной диаграммы.

1.18 Значение (label)

Значение

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

1.19 Древовидная карта (treemap)

Древовидная карта (treemap)

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

1.20 Санкей (sankey)

Диаграмма Санкей (sankey)

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

1.21 ABC анализ

ABC анализ

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

1.22 Сетчатая диаграмма

Сетчатая диаграмма

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

1.23 Таблица с группировкой (tableP)

tableP

Представляет данные в табличном виде. В основном требуется для отображения агрегированных данных.

1.24 Список (list)

Список

Показывает несколько значений на текущий момент в виде списка.

1.25 What-if

What-if анализ

Тип анализа, который исследует эффект изменения в параметре на результат

2. Кастомизируемые:

2.1 Карта (map)

Карта (map)

Позволяет визуально сравнить географические области по значению показателя или по выполнению норматива (требуется добавить в конфиг деша типа map опции “fillAreasByData” - окрашивание, “fillLegend” - легенда для него).

2.2 Внешний - используется для встраивания iframe в дэш (подробности в руководстве по кастомизации фронтенда)

2.3 Внутренний - дэш, для отображения кастомных React-компонентов (подробности в руководстве по кастомизации фронтенда)

2.4 Изображение (image)

Изображение

Статичная картинка.

2.5 HTML (html)

Отображение html-дэша

Дэш, используемый для отображения статичного текста с использованием html-верстки. В поле htmlText указывается html-верстка. Верстка прописывается в кавычках. В примере ниже продемострировано использование mailto, стилей, и тега p в дэше html:

    htmlText: "<p class='text'>Данные носят предварительный характер 
<br>(имеют накопительный эффект)<br>и будут обновляться</p><p class='text'>Подробности по
<a href='mailto:admin@luxms.ru'>электронной почте</a></p>
<style>.text{text-align: center; color: red; font-size: 1.1rem;}</style>",
view_class: 'html',

2.6 Плоская таблица

Плоская таблица

Простая плоская таблица

2.7 Сводная таблица

Сводная таблица

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

2.8 Схема (plan)

Схема (plan)

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

3. Группирующие:

3.1 Доска (board)

Доска (board)

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

3.2 Вкладки (tabs)

Вкладки (tabs)

Позволяет выбирать какой из дочерних визелей будет отображен.

4. Статистика:

4.1 Гистограмма (histogram)

Гистограмма (histogram)

При указании пустого объекта forecast в конфигурации на верхнем уровне дэша histogram будет построено наилучшее приближение для данного распределения (распределением Гаусса):

forecast: {}
Гистограмма с отображением нормального распределения
осторожно

Дэш “Гистограмма” работает корректно только с фактами без агрегации

4.2 Ящик с усами (boxplot)

Ящик с усами

График, использующийся в описательной статистике, компактно изображающий одномерное распределение вероятностей

4.3 Пузырьки

Пузырьки

Визуальное представление корреляции данных.

Также в Luxms BI можно создать следующие визуализации, не представленные в режиме редактирования:

  1. Комбинированный график
Комбинирование

Объединяет два типа визуализации на одном графике, например, столбики и линии (для каждой величины задается свой тип графика через настройку widgetType в блоке style секции dataSource).

  1. lookup-table
lookup-таблица

Таблица, отображающая результат запрос в кастомную таблицу БД.

  1. axes-selector
axes-selector

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

JSON конфиг дэша

JSON структура описания деша на верхнем уровне состоит из следующих секций и опций:

  • frame
  • dataSource
  • display
  • url
  • bgImage
  • options
  • hierarchy
  • onClickDataPoint
  • children
  • view_class
  • title

Поле title

В поле title указывается заголовок дэша. Заголовок указывается в кавычках. Ниже представлен пример использования title:

Поле title

Формат:

title: 'Название дэша'

Стилизация заголовка

В title можно указать lpe-выражение с использованием функций bold и italic.

  title: 'lpe:italic("Сравнение") + " минимума и" + bold(" 0.5-квантиля")',
display: {
headerStyle: {
color: 'white',
fontSize: 30,
fontFamily: 'Times New Roman',
backgroundColor: '#E0AB9F',
},
},

Применение стилей к title

При скачивании дэша в формате .png или .pgf стили заголовка не сохраняются.

Использование getFilter в заголовке

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

  title: 'lpe:"Количество " + if(getFilter("sex") && getFilter("sex").1 = "Женщины", "гинекологов", "урологов") + " (чел)"',

В данном примере через + производится объединение строк. Во втором слагаемом данного выражения подставляется строка в зависимости от установленных фильтров (логика работы фильтров описана в блоке dataSource подразделе filters).

Функция getFilter принимает на вход размерность, и возвращает true если данная размерность была отфильтрована, в противном случае false.

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

Например getFilter(“sex”).1 = “Женщины” вернет true если, показатель “Женщины” не отфильтрован, присутсвует в выборе, и этот показатель выбран в единственном числе или является первым в списке отфильтрованных.

Ниже приведен пример работы вышеописанного LPE-выражения:

Отображение заголовка до фильтрации

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

Изменение заголовка после фильтрации

Данный функционал особенно полезен, в случае указания defaultValue для размерностей.

Функции data() и displayFilter()

Функции data() (будет переименована в label()), displayFilter() отображают данные, отправляют запросы, реагируют на фильтры. Функции используются в заголовке дэша. Использование условий if для этих функций не предусмотрено.
data() - функция, которая позволяет выводить значение факта после агрегации. Для корректной работы следует добавлять алиас.
displayFilter() - отображает значение измерения, выбранное в управляющем дэше.
Для отображения картинки в заголовке в формате svg используется функция svg.

Примеры использования.


title: 'lpe:"Функция " + bold("displayFilter() ") + displayFilter(date, "Всё") + " " + displayFilter(away_team, "Все") + " " + displayFilter((minute), "ВСЕ") + " " + displayFilter(penalty, "ВСЕ")',
функция_displayfilter().jpeg
  title: 'lpe: bold("Функция data() ") + data("away_team","ВСЕ") + "  " + data("max(minute)")', 

data.jpeg

Добавление картинки svg в заголовок. Функция hash() позволяет настроить размер картинки:

 title: 'lpe: bold("Функция svg() ") + svg("cat.svg",hash(width, 50, height, 50)) + italic("тест")',

Svg файл необходимо добавить в ресурсы текущего атласа.

LpeForReact - Функция wrap()

Используя функцию wrap в заголовке или описании (поле description описано ниже) можно отобразить HTML-элемент (например кнопку).

Функция wrap принимает как минимум 1 аргумент: отображаемое текстовое сообщение. По-умолчанию данный текст будет обернут в тег span. Для того, чтобы использовать другой HTML-тег, необходимо указать значение tag. Все значения указываются в двойных кавычках через =. Ниже представлен пример использования данной функции:

  title: 'lpe:"Фильтрующая кнопка " + wrap("нажми здесь", tag="button")',

Кнопка в заголовке будет отображена следующим образом:

Функция wrap

Ниже представлен список доступных атрибутов для функции wrap:

  1. display
  2. position
  3. left
  4. right
  5. bottom
  6. top
  7. margin
  8. minHeight
  9. maxHeight
  10. minWidth
  11. maxWidth
  12. padding
  13. font
  14. fontSize
  15. fontFamily
  16. fontWeight
  17. lineHeight
  18. color
  19. background
  20. backgroundImage
  21. backgroundSize
  22. backgroundPosition
  23. backgroundRepeat
  24. backgroundContain
  25. backgroundColor
  26. border
  27. borderRadius
  28. overflow
  29. overflowY
  30. overflowX
  31. width
  32. height
  33. textAlign
  34. textShadow
  35. textDecoration
  36. textOverflow
  37. opacity
  38. transform
  39. whiteSpace
  40. wordBreak
  41. boxShadow
  42. boxSizing
  43. flex
  44. flexWrap
  45. flexGrow
  46. flexShrink
  47. alignItems
  48. alignSelf
  49. justifyContent
  50. visibility
  51. zIndex

Все вышеописанные свойства дублируют логику одноименных CSS-стилей.

Для добавления логики для функции wrap используется поле onClick в которую можно добавить все функции, используемые в onClickDataPoint (секция onClickDataPoint описана ниже).

Для фильтрации куба по полю при нажатии на кнопку необходимо прописать следующее LPE-выражение:

  title: 'lpe:"Фильтрующая кнопка" + wrap("нажми меня", tag="button", backgroundColor=green,color=white,onClick=setKoobFilters("","sex", ["=", "Мужчины"]))',

При нажатии на кнопку данные будут отображены только по мужскому полю. Можно использовать использовать только одну LPE-функцию в wrap.

Поле description

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

Пример

description: 'Активы банка за 2016 календарный год'

После добавления данного поля у меню дэша появится иконка, при нажатии на которую отобразится описание:

Описание дэша

Секция frame

Формат:

  "frame": {
"h": Integer,
"w": Integer,
"x": Integer,
"y": Integer,
}

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

  1. x - расположение дэша на дэшборде по оси Х
    При увеличении значения для ключа x дэш сдвигается вправо на дэшборде. На изображении ниже представлен пример дэша, с указанным значением для 1:
Изменение расположения дэша по оси Х

Дэш сдвинут таким образом, что в левой части дэшборда поместится дэш со значениями w=1/h=1 и значением x=0. Также можно указывать значения с числами после запятой, для более тонкой настройки расположения дэша. Ниже представлен пример отображения дэша со значением x=3.5

Изменение расположения дэша по оси Х

Как можно заметить, в левой пустой части дэшборда, можно разместить три дэша со значениями w=1 и один дэш со значением ширины w=0.5
Аналогичная логика работы при изменения расположения дэша по оси Y. Ниже представлены изображения для y=1:

Изменение расположения дэша по оси Y

и y=3.5 соответственно:

Дэш, с указанной координатой Y

Логика аналогичная как и в случае изменения x - в верхней пустой части дэшборда, можно разместить три дэша со значениями h=1 и один дэш со значением ширины h=0.5, либо один дэш со значением h=2 и один дэш со значением ширины h=1.5, ниже представлен пример отображения трех дэшей на дэшборде с вышеописанными примерами:

Три дэша, расположенные по вертикали

Секции frame в файле-конфигурации для дэшей, представленных на изображении выше:

  • Дэш 1:
"frame":    {
"h": 2,
"w": 1,
"x": 0,
"y": 0,
}
  • Дэш 2:
"frame":    {
"h": 1.5,
"w": 1,
"x": 0,
"y": 2,
}
  • Дэш 3:
"frame":    {
"h": 2,
"w": 1,
"x": 0,
"y": 3.5,
}

Используя секцию frame и изменяя вышеуказанные показатели в относительных единицах, вы сможете отобразить дэши на дэшборде в любом удобном для вас варианте.

frame можно также указать и в строковом варианте:

frame: "(x1,y1),(x2,y2)"

где
x1 = x
y1 = y
x2 = x + w
y2 = y + h

По мере увеличения количества дэшей на дэшборде, расположение будет меняться, маневрируя показателями в секции frame

Поле bgImage

Используется для добавления изображения из ресурсов атласа на задний фон дэша.

Пример использования:

bgImage: 'res:image.svg',

Секция dataSource

Описывает источник данных для деша, измерения (dimension) и меры (measures)

Формат:

{
"dataSource": {
"koob": "String",
"dimensions": [],
"measures": [],
"xAxis": "String",
"yAxis": "String",
"filters": {} или [],
"sortBy": "String",
"style": {
"String": {
"String": {
"title": "String",
"color": "String"
}
},
"measures": {
"String": {
"title": "String",
"color": "String",
"format": "String",
"vizelType": "String"
}
}
}
}
}

Опции секции dataSource

koob
  • тип STRING, имя куба. Указание куба происходит с указанием источника данных и куба.

Например:

koob: "название_источника.название_куба"
dimensions
  • Принимает массив STRING через запятую, имена столбцов у куба (должны быть известны заранее)
  • Обязателен, для загрузки данных по этим столбцам
  • Через двоеточие можно задать псевдоним. Если у id столбца в конце поставить двоеточие и условное слово, к примеру, newId. Дальнейшее обращение можно будет сделать через этот идентификатор.
  • Принимает формулы или функции, где обязательно нужно будет задавать новый id через двоеточие в конце
  • Пример: "dimension":["dt", "sex","age", "concat(age, sex):id2"]
  • У размерности типа “период” есть возможность указания формата отображения. Для этого вы можете использовать функции форматирования даты своего источника. в Postgres для этого используется TO_CHAR.
    Пример: "dimension":["TO_CHAR(dt, MM.DD):new_date", "sex","age", "concat(age, sex):id2"]
Форматирование даты
measures
  • Тип массив STRING через запятую, формула которая применяется к столбцам куба.
  • Обязателен, для получения значений
  • Если у id столбца в конце поставить двоеточие и условное слово, к примеру, newId. Дальнейшее обращение можно будет сделать через этот идентификатор.
  • Пример: "measures": ["sum(v_main):id1", sum(v_main):newId","count(v_main)"].

Также в подсекцию “measures” можно включить условие ее формирования, например, "if (sum(pers)=0, 0, sum(fin)/sum(pers)):d". В результате на сервере формируется SELECT. Для данного примера - CASE WHEN sum(pers) = 0 THEN 0 ELSE sum(fin) / sum(pers) END as "d".

  • Для сводной таблицы (pivot/table) реализована возможность отображения по умолчанию не всех фактов. Для этого в конфигурации необходимо прописать массив innerMeasures. Те факты, которые будут указаны в данном массиве будут включены по-умолчанию.
  • Пример: "innerMeasures": ["id1", "newId"].
xAxis/yAxis
  • Тип String, набор id dimensions
  • id записываются в строку через точку с запятой
  • Есть спец id ’measures’, при котором на оси будут находиться все id measures
к сведению

Пример: "xAxis": "sex;age", "yAxis": "measures;dt".

filters
  • Тип OBJECT содержит ключи id измерений (dimension)

  • Значения id ключа могут быть:

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

filters: { country: true,},

к сведению

filters: { sex: [ '!=', 'Мужчины',],},

  • Если необходимо исключить один из показателей размерности, но чтобы размерность реагировала на действия в управляющем дэше
filters: {
'': [
'!=',
[
'column',
'sex',
],
'Мужчины',
],
sex: true,
},
осторожно

Данный функционал не будет работать для столбцов, перечисленных в filters в SQL-запросе куба.

Пример использования нескольких размерностей в filters:

 filters: {
'': [
'and',
[
'!=',
[
'column',
'country',
],
'United Kingdom',
],
[
'ilike',
[
'column',
'productname',
],
'Hot Baths',
],
[
'=',
[
'column',
'date',
],
'2018-12-01',
],
],
country: true,
},
  • Для сводной таблицы также присутсвует возможность предустановки фильтрации для размерностей с помощью innerFilters. Задается аналогично filters

Пример:

к сведению

innerFilters: { "sex": ["!=", "Мужчины"] }

having

Используется для указания условий фильтрации после агрегации. Может использоваться для фильтрации рассчитанного факта. Условие для having указвается аналогично filters в случае, когда мы указываем статичные фильтры. Ниже представлен пример скрытия строк, сумма по которым у нас равна 0:

Пример:

    having: {
sum_v_main: [
'!=',
0,
],
},
measures: [
'sum(v_main):sum_v_main',
],
hierarchy

Описывает иерархию измерений, например для реализации функции DrillDown

“hierarchy” : [],

  • тип массив STRING;

  • создание иерархии у кубов; используется для описания каскадных фильтров в управляющем дэше

  • Пример: "hierarchy": ["sex=>age=>dt", "category=>degree=>sex"].

к сведению

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

sortBy
  • тип STRING, в строке поочередно указываются id размерностей с указанием знака сортировки
к сведению

Пример: "sortBy": "+region;-city;+district”

style
  • тип OBJECT, принимает id размерностей и спец. ключ “measures”

  • ключ id “dimension” :

    1. тип OBJECT

    2. принимает id ключ из массива dataSource.dimensions

      • тип OBJECT
      • ключ “title”: тип STRING, меняет заголовок dimension
      • ключ “color”: тип STRING, меняет цвет dimension
    3. Пример : style:{"sex":{"Мужчина":{ "title": "муууу" }}}

  • спец ключ “measures”:

    1. тип OBJECT

    2. Принимает id ключ из массива dataSource.measures

      • тип OBJECT

      • ключ “title”: тип STRING, меняет заголовок measure. Для данного ключа также можно пользоваться LPE-выражением и выводить различные заголовки в зависимости от установленных фильтров (функция getFilters описанна выше, в секции title).

  title: 'lpe:"Количество " + if(getFilter("sex") && getFilter("sex").1 = "Женщины", "гинекологов", "урологов") + " (чел)"',
    - ключ **"color"**: тип STRING, меняет цвет measures. Используется значение #HEX для указания цвета

- ключ **"format"**: ниже подробное описание**

- ключ **"vizelType"**: тип STRING, меняет тип графика для выбранного факта / размерности. Имеет следующие типы значений:

a. `bar` - Отображение данного показателя в виде столбиков

b. `line` - Отображение данного показателя в виде линии

c. `spline` - Отображение данного показателя в виде плавной линии (сплайн)

- ключ **"strokeStyle"** в случае, если для дэша выбран тип отображения "Линии", "Сплайн" или "Области", то дэш меняет свое отображение в зависимости от выбранного значения. Ниже представлен список доступных значений:

a. `Solid` - сплошная линия
b. `ShortDot` - линия отображена точками, расположенными близко относительно друг друга
c. `ShortDash` - линия отображена черточками небольшой длины
d. `ShortDashDot` - линия отображена черточками небольшой длины и точками
e. `ShortDashDotDot` - линия отображена черточками небольшой длины и двумя точками
f. `Dot` - отображение точками
g. `Dash` - линия отображена черточками
h. `LongDash` - линия отображена длинными черточками(тире)
i. `DashDot` - линия отображена черточками и точками
j. `LongDashDot` - линия отображена длинными черточками(тире) и точкой
k. `LongDashDotDot` - линия отображена длинными черточками(тире) и двумя точками

Пример:

"style": {
"measures": {
"newId":{
"title": "мой новый заголовок",
"color": "#f2f2f2",
"format": "# ###",
"vizelType": "spline"
}
}
}

Для указания стилей всем фактам разом, в конфигурации вместо названия факта указывается символ *.
Пример:

"style": {
"measures": {
"*":{
"title": "мой новый заголовок",
"color": "#f2f2f2",
"format": "# ###",
}
}
}

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

"style": {
"category": {
"*":{
"color": "#f2f2f2",
"format": "# ###",
}
}
}

Цвет в одномерных и двумерных дэшах можно задать в зависимости от значения. Для этого необходимо окрашиваемому показателю указать опцию ColorX и указать LPE-выражение, по которому столбцы будут окрашиваться. Ниже представлен пример конфигурации:

    style: {
measures: {
'*': {
options: [
'ColorX',
],
color: "lpe:if(avg_v_main < 15000, 'green', 'red')",
},
},
},

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

Пример:

"style": {
"month_id": {
"*":{
"title": ''
}
}
}

Стили для подытогов задаются внутри объекта, имеющего в названии символ суммы (U+2211) и наименование размерности:

Пример:

"style": {
"category": {
"∑category":{
"title": 'Подытог',
"fontWeight": 'bold',
}
}
}
limit
  • тип NUMBER, ограничение по количеству выводимых данных
  • Обрезает ось-X на заданное зн-ие
к сведению

Пример: "limit": 3

Только для koob-table-simple:

  1. Принимает id ключ из массива dataSource.measures

  2. Создаем любые переменные в виде ключ : выражение

  3. backgroundColor: будет либо цвета:

    1. если myConst1 = true, backgroundColor: ‘#00b9ac’
    2. если myConst2 = true, backgroundColor: ‘#fed450’
    3. если (myConst1 && myConst2) = false, ‘#93CAFE’
    4. Пример: "newId": {"myConst1":" done_date != null && delivery_target_date > due_date "}

Пример:

"style": {
"measures": {
"newId":{
"myConst1": используется lpe-выражение
(true || false),
"myConst2": используется lpe-выражение
(true||false),
"backgroundColor":"lpe:when(myConst1=true, '#00b9ac',
myConst2=false,'#fed450', '#93CAFE')"
}
}
}
к сведению

LPE-функция when отличается от if тем, что поочередно принимает в себя условие -> значение, если условие выполнено. Таким образом, для when нет необходимости указывать функции в функции, как с if

subtotals

Только для таблицы tableP и сводной таблицы (pivot/table)

  • тип STRING, принимает список размерностей, для которых необходимо выводить подытог

Пример : subtotals: "sex;age;degree"

format
  • тип STRING
  • Используется в типах деша: text
  • формат задается исходя из документации (по данной ссылке)
  • Примеры:
    1. "format": "-# ###,0%" - значение будет выводится с один знаком после запятой с символом “%”
    2. "format":"#[ / 2]" - отображаемое значение в тултипе и подписях будет поделено на 2
    3. "format": "# ### [тыс, млн, млрд, тера]" - значение будет отображаться в зависимости от количества цифр в числе. Пример: число “220 000” будет выводится как “220 тыс”, число “200 000 000” будет выводится как “220 млн” и т.д.
    4. "format": "△ #" округляет значение в большую сторону, а "▽ #" в меньшую
к сведению

Для визеля “Значение” и значения внутри визеля “Бублик” format необходимо указывать в поле display, для остальных случаев format прописывается в поле style рассматриваемого факта/размерности.

Если два и более фактов имеют различные единицы измерения и их необходимо отобразить в одном дэше на разных осях, необходимо каждому из фактов указать format.
Например:

 style: {
measures: {
avg_naselenie: {
format: '# ### человек',
},
},
},

После этого на дэше будет отображено две оси:

Отображение двух осей в дэше

Секция display

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

Формат:

{
"display": {
"limit": Integer,
"range": Integer,
"format": "String",
"bgColor": "String",
"color": "String",
"customValue": "String",
"stoplight": {
"lights": [
{
"name": "String",
"color": "String",
"limit": [
Integer, ...
],
"bgColor": "String"
}
]
}
}
}

Опции секции display

limit
  • тип NUMBER
  • Обрезает ось-X на заданное зн-ие
  • Пример "limit":20
range
  • Принимает массив значений, типа NUMBER
  • Применяется на типе визеля с лимитами
  • Пример: "range": [0,30000]
  • range можно также указать для конкретной единицы измерения. Для этого необходимо перейти в раздел единиц измерения, редактировать или создать новую единицу измерения, и прописать в ее конфигурации range
stoplight
  • тип OBJECT
lights
  • Принимает массив OBJECT, ключи которого:
    • name : имя лимита (STRING)
    • color : цвет (STRING)
    • limit : промежуток цвета (массив NUMBER)
    • bgColor : цвет фона у показателя (STRING)
  • Пример:
"lights": [ {
"name": "red",
"color": "#ff4d4d",
"limit": [20000,3000],
"bgColor" :#d4f6dc
},
{...},{...} ],
fontSize
  • тип NUMBER || STRING
  • Используется в типах деша: label
  • Размер текста
  • Пример: "fontSize": "30"
cmpTitle
  • тип STRING
  • Используется в типах деша: gauge
  • Указание текстовой подписи под значением
  • Пример: "cmpTitle": "Нижний заголовок"
gap
  • тип NUMBER || STRING
  • Используется в типах деша: board
  • Указание отступов между дочерними элементами
  • Пример: gap: "5"
selectedColor
  • тип STRING
  • Используется в типах деша: map
  • Указание цвета обводки при включенной множественной фильтрации на карте
  • Пример: selectedColor: "#000"
stripes
  • тип BOOLEAN
  • Используется в типах деша: koob-table-simple
  • Отображение таблицы с чередующиейся покраской строк
  • Пример: stripes: true
borderRadius
  • тип NUMBER
  • Используется в типах деша: bar, column
  • скругление столбиков
  • Пример: borderRadius: 30

Визуализация тултипов

Визуализация тултипов возможна с использованием опции display. В данном разделе будет рассмотрено два варианта конфигурации отображения тултипов: отображение в тултипе визеля и отображение в тултипе математических формул. Для данных действий используется опция tooltip.
Для отображения визеля внутри тултипа необходимо tooltip указать как объект и прописать внутри него конфигурацию. Пример:

"display": {
"tooltip": {
"dataSource": {
"xAxis": "measures",
"yAxis": "sex",
"dimensions": ["sex"],
},
"view_class": "pie",
},
},

Отображение данного тултипа продемонстрировано ниже:

Отображение визеля в тултипе

Для отображения формул tooltip необходимо задавать как строку с формулой LaTex. Ниже представлен пример указания формулы:

  "display": {
"tooltip": "latex:%y: $f_x(%x) = %v^2$",
}

где %y - наименование показателя, отложенного на оси Y,
%x - наименование показателя, отложенного на оси Х,
%v - значение

Ниже пример отображения тултипа с использованием данной функции:

Математические формулы в тултипе

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

"display": {
"tooltip": "html:общий формат тултипов с заменой %x %y %v <b>%percent %marker"
},

где %x и %y - наименования показателей, отложенные на xAxis и yAxis соответственно,
%v - значение показателя,
%percent - Вывод показателя в процентах (для дэшлетов “Пирог” и “Донат”),
%marker - отображения цвета показателя в круге

Секция echart

Часть дэшей в Luxms BI отрисовываются с использованием библиотеки Apache Echarts. Для ряда дэшей существует возможность наследования конфигурационных полей из данной библиотеки. Ниже представлен список команд, которые можно указать в секции echart:

  1. Указание ширины и цвета линий дэша:
  echart: {
series: {
lineStyle: {
color: 'green',
width: 40,
},
},
},
  1. Указание ширины столцов:
  echart: {
barWidth: 50,
},
  1. Указание цвета и размера подписей для оси:
  echart: {
xAxis: {
axisLabel: {
textStyle: {
color: 'gold',
fontSize: 42,
},
},
},
yAxis: {
axisLabel: {
textStyle: {
color: 'gold',
fontSize: 42,
},
},
},
},
  1. Для изменения варианта отображения точек для дэшей “Линии”, “Области”, “Точки”:
  echart: {
series: {
symbol: 'diamond',
},
},

Возможные значения:

  1. diamond - ромбики,

  2. cirlce - круги (по-умолчанию),

  3. triangle - треугольники,

  4. rect - квадраты

  5. Указание цвета лэйбла на графике

 echart: {
series: {
label: {
color: 'red',
position: 'inside',
},
},
},

Секция forecast

Используется для указания параметров для рассчета статистических данных и прогнозирования. Реализовано для дэшей типа “Линии”, “Точки”.

В данный момент в Luxms BI представлено три алгоритма расчетов: линейная регрессия (LINEAR_REGRESSION), экспоненциальное сглаживание (EXPONENTIAL_SMOOTHING), метод Холт-Винтерса (HOLT_WINTERS).

Ниже представлен набор ключей для каждого из алгоритмов:

Линейная регрессия:

  forecast: {
steps: 10,
degree: 2,
algorithm: 'LINEAR_REGRESSION',
},

где

  • steps - количество рассчитываемых значений. Допустимые значения: целые положительные числа,
  • degree - возводимая степень. Допустимые значения: целые положительные числа.

Экспоненциальное сглаживание:

  forecast: {
steps: 10,
alpha: 0.1,
gamma: 0.1,
algorithm: 'EXPONENTIAL_SMOOTHING',
},

где

  • steps - количество рассчитываемых значений. Допустимые значения: целые положительные числа,
  • alpha - коэффициент альфа. Допустимые значения: от 0 до 1,
  • gamma - коэффициент гамма. Допустимые значения: от 0 до 1.

Метод Холт-Винтерса:

  forecast: {
steps: 10,
alpha: 0.1,
gamma: 0.1,
delta: 0.2,
trend: 'MULT' | 'ADD',
algorithm: 'HOLT_WINTERS',
seasonLength: 7 | 12 ...,
},

где

  • steps - количество рассчитываемых значений. Допустимые значения: целые положительные числа,
  • alpha - коэффициент альфа. Допустимые значения: от 0 до 1,
  • gamma - коэффициент гамма. Допустимые значения: от 0 до 1,
  • delta - коэффициент дельта. Допустимые значения: от 0 до 1,
  • trend - вариант рассчета: мультипликативный (MULT), либо аддитивный (ADD)
  • seasonLength - сезонность. Рекомендуемые значения: кратные рассматриваемому периоду (неделя - 7, год - 12 и т.д.)
Пример отображения дэша “Линии” с прогнозированием с использованием линейной регрессии

При указании пустого объекта forecast в конфигурации дэша histogram будет построено наилучшее приближение для данного распределения (распределением Гаусса). Выводятся параметры нормального распределения, такие как: мат.ожидание, ср.квдр.отклонение, и точность аппроксимации.

При указании пустого объекта forecast в конфигурации дэша correlation будет построена линейная аппроксимация.

Опция url

  • тип STRING
  • Используется в типах деша: external, internal, image
  • Является ссылкой на html файл (для external) или на js файл c компонентом написанном на React и содержащем export default (для internal)

url: путь к файлу из раздела resources датасета (текущего или любого другого существующего).

Пример: ссылка на файл template.html, который находится в разделе resources того же датасета, где и дешлет:

"res:template.html"

Ссылка на тот же файл, но если он находится не в текущем датасете, а в датасете с schema_name = "ds_20":

"res:ds_20:template.html"

Секция options

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

“options” : [],

  • массив STRING;

  • Пример "options": ["DisplayAllBadges"].

  1. Fixed - при включенной опции дэш закреплен на экране при скроллировании

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

  3. DisplayAllBadges - показать все подписи на графиках без учета пересечений значений

  4. DisplayAllVeryBadges - показать все подписи принудительно

  5. !TopBarMenu - скрыть меню визеля

  6. !TopBar - скрыть заголовок дэша

  7. HideLegend - скрыть легенду на графике

  8. !DisplayOverall - для дэшей таблиц убирает итоговые строки внизу таблицы

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

  10. EastPanel - для дублирования дэша в правой выдвигающейся панели (рекомендуется использовать только для управляющего дэша)

  11. !DisplayAxisYMarks - скрыть ось Y у дэша (работает для двумерных дэшей)

  12. !DisplayAxisXMarks - скрыть ось Х у дэша (работает для двумерных дэшей)

  13. TooltipXAxisTitle - отображение полного наименования показателя размерности в всплывающей подсказке (тултипе)

  14. !DisplayAxis - cкрытие сетки и осей у двумерных дэшей

  15. !ShowBackground - cкрытие теней у столбцов

  16. !DisplaySplitLines - cкрытие разделительных линий у двумерных дэшей

  17. !DisplayTicks - cкрытие рисок/тиков осей у двумерных дэшей

  18. Transparent - фон визелей “Значение” и “Внутренний” соответствует фону подложки дэшборда

  19. XAxisValue - переключение оси Х с категориальной на численный вариант отображения (применяется для двумерных дэшей)

  20. MergeCells - опция, включающая объединение ячеек по вертикали в таблице koob-table-simple

  21. ModalDrilldown - подключение старого варианта иерархии для дэша (Модальное окно с горизонтальными столбцами. Для подключения данного варианта на всю систему, необходимо в файле /opt/luxmsbi/web/settings/settings.js в массиве features указать данную опцию и перезапустить компонент)

  22. FullWidth - растягивает все колонки таблицы на всю ширину (включено по умолчанию). Если указать, например, у одного столбика значительно большую длинy, то может появиться скролл. При отключенной опции (!FullWidth) пользователь может задать своё значение ширины (width) для всех столбцов.

  23. !Sort - выключение сортировки у дэша Плоская таблица

  24. !Expanded - скрытие возможности разворачивания дэша на весь экран

  25. ResetButton/ !ResetButton- опция управляюзего дэша, которая позволяет показать/скрыть иконку “Очистить все фильтры” и “Сбросить фильтр” в зависимости от уровня, на котором опция указана. По умолчанию у управляющего дэша и у размерности установлено ResetButton, если у размерности указан тип radio - !ResetButton

  26. ResetButtonToDefault/!ResetButtonToDefault - опция управляющего дэша, которая позволяет показать/скрыть иконку “Сбросить фильтры по умолчанию” в зависимости от уровня, на котором опция указана. По умолчанию у управляющего дэша установлено ResetButtonToDefault, у размерности !ResetButtonToDefault, если у размерности указан тип radio - ResetButtonToDefault

Пример указания опций ResetButton и ResetButtonToDefault, который убирает из интерфейса кнопку “Сбросить фильтр” у конкретной размерности, кнопка “Сбросить фильтр по умолчанию” присутствует.

dataSource: {
koob: 'a.b',
style: {
category: {
type: 'radio',
options: [
'ResetButtonToDefault',
'!ResetButton',
],
},
},

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

  options: [
'!ResetButtonToDefault',
'!ResetButton',
],

Помимо общих опций, есть опции для конкретных показателей. Указываются данные опции в блоке style конкретной размерности. Ниже представлен пример указания опции для конкретной размерности:

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

Ниже представлены опции для конкретных размерностей:

  1. AlwaysLast - Независимо от включенной сортировки набора данных, данный показатель будет отображаться последним. Реализовано для двумерных (столбики) и одномерных дэшей (бублик и пирог)

  2. DisableLegend - По умолчанию данный показатель будет отображаться после нажатия на легенду. (реализовано для двумерных дэшей)

  3. Pin - Закрепление столбца при скролле плоской таблицы (реализовано только для плоской таблицы)

Списки опций, доступные для разных типов дэшей

  1. Опции, доступные для всех дешей:
  • Fixed
  • TopBarMenu
  • TopBar
  • Hidden
  • ModalDrilldown
  1. Опции, доступные для дэшей “Линия”, “Области-Штабели” и “Сплайн”:
  • DisplayAllBadges
  • DisplayAllVeryBadges
  • EastPanel
  • !DisplayAxisYMarks
  • !DisplayAxisXMarks
  • TooltipXAxisTitle
  • !DisplayAxis
  • !DisplaySplitLines
  • !DisplayTicks
  • Transparent
  • DisableLegend
  • YLogAxis
  • LinesWithoutDots
  • DisplayDataZoom
  1. Опции, доступные для дэша “Точки”:
  • DisplayAllBadges
  • DisplayAllVeryBadges
  • EastPanel
  • !DisplayAxisYMarks
  • !DisplayAxisXMarks
  • TooltipXAxisTitle
  • !DisplayAxis
  • !DisplaySplitLines
  • !DisplayTicks
  • Transparent
  • DisableLegend
  • YLogAxis
  • DisplayDataZoom
  1. Опции, доступные для дэшэй “Столбики горизонтальные” и “Столбики вертикальные”:
  • DisplayAllBadges
  • DisplayAllVeryBadges
  • EastPanel
  • DisplayAxisYMarks
  • DisplayAxisXMarks
  • TooltipXAxisTitle
  • DisplayAxis
  • DisplaySplitLines
  • DisplayTicks
  • Transparent
  • DisableLegend
  • YLogAxis
  • LinesWithoutDots
  • DisplayDataZoom
  1. Опции, доступные для дэшэй “Штабели горизонтальные” и “Штабели вертикальные”:
  • DisableLoadData
  • DisplayAllBadges
  • DisplayAllVeryBadges
  • EastPanel
  • DisplayAxisYMarks
  • DisplayAxisXMarks
  • TooltipXAxisTitle
  • DisplayAxis
  • DisplaySplitLines
  • DisplayTicks
  • Transparent
  • DisableLegend
  • YLogAxis
  • LinesWithoutDots
  • DisplayDataZoom
  • DisplayBadgesPercent
  1. Опции, доступные для дэша “Пирог”:
  • DisplayAllBadges
  • DisplayAllVeryBadges
  • EastPanel
  • !DisableLegend
  • DisplayBadgesPercent
  • DisplayBadgesValue
  1. Опции, доступные для дэша “Пончик”:
  • DisplayAllBadges
  • DisplayAllVeryBadges
  • EastPanel
  • !DisableLegend
  • DisplayBadgesPercent
  • DisplayBadgesValue
  • !DisplayCenterLabel
  1. Опции, доступные для дэша “Весы”:
  • EastPanel
  • Transparent
  • !DisplayLegend
  • DisplayBadgesPercent
  1. Опции, доступные для дэша “Радар”:
  • EastPanel
  • Transparent
  • !DisplayLegend
  1. Опции, доступные для дэша “Список”:
  • EastPanel
  • Transparent
  1. Опции, доступные для дэша “Воронка”:
  • Transparent
  1. Опции, доступные для дэша “Древовидная карта”:
  • EastPanel
  1. Опции, доступные для дэшэй “Термометр”, “Спидометр” и “Спидометр полукруглый”:
  • DisableLoadData
  • EastPanel
  1. Опции, доступные для дэша “Значение”:
  • DisableLoadData
  • EastPanel
  • Transparent
  1. Опции, доступные для дэша “Водопад”:
  • DisableLoadData
  • DisplayAllBadges
  • EastPanel
  • !DisplayAxisYMarks
  • !DisplayAxisXMarks
  • TooltipXAxisTitle
  • !DisplayAxis
  • !DisplaySplitLines
  • !DisplayTicks
  1. Опции, доступные для дэша “Пузырьки”:
  • DisableLoadData
  • EastPanel
  1. Опции, доступные для дэша “Санкей”:
  • DisableLoadData
  • !ColoredPath
  • EastPanel
  • GradientPath
  • TooltipPercent
  • LabelsLeft
  • !Labels
  • !Category
  • AllCategory
  1. Опции, доступные для дэша “Сетчатая диаграмма”:
  • DisableLoadData
  • !ColorByCategory
  • EastPanel
  • !xAxisSplitLines
  • !yAxisSplitLines
  1. Опции, доступные для дэша “Таблица с группировкой”:
  • DisableLoadData
  • DisplayOverall
  • FullWidth
  1. Опции, доступные для дэша “Плоская таблица”:
  • bgContain
  • FullWidth
  • !Sort
  1. Опции, доступные для дэша “Сводная таблица”:
  • DisableLoadData
  • DisplayOverall
  • FullWidth
  1. Опции, доступные для дэшэй “What-if анализ”, “HTML” и “Изображение”:
  • DisableLoadData
  • Transparent
  • EastPanel
  1. Опции, доступные для дэша “Управляющий дэш”:
  • DisableLoadData
  • EastPanel
  • PanelOpened
  • ResetButton
  • ResetButtonToDefault
  1. Опции, доступные для дэша “Доска”:
  • EastPanel
  1. Опции, доступные для дэша “Вкладки”:
  • Transparent
  1. Опции, доступные для дэша “Axes-selector”:
  • DisableLoadData
  • EastPanel

Секция onClickDataPoint

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

Для изменения поведения можно пользоваться следующими функциями:

setKoobFilters

Фильтрация дэшей по значению размерности при нажатии на данное значение размерности. Функция имеет три или более аргументов:
название_источника_данных.название_куба,
название размерности (по которой необходимо отфильтровать данные),
массив с указанием условия фильтрации - первым элементом массива должен быть указан знак условия фильтрации (=, !=, <, >, <=, >=, between) после этого указывается размерность, по нажатию на которую, в массив подставится значение размерности. Указать можно как одну размерность для фильтрации, так и несколько: setKoobFilters('источник.куб', 'ключ',['=',значение], 'ключ', ['=',значение], ...)
Пример: при нажатии на сегмент дэша со значением размерности “Мужчины” фильтр для дэшей будет установлен в следующее положение:

"filters": {
"указанное_вторым_параметром_название_размерности": [
"=",
"Мужчины"
]
}

Пример использования функции:

    "onClickDataPoint":"lpe:setKoobFilters('ch.max_example','max_example_category',['=',max_example_category])",

setKoobFilter

Работает аналогично setKoobFilters с тем исключением, что принимает на вход только три аргумента, задать фильтры для нескольких размерностей разом в этой функции не получится: setKoobFilter('источник.куб', 'ключ',['=',значение])
В данной функции можно также указать используемую гранулярность для размерностей типа период, для этого в функцию необходимо передать параметр data:granularity и необходимый тип периода:

    onClickDataPoint: 'lpe:setKoobFilter(null, "data:granularity","month")',

Возможные значения для третьего аргумента:

  • day - для отображения календаря по дням
  • week - для отображения календаря по неделям
  • month - для отображения календаря по месяцам
  • quarter - для отображения календаря по кварталам
  • year - для отображения календаря по годам

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

onClickDataPoint: 'lpe:openModal(dashlet(255));setKoobFilter(null, "data:granularity","month")',

Переключение на указанный в выражении дэшборд/датасет. Функция имеет минимум два аргумента:
Элемент для перехода - Возможные значения: dboard - для перехода на другой дэшбод текущего датасета, segmentId - для перехода на другой датасет (в случае, если в аргументах указан только переход на датасет, то переход будет осуществлен на дэшборд с номером, аналогичным изначальному)
ID элемента для перехода - Для перехода к датасету необходимо указывать схему датасета, для дэшборда номер.

Пример использования LPE-выражения с вышеописанными функциями представлен ниже:

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

Дэш “Данные” и конфигурационный файл

Ниже представлен сам конфигурационный файл дэша:

{
"frame":{
"h":2,
"w":3,
"x":2,
"y":1,
},
"dataSource":{
"koob":"ch.max_example",
"xAxis":"max_example_category;max_example_degree",
"yAxis":"measures",
"measures":[
"sum(max_example_v_main):sum_max_example_v_main",
],
"dimensions":[
"max_example_category",
"max_example_degree",
],
},
"onClickDataPoint":"lpe:setKoobFilters('ch.max_example',
'max_example_category',['=',max_example_category]);navigate(dboard,39)",
"view_class":"1II.koob-table-simple",
"title":"",
}

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

Существует также возможность в функции navigate указать 4 аргумента, для перехода к конкретному датасету на конкретный дэшборд. Пример функции представлен ниже:

navigate(segmentId, ds_demo117, dboard, 1)

openModal

При нажатии на точку (сегмент) дэша откроется модальное окно с дэшем, id которого указано в конфигурационном файле.
Пример использования данной функциональности представлен ниже:

Открытое модальное окно с дэшем “Донат”

Конфигурационный файл с примером использования функции openModal:

{
"frame": {
"h": 4,
"w": 6,
"x": 0,
"y": 0,
},
"dataSource": {
"koob": "my_new_excels.my_new_excels",
"xAxis": "department",
"yAxis": "measures;sex",
"measures": [
"avg(height):avg_height",
],
"dimensions": [
"department",
"sex",
],
},
"onClickDataPoint": "lpe:openModal(dashlet(210))",
"view_class": "1II.stacked-column",
"title": "",
}

Для использования openModal необходимо аргументом передать функцию dashlet и id необходимого для отображения дашлета (в случае на примере выбран дашлет с id = 210)

Если данные в модальном окне необходимо фильтровать данные в зависимости от нажатой точки, можно использовать функцию set с параметрами dataSource.filters и filters.

Пример:

onClickDataPoint: 'lpe:openModal(dashlet(532).set("dataSource.filters", filters))',

Вторым аргументом в openModal передается заголовок модального окна, который будет выводится:

onClickDataPoint: 'lpe:openModal(dashlet(299).set("dataSource.filters", filters), "Количество заказов")',
Указание заголовка для модального окна

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

navigateUrl для таблицы tableP

Конфигурационный файл с примером использования функции navigateUrl:

{
"frame": {
"h": 4,
"w": 9,
"x": 0,
"y": 0,
},
"dataSource": {
"koob": "ch.max_example",
"style": {},
"xAxis": "age;category",
"yAxis": "measures",
"measures": [
"sum(v_main):sum_v_main",
],
"dimensions": [
"age",
"category",
],
},
"onClickDataPoint": "lpe:navigateUrl('http://google.com/'+v)",
"view_class": "1II.tableP",
"title": "",
}

Параметры, необходимые для функции navigateUrl:

  • в кавычках указывается url для перехода
  • +v указывается в случае необходимости подставновки значения из таблицы в url и переходе с учетом id из таблицы

На примере, продемонстрированном выше, в случае нажатия на ячейку со значением 37600, браузер откроет страницу по следующему адресу http://google.com/37600

Используется для совместного использования hierarchy и функций onClickDataPoint.

Ниже представлен пример добавления фильтрации и вызова lookup-таблицы в выпадающий список по клику:

 "onClickDataPoint": "lpe:showDrilldownMenu(menuItem('Доп.пункт.меню',setKoobFilters('luxmsbi.orders_ful','country',['=',country])),attachment(1))",

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

"onClickDataPoint": [
'showDrilldownMenu',
[
'menuItem',
'Доп.пункт.меню',
"setKoobFilters('luxmsbi.orders_ful','country',['=',country])",
],
[
'attachment',
1,
],
],

toggleKoobFilters

Множественный выбор для фильтрации на дэше “Карта”. Работает для всех слоев.

Пример:

"onClickDataPoint": "lpe:toggleKoobFilters('luxmsbi.custom_final','region_id',['=',region_id])",
к сведению

Для выбора цвета обводки выбранных объектов используется функция selectedColor в блоке display. Для указания ширины используйте функцию selectedWidth

Если необходимо выполнять какую-либо функцию исходя из определенных условий, можно использовать оператор if, который прописывается следующим образом:

onClickDataPoint: "lpe:if(условие, действие_если_условие_истинно, действие_если_условие_ложно)"

Пример:

 onClickDataPoint: "lpe:if(dim>0,setKoobFilters('cube', 'dim1', ['=', dim1]),null)",

Если необходимо выполнять функцию в зависимости от того, какая размерность лежит на оси, можно использовать в условии функцию get с первым аргументом "id" вторым аргументом указывается ось, которую необходимо проверять (x или y).

Пример:

 onClickDataPoint: "lpe:if(get(x,'id')=dim1,setKoobFilters('cube', 'dim1', ['=', dim1]),null)",

setVar

Используется для установки значения переменной дэша what-if. Функция принимает 2 параметра:

  • название переменной
  • устанавливаемое значение
onClickDataPoint: "lpe:setVar('varName', 100)",

После нажатия дэши, использующие данные куб будут перезагружены и перезапросят данные.

dataReload

Перезапрос данных у указанного куба в аргументе

onClickDataPoint: 'lpe:dataReload("ch.koob_example")',

После нажатия дэши, использующие данные куб будут перезагружены и перезапросят данные.

Секция children

Позволяет задать дочерние деши

“children” :[]

  • Используется в типах деша: board, tabs
  • Принимает массив ВИЗЕЛЕЙ
  • Пример:
"children": [{
"view_class": "text"
"frame": {},
"display": {},
"options": [],
"dataSource": {}
}, {...},{...}
]
к сведению

В случае необходимости отображения меню дэша у дочерних элементов, у них во viewclass необходимо прописать `dashlet/названиедэшлета`

Конфигурационные опции для визеля “Значение”

По умолчанию в дэше “Значение” сравнивается 2 значения одного факта по двум размерностям, которые пришли последними из базы.

Также с помощью дэша “Значение” можно сравнивать 2 факта с разбивкой и без по dimensions. Для этого в конструкторе требуется перенести Факты в поле “Категории” или в конфиге внутри dataSourse добавить настройку xAxis: ‘measures’.

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

  • title - указание заголовка для дэша. Заголовок указывается над значением, может использоваться для описания значения. Ниже представлено изображения примера работы опции title
Стилизация дэша “Значение”

В заголовке дэша “Значение” можно также пользоваться LPE-выражением и выводить различные заголовки в зависимости от установленных фильтров (функция getFilters описанна выше, в секции title).

  title: 'lpe:"Количество " + if(getFilter("sex") && getFilter("sex").1 = "Женщины", "гинекологов", "урологов") + " (чел)"',
  • bgColor - Указание цвета фона дэша (указывается код цвета #HEX)
  • color - Указание цвета значений в столбце (указывается код цвета #HEX)
  • fontFamily - Указания конкретного шрифта для дэша. Существует возможность выбрать из следующих вариантов шрифта:
    • Golos UI
    • Arial
    • Times New Roman
    • Helvetica
    • Courier New
    • Courier
    • Verdana
    • Georgia
    • Garamond
    • Bookman
    • Trebuchet
    • Tahoma
    • Arial Black
    • Comic Sans MS
    • Impact
  • fontSize - указание размера шрифта в относительных единицах. Указывается типом значения NUMBER
  • customValue - Данная опция используется для указания прописанного текста в значении данного ключа. При установке данного ключа данные не отображаются, отображается только введенный текст в значение customValue

Конфигурация lookup-таблицы

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

  1. width - установка ширины столбца в lookup-таблице
  2. white-space - управление обработкой пробельных символов внутри элемента.
    Возможные варианты значений:
  • normal - Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы.
  • nowrap - Объединяет последовательности пробелов в один пробел, как значение normal, но не переносит строки (оборачивание текста) внутри текста.
  • pre - Последовательности пробелов сохраняются так, как они указаны в источнике.
  • pre-line - Последовательности пробелов объединяются в один пробел.