Версия: 4.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" } }`	Текстовое значение по умолчанию.

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` - Текст, добавляемый после токена.

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`) запроса.
`timeToken`	`{ "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`	`{ "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` - Название темы.

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.

options.general

{
  "options": {
    "general": {
      "html": "string"
    }
  }
}

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

html - Код HTML.

options.styles

{
  "options": {
    "styles": {
      "сss": "string"
    }
  }
}

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

сss - Код CSS.

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

Фильтры​

Атрибуты​

Атрибут options​

Атрибут default​

Атрибут token​

Панели​

Атрибут viz​

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

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

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

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

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

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

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

Фильтры

Атрибуты

Атрибут `options`

Атрибут `default`

Атрибут `token`

Панели

Атрибут `viz`

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

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

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

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

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

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