Community Visualization Config Reference

The visualization config defines the data and style attributes required by a visualization.

The configuration is expected as a JSON file with the following structure:

{
  "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
        }
      ]
    }
  ]
  "interactions": [
    {
      "id": string,
      "supportedActions": array(enum(InteractionType))
    }
  ]
}
Field name Type Description
data[] Array(object) The data configuration of the visualization. This configuration affects the Data pane of the property panel.
data[].id string The ID of the data section. This must be a non-empty string with no spaces.
data[].label string The label for the data section.
data[].elements[] string The data elements to render.
data[].elements[].type string enum(DataElement) The data element type to render.
data[].elements[].id string The ID of the data element. This must be a non-empty string with no spaces.
data[].elements[].label string The tooltip label for the data element.
data[].elements[].options object(DataElementOptions) The data options for the element. This is dependent on the Data Element Type.
style[] Array(object) The style configuration required by the visualization. This configuration affects the Style pane of the properties panel. Each object in the array represents a style element to render. The order of elements determines the order they will be rendered.
style[].id string The ID of the style section. This must be a non-empty string with no spaces.
style[].label string The label for the style section.
style[].elements Array(object) The style elements to render.
style[].elements[].id string The ID of the style element. This must be a non-empty string without spaces.
style[].elements[].type string enum(StyleElement) The style element type. E.g. font selector.
style[].elements[].label string The tooltip or label for the style element. This is the label text for a checkbox element and the tooltip text for other element types.
style[].elements[].options Array(object) The options for the element. This is only valid for SELECT_SINGLE and SELECT_RADIO Style Element types.
style[].elements[].defaultValue string The default value for the style element. Invalid values will be ignored.
interactions[] Array(object) The interactions configuration of the visualization. This configuration determines whether or not it can act as a filter.
interactions[].id string The ID of the interaction element. This must be a non-empty string with no spaces.
interactions[].supportedActions Array (enum(InteractionType) The possible interactions supported

DataElement

The values for data elements can be one of the following:

Enum value Description
"METRIC" Renders a metric field element.
"DIMENSION" Renders a dimension field element.
"SORT" Renders a sort field element with order dropdown.
"MAX_RESULTS" Defines the maximum rows of data that can be requested by this visualization

DataElement Options

The values for data elements can be one of the following:

Enum value Option Type Options available
"METRIC" Object max: number - the max number of metrics supported.
min: number - the min number of metrics required.
"DIMENSION" Object max: number - the max number of dimensions supported.
min: number - the min number of dimensions required,
supportedTypes - the list of types supported. supportedTypes can include TIME, GEO, or DEFAULT.
"MAX_RESULTS" Object max: number - the max number of rows the visualization can request. Default: 2500

StyleElement

The values for style elements can be one of the following:

Enum value Description
"FONT_COLOR" Renders the font color selector.
"FONT_SIZE" Renders the font size selector. Default value: 10px.
"FONT_FAMILY" Renders the font family selector. Default value: auto.
"CHECKBOX" Renders a checkbox. Default value: "false"
"TEXTINPUT" Renders a text input box.
"SELECT_SINGLE" Renders a dropdown with pre-defined values.
"SELECT_RADIO" Renders a radio selector with pre-defined values.
"FILL_COLOR" Renders a fill color selector.
"BORDER_COLOR" Renders a border color selector.
"AXIS_COLOR" Renders an axis color selector.
"GRID_COLOR" Renders a grid color selector.
"OPACITY" Renders an opacity selector.
"LINE_WEIGHT" Renders a line weight picker.
"LINE_STYLE" Renders a line style picker. Acceptable default values: solid, dashed, dotted, double.
"BORDER_RADIUS" Renders a border radius selector.
"INTERVAL" Renders an interval selector.

Style elements configure the icons displayed in the Style tab of the Property Panel.

options: array(options)

The options object

{
    label: `string`,
    value: `string`
}

InteractionType

InteractionTypes configure the interaction options available in the Data style of the Property Panel. Currently, only "FILTER" is supported.

Enum value Description
"FILTER" Allows users to use visualization as filter.

Example config

{
  "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": "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": "fontColor",
          "label": "Font color",
          "type": "FONT_COLOR"
        },
        {
          "id": "font",
          "label": "Font family",
          "defaultValue": "auto",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ]
}