bar, line, combo, treemap, waterfall, pareto

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

Objetivo#

Ao final desta aula você vai construir Pareto e cascata de margem.

Vídeo#

Identificador: acd-330-04-comparacao-composicao · Duração-alvo: 8 min · Tela: /dashboards.

Roteiro (capítulos):

1. 0:00–1:15 — bar e hbar (/dashboards/[id]) — comparar categorias; Top N e ordenação.
2. 1:15–2:30 — line (/dashboards/[id]) — tendência no tempo, linha de referência e drill por data.
3. 2:30–3:45 — combo (/dashboards/[id]) — volume e taxa juntos, com eixo secundário.
4. 3:45–5:00 — treemap (/dashboards/[id]) — compor o todo com muitas categorias desiguais.
5. 5:00–6:30 — waterfall (cascata de margem) (/dashboards/[id]) — explicar como se chega de um valor a outro.
6. 6:30–8:00 — pareto (80/20) (/dashboards/[id]) — achar os poucos itens que respondem pela maior parte da receita.

Conteúdo#

Seis visuais, duas perguntas: "quem é maior" e "como compõe o todo"

Esta aula cobre os visuais mais usados em painel comercial e financeiro: três para comparação/tendência (bar, line, combo) e três para composição e distribuição (treemap, waterfall, pareto). A escolha entre eles depende de uma pergunta simples — você quer comparar valores entre categorias (barras), ver evolução (linha), relacionar volume com taxa (combo), mostrar como as partes somam o todo (treemap/cascata) ou achar os poucos itens que concentram o resultado (Pareto)?

Como aparece no produto

bar nasce com 1 dimensão no poço Eixo + 1 métrica no poço Valor (até 5 métricas); quando os rótulos da categoria são longos, troque para hbar (barras horizontais) na aba Visual sem perder os campos. Ambos aceitam Top N, ordenação, rótulos de valor, linha de referência (média/meta) e eixo Y secundário — todos no painel de configuração do visual, não exigem fórmula.

line pede uma dimensão ordenável (normalmente tempo) no eixo; ative curva suave ou segmentos retos, e uma linha de tendência quando quiser separar sinal de ruído. combo combina barra e linha no mesmo quadro — tipicamente 1 métrica de volume na barra + 1 métrica de taxa na linha, com eixo secundário ligado para as escalas não se atropelarem (ex.: Receita em barra, Margem % em linha).

treemap substitui a pizza quando há muitas categorias de tamanhos desiguais: a área do retângulo representa o valor — sem eixo, sem legenda obrigatória, só a hierarquia de categorias. waterfall (cascata) explica como se chega de um valor a outro somando e subtraindo passos — ideal para "receita do mês = vendas − devoluções − descontos". pareto ordena as barras em ordem decrescente e sobrepõe uma linha de acumulado % — a ordem é fixa (não se reordena), porque é exatamente essa ordem que revela a regra 80/20.

Exemplo na Aurora Varejo

Receita por categoria (Bebidas 250, Higiene 140, Limpeza 90) cabe num bar simples — só 3 categorias. Para a cascata, componha "De R$ 400 mil a R$ 480 mil: +120 vendas, −25 devoluções, −15 descontos" num waterfall. Para o Pareto, troque a dimensão para produtos.nome (muitos produtos) com a métrica vendas.valor: o visual ordena e acumula sozinho, sem você precisar calcular o % acumulado numa medida.

Erros comuns de design

• Eixo truncado. Um eixo Y que não começa em zero (ou com corte visual) exagera a diferença entre barras — duas categorias com 10% de diferença real podem parecer o dobro. Mantenha a escala natural (zero) salvo exceção bem sinalizada.
• Linha para comparar categorias sem ordem. Sem uma dimensão ordenável, a linha "inventa" uma sequência que não existe — use bar.
• Combo com duas métricas na mesma escala. Se as duas métricas têm grandezas parecidas, o eixo secundário é desnecessário — barras agrupadas comparam melhor.
• Pareto reordenado manualmente. Tentar forçar outra ordem no Pareto quebra a leitura 80/20 — a ordem decrescente é a mensagem do visual, não um detalhe estético.
• Cascata para categorias independentes. waterfall explica uma sequência de causas de uma variação; para comparar itens que não se somam numa narrativa única, use bar.

Estado atual (Preview)

Os seis visuais são GA-candidato na transformação de dados e geometria (pipeline único de linhas: agregações, Top-N, ordenação — funções puras testadas). A renderização final em pixels é NÃO MEDIDO, como em todo o catálogo. O selo da aula é Preview porque herda o teto do produto.

Faça você mesmo#

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

1. Na página "Resumo" do painel "Comercial — Aurora", insira um bar de Receita por produtos.categoria.
2. Ative uma linha de referência de média no bar e confira onde cada categoria fica em relação a ela.
3. Insira um line de Receita por calendario.mes.
4. Insira um combo de Receita (barra) e Margem % (linha, eixo secundário) por mês.
5. Insira um treemap de Receita por produtos.nome.
6. Insira um waterfall explicando a variação de Receita do mês (vendas, devoluções, descontos).
7. Insira um pareto de Receita por produtos.nome e identifique os produtos que somam ~80% do total.
8. Revise todos os eixos Y: nenhum deles deve começar fora do zero sem justificativa.

Você terminou quando: a página tem os 6 visuais desta aula, o pareto mostra a linha de acumulado %, e nenhum eixo está truncado.

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/visuais/bar
• bi/visuais/line
• bi/visuais/combo
• bi/visuais/treemap
• bi/visuais/waterfall
• bi/visuais/pareto

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".