Chart Wizard
Criação guiada de gráfico em tela única — tipo, dados, estilo/interação, rótulo e selo, com preview ao vivo.
O ChartWizard é o componente autônomo de criação guiada de gráficos (PDD-3514). Em tela única — tipo → dados → estilo/ajustes → detalhes — com preview ao vivo. Vai além do básico: estilos interativos, rótulo, selo, cabeçalho de conteúdo e mistura de dados (múltiplas séries) para gráficos mais completos. Funciona em qualquer contexto (Dashboard, Index de documentos…): recebe o schema de colunas e emite a config gerada via on-chart-created. Desacoplado — não conhece o Dashboard.
Título *
Descrição
Dados
Index *
Página *
Coluna *
Será carimbado ao salvar
Tipo de gráfico
Estilo
Pré-visualização
Barras · estilo Padrão
Os estilos Interactive (ex.: Pizza/Donut Interativa) habilitam o cabeçalho de conteúdo: título/descrição próprios + cards de dado fixado (valor + tendência) sincronizados com o gráfico. Ver AnalyticsBlock — cabeçalho de conteúdo.
Uso
Recebe o schema de colunas da tabela ativa, uma amostra de dados para o preview e as opções de período; abre via v-model:open e, ao concluir, emite a configuração gerada. O squad decide o que fazer com ela: renderizar um Widget, adicionar ao Dashboard ou persistir no backend. Passar uma config existente reabre o wizard em modo edição, pré-preenchido.
Fluxo
Numa única tela com preview ao vivo: escolhe o tipo, mapeia os dados (Index/Coluna), ajusta estilo e interação, e define título/período. Criar gráfico emite on-chart-created(config).
- Tipo — Barras · Linhas · Área · Pizza · Radar · Radial · Tag Cloud · KPI. (Barra horizontal e Donut saem de ajustes/estilos do próprio tipo.)
- Dados —
xKey(Coluna/dimensão) + a fonte; KPI lê só a coluna de valor. - Estilo + Ajustes — variante visual + controles (abaixo).
- Detalhes — título, período e selo.
Teclado: Esc fecha, Enter conclui (fora de campos); tipos/selects/botões focáveis (Tab + Enter).
Estilos (variantes)
Cada tipo tem uma faixa de estilos (miniaturas) que pré-configuram o gráfico — ex.: Barras Padrão / Ativa / Negativa / Empilhada / Interativa; Pizza Padrão / Donut / Empilhada / Interativa; Linha/Área Padrão / Linear / Degraus / (Gradiente) / Interativa. O estilo Interativa liga os recursos interativos (hover destaca, clique trava) e habilita o cabeçalho de conteúdo (abaixo).
Rótulo
Liga o valor sobre o dado (rótulo de dado), independente da variante. O controle varia por tipo: Rótulo (barras), Rótulos (barra horizontal/radar/radial), Rótulo de fatia (pizza), Rótulo do ponto (linha). Em alguns tipos é um seletor (nenhum / valor / percentual).
Selo
Badge custom no header do card (texto + cor da tematização), prioritário sobre o status. Escolhe-se um selo existente ou cria-se um novo (+ Criar selo…, persistido em localStorage). Reflete no card gerado — inclusive em cards dentro de grupos. Ver Analytics Block.
Misturar dados (séries múltiplas)
Para gráficos mais completos, combine mais de uma dimensão:
- Tipo de visualização: Múltiplo + Separar por — quebra a Coluna em várias séries (uma cor por valor do campo escolhido). Ex.: pedidos por mês separados por status.
- Empilhada — soma as séries numa só barra/área (Área aceita Empilhamento
Normalou100%). - Pizza Empilhada — vira sunburst: anel interno = Coluna, anel externo =
Separar por. - Mista (série única) — cada barra com uma cor distinta.
A agregação (contagem/medida, ordenação, Top N) é a mesma raiz buildChartProps usada no preview, na index e no dashboard.
Medida · Ordenação · Limite · Legenda · Tooltip
Conforme o tipo suporta: Medida (contagem ou soma de uma coluna numérica), Ordenação (nenhuma/asc/desc), Limite (Top N — padrão Top 10, ou Todos), Legenda (com marcador) e Tooltip no hover.
Modo interativo + cabeçalho de conteúdo
No estilo Interativa, libera-se o Cabeçalho de conteúdo (2º header dentro do corpo): título/descrição próprios + dados fixados (máx. 2) que viram um mini-painel sincronizado — período filtra de verdade, mostra tendência ↑↓% vs período anterior, e cruza com o gráfico (hover/clique). Detalhes e o tipo ContentStat em Analytics Block › Cabeçalho de conteúdo dinâmico.
Quando não usar
Não use o ChartWizard para exibir um gráfico já configurado — para renderizar a visualização final use o Widget. O wizard é só o passo de criação/edição da config.