kpi, kpi-spark, multikpi, bullet, gauge

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

Objetivo#

Ao final desta aula você vai montar linha de KPIs com Δ%.

Vídeo#

Identificador: acd-330-03-kpis-cartoes-metas · Duração-alvo: 6 min · Tela: /dashboards.

Roteiro (capítulos):

1. 0:00–1:00 — kpi (/dashboards/[id]) — 1 métrica, 1 número grande; quando basta.
2. 1:00–2:15 — kpi-spark e o Δ% (/dashboards/[id]) — ativar "comparar" e ler a sparkline.
3. 2:15–3:15 — multikpi (/dashboards/[id]) — resumir 3 a 6 indicadores numa grade.
4. 3:15–4:30 — bullet (meta e faixas) (/dashboards/[id]) — valor, meta e faixas ruim/ok/bom.
5. 4:30–5:30 — gauge (velocímetro) (/dashboards/[id]) — atingimento de meta num relance.
6. 5:30–6:00 — Montando a linha do topo (/dashboards/[id]) — os 3 KPIs da Aurora, lado a lado.

Conteúdo#

A linha de KPIs é a primeira coisa que o leitor lê

Todo painel executivo abre com uma fileira de números grandes — a linha de KPIs responde "vai bem ou mal?" antes de qualquer gráfico. O catálogo tem cinco visuais para essa família: kpi (um número), kpi-spark (número + tendência), multikpi (vários números numa grade), bullet (número contra meta e faixas) e gauge (número contra meta, em velocímetro). Nenhum deles substitui os outros — a escolha depende de quanto contexto o número precisa.

Como aparece no produto

Um kpi nasce ao arrastar uma métrica (ex.: vendas.valor com SOMA) para uma área vazia do canvas — o poço mínimo é 1 métrica, sem dimensão obrigatória. Para ver a variação, ative a opção comparar no painel de configuração do visual: ela liga o Δ% contra o período anterior, calculado a partir do snapshot anterior bom (não é uma fórmula que você escreve à mão nesta aula — isso é conteúdo de ACD-320, fórmulas pt-BR). O kpi-spark pede, além da métrica, 1 campo de tempo para desenhar a mini-linha de tendência ao lado do número; é a melhor opção quando o leitor precisa saber "subindo ou caindo", sem ler cada ponto.

O multikpi troca 1 métrica por 2 ou mais, numa grade de cartões — ideal para o resumo do topo (3 a 6 indicadores de uma vez), mas cada cartão perde a tendência individual: se um indicador específico precisa de contexto próprio, prefira um kpi/kpi-spark isolado.

bullet e gauge existem para a pergunta "bati a meta?". O bullet desenha uma barra compacta com valor atual, marca de meta e faixas de qualidade (ruim/ok/bom) — ocupa pouco espaço, por isso é a opção padrão dentro de tabelas de KPIs densas. O gauge (velocímetro) posiciona o mesmo tipo de informação num mostrador circular — mais chamativo, ideal como peça única de destaque, mas ocupa mais espaço que um bullet para a mesma informação. Ambos exigem meta e faixas/limites configurados; sem isso, o bullet vira uma barra comum e o gauge perde a referência de "bom/ruim".

Exemplo na Aurora Varejo

A linha do topo do painel comercial da Aurora usa três medidas centrais:

SOMA(valor)

é a medida Receita. Pedidos usa a contagem distinta de pedidos:

CONTD(pedido_id)

E o Ticket médio divide uma pela outra, protegido contra divisão por zero:

DIVIDIR(SOMA(valor); CONTD(pedido_id))

Monte três kpi com essas três métricas, ative "comparar" em cada um para ver o Δ% vs o mês anterior, e adicione um bullet de Receita contra a meta de R$ 500 mil com faixas 60/80/100%.

Erros comuns de design

• Linha de KPIs sem contexto. Um kpi sozinho, sem Δ% nem meta, só diz "quanto" — se a pergunta é "estamos melhorando?", ative "comparar" ou troque para kpi-spark.
• Multi-KPI lotado. Mais de 6 cartões no multikpi vira parede de números; separe em duas linhas ou mova o menos crítico para outra página.
• Bullet ou gauge sem meta definida. Sem meta/faixas, o bullet degrada para uma barra qualquer e o gauge perde sentido — nesses casos, um kpi simples comunica melhor.
• Gauge para comparar vários indicadores. O velocímetro ocupa espaço de sobra quando a necessidade é comparar 4+ indicadores ao mesmo tempo — aí entra o multikpi ou uma linha de bullets.
• Confundir meta com Δ%. Δ% compara com o período anterior; meta compara com um alvo fixo (ou do mês). São duas perguntas diferentes e podem até apontar para direções opostas no mesmo número.

Estado atual (Preview)

Os cinco visuais desta família são GA-candidato na transformação de dados e geometria (funções puras cobertas por suíte determinística) — a renderização final em pixels é NÃO MEDIDO para todos, como em qualquer visual do catálogo (sem teste de snapshot visual). O selo da aula fica em Preview porque ela descreve o editor e o pipeline de visuais como um todo, cujo teto hoje é Preview.

Faça você mesmo#

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

1. Na página "Resumo" do painel "Comercial — Aurora" (aula 1), insira um kpi com a medida Receita (SOMA(valor)).
2. Ative "comparar" nesse KPI e confirme o Δ% vs o mês anterior.
3. Insira um kpi-spark com Receita + calendario.mes e confira a sparkline dos últimos meses.
4. Insira um multikpi com Receita, Pedidos e Ticket médio.
5. Insira um bullet de Receita contra a meta de R$ 500 mil, com faixas 60/80/100%.
6. Insira um gauge da mesma meta e compare a leitura com o bullet do passo 5.
7. Alinhe os cinco visuais numa única linha no topo da página.

Você terminou quando: a linha do topo tem os 5 visuais desta aula, com Δ% visível no kpi-spark e meta visível no bullet/gauge.

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/kpi
• bi/visuais/kpi-spark
• bi/visuais/multikpi
• bi/visuais/bullet
• bi/visuais/gauge

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