Navegação

Padrões de tela

Gráficos prontos

beta

68 exemplos instalados (ADR-0013), por família — cada um é para copiar e adaptar, não para importar e configurar.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

Exemplo, não componente

68 exemplos de gráfico instalados a partir do registry shadcn (new-york-v4 — o base-nova do produto não publica exemplo de gráfico, só o primitivo). Cada um é um arquivo completo, com dado fictício embutido: a forma certa de usar é copiar o arquivo para a tela e trocar o dado, não importar e configurar por prop. Quem precisa do primitivo por trás de todos eles — ChartContainer, cores por config, tooltip — parte de Componentes → Chart.

Import: @voxmente/ui/components/charts/chart-<nome>. Fonte: packages/ui/src/components/charts/.

Barra

Comparação entre categorias. Vertical quando os rótulos são curtos; horizontal quando o nome da categoria é longo demais para caber embaixo de cada barra — foi o motivo de escolher `bar-horizontal` para o ranking de atividades do Início.
Bar Chart - Multiple
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Bar Chart - Horizontal
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Linha e área

Série no tempo. Linha quando o que importa é a tendência de cada série separada; área quando o volume acumulado também é parte da leitura (ou quando uma cor de fundo ajuda a diferenciar séries próximas).
Line Chart - Multiple
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
Area Chart - Gradient
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Pizza e donut

Composição de um total — a pergunta é "que fração é cada parte", nunca "qual o valor exato". Acima de 5-6 fatias a leitura já não funciona; nesse caso, barra horizontal ordena melhor.
Pie Chart - Donut Active
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Radar e radial

Radar compara múltiplas dimensões do mesmo item (ex.: um perfil de habilidades). Radial é um medidor circular de progresso — a leitura de um Progress, só que redonda. Os dois são a família menos usada no produto até aqui; use com critério, não porque parece mais bonito que a barra.
Radar Chart - Grid Filled
Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024
Radial Chart - Text
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months

Inventário completo

Os 68, por família — inclusive os que não têm demonstração acima. Cada nome é o sufixo do import: `chart-<família>-<nome>`.

Área (10)

Barra (10)

Linha (10)

Pizza e donut (11)

Radar (12)

Radial (6)

Tooltip (variações) (9)