Visuais

Selos usados: GA-candidato · Preview · NÃO MEDIDO · Roadmap. Legenda e template (selo + 9 campos) em README. Uma página por visual: catálogo de visuais.

Contagem certificada#

O catálogo único de visuais do produto tem 46 visuais de dados + 4 elementos de layout = 50 itens. O mesmo catálogo alimenta a aba Inserir (cria um visual novo) e a aba Visual (troca o tipo do selecionado), com os mesmos ícones e cores.

A marca comercial "50+ visuais" é um overstatement: só fecha "50" quando os 4 elementos de layout (texto, forma, imagem, botão) entram na conta. Visuais de dados são 46.

Nenhum visual é mock: todos têm componente React dedicado (Recharts ou SVG próprio), e todo item do catálogo exige uma amostra sintética de dados de referência — a suíte falha se faltar. Comparado ao Power BI, os ~40 nativos são empatados/superados (inclui o que lá é custom visual pago: sankey, marimekko, bullet), e os mapas do Brasil com malha IBGE municipal são superiores ao out-of-the-box do Power BI. Isso é equivalência por item, com evidência — não afirmamos paridade total.

O sistema de visuais (template)#

Selo: GA-candidato (transformação de dados e geometria)

1. O que é — uma família de 46 visuais de dados renderizados no navegador, mais 4 elementos de layout.

2. Quando usar — todo dashboard; a escolha do tipo depende da pergunta (comparar, compor, distribuir, relacionar, mapear).

3. Como funciona — os dados passam por um pipeline único de linhas (agregações sum/avg/min/max/last/count, Top-N, ordenação) e o visual recebe linhas prontas; uma matriz de capacidades por visual (eixos, legenda, rótulos, empilhado, ordenação, linhas de referência, eixo secundário, small multiples, totais, formato) define o que cada tipo suporta.

4. Pré-requisitos — um modelo/consulta que produza a dimensão + até 5 métricas por visual (seletor de campos).

5. Como validar — crie "Receita por categoria" (barras), adicione uma 2ª métrica, ative rótulos e uma linha de referência; confirme cada opção no visual.

6. Limites e ressalvas — a suíte determinística cobre transformação de dados e geometria (funções puras), não a renderização DOM final — não há teste visual/snapshot de imagem. Portanto a aparência renderizada de cada visual é NÃO MEDIDO por esta documentação.

7. Dados de exemplo (sintéticos)

   categoria	receita
   Bebidas	250
   Limpeza	90
   Higiene	140

8. Evidência — catálogo de visuais, pipeline de linhas e matriz de capacidades por visual cobertos por suíte determinística; cada item exige uma amostra sintética; o pipeline de linhas é congelado pelo conjunto de testes de referência, com resultado idêntico a cada execução.

9. Estado & maturidade — GA-candidato para dados/geometria; render DOM NÃO MEDIDO.

Catálogo completo (46 de dados + 4 de layout)#

Render: Recharts, SVG próprio (custom) ou HTML. "Como validar cada um": crie o visual pela aba Inserir com os campos indicados e confira o resultado; cada visual tem uma amostra sintética de referência.

KPIs e cartões (3)

Comparação e tendência (6)

Composição e parte-do-todo (7)

Medidores e meta (4)

Distribuição e estatística (5)

Relação e comparação par-a-par (5)

Tempo, fluxo e prazo (5)

Tabelas (4)

Vitrine e texto de dados (2)

Mapas do Brasil (5)

Elementos de layout (4 — não são visuais de dados)

Mapas do Brasil (diferencial)#

Selo: Preview

1. O que é — 5 mapas nativos do Brasil: por UF, por município (malha IBGE), bolhas lat/long, calor geográfico e camadas.
2. Quando usar — distribuição regional de vendas/clientes; densidade por cidade.
3. Como funciona — mapa por UF usa SVG próprio (27 UFs); o mapa por município carrega a malha do estado sob demanda via rota interna (/api/geo/br/[uf]) com cache de 30 dias; a categoria de dado UF/município do modelo orienta o join geográfico.
4. Pré-requisitos — coluna marcada como UF/município (ver categoria de dado em Modelo semântico); para o município, a malha do estado precisa ser buscada (rede).
5. Como validar — marque filiais.uf como UF, crie o mapa por UF de "Receita por estado" com SP/RJ/MG e confira o preenchimento; depois abra o mapa por município de um estado e confirme o carregamento da malha.
6. Limites e ressalvas — a busca da malha municipal depende de rede/cache; latência do carregamento IBGE é NÃO MEDIDO aqui. Marcado Preview por depender de rede externa e cache quente.
7. Dados de exemplo (sintéticos) — Receita por UF: SP=250, RJ=90, MG=140.
8. Evidência — renderização dos mapas e geometria da malha (UF e município) cobertas por suíte determinística; a malha municipal é servida por rota interna com cache.
9. Estado & maturidade — Preview; geometria testada, latência de malha NÃO MEDIDO.

Elementos de layout (texto, forma, imagem, botão)#

Selo: GA-candidato

1. O que é — elementos sem dados: caixa de texto, forma, imagem e botão com ações.
2. Quando usar — títulos, molduras, logotipo, navegação por botão.
3. Como funciona — o botão dispara ações (ex.: aplicar bookmark, trocar página); imagem/forma/texto são puramente visuais.
4. Pré-requisitos — nenhum.
5. Como validar — adicione um botão "Ir para Detalhe" que troca de página e confirme a navegação.
6. Limites e ressalvas — não contam como visuais de dados (por isso 46, não 50).
7. Dados de exemplo (sintéticos) — título "Aurora Varejo — Julho/2026".
8. Evidência — renderização e ações dos elementos de layout (texto/forma/imagem/botão) cobertas pela lógica testada do editor.
9. Estado & maturidade — GA-candidato.

Sobre drill, tooltips e exportação por visual: ver Filtros e interações e Exportação e distribuição.

Estado & evidência: 46+4 confirmados no catálogo único de visuais; o pipeline de linhas é fixado pelo conjunto de testes de referência e cada item exige uma amostra sintética. A renderização DOM final não tem teste visual — aparência de cada visual é NÃO MEDIDO. Estados derivados da matriz de estados do produto (teto Preview). Nenhum recurso é GA de produto.