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.

Espera-se que a configuração seja 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))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}
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) As 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.
features object Os recursos que você quer ativar ou desativar em sua visualização.
features.enableComparisonDateRange boolean Ative a opção de períodos de comparação. Quando não especificado, o padrão é false.

*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
MÉTRICA 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 esta 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
MÉTRICA Objeto máx: número – o número máximo de métricas
min: número - o número mínimo de métricas necessárias
DIMENSION Objeto max: number – o número máximo de dimensões compatíveis.
min: number - o número mínimo de dimensões necessárias
supportedTypes: lista de tipos compatíveis. supportedTypes pode incluir TIME, GEO ou DEFAULT
MAX_RESULTS Objeto max: number - o número máximo de linhas que a visualização pode solicitar. Padrão: 2.500

StyleElement

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

Valor de enum Descrição Tipo de dados defaultValue (configuração) Tipo de dados value (mensagem) Valor padrão
FONT_COLOR Renderiza o seletor de cores da fonte. Os valores válidos são códigos de cores hexadecimais. STRING | OBJECT<Color> STRING | OBJECT<Color> Determinada por tema.
FONT_SIZE Renderiza o seletor de tamanho da fonte. Os valores válidos são os seguintes 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 Renderiza o seletor de família de fontes. Os valores válidos são: 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 STRING STRING Determinada por tema.
Caixa de seleção Renderiza uma caixa de seleção. BOOLEAN BOOLEAN false
ENTRADA DE TEXTO Renderiza uma caixa de entrada de texto. STRING STRING ""
TEXTAREA Renderiza uma área grande de entrada de texto. STRING STRING ""
SELECT_SINGLE Renderiza uma lista suspensa com valores predefinidos. STRING (para defaultValue, options.label e options.value) STRING indefinido
SELECT_RADIO Renderiza um seletor de botão de opção com valores predefinidos. STRING (para defaultValue, options.label e options.value) STRING indefinido
FILL_COLOR Processa um seletor de cores de preenchimento. Os valores válidos são códigos de cores hexadecimais. STRING | OBJECT<Color> OBJECT<Color> Determinada por tema.
BORDER_COLOR Renderiza um seletor de cores de borda. Os valores válidos são códigos de cores hexadecimais. STRING | OBJECT<Color> OBJECT<Color> Determinada por tema.
AXIS_COLOR Processa um seletor de cores do eixo. Os valores válidos são códigos de cores hexadecimais. STRING | OBJECT<Color> OBJECT<Color> Determinada por tema.
GRID_COLOR Renderiza um seletor de cores da grade. Os valores válidos são códigos de cores hexadecimais. STRING | OBJECT<Color> OBJECT<Color> Determinada por tema.
OPACIDADE Renderiza um seletor de opacidade, a unidade é %. Os valores válidos vão de 0 a 1 em incrementos de 0,1 NUMBER NUMBER 1
LINE_WEIGHT Renderiza um seletor de espessura da linha. Os valores válidos vão de 0 a 5. 0 será renderizado como Nenhum no menu suspenso. NUMBER NUMBER
LINE_STYLE Processa um seletor de estilo da linha. Valores padrão aceitáveis: solid, dashed, dotted, double. STRING STRING "solid"
BORDER_RADIUS Renderiza um seletor de raio da borda. Os valores válidos são: 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100 NUMBER NUMBER Determinada por tema.
INTERVAL Processa um seletor de intervalo. Os valores são números inteiros. NUMBER NUMBER 0

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

Opções do elemento de estilo

Alguns elementos de estilo são compatíveis com opções

options: array(options)
Valor de tipo enumerado Objeto de opções
SELECT_SINGLE 
        {
            label: `string`,
            value: `string`
        }
SELECT_RADIO 
        {
            label: `string`,
            value: `string`
        }
INTERVAL 
        {
            max: `number`,
            min: `number`
        }

Tipos de dados

Objeto<Cor>

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

STRING<Cor>

Um valor de string que contém um código de cor hexadecimal.

Exemplo

"color": "#0000ff"

NUMBER<Opacity>

Um valor numérico de 0 a 1 em incrementos de 0,10

Exemplo

"opacity": 0.2

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": ["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
  }
}