Конфигурация определяет атрибуты data и style, которые требуются для визуализации.
Конфигурация должна быть представлена файлом JSON следующей структуры:
{
"data": [
{
"id": string,
"label": string,
"elements": [
{
"type": enum(DataElement),
"id": string,
"label": string,
"options": object(DataElementOptions)
}
]
}
],
"style": [
{
"id": string,
"label": string,
"elements": [
{
"type": enum(StyleElement),
"id": string,
"label": string,
"defaultValue": string | object
}
]
}
]
"interactions": [
{
"id": string,
"supportedActions": array(enum(InteractionType))
}
]
}
| Имя поля | Тип | Описание |
|---|---|---|
data[] |
Array(object) |
Конфигурация данных визуализации. Эта конфигурация влияет на раздел Data панели свойств. |
data[].id |
string |
Идентификатор раздела data. Должен быть непустой строкой без пробелов. |
data[].label |
string |
Ярлык раздела data. |
data[].elements[] |
string |
Элементы data для отображения. |
data[].elements[].type |
string enum(DataElement) |
Тип элемента data для отображения. |
data[].elements[].id |
string |
Идентификатор элемента data. Должен быть непустой строкой без пробелов. |
data[].elements[].label |
string |
Подсказка (ярлык) для элемента data. |
data[].elements[].options |
object(DataElementOptions) |
Варианты элемента data. Зависят от типа элемента data. |
style[] |
Array(object) |
Конфигурация стиля, необходимая для визуализации. Эта конфигурация влияет на раздел Style панели свойств. Каждый объект массива представляет собой элемент style для отображения. Порядок элементов определяет последовательность их отображения. |
style[].id |
string |
Идентификатор раздела style. Должен быть непустой строкой без пробелов. |
style[].label |
string |
Ярлык раздела style. |
style[].elements |
Array(object) |
Элементы style для отображения. |
style[].elements[].id |
string |
Идентификатор элемента style. Должен быть непустой строкой без пробелов. |
style[].elements[].type |
string enum(StyleElement) |
Тип элемента style, например селектор шрифтов. |
style[].elements[].label |
string |
Подсказка или ярлык для элемента style. Это текст ярлыка для элемента checkbox и текст подсказки для элементов остальных типов. |
style[].elements[].options |
Array(object) |
Варианты элемента (options). Используются только для элементов style SELECT_SINGLE и SELECT_RADIO. |
style[].elements[].defaultValue |
string OR object |
Значение по умолчанию для элемента style. Недопустимые значения игнорируются. |
interactions[] |
Array(object) |
Конфигурация взаимодействий визуализации. Определяет, может ли визуализация использоваться в качестве фильтра. |
interactions[].id |
string |
Идентификатор элемента interaction. Должен быть непустой строкой без пробелов. |
interactions[].supportedActions |
Array (enum(InteractionType) |
Поддерживаемые взаимодействия. |
*defaultValue является строкой для всех элементов кроме селектора цвета, для которого defaultValue – объект следующего формата:
{
color: `string`
}
DataElement
Ниже приведены возможные значения элементов data.
| Перечисляемое значение | Описание |
|---|---|
"METRIC" |
Отображает элемент field для показателя. |
"DIMENSION" |
Отображает элемент field для параметра. |
"MAX_RESULTS"
|
Определяет максимальное количество строк, которое может запрашивать визуализация. |
Варианты DataElement
Ниже приведены возможные значения элементов data.
| Перечисляемое значение | Тип варианта | Доступные варианты |
|---|---|---|
"METRIC"
|
Object | max: число (макс. количество показателей). min: число (мин. количество показателей). |
"DIMENSION"
|
Object | max: число (макс. количество параметров). min: число (мин. количество параметров).supportedTypes – список поддерживаемых типов. supportedTypes включает TIME, GEO или DEFAULT. |
"MAX_RESULTS"
|
Object | max: число (макс. количество строк, которое может запрашивать визуализация). Значение по умолчанию: 2500. |
StyleElement
Ниже приведены возможные значения элементов style.
| Перечисляемое значение | Описание |
|---|---|
"FONT_COLOR" |
Отображает селектор цвета шрифта. |
"FONT_SIZE" |
Отображает селектор размера шрифта. Значение по умолчанию: 10px. |
"FONT_FAMILY" |
Отображает селектор семейства шрифтов. Значение по умолчанию: auto. |
"CHECKBOX" |
Отображает флажок. Значение по умолчанию: "false". |
"TEXTINPUT" |
Отображает текстовое поле. |
"TEXTAREA" |
Отображает область ввода текста. |
"SELECT_SINGLE" |
Отображает раскрывающееся меню с заранее заданными значениями. |
"SELECT_RADIO" |
Отображает переключатель со стандартными значениями. |
"FILL_COLOR" |
Отображает селектор цвета заливки. |
"BORDER_COLOR" |
Отображает селектор цвета границы. |
"AXIS_COLOR" |
Отображает селектор цвета оси. |
"GRID_COLOR" |
Отображает селектор цвета сетки. |
"OPACITY" |
Отображает селектор прозрачности. |
"LINE_WEIGHT" |
Отображает окно выбора толщины линии. |
"LINE_STYLE"
|
Отображает окно выбора стиля линии. Допустимые значения по умолчанию: solid, dashed, dotted, double. |
"BORDER_RADIUS" |
Отображает селектор радиуса скругления угла. |
"INTERVAL" |
Отображает селектор интервала. |
С помощью элементов style настраиваются значки на вкладке Style панели свойств.
options: array(options)
Объект options
{
label: `string`,
value: `string`
}
InteractionType
С помощью InteractionType настраиваются варианты взаимодействий, доступные в разделе Data панели свойств. В настоящее время поддерживается только один тип взаимодействия: "FILTER".
| Перечисляемое значение | Описание |
|---|---|
"FILTER" |
Позволяет использовать визуализацию в качестве фильтра. |
Пример конфигурации
{
"data": [
{
"id": "concepts",
"label": "concepts",
"elements": [
{
"id": "dimension1",
"label": "first dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 3,
"supportedTypes": ["GEO"]
}
},
{
"id": "metric",
"label": "metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 3
}
}
]
}
],
"style": [
{
"id": "colors",
"label": "Highlight Colors",
"elements": [
{
"id": "accentColor",
"label": "Accent Color",
"type": "SELECT_SINGLE",
"defaultValue": "rain",
"options": [
{
"label": "Summer",
"value": "summer"
},
{
"label": "Fall",
"value": "fall"
}
]
},
{
"id": "reverseColor",
"label": "Show reverse color",
"defaultValue": "false",
"type": "CHECKBOX"
},
{
"id": "fillColor",
"label": "Fill Color",
"defaultValue": {
"color": "#0000ff"
},
"type": "FILL_COLOR"
},
{
"id": "textOpacity",
"label": "Text Opacity",
"defaultValue": "0.2",
"type": "OPACITY"
},
{
"id": "customText",
"label": "Custom Text",
"defaultValue": "0.2",
"type": "TEXTINPUT"
}
]
},
{
"id": "text",
"label": "Highlight Text",
"elements": [
{
"id": "textFontSize",
"label": "Font size",
"defaultValue": "10",
"type": "FONT_SIZE"
},
{
"id": "font",
"label": "Font family",
"defaultValue": "auto",
"type": "FONT_FAMILY"
}
]
}
],
"interactions": [
{
"id": "interactionsConfigId",
"supportedActions": ["FILTER"]
}
]
}