Projetar gráficos e painéis pela decisão

O velocímetro gasta um quarto da tela para mostrar um único número, porque obriga o olho a estimar ângulo em vez de comparar altura. O bullet chart, uma barrinha deitada com um traço marcando a meta, faz a mesma leitura numa linha fina e vence em qualquer painel de decisão.

Painel é a tela que reúne os poucos números que mandam no seu mês, cada um respondendo a uma pergunta. A pergunta de quem lê escolhe o gráfico, e o volume de pontos escolhe a técnica de desenho. A biblioteca entra por último, nunca por moda do agente (o assistente de IA que escreve código a partir do pedido).

A percepção decide a forma. Cleveland e McGill mediram que o olho compara posição e comprimento com muito mais precisão do que ângulo e área. É por isso que a barra vence a pizza.

Tufte acrescenta a razão dado-tinta: todo traço que não carrega dado é tinta a apagar, e o 3D decorativo é o caso mais caro. Wilkinson descreve qualquer gráfico como dado, marca e escala, sendo a escala a régua do eixo, aquela borda numerada onde o valor é lido.

Daí saem duas exigências para cada peça do painel: uma pergunta por gráfico e o denominador, o número pelo qual você dividiu, escrito à vista de quem lê.

Esses arranjos não são gosto de quem desenha. O estudo Dashboard Design Patterns, de Bach e outros, catalogou 144 painéis reais e encontrou 42 arranjos que se repetem. O problema, portanto, é o mesmo em quase toda empresa.

O painel evolui junto com o problema que ele mede, e a primeira entrega quase nunca é a definitiva. Por isso reserve orçamento para uma segunda rodada, depois que alguém tiver usado o painel para decidir alguma coisa.

Quatro trocas resolvem a maior parte dos pedidos, e cada uma responde melhor a uma pergunta. O bullet chart substitui o velocímetro quando a pergunta é se estamos na meta. O waterfall, a escadinha que mostra o que somou e o que subtraiu, explica a variação da margem degrau a degrau.

Small multiples são a mesma miniatura repetida para cada unidade ou cada mês, lado a lado. Eles substituem o gráfico único com dez linhas embaralhadas, porque o olho compara desenhos vizinhos sem esforço. O slopegraph liga dois períodos por uma reta e mostra quem subiu e quem caiu.

Escreva o período e o denominador dentro do próprio gráfico. Um crescimento de 40% sem base nem período é desenho bonito sem informação, porque quem lê fica sem saber se aquilo é muito ou pouco.

Numa rede de academias, a pizza de matrículas por unidade virou barra ordenada e o velocímetro de meta virou um bullet chart por unidade. O gerente vê em três segundos quem está atrás da meta, e a evasão aparece como cancelamentos divididos pelos ativos do início do mês.

O volume de pontos decide a técnica de desenho. SVG guarda cada barra como um objeto da própria página. Isso facilita estilo, interação e leitura por quem usa tecnologia assistiva, desde que haja título e descrição.

Canvas desenha pixels soltos, como tinta numa folha, e o navegador deixa de saber o que é cada mancha. Em troca ele aguenta muito mais pontos. Por isso é a escolha de uma série densa, ou seja, uma sequência longa de valores ao longo do tempo.

O preço do canvas é a acessibilidade, que passa a depender de uma tabela equivalente ao lado. Compare uma amostra real nos dois formatos e meça o tempo de desenho no aparelho mais fraco do seu público.

A regra para painel de operação cabe numa frase: tente o ECharts 6.1 antes de inventar moda. Ele aguenta milhões de pontos porque desenha aos poucos, em vez de travar a tela até terminar tudo.

Em projeto React, a base mais usada para montar a tela em pedaços reaproveitáveis, o Recharts já liga a camada de acessibilidade sozinho. O MUI X Charts vence quando o projeto inteiro já roda MUI, e o Highcharts é a escolha corporativa, porque traz acessibilidade e leitura sonora no pacote.

O D3 serve à peça única, com anotação escrita à mão, e nunca a 30 gráficos comuns em cinco dias. O guia de gráficos do hub de design fixa esse padrão para todo painel do projeto, e nenhum painel novo nasce com uma biblioteca diferente da anterior.

Um cartão de indicador dispensa gráfico e ainda assim exige uma escolha de biblioteca. Número que carrega uma vez e fica parado sai em HTML e CSS puro. Número que muda várias vezes na sessão, como o faturamento do dia, ganha com a animação dos dígitos. A direção da rolagem conta a tendência antes de a pessoa ler o valor.

O laboratório abaixo monta três indicadores com o number-flow, um pacote pequeno que anima a troca de dígitos e formata em pt-BR. Pause a atualização, compare com a versão em texto puro ao lado e observe o separador de milhar e a vírgula dos centavos. A regra: número parado fica em CSS, número ao vivo ganha a animação.

Antes do próximo pedido de painel ao agente, escreva a pergunta que cada peça responde. Troque pizza, velocímetro e 3D por barra, bullet chart e waterfall. Escolha a biblioteca pela tabela desta aula. Deu certo quando qualquer pessoa lê o gráfico e diz o período, o denominador e a decisão sem perguntar nada.

Montar o painel mensal e instalar a biblioteca de gráficos certa

Escolhido o gráfico pela pergunta e a técnica pelo volume, o board mensal pode ser montado em HTML e CSS, com fonte e dono a dois cliques.

O painel mensal do conselho sai em HTML e CSS puro, a dupla que desenha qualquer página, com a fonte e o dono ao lado de cada número. A biblioteca de gráfico entra depois, só na tela de investigação, onde alguém filtra e cruza dados até achar a causa.

Painel de diretoria e painel de operação respondem a públicos diferentes, e confundir os dois é o erro mais caro. O board, o grupo que aprova o mês, quer saber o que aconteceu, o que está em risco e o que fazer. Quem opera quer filtrar, cruzar e descer ao detalhe.

A regra dos dois cliques separa o painel pronto do rascunho. Se o conselheiro não descobre em dois cliques de onde veio o número, o que ele significa e quem responde por ele, a peça volta para a mesa.

Quatro peças cobrem quase todo painel mensal, e cada uma responde a uma pergunta. O cartão de indicador dá o nível, o bullet compara realizado com meta e o waterfall explica a variação degrau a degrau. A tabela de variância fecha a conta, com números alinhados e folha de impressão que sai certa.

Dê nome de componente (o bloco de código pronto que se encaixa na tela) a cada peça no pedido ao agente. O vocabulário executivo tem nove nomes: kpi-card, variance-table, waterfall-bridge, executive-callout, risk-matrix, marketing-funnel, decision-card, confidence-badge e methodology-note. Como cada nome tem um trabalho só, o agente para de inventar gráfico onde cabia um cartão.

Para o conselho, o HTML e o CSS puro costumam vencer o gráfico cheio de interação. A página carrega leve, imprime certo e dispensa biblioteca inteira só para mostrar um número e uma seta.

Na tela de investigação em React, a base mais usada para montar a tela em pedaços reaproveitáveis, o Recharts é o ponto de partida. Ele desenha em SVG e monta o gráfico encaixando peças prontas de barra, linha e eixo.

A instalação leva cinco passos: instalar o pacote, importar as barras e os eixos, e envolver o gráfico num contêiner que ajusta a largura sozinho. Depois passe a cor da marca pelo token, o valor de cor guardado com nome, como a etiqueta na lata de tinta. A camada de acessibilidade já vem ligada.

O erro mais comum é colocar esse contêiner dentro de uma divisão sem altura: ele tenta ocupar cem por cento de zero e nada aparece. Declare a altura em pixels. O segundo erro é o cinza de fábrica nos rótulos do eixo, a borda numerada onde o valor é lido, que reprova no teste de contraste.

Todo gráfico que sustenta decisão ganha a tabela equivalente, escondida da tela e presente para o leitor de tela, o programa que lê a página em voz alta. Nunca esconda com display:none, porque isso apaga o dado para todo mundo.

O Chartability é a auditoria que cobra isso peça por peça. A leitura sonora que o Highcharts traz entra como canal extra, para quem prefere ouvir a diferença.

Canvas e WebGL desenham pixels e devolvem nada ao leitor de tela. Por isso toda peça desenhada assim precisa, em paralelo, de uma camada com ARIA, as etiquetas invisíveis que descrevem o gráfico em palavras.

A biblioteca entra quando a pessoa precisa investigar, e não apenas olhar. O ApexCharts 7.1 virou essa superfície. Ele deixa anotar o gráfico, medir distâncias, filtrar um gráfico pelo clique em outro e mandar a visão inteira por um link.

Use o ApexCharts quando o painel precisa dessa interação e você não quer trocar de biblioteca. Painel de operação com muito volume pede ECharts, e série financeira pede o Lightweight Charts, como a aula anterior mostrou.

O laboratório abaixo mostra o que essa escolha muda. Ele importa o ECharts por módulos, só linha, barra, dispersão, eixos, legenda e zoom, para o pacote não carregar o que o painel não usa. Troque o tipo de gráfico e suba o volume para 200 mil pontos: o mostrador de tempo diz quanto o desenho custou no seu aparelho.

Dois detalhes decidem. Na dispersão com 200 mil pontos, a tela recebe os primeiros pontos antes de o desenho terminar: é a renderização progressiva, que o Recharts não tem. O botão de eixo em zero mostra, com os mesmos dados, como o eixo cortado infla a diferença entre duas lojas. Abaixo desse volume, o Recharts continua a escolha mais simples.

A fórmula de cada indicador vive em código versionado, numa camada semântica (o arquivo único onde a conta mora, como a receita anotada na cozinha). Assim nenhuma tela calcula receita recorrente, custo de aquisição ou retorno de mídia por conta própria.

Cube e dbt integraram as duas plataformas em julho de 2026, e o modelo do dbt passou a valer como fonte única dessas contas. O motivo é a IA: o agente acerta quando lê a fórmula pronta e erra quando traduz a pergunta direto em consulta ao banco.

Quem dispensa a plataforma inteira tem o Boring Semantic Layer, uma camada leve com a mesma ideia e bem menos peça para manter.

Num escritório de contabilidade, a definição de margem passou a viver num arquivo só, lido por todas as telas. Duas empresas atendidas deixaram de receber a mesma conta feita de dois jeitos.

Antes de fechar o próximo painel mensal, nomeie cada peça como componente no pedido ao agente. Exija fonte, definição, data e responsável dentro do próprio cartão, abertos em um clique. Tire a fórmula dos indicadores das telas e faça todas lerem o mesmo arquivo. Deu certo quando dois relatórios diferentes mostram o mesmo número.

Guia prático: número animado só quando é real, com a origem anotada

Número que sobe na tela chama atenção, e é por isso que ele precisa ser verdadeiro. Nos 51 templates medidos em 07/10/2026, sinais de contador animado aparecem em 28. Nos de advocacia e clínica, os números do topo, como anos de atuação, casos conduzidos e taxa de êxito, são exemplos do template: animam bonito e não pertencem a ninguém.

O curso de edição estudado no mesmo dia tem duas regras que valem para painel e página. A primeira: nada na tela que a pessoa não disse ou não aprovou, e o contador para exatamente no número dito. A segunda: dado de terceiros entra real. No estudo, as estrelas de um repositório citado foram consultadas pela API do GitHub no dia da edição, e o número animado foi o daquele dia, com a origem registrada no arquivo de entrega.

O contador também precisa ser determinístico. O material evita o contador que recalcula a cada quadro e usa valores liberados em tempos fixos. Na página, isso quer dizer: o número final já escrito no HTML, duração fixa, nenhum valor aleatório e, com movimento reduzido ligado, o número final direto. O template de painel contábil mostra o outro lado da mesma regra: sem dados, os cartões exibem 0 ou um traço, com uma dica de como começar, em vez de número de exemplo.

Guia prático: a cor do gráfico medida nos dois temas e lida do CSS

A aula escolheu o gráfico pela pergunta e a biblioteca pelo volume. Este guia cuida da cor: a barra precisa de contraste contra o fundo nos temas claro e escuro, as séries precisam continuar distintas para quem tem daltonismo, e o componente não pode guardar hexadecimal próprio. Você sai medindo a paleta antes de aprovar e ligando a descrição e a textura do ECharts.

Aplicar os recursos ao projeto