Selo de estado:
Preview(teto atual do produto) · Curso ACD-330 — Dashboards: visuais, filtros, interações e design · Aula 5 de 12 · Atualizado em 2026-10-04.
Objetivo#
Ao final desta aula você vai configurar matriz com totais; explicar export ≠ tela.
Vídeo#
Identificador: acd-330-05-tabelas-e-matriz · Duração-alvo: 7 min · Tela: /dashboards.
Roteiro (capítulos):
- 0:00–1:15 — table com totais (
/dashboards/[id]) — colunas, Top N e linha de total. - 1:15–2:45 — matrix (
/dashboards/[id]) — categoria × mês, com subtotais. - 2:45–3:45 — pivot (
/dashboards/[id]) — o leitor remonta arrastando campos. - 3:45–4:45 — heatmap (
/dashboards/[id]) — concentração por cor em vez de número. - 4:45–6:00 — virtualização por trás da rolagem — por que uma tabela de 50.000 linhas rola suave.
- 6:00–7:00 — tela × total × export — por que o CSV pode não ser "tudo".
Conteúdo#
Quatro visuais para quando o número exato importa
Gráfico comunica padrão rápido; tabela comunica o valor exato, linha a linha. Esta aula cobre os quatro visuais tabulares do catálogo: table (lista simples com totais), matrix (cruzamento de duas dimensões, como uma tabela dinâmica fixa), pivot (o leitor monta o cruzamento arrastando campos) e heatmap (cruzamento de duas dimensões, mas lido por cor em vez de número).
Como aparece no produto
table pede só colunas — dimensões e/ou métricas, na ordem que você arrastar; ative a linha de total no painel de configuração e aplique Top N/ordenação por qualquer coluna. matrix pede três poços: linhas, colunas e valor — por exemplo, produtos.categoria nas linhas, calendario.mes nas colunas e SOMA(valor) no valor; os subtotais de linha/coluna aparecem automaticamente. pivot tem os mesmos três poços, mas o leitor arrasta os campos na hora — é a opção certa quando você quer entregar exploração livre em vez de um layout fixo (para um relatório publicado, prefira matrix, que não muda sob o leitor). heatmap troca os números por uma escala de cor contínua nas células — ótimo para achar o ponto quente num cruzamento (hora × dia, categoria × região) sem ler número por número; veja a aula 9 para regras de cor por coluna e barras de dados, que também se aplicam a estas quatro tabelas.
Tela, total e export não são a mesma coisa
Uma tabela grande nunca renderiza todas as linhas de uma vez no navegador — ela usa virtualização: só a janela visível (mais uma margem de rolagem) existe de fato no DOM, por isso uma tabela de 50 mil linhas rola suave em vez de travar. Isso cria três números que parecem a mesma coisa, mas não são:
- Tela: as linhas carregadas no cliente (o que está na janela virtual, mais a margem).
- Total: a soma sobre o conjunto carregado — não sobre o universo inteiro da base. Quando o total não é o universo completo, o rótulo avisa "TOTAL (amostra)" ou "TOTAL (parcial)".
- Export CSV: leva as mesmas linhas da tela; se for parcial, o nome do arquivo ganha o sufixo
_amostra. Para o dado completo, o caminho é o XLSX em modo detalhe (snapshot inteiro, gerado no servidor) — não o CSV do visual.
Avisar esse contrato ao leitor evita a pior surpresa de BI: alguém decidir algo achando que "os números da tela são tudo", exportar e descobrir que faltava 90% das linhas.
Exemplo na Aurora Varejo
Monte uma matrix de Receita por produtos.categoria (linhas) × calendario.mes (colunas), com total geral. Ao lado, um heatmap dos mesmos eixos revela em qual mês cada categoria vendeu mais, sem exigir que o leitor compare 36 números. Para uma tabela de detalhe de vendas, use table com linha de total e confira o rótulo "TOTAL" — se aparecer "(amostra)" ou "(parcial)", avise que o CSV daquele visual vai sair com o mesmo recorte.
Erros comuns de design
- Confiar que o export tem tudo. Exportar o CSV de uma tabela marcada "amostra/parcial" e tratar como o dado completo — confira o rótulo antes de decidir algo com ele.
- Matriz para uma dimensão só. Sem a segunda dimensão,
matrix/pivotnão ganham nada sobre umatablesimples — usetable. - Pivot num relatório publicado. Se o leitor não deveria poder remontar o cruzamento, publique
matrix(fixa) em vez depivot(exploração livre). - Heatmap com poucos valores distintos. Cor só ajuda quando há variação real entre células; com 2-3 valores diferentes, uma
tablecom número é mais clara. - Tabela densa sem Top N. Centenas de linhas sem corte nem ordenação deixam o leitor sem saber por onde começar — ordene pela coluna que importa e aplique Top N quando fizer sentido.
Estado atual (Preview)
A virtualização de tabela/matriz e o contrato tela/total/export (C07.3) são GA-candidato: a janela de rolagem, o cálculo de total sobre o conjunto carregado e a consistência entre tela e export são cobertos por suíte determinística. O teto da aula continua Preview porque ela descreve o editor como um todo, cujo limite hoje é Preview; a renderização final em pixels permanece NÃO MEDIDO para qualquer visual.
Nota
O selo "TOTAL (amostra)"/"TOTAL (parcial)" não é um bug — é o produto avisando que o conjunto carregado não é o universo. Ignorar esse aviso é o erro mais caro desta aula.
| Necessidade | Visual | Campos mínimos |
|---|---|---|
| "Lista de detalhe, com total" | table | colunas |
| "Cruzar duas dimensões, layout fixo" | matrix | linhas + colunas + valor |
| "Deixar o leitor explorar o cruzamento" | pivot | campos arrastáveis |
| "Achar o ponto quente sem ler número" | heatmap | 2 dimensões + métrica |
Faça você mesmo#
No workspace de treino Aurora Varejo (abra /dashboards no console):
- Na página "Detalhe" do painel "Comercial — Aurora", insira uma
tablecom colunas devendase ative a linha de total. - Confira o rótulo do total: se estiver "(amostra)" ou "(parcial)", anote o motivo.
- Insira uma
matrixde Receita porprodutos.categoria(linhas) ×calendario.mes(colunas). - Insira um
pivotcom os mesmos campos disponíveis e remonte o cruzamento arrastando. - Insira um
heatmapdos mesmos dois eixos e compare a leitura com amatrixdo passo 3. - Exporte o CSV da
tabledo passo 1 e confira se o nome do arquivo tem o sufixo_amostraquando aplicável. - Escreva, para a
matrix, qual seria o caminho para obter o dado completo se o total estiver marcado como parcial.
Você terminou quando: a página "Detalhe" tem os 4 visuais desta aula, e você sabe explicar, sem olhar a documentação, a diferença entre tela, total e export.
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#
Capacidades ensinadas#
C07.3 — o selo exibido na aula é sempre o estado mais conservador entre as capacidades citadas; nada aqui é "GA".