As opções de dados e estilo para uma visualização da comunidade são definidas em um JSON de configuração. A configuração de data define o número de dimensões e métricas aceitas pela visualização. Já a de style define os seletores de estilo disponíveis no painel de propriedades.
Configuração de dados
A configuração de data define os elementos DIMENSION e METRIC que o Data Studio processa no painel de propriedades. Cada elemento corresponde aos campos de dimensão e elemento que o usuário final insere na visualização.
Exemplo de elemento de dados:
{
"id": "twoDimensionsPlease",
"label": "Dimension Element Heading",
"type": "DIMENSION",
"options": {
"min": 2,
"max": 2,
}
}
O id que você insere no elemento de dados é incluído nas informações da resposta do Data Studio. A label define o texto exibido aos usuários acima da seção de dados, e o type define se é uma dimensão ou métrica. O objeto options configura o número mínimo e máximo de campos que um usuário pode adicionar ao elemento.
Em um elemento de dados DIMENSION, o objeto options permite uma chave supportedTypes opcional. Se ela for definida, o Data Studio restringirá os tipos de campo de dimensão que podem ser adicionados ao elemento. O valor de supportedTypes é uma matriz que pode conter qualquer combinação de DEFAULT, TIME e GEO.
Uma seção de dados agrupa vários elementos de dados. O Data Studio renderiza a label como um título para vários elementos.
Exemplo de seção de dados:
{
"id": "dimensionSection1",
"label": "Dimension Section Heading",
"elements":[
// array of data elements
]
}
Esta captura de tela mostra como o Data Studio renderiza a seção e o elemento de dados acima:
Configuração de estilo
Ela define os seletores de estilo que são renderizados no painel de propriedades.
Exemplo de elemento de estilo:
{
"id": "linkOpacity",
"label": "Link opacity",
"type": "OPACITY",
"defaultValue": "0.2"
}
A label define o texto exibido aos usuários como uma dica, e o type define o tipo de seletor de estilo que Data Studio renderiza. Opcionalmente, defaultValue configura um valor padrão para cada elemento de estilo.
Da mesma forma que os elementos de dados, os de estilo são definidos em seções, que fornecem títulos e agrupamentos lógicos. Para ver a lista completa dos seletores disponíveis, consulte a referência de configuração.
Exemplo de seção de estilo:
{
"id": "styleGroup1",
"label": "Header for style group",
"elements": [
// insert Style Elements here
]
}
A captura de tela abaixo mostra um exemplo de painel de estilo com um seletor de opacidade, com a dica "Vincular opacidade" correspondente a label no elemento de estilo.
Configuração de interação
A configuração de interaction define como as interações de gráfico funcionam em uma visualização da comunidade. Isso é opcional.
Exemplo:
{
"id": "onClick",
"supportedActions": ["FILTER"]
}
Atualmente, somente FILTER é compatível. Se você configurar interações, uma caixa de seleção será exibida no painel de propriedades.
Configuração de recursos
A configuração de features pode ativar ou desativar vários recursos na visualização da comunidade.
Esta seção é opcional. Veja uma lista de recursos na referência de configuração.
Exemplo:
"features": {
"enableComparisonDateRange": true
}
Exemplo
Veja um exemplo de configuração de visualização.
Próximas etapas
Depois de definir sua configuração, crie a visualização.