Перейти к основному содержимому
Версия: 3.2

Структура дашборда в JSON

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

Каждый дашборд характеризуется следующими особенностями:

  • Может состоять из одной или нескольких строк панелей.
  • Каждая панель содержит визуализацию, например, диаграмму или таблицу.
  • В каждой панели поиск генерирует данные для визуализации.
  • Включает элементы inputs, такие как текстовые поля или мультивыбор, для взаимодействия с пользователем. Элементы в дашборде можно настроить для реагирования на ввод данных, например, для изменения поискового запроса, который управляет визуализацией.

Составные части дашборда

Общий вид иерархии дашборда выглядит следующим образом

{
"label": [0..1],
"inputs": [
{
"input": [0..N]
}
],
"rows": [
{
"panels": [0..N]
}
],
"vars": [
{
"var": [0..N]
}
]
}
ЭлементОписаниеПредставление в JSON
ЗаголовокНаименование дашборда.
{
"label": ""
}
ФильтрыМассив элементов для взаимодействия.
{
"inputs": []
}
СтрокиМассив строк дашборда с панелью или панелями.
{
"rows": []
}
--
{
"vars": []
}

Фильтры

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

Атрибуты

В каждом элементе используются следующие атрибуты.

НазваниеТип данныхПредназначение
nameСтрокаСистемное имя фильтра.
labelСтрокаТекстовая метка для фильтра.
type

Один из представленных типов.

  • time
  • text
  • selection
  • checkbox
  • radio
  • multiselection
optionsОбъектПредварительные настройки для фильтра.
tokenОбъектЗначение, выбранное пользователем с помощью фильтра.
timeInputСтрокаЗначение системного поля фильтра типа time для использования в поисковых запросах. Применим для типов фильтров: selection, multiselection.

Атрибут options

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

НазваниеТип данныхПредназначение
defaultОбъектНастройки по умолчанию для фильтра.
staticМассивПеречень значений, которые заполняются вручную (для типов checkbox, selection, radio, multiselection).
allow_customБулево значениеВозможность ввести свой вариант для дальнейшего выбора в фильтре (только для типа multiselection).
searchСтрокаПоисковый запрос для формирования динамических опций выбора в фильтре (только для типов selection и multiselection).

Атрибут default

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

Тип фильтраСтруктураОписание
time
{
"options": {
"default": {
"start": "string",
"end": "string",
"isPaused": "boolean",
"refreshInterval": "number"
}
}
}
  • start - начало временного периода.
  • end - конец временного периода.
  • isPaused - флаг включения/выключения автоматического обновления времени.
  • refreshInterval - временной период автоматического обновления времени.

checkbox

selection

multiselection

{
"options": {
"default": [
{
"label": "string",
"value": "string"
}
]
}
}
  • label - Отображаемое значение в фильтре.
  • value - Системное значение в фильтре.

text

radio

{
"options": {
"default": "string"
}
}
Текстовое значение по умолчанию.

Атрибут token

Для каждого типа фильтров токен имеет свое представление.

Тип фильтраСтруктураОписание

checkbox

multiselection

{
"token": {
"prefix": "string",
"suffix": "string"
},
"token_value": {
"prefix": "string",
"suffix": "string"
},
"delimiter": "string"
}

Для token

  • prefix - Текст, добавляемый перед токеном.
  • suffix - Текст, добавляемый после токена.

Для token_value

  • prefix - Текст, добавляемый перед значением токена.
  • suffix - Текст, добавляемый после значения токена.

Для delimiter

  • delimiter - Разделитель между выбранными значениями.

text

radio

selection

{
"token": {
"prefix": "string",
"suffix": "string"
}
}
  • prefix - Текст, добавляемый перед токеном.
  • suffix - Текст, добавляемый после токена.

Панели

В контексте интерфейсов дашбордов элемент rows (строки) является контейнером для одного или нескольких дочерних элементов panel (панель). Она служит для группировки и управления расположением панелей на странице.

Внутри контейнера row (строка) располагаются элементы panel (панель), которые служат для отображения визуальных данных (графики, диаграммы и т.п.). Панели позволяют управлять группировкой и расположением визуализаций на странице.

Внутри панели элементы визуализации выравниваются по горизонтали. Для расположения визуализаций вертикально, создаётся новый контейнер row.

Общий вид структуры панели

{
"inputs": [],
"height": "number | string",
"width": "number | string",
"label": "string",
"type": "string",
"viz": {},
"depends": [],
"subpanels": []
}
ЭлементОписаниеПредставление в JSON
ФильтрыМассив элементов для взаимодействия.
{
"inputs": []
}
Высота панелиЧисловое или строковое значение (в процентах) высоты панели.
{
"height": ""
}
Ширина панелиЧисловое или строковое значение (в процентах или пикселях) ширины панели.
{
"width": ""
}
ЗаголовокЗаголовок панели.
{
"label": ""
}
ТипТип панели.
{
"type": ""
}
ВизуализацияИспользуемая визуализация в панели.
{
"viz": {}
}
ОтображениеМассив токенов, используемых для отображения панели.
{
"depends": []
}
ПодпанелиМассив дочерних панелей.
{
"subpanels": []
}

Атрибут viz

Панель может содержать один или несколько типов визуализаций.

ЭлементСтруктураОписание

options

{
"viz": {
"options": {}
}
}

Настройки для визуализации.

options.sme.query
{
"viz": {
"options": {
"sme": {
"query": "string"
}
}
}
}
Поисковый запрос формирующий значения в визуализации.
options.drilldown
{
"viz": {
"options": {
"drilldown": {
"enableDrilldown": "boolean",
"drilldownType": "string",
"drilldownText": "string",
"drilldownQuery": "string",
"drilldownCustomTimeTokenEarliest": "string",
"drilldownCustomTimeTokenLatest": "string",
"drilldownSelectTimeToken": "string",
"drilldownTokens": [{
"name": "string",
"value": "string"
}
]
}
}
}
}

Механизм Drilldown (детализации).

  • enableDrilldown - флаг включения детализации
  • drilldownType - тип детализации. Доступны опции: search (поиск), custom (произвольная ссылка), tokenControl (Изменение токенов)
  • drilldownText - значение произвольной ссылки (Только для custom)
  • drilldownQuery - значение поискового запроса (Только для search)
  • drilldownCustomTimeTokenEarliest - левая граница произвольного временного диапазона (Только для search)
  • drilldownCustomTimeTokenEarliest - правая граница произвольного временного диапазона (Только для search)
  • drilldownSelectTimeToken - системное имя токена временного диапазона. Для произвольного значения используется customPicker. (Только для search)
  • drilldownTokens - массив токенов, которые участвуют в работе детализации. Элемент массива включает в себя название токена name и значение токена value (только для tokenControl)

timeToken

{
"viz": {
"timeToken": "string"
}
}

Значение системного поля фильтра типа time для использования в поисковых запросах ИЛИ заранее заданные временные рамки начала (start) и конца (end) запроса.

{
"viz": {
"timeToken": {
"start": "string",
"end": "string"
}
}
}

type

{
"viz": {
"type": "string"
}
}

Один из представленных типов визуализаций.

Тип визуализации table (Таблица)

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

ЭлементСтруктураОписание
options.colorRuleList
{
"options": {
"colorRuleList": [{
"field": "string",
"colorScheme": "string",
"pallete": "string | []",
"show": "boolean",
"isBackground": "boolean"
}
]
}
}

Настройка цветовой схемы столбцов.

  • field - Название поля.
  • colorScheme - Тип расцветки. Доступны опции: scale (палитра), field (по значению), range (диапазон).
  • palette - Палитра раскраски. Значение поля зависит от поля colorScheme.
  • show - Флаг отображения настройки цветовой схемы.
  • isBackground - Флаг раскраски ячейки столбца.
colorRuleList[].palette
{
"pallete": "string"
}

Для colorScheme со значением scale, палитра раскраски задаётся строкой. Например, white_to_green (от белого к зеленому).

{
"pallete": [{
"value": "string",
"color": "string"
}
]
}

Для colorScheme со значением field, палитра раскраски задаётся объектом или объектами со значениями:

  • value - Значение ячейки.
  • color - Значение цвета в HEX-формате.
{
"pallete": [{
"minValue": "number",
"maxValue": "number",
"color": "string"
}
]
}

Для colorScheme со значением range, палитра раскраски задаётся объектом или объектами со значениями:

  • minValue - Числовое значение левой границы диапазона.
  • maxValue - Числовое значение правой границы диапазона.
  • color - Значение цвета в HEX-формате.
options.tableAutoWidth
{
"options": {
"tableAutoWidth": "boolean"
}
}
Флаг автоматического расчета ширины таблицы.
options.pagination
{
"options": {
"pagination": {
"enabled": "boolean",
"rowsPerPageList": [{
"label": "string"
}
],
"rowsPerPageDefault": {
"label": "string"
}
}
}
}

Настройка пагинации.

  • enabled - Флаг включения пагинации в таблице.
  • rowsPerPageList - Массив опций выбора количества отображаемых строк в таблице. Элемент массива задается значением со структурой поля rowsPerPageDefault.
  • rowsPerPageDefault - Значение отображаемых строк в таблице по умолчанию.
options.summary
{
"options": {
"summary": {
"enabled": "boolean"
}
}
}
Флаг включения статистики по столбцам.

Тип визуализации single (Метрика)

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

ЭлементСтруктураОписание
options.general
{
"options": {
"general": {
"fieldForTrend": "string",
"fieldForValue": "string",
"label": "string"
}
}
}

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

  • fieldForTrend - Название поля для построения трендовой линии.
  • fieldForValue - Название поля для отображения метрики.
  • label - Название панели метрики.
options.show
{
"options": {
"show": {
"arrow": "boolean",
"label": "boolean",
"sparkline": "boolean",
"delimiters": "boolean",
"delimiter": "string"
}
}
}

Настройки отображения.

  • arrow - Флаг отображения трендового индикатора.
  • label - Флаг отображения названия панели метрики.
  • sparkline - Флаг отображения тренда.
  • delimiters - Флаг отображения разделителя тысяч.
  • delimiter - Значение разделителя. Допустимы значения: запятая (,), точка (.), пробел ( ).
options.color
{
"options": {
"color": {
"invert": "boolean",
"isRange": false,
"color": [{
"color": "string",
"value": "string | number"
}
]
}
}
}

Настройка раскраски метрики по значениям.

  • invert - Флаг включения инвертированного порога.
  • isRange - Флаг раскраски метрики по диапазону. В данном случае он равен false.
  • color - Массив пар цвета в HEX-формате color и значения метрики value.
{
"options": {
"color": {
"invert": "boolean",
"isRange": true,
"color": [{
"color": "string",
"range": {
"min": "number",
"max": "number"
}
}
]
}
}
}

Настройка раскраски метрики по диапазону.

  • invert - Флаг включения инвертированного порога.
  • isRange - Флаг раскраски метрики по диапазону. В данном случае он равен true.
  • color - Массив пар цвета в HEX-формате color и диапазона значения метрики range, который описывается минимальным значением min и максимальным значением max.

Тип визуализации pie (Круговая диаграмма)

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

ЭлементСтруктураОписание
options.general
{
"options": {
"general": {
"checkedDonut": "boolean",
"checkedLabel": "boolean",
"checkedOther": "boolean",
"checkedSliceCount": "boolean",
"checkedSlicePercent": "boolean",
"textField": "string",
"threshold": "number",
"truncateText": "boolean",
"truncatePosition": "string"
}
}
}

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

  • checkedDonut - Флаг включения кольцевой диаграммы.
  • checkedLabel - Флаг включения отображения названия на диаграмме.
  • checkedOther - Флаг включения сектора "Другое".
  • checkedSliceCount - Флаг включения отображения количества значений для каждого сектора.
  • checkedSlicePercent - Флаг включения отображения значения в процентах для каждого сектора.
  • textField - Название диаграммы.
  • threshold - Значение порога в процентах для сектора "Другое".
  • truncateText - Флаг включения сокращения текста для каждого сектора.
  • truncatePosition - Начало позиции сокращения текста. Допустимы значения left (слева), right (справа) и center (середина).
options.color
{
"options": {
"color": {
"rulesArray": [{
"field": "string",
"color": "string"
}
]
}
}
}

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

  • field - Название сектора в диаграмме.
  • color - Значение цвета в HEX-формате.
options.theme
{
"options": {
"theme": {
"name": "string"
}
}
}

Преднастроенная тема раскраски секторов.

  • name - Название темы.

Тип визуализации line (Линейная диаграмма)

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

ЭлементСтруктураОписание
options.general
{
"options": {
"general": {
"showScrollBar": "boolean",
"stackedMode": "boolean",
"enableArea": "boolean",
"multiseries": "boolean"
}
}
}

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

  • showScrollBar - Флаг включения шкалы предварительного просмотра в диаграмме.
  • stackedMode - Флаг включения группировки рядов данных.
  • enableArea - Флаг включения закраски площади под графиком.
  • multiseries - Флаг включения разбиения рядов данных на графике.
options.line
{
"options": {
"line": {
"smooth": "number",
"opacity": "number",
"strokeWidth": "number"
}
}
}

Настройка отображения линии.

  • smooth - Значение плавности линии.
  • opacity - Значение прозрачности линии.
  • strokeWidth - Значение ширины линии.
options.grouping
{
"options": {
"grouping": {
"dataGrouping": "boolean",
"dataGroupingAutoBaseInterval": "boolean",
"dataGroupingBaseInterval": {
"timeUnit": "string",
"count": "number"
},
"dataGroupingCount": "number"
}
}
}

Настройка группировка данных.

  • dataGrouping - Флаг включения группировки данных.
  • dataGroupingAutoBaseInterval - Флаг включения автоматического расчета интервала группировки данных.
  • dataGroupingBaseInterval - Объект ручного расчета интервала группировки данных. Объект характеризуется единицей времени timeUnit и количеством единиц count.
  • dataGroupingCount - Значения количества данных, которых необходимо сгруппировать.
options.xaxis
{
"options": {
"xaxis": {
"title": "string",
"labelRotation": "number",
"truncate": "boolean"
}
}
}

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

  • title - Название оси.
  • labelRotation - Значение градуса поворота значений на оси.
  • truncate - Флаг включения сокращения названия значений на оси.
options.yaxis
{
"options": {
"yaxis": {
"title": "string",
"logarithmic": "boolean",
"minVal": "string",
"maxVal": "string"
}
}
}

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

  • title - Название оси.
  • logarithmic - Флаг включения логарфмической шкалы отображения. По умолчанию - линейное (false).
  • minVal - Нижняя граница значений на оси.
  • maxVal - Верхняя граница значений на оси.
options.legend
{
"options": {
"legend": {
"enabled": "boolean",
"position": "string",
"truncateText": "boolean"
}
}
}

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

  • enabled - Флаг включения отображения легенды на графике.
  • position - Значение расположения легенды на графике. Допустимы значения: right (справа), left (слева), top (сверху), bottom (снизу).
  • truncateText - Флаг включения сокращения значений в легенде.
options.color
{
"options": {
"color": {
"colorList": [{
"field": "string",
"color": "string"
}
]
}
}
}

Настройка раскраски линий.

  • field - Название линии.
  • color - Значение цвета в HEX-формате.

Тип визуализации column (Столбчатая диаграмма)

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

ЭлементСтруктураОписание
options.general
{
"options": {
"general": {
"showScrollBar": "boolean",
"stackedMode": "boolean",
"enableBar": "boolean",
"multiseries": "boolean"
}
}
}

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

  • showScrollBar - Флаг включения шкалы предварительного просмотра в диаграмме.
  • stackedMode - Флаг включения группировки рядов данных.
  • enableBar - Флаг включения горизонтального отображения.
  • multiseries - Флаг включения разбиения рядов данных на графике.
options.column
{
"options": {
"column": {
"borderRadius": "number",
"opacity": "number"
}
}
}

Настройка отображения столбца.

  • borderRadius - Значение радиуса скругления углов столбца.
  • opacity - Значение прозрачности столбца.
options.grouping
{
"options": {
"grouping": {
"dataGrouping": "boolean",
"dataGroupingAutoBaseInterval": "boolean",
"dataGroupingBaseInterval": {
"timeUnit": "string",
"count": "number"
},
"dataGroupingCount": "number"
}
}
}

Настройка группировка данных.

  • dataGrouping - Флаг включения группировки данных.
  • dataGroupingAutoBaseInterval - Флаг включения автоматического расчета интервала группировки данных.
  • dataGroupingBaseInterval - Объект ручного расчета интервала группировки данных. Объект характеризуется единицей времени timeUnit и количеством единиц count.
  • dataGroupingCount - Значения количества данных, которых необходимо сгруппировать.
options.xaxis
{
"options": {
"xaxis": {
"title": "string",
"labelRotation": "number",
"truncate": "boolean"
}
}
}

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

  • title - Название оси.
  • labelRotation - Значение градуса поворота значений на оси.
  • truncate - Флаг включения сокращения названия значений на оси.
options.yaxis
{
"options": {
"yaxis": {
"title": "string",
"logarithmic": "boolean",
"minVal": "string",
"maxVal": "string"
}
}
}

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

  • title - Название оси.
  • logarithmic - Флаг включения логарфмической шкалы отображения. По умолчанию - линейное (false).
  • minVal - Нижняя граница значений на оси.
  • maxVal - Верхняя граница значений на оси.
options.legend
{
"options": {
"legend": {
"enabled": "boolean",
"position": "string",
"truncateText": "boolean"
}
}
}

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

  • enabled - Флаг включения отображения легенды на графике.
  • position - Значение расположения легенды на графике. Допустимы значения: right (справа), left (слева), top (сверху), bottom (снизу).
  • truncateText - Флаг включения сокращения значений в легенде.
options.color
{
"options": {
"color": {
"colorList": [{
"field": "string",
"color": "string"
}
]
}
}
}

Настройка раскраски столбцов.

  • field - Название столбца.
  • color - Значение цвета в HEX-формате.

Тип визуализации HTML (HTML-представление)

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

ЭлементСтруктураОписание
options.general
{
"options": {
"general": {
"html": "string"
}
}
}

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

  • html - Код HTML.
options.styles
{
"options": {
"styles": {
"сss": "string"
}
}
}

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

  • сss - Код CSS.