Расширенные настройки виджетов 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)

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

1.20 Санкей (sankey)

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

1.21 ABC анализ

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

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

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

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

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

1.24 Список (list)

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

1.25 What-if

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

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

2.1 Карта (map)

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

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

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

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

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

2.5 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)

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

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

3.1 Доска (board)

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

3.2 Вкладки (tabs)

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

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

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

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

forecast: {}

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

осторожно

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

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

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

4.3 Пузырьки

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

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

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

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

lookup-table

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

axes-selector

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

JSON конфиг дэша

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

frame
dataSource
display
url
bgImage
options
hierarchy
onClickDataPoint
children
view_class
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',
        },
      },
      

При скачивании дэша в формате .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, "ВСЕ")',

  title: 'lpe: bold("Функция data() ") + data("away_team","ВСЕ") + "  " + data("max(minute)")', 
  

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

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

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

Поле description

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

Пример

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

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

Секция frame

Формат:

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

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

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

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

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

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

Логика аналогичная как и в случае изменения 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:

 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:

Принимает id ключ из массива dataSource.measures
Создаем любые переменные в виде ключ : выражение
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
                        },
{...},{...} ],

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:

Указание ширины и цвета линий дэша:

  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 и т.д.)

Пример отображения дэша “Линии” с прогнозированием с использованием линейной регрессии

При указании пустого объекта 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-simple
ModalDrilldown - подключение старого варианта иерархии для дэша (Модальное окно с горизонтальными столбцами. Для подключения данного варианта на всю систему, необходимо в файле /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-выражения с вышеописанными функциями представлен ниже:

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

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

{
    "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

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

Конфигурационный файл с примером использования функции 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

В заголовке дэша “Значение” можно также пользоваться 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-таблицы:

width - установка ширины столбца в lookup-таблице
white-space - управление обработкой пробельных символов внутри элемента.
Возможные варианты значений:

normal - Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы.
nowrap - Объединяет последовательности пробелов в один пробел, как значение normal, но не переносит строки (оборачивание текста) внутри текста.
pre - Последовательности пробелов сохраняются так, как они указаны в источнике.
pre-line - Последовательности пробелов объединяются в один пробел.

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

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

JSON конфиг дэша​

Поле title​

Поле description​

Секция frame​

Поле bgImage​

Секция dataSource​

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

koob​

dimensions​

measures​

xAxis/yAxis​

filters​

having​

hierarchy​

sortBy​

style​

limit​

subtotals​

format​

Секция display​

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

limit​

range​

stoplight​

lights​

fontSize​

cmpTitle​

gap​

selectedColor​

stripes​

borderRadius​

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

Секция echart​

Секция forecast​

Опция url​

Секция options​

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

Секция onClickDataPoint​

setKoobFilters​

setKoobFilter​

navigate​

openModal​

navigateUrl​

menuItem​

toggleKoobFilters​

setVar​

dataReload​

Секция children​

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

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

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

JSON конфиг дэша

Поле title

Поле description

Секция frame

Поле bgImage

Секция dataSource

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

koob

dimensions

measures

xAxis/yAxis

filters

having

hierarchy

sortBy

style

limit

subtotals

format

Секция display

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

limit

range

stoplight

lights

fontSize

cmpTitle

gap

selectedColor

stripes

borderRadius

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

Секция echart

Секция forecast

Опция url

Секция options

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

Секция onClickDataPoint

setKoobFilters

setKoobFilter

navigate

openModal

navigateUrl

menuItem

toggleKoobFilters

setVar

dataReload

Секция children

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

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