Visualização de métricas

1) Metas de visualização

Compreenda rapidamente: em 3 a 5 segundos, reconheça tendência/anomalia/mudança.
Comparar corretamente períodos, segmentos, opções A/B.
Acreditar, mostrar incerteza, fontes, frescor.
Agir ao lado do gráfico - CTA, filtros, links de playbooks.

2) Tipos de métricas e melhores formas

3) Escalas, eixos e agregação

Escalas: linear padrão; logarítmico - para faixas múltiplas; percentual - [0; 100].
Base zero: colunas a partir de zero; linhas - sem exigência zero (mas mostre baseline).
Agregação: diurno/horário/minuto, p50/p95/p99; evite a média para distribuições «barulhentas».
Roll-up/Drill-down: botões «D/N/H» (dia/semana/hora) e «↑/↓» na hierarquia (region→strana→gorod).
Amostra de pontos (downsampling): LTTB/MinMax para longas filas para não perder extremos.

4) Contexto e comparações

Comparação de períodos: «Atual vs Anterior» (overlay com pontuação) e/ou small multiples; assine uma ∆ relativa e uma ∆ absoluta.
Sazonalidade: Panos de fundo de fim de semana/feriado, zonas quentes/frias por hora.
Benchmark: linhas horizontais de padrão/alvo (SLO/SLA), assine unidades e horizonte temporal.
Os intervalos de confiança são: faixas/fitas de £ CI; para A/B - errante bars e p-value/elevador.

5) Incerteza, omissões, revisões

Omissões: rompa a linha (não ligue a zero); «nevoeiro» cinzento para uma janela incompleta.
Lajes de dados: crachá «dados estão 12 min atrás», tooltip com timestamp ingest.
Revisões: barras finas «contadas», referência a changelog.

6) Cor, forma e disponibilidade (A11y)

Painel: base neutra; vermelho é crítico, laranja alerta, verde positivo.
Independência de cor: duplique com valores/marcadores/assinaturas; contraste ≥ WCAG AA.
Número de filas: ≤5 por gráfico; senão, small multiples/facetas.
Dimensões/cliques: alvos interativos ≥ 32-40 px; anéis de foco, navegação por teclado.

7) Assinando corretamente

Eixos: unidades, formato de números (1 234,56; 12. 3k; 5. 2%); data-marca com localização.
Lenda: em ordem de importância visual; Clicável para inclusão/exclusão de filas.
Anotações: curto e caso («lançamento PSP _ X», «incidente # 4217»), referindo-se ao evento.

8) Interatividade: não sobrecarregar

Hover/Tooltip: Compacto, com campos-chave e ∆ vs baseline.
Zoom/Brush: seleção do intervalo com o mouse/teclado; botão Redefinir.
Drill-down: clique por segmento → corte detalhado; breadcrumb para retorno.
Seletores: preenchimentos de faixa (24h/7d/30d), filtros de segmentos, botão Abs/Porcentagem.

9) Modelos de componentes (exemplo API)

json
{
"type": "timeseries",
"title": "Payment authorizations,"
"metrics": [
{"id":"auth_rate_p50","label":"p50","agg":"p50"},
{"id":"auth_rate_p95","label":"p95","agg":"p95","style":{"dash":true}}
],
"x": {"field":"ts","granularity":"5m"},
"y": {"unit":"%","min":0,"max":100},
"baseline": {"value": 92. 0, "label": "SLO 92%"},
"ci": {"field_low":"ci_low","field_high":"ci_high"},
"badges": ["late_data","revised"]
}

10) Desempenho de renderização

Agregar no servidor: devolva as janelas/quantli já corretas.
Canvas/WebGL: para dezenas de milhares de pontos e cartões térmicos; SVG - para ≤2 -3000 itens e assinaturas claras.
Virtualizar listas/tabelas: ajuste as páginas à medida que as páginas rolam.
Armazenamento em dinheiro: times quentes, precompute «ontem/semana».

11) Credibilidade e anti-pattern

• Manipular escala (cortar coluna acima de zero).
• Misture unidades diferentes sem eixos secundários e assinaturas explícitas.
• Construir «floresta» stacked-aria com 8-10 filas.
• Trocar omissões de zeros.
• Usar as sombras 3D para «beleza».

12) Fórmulas, unidades e formatação

Dinheiro: minor units/linhas decimais; claramente indicar a moeda.
Conversões/participações: juros com um decimal (se necessário, p. p.) .
Velocidade/aposta: «por hora/dia» - assine o período.
Arredondar: até descargas significativas sem ocultar a ordem de magnitude.

13) Especificidades de métricas de qualidade e SLO

Mostre error-budget burn (% restante do orçamento) e níveis de alerta.
Para o botequim - stacked status bar «OK/Degraded/Down» + janelas de incidentes.
Para latency - distribuição (p50/p95/p99), «violin/boxplot» em cluster/endpoint.

14) Storitelling e auto-sammari

Bloco narrativo: 2-4 frases «o que aconteceu» + «porquê» + «o que fazer».
Slides/exportação: PDF/PNG/SVG, preservando fontes e cores; marcas de água e data de corte.

15) Plano de teste para visualizações

Unit: formato de eixos, computação de bins, fita CI.
Integração: filtros/faixas/local, drill-down e navegação reversa.
E2E: Cenário de alert para ação: clique para anomalia → playbook.
A11y/i18n: leitores de tela, teclado, tradução de assinaturas.
Perf: render grandes filas, cold/warm cache, stress em 10 x pontos.

16) Métricas de qualidade de visualização

Time-to-Insight (TTI): Mediana do tempo até o primeiro clique/compreensão.
Expained Rate: proporção de gráficos com o Expain disponível.
Action Rate: onde as ações do widget foram executadas.
Erro/Noise: assinaturas erradas, queixas de usuários.
Perf p95: tempo até o primeiro conteúdo e até a interatividade.

17) Folha de cheque de design de gráficos

• Tipo de gráfico correto para a tarefa
• Eixos claros, unidades, formatos de números e datas
• Contexto: baseline/SLO, período de comparação, anotações
• Exibição de omissões/barras/revisões
• Cores e contraste (WCAG), no máximo 5 filas
• Interatividade sem superaquecimento: hover, zoom, drill-down
• Desempenho: agregação, downsampling, Canvas/WebGL quando necessário
• CTA ao lado: abrir relatório/playbook/criar alert
• Exportar/Sharing com data de corte e parâmetros de filtro

18) Incorporação em dashboards

Consistency-kit: totais (fontes, tamanhos, painéis), um único comportamento de tultipo.
Modelos de widgets: KPI, timeséries, distribuição, comparison, map, mesa.
Slots para dicas «inteligentes»: crachá «anomalia», explicações de drivers, botões de ação.

19) Plano de implementação (3 iterações)

• Tipos de gráficos, escalas/formatos unificados, baseline/SLO, omissões/crachá, exportação.

• Comparações de períodos, fitas CI, small multiples, anomalias/crachás, navegação por teclado.

• Downsampling/WebGL, painel exploratório, auto-sammari, presídios de dashboards e CTA.

20) Mini-FAQ

Temos sempre de começar o eixo Y do zero?
Para os postes, sim. Não é necessário para linhas, mas especifique baseline e não «engane» escala.

Como mostrar p95/p99 e não sobrecarregar?
Fita percentiles ou small multiples com eixos idênticos.

Como substituir um bolo com 8 segmentos?
100% stacked bars ou tabela com bares dentro de linhas (bar-in-cell) + ordenação.

Resultado

A visualização eficiente das métricas é uma escolha correta da forma + contexto honesto + ação conveniente. Mantenha os padrões de escala e formatos unificados, mostre incertezas e omissões, vamos rápido drill down e CTA, mantenha o desempenho e disponibilidade. Então os gráficos deixarão de ser «imagens» e tornarão-se ferramentas de decisão.