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

Структура дашборда в 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