Editor, páginas, layouts e temas

Selos usados: GA-candidato · Preview · NÃO MEDIDO · Roadmap. Legenda e template (selo + 9 campos) em README.

O editor é 100% web (sem app desktop). Você monta o dashboard num canvas em grade, com arrastar-e-soltar, desfazer/refazer, auto-save, versões e temas. Exemplos usam o workspace sintético Comércio Aurora Ltda.

Canvas: arrastar, soltar e redimensionar#

Selo: GA-candidato

1. O que é — uma tela em grade (48 colunas) onde você posiciona e redimensiona visuais.
2. Quando usar — toda montagem/edição de dashboard.
3. Como funciona — em Ferramentas → Mover e ajustar, você arrasta o cartão pelo meio e redimensiona pelas alças dos cantos e lados. O cartão fica exatamente onde você soltou: a posição vai para a célula mais próxima da grade (48 colunas) mais um ajuste fino, sem pular. O ímã mostra uma guia quando a borda ou o centro do cartão alinha com outro cartão, num eixo de cada vez; segure Alt para desligar o ímã. Um clique sem arrastar não mexe em nada. Arrastar um campo para o canvas cria um visual; arrastar um campo para um visual o coloca no lugar correto (eixo/valor/legenda). Concluir layout grava e sai do modo.
4. Pré-requisitos — um dashboard (nasce vazio, em rascunho) e um modelo com campos.
5. Como validar — arraste produtos.categoria para o canvas (cria um visual), depois vendas.valor para dentro dele; mova o cartão até a guia do ímã aparecer, solte e confirme que ele ficou onde você deixou.

enlarge

Alinhamento, seleção múltipla e copiar/colar#

Selo: GA-candidato

1. O que é — alinhar/distribuir, ordem Z, travar, ocultar; seleção múltipla (⌘-clique); copiar/colar entre páginas e dashboards. Os comandos ficam no menu do botão direito (Posição, Tamanho, Organizar) e no painel Seleção da faixa Ferramentas.
2. Quando usar — organizar vários visuais de uma vez, reaproveitar um bloco.
3. Como funciona — operações de layout puras (testadas); o clipboard usa o localStorage (Ctrl+C / Ctrl+V), inclusive entre dashboards.
4. Pré-requisitos — dois ou mais visuais.
5. Como validar — selecione três visuais com ⌘-clique, alinhe à esquerda, copie e cole em outra página; confirme que chegam juntos.
6. Limites e ressalvas — clipboard depende do navegador (localStorage).
7. Dados de exemplo (sintéticos) — bloco "KPIs de vendas" (3 KPIs) copiado da página "Resumo" para "Detalhe".
8. Evidência — operações de alinhamento/distribuição e copiar-colar (funções puras de layout) cobertas por suíte determinística.
9. Estado & maturidade — GA-candidato.

Undo/redo e auto-save#

Selo: GA-candidato

1. O que é — pilha de desfazer/refazer (20 passos) e salvamento automático com debounce.
2. Quando usar — sempre; recuperação rápida de um erro de edição.
3. Como funciona — undo/redo 100% otimista (Ctrl+Z / Ctrl+Shift+Z); auto-save grava só se o layout mudou.
4. Pré-requisitos — dashboard em edição.
5. Como validar — mova um visual, Ctrl+Z e confirme o retorno; espere o debounce e recarregue a página para ver o estado persistido.
6. Limites e ressalvas — a pilha é da sessão de edição (20 passos). Trocar de página, inserir ou remover um visual e o Organizar da página não entram no Desfazer (remover sempre pede confirmação).
7. Dados de exemplo (sintéticos) — mover "Receita por categoria" e desfazer.
8. Evidência — pilha de undo/redo e salvamento automático (grava só se o layout mudou) cobertos por suíte determinística.
9. Estado & maturidade — GA-candidato.

Páginas, apresentação e foco#

Selo: GA-candidato

1. O que é — múltiplas páginas/abas (com teto), modo tela cheia/apresentação (←/→ troca página), modo FOCO (1 visual) e modo TV (páginas que giram no telão).
2. Quando usar — separar "Resumo" e "Detalhe"; apresentar num telão.
3. Como funciona — abas de página com teto; páginas de dica ficam ocultas da barra (usadas como tooltip pages — ver Filtros e interações).
4. Pré-requisitos — dashboard com ao menos uma página.
5. Como validar — crie as páginas "Resumo" e "Detalhe", entre em apresentação e navegue com as setas.
6. Limites e ressalvas — páginas de dica ficam fora da barra de abas. Para um telão que gira as páginas sozinho, use o modo TV (Página → Layout → TV ▾ e o Link de TV em Compartilhar) — veja Layout por aparelho e modo TV.
7. Dados de exemplo (sintéticos) — páginas "Resumo" (KPIs) e "Detalhe" (tabela de vendas).
8. Evidência — páginas, modo apresentação e modo foco cobertos pela lógica testada do editor.
9. Estado & maturidade — GA-candidato.

Rascunho × publicado e versionamento#

Selo: GA-candidato

1. O que é — separação entre rascunho (o que você edita) e publicado (o que os leitores veem), com controle de versões e restauração.
2. Quando usar — editar sem afetar quem consome; voltar a uma versão anterior.
3. Como funciona — leitores veem a versão congelada; há diff de pendências entre rascunho e publicado; até 20 versões (512KB cada) com diff por widget, restaurar e poda automática.
4. Pré-requisitos — permissão de edição/publicação.
5. Como validar — publique, edite o rascunho, veja o diff de pendências; restaure uma versão anterior e confirme o retorno.
6. Limites e ressalvas — teto de 20 versões/512KB; melhor que .pbix binário para diff, mas não é integração Git.
7. Dados de exemplo (sintéticos) — v1 "3 KPIs" → v2 "3 KPIs + tabela"; restaurar v1.
8. Evidência — publicação (rascunho×publicado), diff de pendências e histórico de versões cobertos por suíte determinística; histórico na página /versoes.
9. Estado & maturidade — GA-candidato.

Layout por aparelho: computador, tablet, celular e TV#

Selo: Preview

1. O que é — um arranjo próprio para cada aparelho: Computador (a partir de 1024px), Tablet (640 a 1023px), Celular (abaixo de 640px) e TV (link de TV, tela 16:9).
2. Quando usar — painéis consultados no celular, no tablet da loja ou num telão.
3. Como funciona — em Página → Layout, escolha o aparelho e arrume os cartões; o layout do computador não muda. Sem arranjo próprio, o celular empilha os visuais na ordem do computador, o tablet desenha como o computador e a TV usa o do computador escalado. Pontos de partida: Empilhar automático (celular) e Copiar do computador (tablet e TV), ambos com confirmação.
4. Pré-requisitos — dashboard existente, em edição.
5. Como validar — arrume o celular, abra o link público num telefone (ou numa janela estreita) e confira o arranjo; volte ao Computador e confira que nada mudou lá.
6. Limites e ressalvas — no toque, o balão comum abre, mas a página de dica só aparece com mouse. É web responsivo, não há app nativo/push (isso é Roadmap).
7. Dados de exemplo (sintéticos) — "Resumo" com 3 KPIs empilhados no celular e lado a lado no tablet.
8. Evidência — escolha do aparelho pela largura, auto-empilhamento, cópia do computador e guarda do layout de celular cobertos por suíte determinística.
9. Estado & maturidade — Preview; render em aparelho real NÃO MEDIDO.

Passo a passo completo em Layout por aparelho e modo TV.

Temas e templates#

Selo: GA-candidato

1. O que é — tema do dashboard (paleta de 6 cores hex validadas, fonte, fundo, estilo de cartão) e templates via import/export JSON.
2. Quando usar — padronizar a identidade visual; reaproveitar a estrutura de um dashboard sem levar dados.
3. Como funciona — cores são saneadas contra injeção; há verificação de contraste e templates brasileiros prontos; o template nunca leva dados (só estrutura), com proteção anti-__proto__ no import.
4. Pré-requisitos — nenhum além do dashboard.
5. Como validar — troque a paleta e confirme a mudança em todos os visuais; exporte o template, importe num dashboard novo e confirme que nasce sem dados.
6. Limites e ressalvas — não há galeria de templates na criação: os modelos são arquivos JSON, em Página → Tema e modelo ▾ (Baixar tema, Importar tema, Salvar modelo, Usar modelo, Novo do modelo).
7. Dados de exemplo (sintéticos) — tema "Aurora" (6 cores) exportado e reimportado.
8. Evidência — saneamento de cores contra injeção, verificação de contraste, templates brasileiros e import protegido (anti-__proto__) cobertos por suíte determinística.
9. Estado & maturidade — GA-candidato.

Estados vazio / carregando / erro#

Selo: GA-candidato

1. O que é — cartões de "Sem dados", card de erro com motivo, skeletons de carregamento e selo de amostra quando o resultado foi truncado.
2. Quando usar — automático; garante que uma falha de um visual não derruba o painel.
3. Como funciona — erro de query vira card com o motivo limpo (cleanQueryError remove ruído técnico do datalake); truncamento propaga a marca "amostra".
4. Pré-requisitos — nenhum.
5. Como validar — force um visual sem dados e confirme "Sem dados"; force um erro e confirme o card com motivo em vez de tela quebrada.
6. Limites e ressalvas — o texto do erro é saneado para leitura, não é o stack técnico.
7. Dados de exemplo (sintéticos) — visual sobre vendas filtrado a um período sem linhas → "Sem dados".
8. Evidência — card de erro com motivo limpo, skeletons de carregamento e propagação da marca "amostra" cobertos por suíte determinística.
9. Estado & maturidade — GA-candidato.

Estado & evidência: lógica de canvas, layout, versões e temas coberta por suíte determinística; renderização DOM/visual não tem teste de snapshot — aparência final é NÃO MEDIDO. Estados derivados da matriz de estados do produto (teto Preview). Nenhum recurso é GA de produto.

Última revisão: 2026-10-03.