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