Produto e dados

Quando usar

Os três a cinco números que a equipe olha primeiro. Mais que seis, vire tabela. A meta entra como trilha só quando há um alvo combinado.

Sentido

data-sentido="bom", "ruim" ou sem atributo (neutro). A seta mostra a direção; a palavra diz se é bom. Em latência e custo, cair é bom: seta para baixo com data-sentido="bom".

Acessibilidade

A faísca é aria-hidden e a tendência vai em texto (.rq-oculto-visual). O menos é o sinal tipográfico (−), não o hífen.

Regras

Um eixo só. Barras e área partem do zero, e o valor negativo desce abaixo dele. Célula sem número fica sem marca e sem rótulo; sem nenhum número, fica só a tabela. Marcas finas (barra de até 24 px com ponta de 4 px, linha de 2 px, ponto de 8 px), vão de 2 px na cor do fundo, grade de 1 px. Texto nunca na cor da série.

Teclado

Tab chega ao gráfico. ← → andam pelas categorias, ↑ ↓ trocam a série nas barras, Home e End vão às pontas, Esc fecha a dica (também a aberta pelo ponteiro). O valor ativo é anunciado.

Movimento

As barras crescem da base e a linha se traça uma vez, quando o gráfico chega à tela. Com movimento reduzido, ele já nasce pronto.

Parte de um todo ao longo do tempo. Cada segmento é separado por um vão na cor do fundo, sem contorno; só o topo da pilha arredonda, e o total vai em cima.

Quando usar

Agrupadas para comparar séries dentro de cada categoria; empilhadas quando a soma importa. Um valor só não é gráfico de barra: é indicador.

Séries

Até seis, na ordem fixa. A sétima vira "Outros" na tabela antes de chegar ao gráfico; cor nunca é reciclada.

Quando usar

Tempo no eixo de baixo, de seis a algumas dezenas de pontos. Medidas de escala diferente: índice, como aqui, ou dois gráficos lado a lado. Nunca dois eixos verticais.

Rótulos

Nome e último valor no fim de cada linha, até quatro séries. Se dois rótulos ficam perto demais, saem os dois e ficam a legenda e a dica.

Quando usar

Volume acumulado no tempo, uma série. Para comparar duas séries que não somam, linhas.

Datas

Em mono. Quando não cabem todas, o eixo pula de forma regular; a dica e a tabela trazem cada dia.

Quando usar

Participação com uma fatia claramente maior. A partir da sétima linha, o módulo junta o resto em "Outros".

Número de fatias

O anel fecha: a última fatia encosta na primeira. Com seis, o par laranja e verde passa no validador de cores; com três, quatro ou cinco, o par que fecha o anel fica parecido demais. Nesses casos, barra empilhada.

Quando usar

Indicadores para o estado da semana; linhas para ver se a latência anda; área empilhada quando as partes somam o total que custa.

Unidade

data-unidade entra na dica e nos rótulos; o eixo fica limpo e o título diz a unidade.

Quando usar

Comparação exata, muitas linhas ou muitas classes. Todo gráfico já traz a sua tabela; esta é a tabela que vale sozinha.

Acessibilidade

O cabeçalho ordenável vira botão; a coluna ordenada leva aria-sort e a nova ordem é anunciada. A área de rolagem é uma região com nome e entra no Tab, para rolar pelo teclado. Estado com ponto e palavra, nunca só cor.

Ordem

Número ordena primeiro do maior para o menor; texto, de A a Z. O segundo clique inverte. Célula vazia ou só com traço vai para o fim, nos dois sentidos.