Структура дашборда в 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 single pie line column HTML

Тип визуализации 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.