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 
  
 | 
  
 object 
  
 }] 
  
 }], 
  
 "interactions" 
 : 
  
 [{ 
  
 "id" 
 : 
  
 string 
 , 
  
 "supportedActions" 
 : 
  
 array 
 ( 
 enum 
 ( 
 InteractionType 
 )) 
  
 }], 
  
 "features" 
 : 
  
 { 
  
 "enableComparisonDateRange" 
 : 
  
 boolean 
  
 } 
 }

Field name	Type	Description
`data[]`	`Array(object)`	The data configuration of the visualization. This configuration affects the Datapane 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 Stylepane 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 OR object`	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
`features`	`object`	The features you want to enable or disable in your visualization.
`features.enableComparisonDateRange`	`boolean`	Enable comparison date ranges . Defaults to `false` if unspecified.

*The defaultValue is a string for everything except the color selectors. For colors, the defaultValue should be an object of the format:

  { 
  
 color 
 : 
  
 `string` 
 }

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.
MAX_RESULTS	Defines the maximum rows of data that can be requested by this vizualization

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 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	`defaultValue` Data Type (Config)	`value` Data Type (Message)	Default Value
FONT_COLOR	Renders the font color selector. Valid values are hex color codes.	`STRING` \| `OBJECT&ltColor>`	`STRING` \| `OBJECT&ltColor>`	Determined by theme.
FONT_SIZE	Renders the font size selector. Valid values are the following pixels: 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	Renders the font family selector. Valid values are the following fonts: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Coming Soon, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Indie Flower, Lato, Lora, Montserrat, 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`	Determined by theme.
CHECKBOX	Renders a checkbox.	`BOOLEAN`	`BOOLEAN`	`false`
TEXTINPUT	Renders a text input box.	`STRING`	`STRING`	`""`
TEXTAREA	Renders a large text input area.	`STRING`	`STRING`	`""`
SELECT_SINGLE	Renders a dropdown with pre-defined values.	`STRING` (for defaultValue and options.label and options.value)	`STRING`	undefined
SELECT_RADIO	Renders a radio selector with pre-defined values.	`STRING` (for defaultValue and options.label and options.value)	`STRING`	undefined
FILL_COLOR	Renders a fill color selector. Valid values are Hex color codes.	`STRING` \| `OBJECT&ltColor>`	`OBJECT&ltColor>`	Determined by theme.
BORDER_COLOR	Renders a border color selector. Valid values are Hex color codes.	`STRING` \| `OBJECT&ltColor>`	`OBJECT&ltColor>`	Determined by theme.
AXIS_COLOR	Renders an axis color selector. Valid values are Hex color codes.	`STRING` \| `OBJECT&ltColor>`	`OBJECT&ltColor>`	Determined by theme.
GRID_COLOR	Renders a grid color selector. Valid values are Hex color codes.	`STRING` \| `OBJECT&ltColor>`	`OBJECT&ltColor>`	Determined by theme.
OPACITY	Renders an opacity selector, unit is %. Valid values are from 0 to 1 in increments of 0.1	`NUMBER`	`NUMBER`	`1`
LINE_WEIGHT	Renders a line weight picker. Valid values are from 0 to 5. 0 will render as None in dropdown.	`NUMBER`	`NUMBER`
LINE_STYLE	Renders a line style picker. Acceptable default values: `solid` , `dashed` , `dotted` , `double` .	`STRING`	`STRING`	`"solid"`
BORDER_RADIUS	Renders a border radius selector. Valid values are: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100	`NUMBER`	`NUMBER`	Determined by theme.
INTERVAL	Renders an interval selector. Values are integers.	`NUMBER`	`NUMBER`	`0`

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

Style Element Options

Some style elements support options

  options 
 : 
  
 array 
 ( 
 options 
 )

Enum value	Options Object
SELECT_SINGLE	{ label : `string` , value : `string` }
SELECT_RADIO	{ label : `string` , value : `string` }
INTERVAL	{ max : `number` , min : `number` }

Data Types

Object<Color>

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

STRING<Color>

A string value containing a hex color code.

Example

  "color" 
 : 
  
 "#0000ff"

NUMBER<Opacity>

A number value from 0 to 1 in increments of 0.10