Справочник по конфигурации визуализации сообщества

Конфигурация визуализации определяет атрибуты данных и стиля, необходимые для визуализации.

Ожидается, что конфигурация будет представлена ​​в виде файла 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))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}
Имя поля Тип Описание
data[] Array(object) Конфигурация данных визуализации. Эта конфигурация влияет на область данных панели свойств.
data[].id string Идентификатор раздела данных. Это должна быть непустая строка без пробелов.
data[].label string Метка раздела данных.
data[].elements[] string Элементы данных для визуализации.
data[].elements[].type string перечисление ( Элемент Данных ) Тип элемента данных для визуализации.
data[].elements[].id string Идентификатор элемента данных. Это должна быть непустая строка без пробелов.
data[].elements[].label string Метка подсказки для элемента данных.
data[].elements[].options object(DataElementOptions) Параметры данных для элемента. Это зависит от типа элемента данных .
style[] Array(object) Конфигурация стиля, необходимая для визуализации. Эта конфигурация влияет на панель «Стиль» панели свойств. Каждый объект в массиве представляет собой элемент стиля для визуализации. Порядок элементов определяет порядок их отображения.
style[].id string Идентификатор раздела стиля. Это должна быть непустая строка без пробелов.
style[].label string Ярлык раздела стилей.
style[].elements Array(object) Элементы стиля для визуализации.
style[].elements[].id string Идентификатор элемента стиля. Это должна быть непустая строка без пробелов.
style[].elements[].type string перечисление ( Элемент стиля ) Тип элемента стиля. Например, выбор шрифта.
style[].elements[].label string Подсказка или метка для элемента стиля. Это текст метки для элемента флажка и текст подсказки для других типов элементов.
style[].elements[].options Array(object) options элемента. Это справедливо только для типов элементов стиля SELECT_SINGLE и SELECT_RADIO .
style[].elements[].defaultValue string OR object Значение по умолчанию для элемента стиля. Неверные значения будут игнорироваться.*
interactions[] Array(object) Конфигурация взаимодействий визуализации. Эта конфигурация определяет, может ли он действовать как фильтр.
interactions[].id string Идентификатор элемента взаимодействия. Это должна быть непустая строка без пробелов.
interactions[].supportedActions Array (перечисление ( Тип взаимодействия ) Возможные взаимодействия поддерживаются
features object Функции, которые вы хотите включить или отключить в своей визуализации.
features.enableComparisonDateRange boolean Включите сравнение диапазонов дат . По умолчанию — false , если не указано.

* defaultValue — это строка для всего, кроме селекторов цвета. Для цветов defaultValue должно быть объектом формата:

{
    color: `string`
}

Элемент данных

Значения элементов данных могут быть одним из следующих:

Перечисляемое значение Описание
МЕТРИЧЕСКИЕ Отрисовывает элемент поля метрики.
ИЗМЕРЕНИЕ Отрисовывает элемент поля измерения.
MAX_RESULTS Определяет максимальное количество строк данных, которые могут быть запрошены этой визуализацией.

Параметры элемента данных

Значения элементов данных могут быть одним из следующих:

Перечисляемое значение Тип опции Доступные варианты
МЕТРИЧЕСКИЕ Объект max:number - максимальное количество метрик
min:number — минимальное количество требуемых метрик
ИЗМЕРЕНИЕ Объект max:number — максимальное количество поддерживаемых измерений.
min:number - минимальное количество требуемых размеров
supportTypes: список поддерживаемых типов. supportedTypes могут включать TIME , GEO или DEFAULT
MAX_RESULTS Объект max:number — максимальное количество строк, которое может запросить визуализация. По умолчанию: 2500

СтильЭлемент

Значения элементов стиля могут быть одним из следующих:

Перечисляемое значение Описание Тип данных defaultValue (конфигурация) value Тип данных (сообщение) Значение по умолчанию
FONT_COLOR Отображает селектор цвета шрифта. Допустимые значения представляют собой шестнадцатеричные коды цветов. STRING | OBJECT<Color> STRING | OBJECT<Color> Определяется темой.
FONT_SIZE Отображает селектор размера шрифта. Допустимыми значениями являются следующие пиксели: 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 30, 32, 36, 40, 44, 48, 60, 72, 84, 96. NUMBER NUMBER 12
FONT_FAMILY Отображает селектор семейства шрифтов. Допустимыми значениями являются следующие шрифты: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Скоро, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Indie Flower, Lato, Lora. , Монтсеррат, Oleo Script, Open Sans, Orbitron, Oswald, Permanent Marker, Quicksand, Raleway, Reenie Beanie, Roboto, Roboto Condensed, Syncopate, Times New Roman, Ubuntu, Ubuntu Mono, Verdana. STRING STRING Определяется темой.
Флажок Отображает флажок. BOOLEAN BOOLEAN false
ТЕКСТИНПУТ Отображает поле ввода текста. STRING STRING ""
ТЕКСТАРЬ Отображает большую область ввода текста. STRING STRING ""
SELECT_SINGLE Отображает раскрывающийся список с заранее определенными значениями. STRING (для defaultValue и options.label и options.value) STRING неопределенный
SELECT_RADIO Отображает радиоселектор с заранее определенными значениями. STRING (для defaultValue и options.label и options.value) STRING неопределенный
FILL_COLOR Отображает селектор цвета заливки. Допустимыми значениями являются шестнадцатеричные цветовые коды. STRING | OBJECT<Color> OBJECT<Color> Определяется темой.
BORDER_COLOR Отображает селектор цвета границы. Допустимыми значениями являются шестнадцатеричные цветовые коды. STRING | OBJECT<Color> OBJECT<Color> Определяется темой.
AXIS_COLOR Отображает селектор цвета оси. Допустимыми значениями являются шестнадцатеричные цветовые коды. STRING | OBJECT<Color> OBJECT<Color> Определяется темой.
GRID_COLOR Отображает селектор цвета сетки. Допустимыми значениями являются шестнадцатеричные цветовые коды. STRING | OBJECT<Color> OBJECT<Color> Определяется темой.
НЕпрозрачность Отображает селектор непрозрачности, единица измерения — %. Допустимые значения: от 0 до 1 с шагом 0,1. NUMBER NUMBER 1
LINE_WEIGHT Отображает средство выбора веса линии. Допустимые значения: от 0 до 5. Значение 0 в раскрывающемся списке будет отображаться как «Нет». NUMBER NUMBER
LINE_STYLE Отображает средство выбора стиля линии. Допустимые значения по умолчанию: solid , dashed , dotted , double . STRING STRING "solid"
BORDER_RADIUS Отображает селектор радиуса границы. Допустимые значения: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100. NUMBER NUMBER Определяется темой.
ИНТЕРВАЛ Отображает селектор интервала. Значения являются целыми числами. NUMBER NUMBER 0

Элементы стиля настраивают значки, отображаемые на вкладке Style панели свойств.

Параметры элемента стиля

Некоторые элементы стиля поддерживают параметры.

options: array(options)
Перечисляемое значение Объект параметров
SELECT_SINGLE 
        {
            label: `string`,
            value: `string`
        }
SELECT_RADIO 
        {
            label: `string`,
            value: `string`
        }
ИНТЕРВАЛ 
        {
            max: `number`,
            min: `number`
        }

Типы данных

Объект<Цвет> 

{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}

STRING<Цвет>

Строковое значение, содержащее шестнадцатеричный код цвета.

Пример

"color": "#0000ff"

НОМЕР<Непрозрачность>

Числовое значение от 0 до 1 с шагом 0,10.

Пример

"opacity": 0.2

Тип взаимодействия

InteractionTypes настраивают параметры взаимодействия, доступные в стиле Data на панели свойств. В настоящее время поддерживается только "FILTER" .

Перечисляемое значение Описание
"FILTER" Позволяет пользователям использовать визуализацию в качестве фильтра.

Пример конфигурации 

{
  "data": [{
    "id": "concepts",
    "label": "concepts",
    "elements": [
      {
        "id": "dimension1",
        "label": "first dimension",
        "type": "DIMENSION",
        "options": {
          "min": 1,
          "max": 3,
          "supportedTypes": ["DEFAULT"]
        }
      },
      {
        "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": "Arial",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ],
  "features": {
    "enableComparisonDateRange": false
  }
}