Canvas, alinhar, páginas, undo, auto-save

Selo de estado: Preview (teto atual do produto) · Curso ACD-330 — Dashboards: visuais, filtros, interações e design · Aula 1 de 12 · Atualizado em 2026-10-04.

Objetivo#

Ao final desta aula você vai operar o editor.

Vídeo#

Identificador: acd-330-01-editor-canvas-paginas · Duração-alvo: 7 min · Tela: /dashboards.

Roteiro (capítulos):

0:00–1:00 — Abrir o editor (/dashboards) — criar um painel novo (nasce vazio, em rascunho) e reconhecer a grade de 48 colunas do canvas.
1:00–2:30 — Inserir e redimensionar (/dashboards/[id]) — arrastar um campo para o canvas (aba Inserir) e redimensionar sem sobrepor o vizinho.
2:30–4:00 — Alinhar, agrupar, copiar/colar (/dashboards/[id]) — selecionar 3 visuais com ⌘-clique, alinhar à esquerda e copiar um bloco para outra página.
4:00–5:00 — Desfazer/refazer e auto-save (/dashboards/[id]) — mover um visual, Ctrl+Z, recarregar e confirmar o estado salvo.
5:00–6:00 — Páginas e apresentação (/dashboards/[id]) — criar a página "Detalhe", abrir modo apresentação e navegar com ←/→.
6:00–7:00 — Publicar e versionar (/dashboards/[id]/versoes) — publicar o rascunho e abrir o diff de pendências e o histórico de versões.

Conteúdo#

O editor é o chão de fábrica do painel

O ingestia.bi é 100% web: não existe app desktop para instalar nem arquivo binário para salvar na mão. Todo painel vive num canvas em grade (hoje 48 colunas × 16px) onde você arrasta campos, redimensiona visuais e organiza páginas. Por trás da tela simples há cinco mecanismos que valem a pena dominar antes de montar algo mais complexo: a grade (posicionar sem sobrepor), o alinhamento em lote (organizar vários visuais de uma vez), o desfazer/refazer (recuperação rápida de um erro), o rascunho × publicado (separar o que você edita do que o leitor vê) e os temas (identidade visual reaproveitável).

Como aparece no produto

Ao abrir um painel em /dashboards/[id], você está sempre editando o rascunho — quem acessa o link público ou o painel compartilhado vê a versão publicada, congelada até você publicar de novo. Para criar um visual, arraste um campo da lista de campos para uma área vazia do canvas: isso usa a aba Inserir do catálogo de visuais (os mesmos 46 tipos de dados + 4 elementos de layout da aula 2); arrastar um segundo campo para dentro de um visual já existente o solta no poço certo — eixo, valor ou legenda, dependendo de onde você soltou.

Para organizar vários visuais de uma vez: selecione com ⌘-clique (ou Ctrl-clique) e use alinhar/distribuir, ordem Z, agrupar, travar e ocultar. Copiar e colar funciona entre páginas e entre dashboards (Ctrl+C/Ctrl+V, pelo clipboard do navegador) — útil para levar um bloco de KPIs de um painel modelo para outro sem remontar do zero.

Ctrl+Z e Ctrl+Shift+Z desfazem/refazem até 20 passos dentro da sessão de edição; o auto-save grava sozinho, com debounce, só quando o layout muda — não existe botão "Salvar", mas também não há como perder uma edição por esquecimento.

As páginas vivem numa barra de abas com teto; o modo apresentação (tela cheia, navegação por ←/→) e o modo FOCO (um único visual ampliado) servem para reuniões. Uma página pode ficar oculta da barra e funcionar só como página de dica — conteúdo usado como tooltip de outro visual (ver aula 8).

Publicar separa de vez o que você edita do que o leitor vê: antes de publicar, o editor mostra um diff de pendências (o que mudou desde a última versão publicada); depois, até 20 versões (512KB cada) ficam em /versoes, com diff por widget e restauração. É mais perto de um controle de versão do que o arquivo binário de uma ferramenta de desktop — mas não é integração Git.

Por fim, o tema do painel (paleta de 6 cores, fonte, fundo, estilo de cartão) e os templates (import/export em JSON, sem levar dados) ficam na mesma área de configuração visual; um layout mobile dedicado (breakpoint 640px) empilha os visuais de forma diferente da tela cheia — tema da aula 11.

Exemplo na Aurora Varejo

No workspace de treino, crie um painel "Comercial — Aurora" com duas páginas: "Resumo" (KPIs) e "Detalhe" (tabela de vendas). Arraste vendas.valor para o canvas vazio — nasce um KPI. Redimensione para ocupar um quarto da largura, copie para o lado e troque o campo para pedido_id com CONTD. Alinhe os dois à esquerda, publique e abra /versoes para ver a v1 registrada.

Erros comuns de design

Editar achando que já está publicado. Quem olha o rascunho é só você; o time só vê depois de "Publicar" — avise a audiência antes de uma reunião.
Empilhar visuais sem alinhar. Bordas desalinhadas em 1–2px passam a impressão de painel "mal feito" mesmo com os números certos — use alinhar/distribuir em vez de arrastar no olho.
Confiar no undo entre sessões. A pilha de 20 passos é da sessão de edição atual; ao recarregar a página ela reinicia (o auto-save guarda o estado, não o histórico de passos).
Esquecer o layout mobile. Um painel só testado em tela grande pode quebrar no celular da diretoria — defina o layout mobile ou deixe o auto-empilhamento cuidar disso (aula 11).
Lotar uma página só. Sem separar "Resumo" de "Detalhe", o leitor rola a página inteira para achar um número — páginas e modo FOCO existem exatamente para isso.

Estado atual (Preview)

A lógica de grade, drop, anti-sobreposição, alinhamento, undo/redo, auto-save, páginas, versionamento e temas é GA-candidato: funções puras cobertas por suíte determinística, com resultado idêntico a cada execução. O que falta para o teto subir: a renderização final na tela (DOM/pixel) não tem teste de snapshot visual — a aparência exata é NÃO MEDIDO — e o modo TV/kiosk/carrossel automático é Roadmap (não existe). O selo da aula fica em Preview porque ela descreve o editor inteiro, incluindo as partes ainda não medidas.

Nota

"GA-candidato" quer dizer: motor provado por teste automatizado de referência, mas sem certificação de nuvem nem SLA. Hoje nenhum recurso do produto é anunciado como GA.

Necessidade de edição	Recurso do editor
Criar um visual do zero	Arrastar um campo para área vazia (aba Inserir)
Alinhar vários visuais de uma vez	Seleção múltipla + alinhar/distribuir
Reaproveitar um bloco noutro painel	Copiar/colar entre dashboards
Separar visão executiva de visão detalhada	Páginas + modo FOCO
Voltar para uma versão de ontem	`/versoes` → restaurar
Padronizar cores entre painéis	Tema exportado/importado (JSON)

Faça você mesmo#

No workspace de treino Aurora Varejo (abra /dashboards no console):

Crie um painel novo chamado "Comercial — Aurora" (nasce vazio, em rascunho).
Crie a página "Resumo" e arraste vendas.valor para o canvas — confirme que nasce um KPI.
Adicione um segundo KPI com CONTD(pedido_id); selecione os dois com ⌘-clique e alinhe à esquerda.
Crie a página "Detalhe" e copie um dos KPIs de "Resumo" para ela (Ctrl+C/Ctrl+V).
Mova um dos KPIs, desfaça com Ctrl+Z e confirme o retorno; espere o auto-save e recarregue a página.
Entre em modo apresentação e navegue entre "Resumo" e "Detalhe" com as setas do teclado.
Publique o painel e abra /versoes para confirmar a versão publicada.

Você terminou quando: o painel "Comercial — Aurora" tem 2 páginas publicadas, pelo menos 2 KPIs alinhados, e /versoes mostra a versão publicada.

Checagem rápida#

Três perguntas no final da aula, corrigidas no servidor. A aula só conta como concluída depois da checagem.

Documentação relacionada#

bi/editor-canvas-paginas-temas

Capacidades ensinadas#

(conceitual — sem capacidade específica da matriz) — o selo exibido na aula é sempre o estado mais conservador entre as capacidades citadas; nada aqui é "GA".