Referência de configuração da visualização da comunidade

A configuração define os atributos de dados e estilo exigidos por uma visualização.

A configuração precisa ser um arquivo JSON com a seguinte estrutura:

{
      "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))
        }
      ]
    }
    
Nome do campo Tipo Descrição
data[] Array(object) A configuração de dados da visualização, que afeta o painel Dados do painel de propriedades.
data[].id string O código da seção de dados. Precisa ser uma string com algum valor e sem espaços.
data[].label string A etiqueta da seção de dados.
data[].elements[] string Os elementos de dados que serão renderizados.
data[].elements[].type string enum(DataElement) O tipo de elemento de dados que será renderizado.
data[].elements[].id string O código do elemento de dados. Precisa ser uma string com algum valor e sem espaços.
data[].elements[].label string A etiqueta da dica do elemento de dados.
data[].elements[].options object(DataElementOptions) Opções de dados do elemento. Depende do tipo de elemento de dados.
style[] Array(object) A configuração de estilo exigida pela visualização, que afeta o painel Estilo do painel de propriedades. Cada objeto na matriz representa um elemento de estilo que será renderizado. A ordem dos elementos determina a ordem em que eles serão processados.
style[].id string O código da seção de estilo. Precisa ser uma string com algum valor e sem espaços.
style[].label string A etiqueta da seção de estilo.
style[].elements Array(object) Os elementos de estilo que serão renderizados.
style[].elements[].id string O código do elemento de estilo. Precisa ser uma string com algum valor e sem espaços.
style[].elements[].type string enum(StyleElement) Tipo de elemento de estilo. Por exemplo: seletor de fonte.
style[].elements[].label string A dica ou etiqueta do elemento de estilo. É o texto da etiqueta de um elemento da caixa de seleção e o texto da dica de outros tipos de elemento.
style[].elements[].options Array(object) options do elemento. Válido apenas para os tipos de elemento de estilo SELECT_SINGLE e SELECT_RADIO.
style[].elements[].defaultValue string OR object Valor padrão do elemento de estilo. Valores inválidos serão ignorados.*
interactions[] Array(object) A configuração de interações da visualização, que determina se a visualização pode atuar como um filtro.
interactions[].id string O código do elemento de interação. Precisa ser uma string com algum valor e sem espaços.
interactions[].supportedActions Array (enum(InteractionType) As possíveis interações compatíveis.

*O defaultValue é uma string usada para tudo, exceto seletores de cores. Para cores, o defaultValue deve ser um objeto do seguinte formato:

{
        color: `string`
    }
    

DataElement

Estes são os possíveis valores dos elementos de dados:

Valor de enum Descrição
"METRIC" Renderiza um elemento de campo de métrica.
"DIMENSION" Processa um elemento de campo de dimensão.
"MAX_RESULTS" Define o máximo de linhas de dados que podem ser solicitadas por essa visualização.

Opções de DataElement

Estes são os possíveis valores dos elementos de dados:

Valor de enum Tipo de opção Opções disponíveis
"METRIC" Objeto max: número – o número máximo de métricas compatíveis.
min: número – o número mínimo de métricas necessárias.
"DIMENSION" Objeto max: número – o número máximo de dimensões compatíveis.
min: número – o número mínimo de dimensões necessárias,
supportedTypes – a lista de tipos compatíveis. supportedTypes pode incluir TIME, GEO ou DEFAULT.
"MAX_RESULTS" Objeto max: número – o número máximo de linhas que a visualização pode solicitar. O valor padrão é 2.500.

StyleElement

Estes são os possíveis valores dos elementos de estilo:

Valor de enum Descrição
"FONT_COLOR" Renderiza o seletor de cores da fonte.
"FONT_SIZE" Renderiza o seletor de tamanho da fonte. Valor padrão: 10px.
"FONT_FAMILY" Renderiza o seletor de família de fontes. Valor padrão: auto.
"CHECKBOX" Renderiza uma caixa de seleção. Valor padrão: "false"
"TEXTINPUT" Renderiza uma caixa de entrada de texto.
"TEXTAREA" Renderiza uma área grande de entrada de texto.
"SELECT_SINGLE" Renderiza uma lista suspensa com valores predefinidos.
"SELECT_RADIO" Renderiza um seletor de botão de opção com valores predefinidos.
"FILL_COLOR" Processa um seletor de cores de preenchimento.
"BORDER_COLOR" Renderiza um seletor de cores de borda.
"AXIS_COLOR" Processa um seletor de cores do eixo.
"GRID_COLOR" Renderiza um seletor de cores da grade.
"OPACITY" Processa um seletor de opacidade.
"LINE_WEIGHT" Renderiza um seletor de espessura da linha.
"LINE_STYLE" Processa um seletor de estilo da linha. Os valores padrão aceitos são: solid, dashed, dotted, double.
"BORDER_RADIUS" Renderiza um seletor de raio da borda.
"INTERVAL" Processa um seletor de intervalo.

Os elementos de estilo configuram os ícones exibidos na guia Style do painel de propriedades.

options: array(options)
    

Objeto "options"

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

InteractionType

O InteractionTypes configura as opções de interação disponíveis no estilo Data do painel de propriedades. No momento, somente "FILTER" é compatível.

Valor de enum Descrição
"FILTER" Permite que os usuários usem a visualização como filtro.

Exemplo de configuração

{
      "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"]
        }
      ]
    }