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 números que mandam no seu mês, cada um respondendo a uma pergunta. Cabe muita coisa na mesma tela quando a ordem guia o olho, e o guia do painel grande, no fim deste capítulo, mostra como em nove passos. 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 de comparação. 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.

O gráfico começa pela pergunta, não pela biblioteca

O ECharts, biblioteca aberta da Apache usada nos painéis deste portal, traz dezenas de tipos de gráfico prontos. A galeria impressiona, e é por isso que o critério precisa vir antes: qual decisão o gráfico apoia. A página de acessibilidade da biblioteca mostra outro cuidado que fica com quem pede: a descrição para leitor de tela vem desligada.

Guia prático: monte um painel grande, com muitas visões e animado

Um painel pode reunir uma dúzia de gráficos na mesma tela e continuar fácil de ler. O que segura a leitura é a ordem: a decisão no topo, o tempo no meio, a comparação embaixo, cada coisa na sua faixa. Este guia vai do zero ao painel pronto em nove passos, e cada passo traz o pedido para colar no agente de código (Claude Code, Codex ou outro parecido) e o que conferir quando a resposta voltar.

O exemplo usa a Mirante, uma agência de marketing fictícia, com números inventados: leads por canal ao longo de 26 semanas. Troque pelos seus dados quando o painel estiver de pé. As regras completas estão nos guias de gráficos e de dashboards do portal Brasil GEO, com os links no rodapé do capítulo.

Passo 1: escreva a pergunta e a decisão

Antes de qualquer gráfico, escreva numa frase a pergunta que o painel responde e a decisão que ela alimenta. Na Mirante, a pergunta é se algum canal está puxando os leads para baixo a ponto de mudar a verba do mês. Toda visão que entrar depois precisa ajudar a responder isso.

A pergunta também define o denominador, o número pelo qual você divide para saber se o resultado é bom, como a meta do mês. Sem ele, 2.140 leads não dizem nada. Como o agente ainda não tem dado nenhum, peça junto um arquivo de dados de exemplo, marcado como fictício.

Confira no resultado

• A pergunta cabe numa frase e termina citando a decisão.
• Cada visão da lista tem a sua pergunta menor e o seu denominador.
• O arquivo de dados avisa no topo que os números são fictícios.

Passo 2: desenhe três faixas na tela grande

Painel com muita informação se lê de cima para baixo, em faixas com nome. A primeira traz a decisão: uma manchete, a frase calculada do próprio dado (por exemplo, qual canal puxa o volume e com quanto), o número principal em letra grande com o denominador ao lado e duas comparações, com o período anterior e com a meta. A segunda traz o tempo, e a terceira, a comparação entre canais. No fim, a tabela com os mesmos números.

Use a largura toda. Uma grade de 12 colunas (a tela dividida em 12 partes iguais, como as linhas de um caderno) deixa o gráfico principal ocupar oito partes e o ranking ao lado ocupar quatro. O gráfico de destaque ganha de 480 a 640 px de altura, o de apoio de 300 a 400 px e cada miniatura de 140 a 200 px. Cabem até 12 visões por tela; passou disso, abra outra página.

Confira no resultado

• A 1.280 px o painel ocupa a largura da janela, sem coluna estreita no meio.
• O número principal tem o denominador escrito ao lado, na mesma linha de leitura.
• A 390 px as faixas viram uma pilha e a manchete aparece primeiro.

Passo 3: escolha o tipo de cada visão

Cada visão responde a uma pergunta menor, e a pergunta escolhe o tipo. Evolução no tempo pede linha ou área. Ranking pede barra horizontal ordenada, do maior para o menor. O que somou e o que tirou entre dois períodos pede cascata (waterfall, a escadinha que sobe e desce degrau a degrau). Padrão por semana e por canal pede mapa de calor, a grade em que a cor mais forte mostra o valor maior. A mesma pergunta repetida para cada canal pede múltiplos pequenos, miniaturas iguais lado a lado na mesma escala.

Pizza, velocímetro e 3D continuam de fora pelo motivo que o começo do capítulo explicou: o olho compara posição e comprimento muito melhor do que ângulo e área.

Confira no resultado

• A tabela do roteiro tem uma linha por visão, com pergunta, tipo e motivo.
• Nenhuma visão usa pizza com muitas fatias, velocímetro ou 3D.
• Toda barra começa no zero.

Passo 4: some e empilhe sem enganar

Empilhar só vale para o que soma de verdade. Leads de seis canais somam o total de leads; a taxa de conversão de seis canais não soma nada, e a pilha desenharia um total que não existe. Para partes que somam, use área ou barra empilhada quando importa o total e barra a 100% quando importa a divisão.

Séries na mesma unidade que não somam ficam sobrepostas na mesma escala: o período anterior vira uma linha tracejada, o fantasma, a meta vira uma linha reta e a média móvel passa por cima. Unidades diferentes, como leads e custo por lead, nunca dividem o mesmo gráfico com dois eixos Y, porque quem desenha escolhe a escala de cada lado e cria cruzamentos que não existem. Empilhe as visões, uma acima da outra, com a mesma semana na mesma coluna: o olho desce e compara.

Confira no resultado

• Só leads aparecem empilhados; custo por lead está numa visão própria, logo abaixo.
• A linha tracejada do período anterior e a linha da meta usam a mesma escala da área.
• Passando o mouse numa semana, a dica mostra todos os canais, o total e a variação.

Passo 5: use cores prontas para os dois temas

Painel com seis ou oito séries precisa de cores que se distinguem no tema claro, no escuro e para quem tem daltonismo. A paleta abaixo foi medida em 05/11/2026 contra o branco do tema claro e o azul-escuro do tema escuro. Copie como está. A ordem é fixa e a cor segue o canal em todas as visões: se Busca é azul na área, é azul no ranking, na tabela e na miniatura.

Três regras completam a paleta. Verde e laranja ficam parecidos para quem tem daltonismo, então ponha o nome do canal na ponta da série e 2 px de separador entre fatias. Da nona série em diante, junte tudo em Outros. E status, como bom, atenção e crítico, leva ícone e palavra, nunca só cor.

Confira no resultado

• Nenhum componente de gráfico guarda hexadecimal: todos leem o token.
• Trocando o tema, as cores mudam na hora e continuam legíveis.
• O mesmo canal tem a mesma cor em todas as visões.

Passo 6: anime com função

No painel, movimento serve para mostrar o que mudou. Por isso ele aparece toda vez que o dado muda: ao entrar, ao filtrar, ao trocar de visão, ao contar o número novo e ao reproduzir o tempo. Fora desses momentos, nada gira nem pulsa. O capítulo de movimento ensina a guardar o efeito decorativo de uma página de venda para um único momento; no painel, o que manda é o dado.

Cada uso tem um tempo medido, e toda animação tem saída. Quem ligou reduzir movimento no sistema, ou no botão do curso, recebe o painel direto no estado final. Movimento automático que passa de 5 segundos, como a reprodução das semanas, ganha botão de pausa.

Confira no resultado

• A entrada termina em menos de dois segundos, mesmo com 12 visões.
• Ao filtrar, as áreas caminham para o valor novo em vez de sumir e reaparecer.
• Com movimento reduzido, a primeira imagem já é a final.

Passo 7: ligue as visões

Num painel com muitas visões, um clique precisa valer para todas. Isso se chama visões coordenadas: clicar em Social no ranking filtra a área, o mapa de calor, a cascata e as miniaturas ao mesmo tempo. Escreva a regra na tela, perto do botão Limpar, que fica sempre à vista: o filtro vale para todas as visões, um canal por vez.

No ECharts, a função echarts.connect liga as visões com o mesmo eixo de tempo: a linha de leitura, aquele traço que acompanha o mouse, aparece na mesma semana em todas, e o zoom anda junto. Para trocar uma visão por outra no mesmo espaço, como barra por mapa de área, o recurso universalTransition faz os mesmos canais mudarem de forma, e o movimento mostra que nada foi trocado de lugar.

Confira no resultado

• Um clique filtra todas as visões, e o título de cada uma diz o recorte.
• O botão Limpar aparece o tempo todo, e não só depois do filtro.
• Pela tabela e pelo teclado dá para filtrar sem mouse.

Passo 8: dê tela cheia ao painel

Painel denso ganha muito numa tela maior, como o monitor da reunião ou a televisão da equipe. O botão Tela cheia usa a Fullscreen API, o recurso do navegador que leva um pedaço da página a ocupar a tela inteira. No modo reunião a letra cresce, os botões somem e fica só o de sair. No iPhone, onde o recurso é limitado, o painel cobre a janela e sai com o mesmo botão.

Confira no resultado

• Em tela cheia a manchete e o número ficam legíveis do fundo da sala.
• Os gráficos redesenham no tamanho novo, sem rótulo cortado.
• O botão de sair aparece o tempo todo, e a tecla Esc também funciona.

Passo 9: revise no celular e com movimento reduzido

A revisão final acontece em três telas e dois temas. A 390 px, a largura de um celular comum, o painel vira uma pilha na ordem da decisão: manchete e número primeiro, depois as visões na ordem das faixas, e nada cortado sem caminho. Toda letra dentro dos gráficos fica com 12 px ou mais. Confira de novo com reduzir movimento ligado e no tema escuro, que tem cores próprias.

Peça ao agente as capturas e a lista de defeitos, e olhe as capturas você mesmo. É nelas que aparecem o rótulo espremido, a cor apagada no escuro e o gráfico que ficou em branco.

Confira no resultado

• Existem capturas a 390, 1.280 e 1.920 px nos dois temas.
• No celular não há rolagem para os lados e a primeira coisa na tela é a manchete.
• Cada gráfico tem a tabela equivalente, com os mesmos números.

O laboratório abaixo monta o painel da Mirante com os nove passos aplicados. Clique num canal em qualquer visão e veja todas obedecerem ao mesmo filtro. Suba a densidade de 6 para 12 visões, troque o tema, aperte reproduzir e ligue o movimento reduzido para comparar.

Com o painel de exemplo funcionando, troque os dados fictícios pelos seus e repita os nove pedidos na ordem, um por mensagem. Deu certo quando alguém abre o painel, lê a manchete, encontra o número com o denominador e diz qual canal pede atenção sem perguntar nada a você.

Aplicar os recursos ao projeto