Расширенные настройки виджетов Luxms BI
Дэшлет (дэш) - зарезервированное место на дэшборде какого-либо из датасетов, являющееся контейнером для конкретного визеля, но не равный ему
Визель - компонент React, по умолчанию рисующий график на основе входных данных и характеристик и особенностей самого типа графика. В одном дэше может быть отрисовано более одного визеля.
Настройки дэша включают в себя тип дэша и JSON структуру, описывающую содержимое дэша.
Типы дэшей в Luxms BI
Тип дэша (view_class) - это строка, указывающая тип визеля, который нужно отобразить в данном дэшлете. Ниже представлен список типов дэшей, доступных “из коробки”.
1. Аналитические:
1.1 Столбики горизонтальные (bar)
![](/docs/assets/images/1564bc4941d75b03a18fc6b4232cc561.png)
Представляет данные в виде горизонтального столбчатого графика.
1.2 Линия (line)
![](/docs/assets/images/42ed48d09787374d10eb9a584b4d0d83.png)
Представляет данные в виде линейного графика.
1.3 Столбики вертикальные (column)
![](/docs/assets/images/b047217d3695e84758abc756054c1800.png)
Представляет данные в виде вертикального столбчатого графика.
1.4 Области-штабели (stacked-area)
![](/docs/assets/images/f03a28fff861ca57f2a59f705eef312b.png)
1.5 Штабели горизонтальные (stacked-bar)
![](/docs/assets/images/bd90d1207f08f2deafa0fcdc97d6e912.png)
Представляет данные в виде горизонтального столбчатого графика с накоплением.
1.6 Штабели вертикальные (stacked-column)
![](/docs/assets/images/dc96089895deec6eb8d37a889a6c8e55.png)
Представляет данные в виде столбчатого графика с накоплением.
1.7 Точки (scatter)
![](/docs/assets/images/cdf350dd57c85e8a94ab72c03241b1b9.png)
Точечный график (множество точек, не соединенных между собой).
1.8 Сплайн (spline)
![](/docs/assets/images/925b637d1504d4046e529c44e40dc19d.png)
Представляет данные виде плавного линейного графика.
1.9 Водопад (waterfall)
![](/docs/assets/images/36ed0b0d15870fce4eae8cba43ca14a2.png)
Визуальное представление для факторного анализа.
1.10 Спидометр (gauge)
![](/docs/assets/images/42e312b8a226bd8298855b012f8d6040.png)
Представляет данные на текущий момент в соответствии с нормативными значениями.
1.11 Спидометр полукруглый (semicircle)
![](/docs/assets/images/f99bbf329ae0a0073b0902bbf284e587.png)
Представляет данные на текущий момент в соответствии с нормативными значениями.
1.12 Термометр (thermometer)
![](/docs/assets/images/27a50a3796fdcb20aca2d217cc30e7e1.png)
Представляет данные на текущий момент в соответствии с нормативными значениями.
1.13 Пирог (pie)
![](/docs/assets/images/99bf2cb778e34f11092fe5e1ee7a637d.png)
Показывает долевое отношение нескольких значений на текущий момент.
1.14 Пончик
![](/docs/assets/images/4755eddd7c982bb41815ee74f281e1e8.png)
Показывает долевое отношение нескольких значений на текущий момент. В центре отображена сумма по отображаемым сегментам.
1.15 Весы (scales)
![](/docs/assets/images/fcc145ccbfc413fa0ae6025d9a013d7f.png)
Показывает отношение двух значений на текущий момент.
1.16 Воронка (funnel)
![](/docs/assets/images/ad1237bcdbb73b97b705e678df1ba740.png)
Представляет данные на текущий момент в виде воронки.
1.17 Радар (radar)
![](/docs/assets/images/f930b7864dd7c6ba4e81305adb72203c.png)
Представляет данные на текущий момент в виде радиальной диаграммы.
1.18 Значение (label)
![](/docs/assets/images/32f4a30fc79bcaed5d2efd594452cf65.png)
Показывает одно значение на текущий момент в виде цифры. По умолчанию выводится с символом роста/падения и абсолютным отклонением от прошлого периода.
1.19 Древовидная карта (treemap)
![](/docs/assets/images/b610e888ce0529f2c39f454760b992bc.png)
Отражает иерархические данные как набор вложенных прямоугольников
1.20 Санкей (sankey)
![](/docs/assets/images/768c01c9ee736174fd848f7de693aa59.png)
Подчеркивает поток/движение/переход от одного состояния к другому или от одного времени к другому, в которой ширина стрелок пропорциональна скорости потока изображаемого обширного свойства.
1.21 ABC анализ
![](/docs/assets/images/a8e9b024b296b7276039565275b57063.png)
Метод анализа, позволяющий классифицировать ресурсы фирмы по степени их важности.
1.22 Сетчатая диаграмма
![](/docs/assets/images/f05e229c80e66ce61da6d8b22d82de51.png)
Подобна точечной, за исключением того, что значения измерений откладываются на осях, а символы графика определяются с помощью выражения
1.23 Таблица с группировкой (tableP)
![](/docs/assets/images/bed583592663506b3a4eb19d4984ebe7.png)
Представляет данные в табличном виде. В основном требуется для отображения агрегированных данных.
1.24 Список (list)
![](/docs/assets/images/0c1ea7d482e23369c8ae773131a17597.png)
Показывает несколько значений на текущий момент в виде списка.
1.25 What-if
![](/docs/assets/images/0fbea660abb3764c230f54dae69df4d3.png)
Тип анализа, который исследует эффект изменения в параметре на результат
2. Кастомизируемые:
2.1 Карта (map)
![](/docs/assets/images/7344ee3f76a48c2e5f10b9b521cebe9f.png)
Позволяет визуально сравнить географические области по значению показателя или по выполнению норматива (требуется добавить в конфиг деша типа map опции “fillAreasByData” - окрашивание, “fillLegend” - легенда для него).
2.2 Внешний - используется для встраивания iframe в дэш (подробности в руководстве по кастомизации фронтенда)
2.3 Внутренний - дэш, для отображения кастомных React-компонентов (подробности в руководстве по кастомизации фронтенда)
2.4 Изображение (image)
![](/docs/assets/images/38e9d97994e2e1b5772bac55deb7df0b.png)
Статичная картинка.
2.5 HTML (html)
![](/docs/assets/images/f94cea948f5fe7baf9195f8ee97ff09b.png)
Дэш, используемый для отображения статичного текста с использованием 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 Плоская таблица
![](/docs/assets/images/bf4a71839c837535f8a2104de1f6aeec.png)
Простая плоская таблица
2.7 Сводная таблица
![](/docs/assets/images/8e4b4ea4c8f41da3941fe38327c833b2.png)
Таблица с возможностью манипулирования отображением данных и группировкой данных по размерностям.
2.8 Схема (plan)
![](/docs/assets/images/b331a682b93a524e5b3189dbf3c28234.png)
Представляет данные в виде кастомизированной графики с возможностью детализации.
3. Группирующие:
3.1 Доска (board)
![](/docs/assets/images/93704ae35392287190dba0226a0c22fc.png)
Позволяет задать для отображения внутри деша более одного визеля через список оных в поле children.
3.2 Вкладки (tabs)
![](/docs/assets/images/d2586562a08d14f9f8c0f0ddbd4c1936.png)
Позволяет выбирать какой из дочерних визелей будет отображен.
4. Статистика:
4.1 Гистограмма (histogram)
![](/docs/assets/images/fd8db6086e24fd05c1722f85a3b0acc8.png)
При указании пустого объекта forecast в конфигурации на верхнем уровне дэша histogram будет построено наилучшее приближение для данного распределения (распределением Гаусса):
forecast: {}
![](/docs/assets/images/4b0b9bd65a538d38f71b9cf2800447e4.png)
Дэш “Гистограмма” работает корректно только с фактами без агрегации
4.2 Ящик с усами (boxplot)
![](/docs/assets/images/ea1dcafa335baa9f91447c678fe4f69c.png)
График, использующийся в описательной статистике, компактно изображающий одномерное распределение вероятностей
4.3 Пузырьки
![](/docs/assets/images/98d44c3283c0d31903f184ba36c62670.png)
Визуальное представление корреляции данных.
Также в Luxms BI можно создать следующие визуализации, не представленные в режиме редактирования:
- Комбинированный график
![](/docs/assets/images/6328465d393c35e8d9ffe71229b1f9dc.png)
Объединяет два типа визуализации на одном графике, например, столбики и линии (для каждой величины задается свой тип графика через настройку widgetType в блоке style секции dataSource).
- lookup-table
![](/docs/assets/images/f1a5955dc55bf7c15c72382aa4841aaf.png)
Таблица, отображающая результат запрос в кастомную таблицу БД.
- axes-selector
![](/docs/assets/images/3f51656f79b946ff6210fe2b7f9477e0.png)
Дэш, с возможностью переключения осей, кубов и фактов для различного варианта отображения.
JSON конфиг дэша
JSON структура описания деша на верхнем уровне состоит из следующих секций и опций:
- frame
- dataSource
- display
- url
- bgImage
- options
- hierarchy
- onClickDataPoint
- children
- view_class
- title
Поле title
В поле title
указывается заголовок дэша. Заголовок указывается в кавычках. Ниже представлен пример использования title
:
![](/docs/assets/images/df5e315b9a143272aa5402393886b852.jpg)
title
Формат:
title: 'Название дэша'
Стилизация заголовка
В title можно указать lpe-выражение с использованием функций bold
и italic
.
title: 'lpe:italic("Сравнение") + " минимума и" + bold(" 0.5-квантиля")',
display: {
headerStyle: {
color: 'white',
fontSize: 30,
fontFamily: 'Times New Roman',
backgroundColor: '#E0AB9F',
},
},
![](/docs/assets/images/17339518f8e1d90701315e124f3daeb5.png)
При скачивании дэша в формате .png или .pgf стили заголовка не сохраняются.
Использование getFilter
в заголовке
Обычно, в заголовоке дэша указывается строка, но для динамического изменения заголовка можно использовать LPE-выражение с функцией getFilter. Ниже представлен пример использования данной функции:
title: 'lpe:"Количество " + if(getFilter("sex") && getFilter("sex").1 = "Женщины", "гинекологов", "урологов") + " (чел)"',
В данном примере через +
производится объединение строк. Во втором слагаемом данного выражения подставляется строка в зависимости от установленных фильтров (логика работы фильтров описана в блоке dataSource подразделе filters).
Функция getFilter принимает на вход размерность, и возвращает true если данная размерность была отфильтрована, в противном случае false.
В случае, если необходимо проверить наличие конкретного показателя в выборке после фильтрации, добавляется дополнительный параметр число, который проверяет n-ый элемент выборки.
Например getFilter(“sex”).1 = “Женщины” вернет true если, показатель “Женщины” не отфильтрован, присутсвует в выборе, и этот показатель выбран в единственном числе или является первым в списке отфильтрованных.
Ниже приведен пример работы вышеописанного LPE-выражения:
![](/docs/assets/images/a188ff0e2c94b905628bb8a549927ebc.png)
Если отфильтровать сначала все, затем выбрать показатель “Женщины” - заголовок изменится на следующий:
![](/docs/assets/images/4d0f511fa92161f8c9d3ceebd5c801bf.png)
Данный функционал особенно полезен, в случае указания defaultValue для размерностей.
Функции data()
и displayFilter()
Функции data()
(будет переименована в label()
), displayFilter()
отображают данные, отправляют запросы, реагируют на фильтры. Функции используются в заголовке дэша. Использование условий if для этих функций не предусмотрено.
data()
- функция, которая позволяет выводить значение факта после агрегации. Для корректной работы следует добавлять алиас.
displayFilter()
- отображает значение измерения, выбранное в управляющем дэше.
Для отображения картинки в заголовке в формате svg используется функция svg
.
Примеры использования.
title: 'lpe:"Функция " + bold("displayFilter() ") + displayFilter(date, "Всё") + " " + displayFilter(away_team, "Все") + " " + displayFilter((minute), "ВСЕ") + " " + displayFilter(penalty, "ВСЕ")',
![](/docs/assets/images/37e6ee46ccd1cccb0e5c64cde358c6a2.jpeg)
title: 'lpe: bold("Функция data() ") + data("away_team","ВСЕ") + " " + data("max(minute)")',
![](/docs/assets/images/8a1b8da0ee769c97a294471fa0e86ac8.jpeg)
Добавление картинки svg в заголовок. Функция hash()
позволяет настроить размер картинки:
title: 'lpe: bold("Функция svg() ") + svg("cat.svg",hash(width, 50, height, 50)) + italic("тест")',
Svg файл необходимо добавить в ресурсы текущего атласа.
Поле description
В случае необходимости написания подробного описания дэша, который не поместится в заголовок вы можете указать описание дэша используя опыт description
Пример
description: 'Активы банка за 2016 календарный год'
После добавления данного поля у меню дэша появится иконка, при нажатии на которую отобразится описание:
![](/docs/assets/images/4d1cac33650580ece3b1f5d8dd999674.png)
Секция frame
Формат:
"frame": {
"h": Integer,
"w": Integer,
"x": Integer,
"y": Integer,
}
Секция frame
используется для указания местоположения и размеров конфигурируемого дэша. По умолчанию, созданные дэши занимают все доступное пространство для отображения. Для отображения дэша на экране используются следующие ключи:
x
- расположение дэша на дэшборде по оси Х
При увеличении значения для ключаx
дэш сдвигается вправо на дэшборде. На изображении ниже представлен пример дэша, с указанным значением для 1:
![](/docs/assets/images/9002fd9b80cbc70b33615bc58e8f8cd6.jpg)
Дэш сдвинут таким образом, что в левой части дэшборда поместится дэш со значениями w=1/h=1
и значением x=0
. Также можно указывать значения с числами после запятой, для более тонкой настройки расположения дэша. Ниже представлен пример отображения дэша со значением x=3.5
![](/docs/assets/images/935c326a264bb05213ba541b71c4f1ae.jpg)
Как можно заметить, в левой пустой части дэшборда, можно разместить три дэша со значениями w=1
и один дэш со значением ширины w=0.5
Аналогичная логика работы при изменения расположения дэша по оси Y. Ниже представлены изображения для y=1
:
![](/docs/assets/images/2481f5b86bc5eab4b6c69874e7d81906.jpg)
и y=3.5
соответственно:
![](/docs/assets/images/df6247e0e1fdc8ff30c532e21b8f19bf.jpg)
Логика аналогичная как и в случае изменения x
- в верхней пустой части дэшборда, можно разместить три дэша со значениями h=1
и один дэш со значением ширины h=0.5
, либо один дэш со значением h=2
и один дэш со значением ширины h=1.5
, ниже представлен пример отображения трех дэшей на дэшборде с вышеописанными примерами:
![](/docs/assets/images/c2cf0d3afac67bc2aa9c74b0b55f8bcf.jpg)
Секции 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"]
![](/docs/assets/images/d913f0c1a6ccfd25f74b1db501423ef3.png)
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:
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” :
тип OBJECT
принимает id ключ из массива dataSource.dimensions
- тип OBJECT
- ключ “title”: тип STRING, меняет заголовок dimension
- ключ “color”: тип STRING, меняет цвет dimension
Пример :
style:{"sex":{"Мужчина":{ "title": "муууу" }}}
спец ключ “measures”:
тип OBJECT
Принимает 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:
Принимает id ключ из массива dataSource.measures
Создаем любые переменные в виде ключ : выражение
backgroundColor: будет либо цвета:
- если myConst1 = true, backgroundColor: ‘#00b9ac’
- если myConst2 = true, backgroundColor: ‘#fed450’
- если (myConst1 && myConst2) = false, ‘#93CAFE’
- Пример:
"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
- формат задается исходя из документации (по данной ссылке)
- Примеры:
"format": "-# ###,0%"
- значение будет выводится с один знаком после запятой с символом “%”"format":"#[ / 2]"
- отображаемое значение в тултипе и подписях будет поделено на 2"format": "# ### [тыс, млн, млрд, тера]"
- значение будет отображаться в зависимости от количества цифр в числе. Пример: число “220 000” будет выводится как “220 тыс”, число “200 000 000” будет выводится как “220 млн” и т.д."format": "△ #"
округляет значение в большую сторону, а"▽ #"
в меньшую
Для визеля “Значение” и значения внутри визеля “Бублик” format
необходимо указывать в поле display
, для остальных случаев format
прописывается в поле style
рассматриваемого факта/размерности.
Если два и более фактов имеют различные единицы измерения и их необходимо отобразить в одном дэше на разных осях, необходимо каждому из фактов указать format
.
Например:
style: {
measures: {
avg_naselenie: {
format: '# ### человек',
},
},
},
После этого на дэше будет отображено две оси:
![](/docs/assets/images/968d27c35a6b9979420f323f649c203a.png)
Секция 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",
},
},
Отображение данного тултипа продемонстрировано ниже:
![](/docs/assets/images/009049ece5b1bdb0dbb98d60f3c3c2da.png)
Для отображения формул tooltip
необходимо задавать как строку с формулой LaTex. Ниже представлен пример указания формулы:
"display": {
"tooltip": "latex:%y: $f_x(%x) = %v^2$",
}
где %y
- наименование показателя, отложенного на оси Y,
%x
- наименование показателя, отложенного на оси Х,
%v
- значение
Ниже пример отображения тултипа с использованием данной функции:
![](/docs/assets/images/e3253ad98cdb6bf38f22c7318da77f44.png)
В тултипах также можно указать собственную подпись, выводить значения и наименования показателей используя HTML верстку. В случае необходимости указания общего тултипа для всех показателей, его необходимо прописать в блоке display
:
"display": {
"tooltip": "html:общий формат тултипов с заменой %x %y %v <b>%percent %marker"
},
где %x и %y - наименования показателей, отложенные на xAxis и yAxis соответственно,
%v - значение показателя,
%percent - Вывод показателя в процентах (для дэшлетов “Пирог” и “Донат”),
%marker - отображения цвета показателя в круге
Секция echart
Часть дэшей в Luxms BI отрисовываются с использованием библиотеки Apache Echarts. Для ряда дэшей существует возможность наследования конфигурационных полей из данной библиотеки. Ниже представлен список команд, которые можно указать в секции echart:
- Указание ширины и цвета линий дэша:
echart: {
series: {
lineStyle: {
color: 'green',
width: 40,
},
},
},
- Указание ширины столцов:
echart: {
barWidth: 50,
},
- Указание цвета и размера подписей для оси:
echart: {
xAxis: {
axisLabel: {
textStyle: {
color: 'gold',
fontSize: 42,
},
},
},
yAxis: {
axisLabel: {
textStyle: {
color: 'gold',
fontSize: 42,
},
},
},
},
- Для изменения варианта отображения точек для дэшей “Линии”, “Области”, “Точки”:
echart: {
series: {
symbol: 'diamond',
},
},
Возможные значения:
diamond
- ромбики,cirlce
- круги (по-умолчанию),triangle
- треугольники,rect
- квадратыУказание цвета лэйбла на графике
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 и т.д.)
![](/docs/assets/images/2e4ebbfc09c5959d135bc308785d767a.png)
При указании пустого объекта 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"]
.
Fixed
- при включенной опции дэш закреплен на экране при скроллированииDisableLoadData
- запретить загрузку у кубовых дешей, в тех случаях, когда данные либо не нужны (например, управляющий дэш, what if), либо они загружаются иным запросом (это поможет избежать лишних запросов)DisplayAllBadges
- показать все подписи на графиках без учета пересечений значенийDisplayAllVeryBadges
- показать все подписи принудительно!TopBarMenu
- скрыть меню визеля!TopBar
- скрыть заголовок дэшаHideLegend
- скрыть легенду на графике!DisplayOverall
- для дэшей таблиц убирает итоговые строки внизу таблицыDisplayOverall
- для дэшей таблиц добавляет итоговые строки внизу таблицы. (По умолчанию выводятся суммы по столбцам, для использования другой формулы используйте поле formula, описанную ниже.)EastPanel
- для дублирования дэша в правой выдвигающейся панели (рекомендуется использовать только для управляющего дэша)!DisplayAxisYMarks
- скрыть ось Y у дэша (работает для двумерных дэшей)!DisplayAxisXMarks
- скрыть ось Х у дэша (работает для двумерных дэшей)TooltipXAxisTitle
- отображение полного наименования показателя размерности в всплывающей подсказке (тултипе)!DisplayAxis
- cкрытие сетки и осей у двумерных дэшей!ShowBackground
- cкрытие теней у столбцов!DisplaySplitLines
- cкрытие разделительных линий у двумерных дэшей!DisplayTicks
- cкрытие рисок/тиков осей у двумерных дэшейTransparent
- фон визелей “Значение” и “Внутренний” соответствует фону подложки дэшбордаXAxisValue
- переключение оси Х с категориальной на численный вариант отображения (применяется для двумерных дэшей)MergeCells
- опция, включающая объединение ячеек по вертикали в таблице koob-table-simpleModalDrilldown
- подключение старого варианта иерархии для дэша (Модальное окно с горизонтальными столбцами. Для подключения данного варианта на всю систему, необходимо в файле /opt/luxmsbi/web/settings/settings.js в массиве features указать данную опцию и перезапустить компонент)FullWidth
- растягивает все колонки таблицы на всю ширину (включено по умолчанию). Если указать, например, у одного столбика значительно большую длинy, то может появиться скролл. При отключенной опции (!FullWidth
) пользователь может задать своё значение ширины (width) для всех столбцов.!Sort
- выключение сортировки у дэша Плоская таблица!Expanded
- скрытие возможности разворачивания дэша на весь экранResetButton
/!ResetButton
- опция управляюзего дэша, которая позволяет показать/скрыть иконку “Очистить все фильтры” и “Сбросить фильтр” в зависимости от уровня, на котором опция указана. По умолчанию у управляющего дэша и у размерности установленоResetButton
, если у размерности указан типradio
-!ResetButton
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",
],
},
},
},
}
Ниже представлены опции для конкретных размерностей:
AlwaysLast
- Независимо от включенной сортировки набора данных, данный показатель будет отображаться последним. Реализовано для двумерных (столбики) и одномерных дэшей (бублик и пирог)DisableLegend
- По умолчанию данный показатель будет отображаться после нажатия на легенду. (реализовано для двумерных дэшей)Pin
- Закрепление столбца при скролле плоской таблицы (реализовано только для плоской таблицы)
Списки опций, доступные для разных типов дэшей
- Опции, доступные для всех дешей:
Fixed
TopBarMenu
TopBar
Hidden
ModalDrilldown
- Опции, доступные для дэшей “Линия”, “Области-Штабели” и “Сплайн”:
DisplayAllBadges
DisplayAllVeryBadges
EastPanel
!DisplayAxisYMarks
!DisplayAxisXMarks
TooltipXAxisTitle
!DisplayAxis
!DisplaySplitLines
!DisplayTicks
Transparent
DisableLegend
YLogAxis
LinesWithoutDots
DisplayDataZoom
- Опции, доступные для дэша “Точки”:
DisplayAllBadges
DisplayAllVeryBadges
EastPanel
!DisplayAxisYMarks
!DisplayAxisXMarks
TooltipXAxisTitle
!DisplayAxis
!DisplaySplitLines
!DisplayTicks
Transparent
DisableLegend
YLogAxis
DisplayDataZoom
- Опции, доступные для дэшэй “Столбики горизонтальные” и “Столбики вертикальные”:
DisplayAllBadges
DisplayAllVeryBadges
EastPanel
DisplayAxisYMarks
DisplayAxisXMarks
TooltipXAxisTitle
DisplayAxis
DisplaySplitLines
DisplayTicks
Transparent
DisableLegend
YLogAxis
LinesWithoutDots
DisplayDataZoom
- Опции, доступные для дэшэй “Штабели горизонтальные” и “Штабели вертикальные”:
DisableLoadData
DisplayAllBadges
DisplayAllVeryBadges
EastPanel
DisplayAxisYMarks
DisplayAxisXMarks
TooltipXAxisTitle
DisplayAxis
DisplaySplitLines
DisplayTicks
Transparent
DisableLegend
YLogAxis
LinesWithoutDots
DisplayDataZoom
DisplayBadgesPercent
- Опции, доступные для дэша “Пирог”:
DisplayAllBadges
DisplayAllVeryBadges
EastPanel
!DisableLegend
DisplayBadgesPercent
DisplayBadgesValue
- Опции, доступные для дэша “Пончик”:
DisplayAllBadges
DisplayAllVeryBadges
EastPanel
!DisableLegend
DisplayBadgesPercent
DisplayBadgesValue
!DisplayCenterLabel
- Опции, доступные для дэша “Весы”:
EastPanel
Transparent
!DisplayLegend
DisplayBadgesPercent
- Опции, доступные для дэша “Радар”:
EastPanel
Transparent
!DisplayLegend
- Опции, доступные для дэша “Список”:
EastPanel
Transparent
- Опции, доступные для дэша “Воронка”:
Transparent
- Опции, доступные для дэша “Древовидная карта”:
EastPanel
- Опции, доступные для дэшэй “Термометр”, “Спидометр” и “Спидометр полукруглый”:
DisableLoadData
EastPanel
- Опции, доступные для дэша “Значение”:
DisableLoadData
EastPanel
Transparent
- Опции, доступные для дэша “Водопад”:
DisableLoadData
DisplayAllBadges
EastPanel
!DisplayAxisYMarks
!DisplayAxisXMarks
TooltipXAxisTitle
!DisplayAxis
!DisplaySplitLines
!DisplayTicks
- Опции, доступные для дэша “Пузырьки”:
DisableLoadData
EastPanel
- Опции, доступные для дэша “Санкей”:
DisableLoadData
!ColoredPath
EastPanel
GradientPath
TooltipPercent
LabelsLeft
!Labels
!Category
AllCategory
- Опции, доступные для дэша “Сетчатая диаграмма”:
DisableLoadData
!ColorByCategory
EastPanel
!xAxisSplitLines
!yAxisSplitLines
- Опции, доступные для дэша “Таблица с группировкой”:
DisableLoadData
DisplayOverall
FullWidth
- Опции, доступные для дэша “Плоская таблица”:
bgContain
FullWidth
!Sort
- Опции, доступные для дэша “Сводная таблица”:
DisableLoadData
DisplayOverall
FullWidth
- Опции, доступные для дэшэй “What-if анализ”, “HTML” и “Изображение”:
DisableLoadData
Transparent
EastPanel
- Опции, доступные для дэша “Управляющий дэш”:
DisableLoadData
EastPanel
PanelOpened
ResetButton
ResetButtonToDefault
- Опции, доступные для дэша “Доска”:
EastPanel
- Опции, доступные для дэша “Вкладки”:
Transparent
- Опции, доступные для дэша “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")',
navigate
Переключение на указанный в выражении дэшборд/датасет. Функция имеет минимум два аргумента:
Элемент для перехода
- Возможные значения: dboard
- для перехода на другой дэшбод текущего датасета, segmentId
- для перехода на другой датасет (в случае, если в аргументах указан только переход на датасет, то переход будет осуществлен на дэшборд с номером, аналогичным изначальному)
ID элемента для перехода
- Для перехода к датасету необходимо указывать схему датасета, для дэшборда номер.
Пример использования LPE-выражения с вышеописанными функциями представлен ниже:
На изображении ниже представлен дэш “Данные” и его конфигурационный файл:
![](/docs/assets/images/12edc010570b60396473006bb634278e.png)
Ниже представлен сам конфигурационный файл дэша:
{
"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 которого указано в конфигурационном файле.
Пример использования данной функциональности представлен ниже:
![](/docs/assets/images/33189db3362052541468948147f023c0.png)
Конфигурационный файл с примером использования функции 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), "Количество заказов")',
![](/docs/assets/images/560b7aff2e4d9d7f02f56d1c92a0bd5e.png)
navigateUrl
Используется для перехода на внешний источник с подстановкой значения из таблицы.
Пример использования данной функциональности представлен ниже:
![](/docs/assets/images/fd64a4be821c3a6f8d3450f8f4fa350d.png)
Конфигурационный файл с примером использования функции 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
menuItem
Используется для совместного использования 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
![](/docs/assets/images/1505550df8965412d479527729c13a41.png)
В заголовке дэша “Значение” можно также пользоваться 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
- указание размера шрифта в относительных единицах. Указывается типом значения NUMBERcustomValue
- Данная опция используется для указания прописанного текста в значении данного ключа. При установке данного ключа данные не отображаются, отображается только введенный текст в значениеcustomValue
Конфигурация lookup-таблицы
В конфигурации lookup-таблицы существует возможность использования определенных стилей CSS для оформления отображения столбцов таблицы. Ниже приведены примеры, в которых продемонстрированы ключи для работы lookup-таблицы:
width
- установка ширины столбца в lookup-таблицеwhite-space
- управление обработкой пробельных символов внутри элемента.
Возможные варианты значений:
normal
- Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы.nowrap
- Объединяет последовательности пробелов в один пробел, как значениеnormal
, но не переносит строки (оборачивание текста) внутри текста.pre
- Последовательности пробелов сохраняются так, как они указаны в источнике.pre-line
- Последовательности пробелов объединяются в один пробел.