Chart
Chart desenha um gráfico de linhas ou de barras em SVG, sem biblioteca de terceiros. Cada gráfico tem um título, um resumo em texto e uma tabela com os mesmos dados, escondida visualmente e lida por leitores de tela. As cores vêm dos tokens do tema.
Quando usar
Seção intitulada “Quando usar”Use para uma série de valores por categoria, como visitas por dia nos últimos 30 dias. Para um único número, use KpiRow. Os valores chegam como ChartSeries, cada uma com um rótulo e uma lista de pontos (x já formatado e y numérico), e o tipo é linha ou barras (ui/panel/chart.ts:18).
Regras de exibição:
- Sem categorias em nenhuma série, o gráfico não desenha eixos vazios: mostra «Sem dados no período.» (
ui/panel/chart.ts:37e:188). - A área do gráfico tem largura mínima de 416 px. Abaixo disso ela rola, em vez de encolher os rótulos a um tamanho ilegível (
ui/panel/chart.ts:27). - As séries usam quatro estilos de traço que se repetem. A legenda e os tracejados separam as séries sem depender de cor (
ui/panel/chart.ts:36). - O resumo segue o formato
<título>: gráfico de linha com <n> séries, de <primeira categoria> a <última categoria>; sem intervalo, o formato é<título>: gráfico de linha com <n> séries, <categoria>. «série» vira singular quando há uma (ui/panel/chart.ts:177a:181). - A tabela escondida tem a legenda «Dados de» seguida do título (
ui/panel/chart.ts:174).
Onde aparece no painel
Seção intitulada “Onde aparece no painel”O módulo Métricas põe o gráfico de linhas no widget «Visitas por dia» (modules/metricas/widgets.ts:57 a :66), na Visão geral (/painel). A série tem dois traços: visitas e cliques no WhatsApp, nos últimos 30 dias. Sem visitas nem cliques no período, o widget não envia série nenhuma, e o gráfico mostra o estado sem dados (modules/metricas/widgets.ts:33).
Variantes e propriedades
Seção intitulada “Variantes e propriedades”Chart
Pasta: ui/panel
Variantes
| Id | Variante | Tom |
|---|---|---|
chart-linha-light | linha | light |
chart-barras-dark | barras | dark |
Propriedades
| Propriedade | Tipo | Obrigatória | Descrição |
|---|---|---|---|
kind | "linha" | "barras" | Sim | — |
title | string | Sim | — |
series | readonly ChartSeries[] | Sim | — |
Captura
Seção intitulada “Captura”A primeira variante do catálogo, o gráfico de linhas na Visão geral da galeria, com a coluna «Resumo», em 1280 px.
A mesma variante em 360 px:
ui/panel/chart.ts:Chart,ChartPoint,ChartSerieseChartProps.ui/panel/chart.gallery.ts: as variantes do catálogo (linhas e barras).modules/metricas/widgets.ts: o uso no módulo Métricas.