Gráficos A

Área

Séries empilhadas com gradiente e hover que acompanha o mês.

data-u="area"Família A

Exemplo

Gráfico de área

Série empilhada com preenchimentos em gradiente. Passe o cursor num mês e título, legenda e azulejos o acompanham.

<article class="u-chart-card">
  <div class="u-chart-panel">
    <div data-u="area" data-u-props='{
      "label": "Visitas",
      "series": [{"label": "Busca"}, {"label": "Indicação"}, {"label": "Anúncio"}],
      "periods": [
        {
          "label": "Este ano",
          "delta": 7.4,
          "labels": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
          "data": [
            [2160, 2260, 2450, 2410, 2600, 2700, 2750, 2800, 2900, 2990, 3140, 3240],
            [1200, 1250, 1350, 1300, 1390, 1440, 1440, 1490, 1540, 1640, 1780, 1830],
            [650, 690, 740, 780, 830, 880, 920, 970, 1010, 1110, 1240, 1380]
          ]
        },
        {
          "label": "Ano passado",
          "delta": 4.9,
          "labels": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
          "data": [
            [1750, 1800, 1950, 1950, 2100, 2150, 2200, 2250, 2300, 2400, 2500, 2600],
            [1050, 1100, 1150, 1100, 1200, 1250, 1250, 1300, 1300, 1400, 1550, 1550],
            [450, 500, 550, 550, 600, 650, 650, 700, 750, 800, 900, 1000]
          ]
        },
        {
          "label": "Últimos 12 meses",
          "delta": 6.2,
          "labels": ["Dez", "Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov"],
          "data": [
            [3350, 2250, 2350, 2550, 2500, 2700, 2800, 2850, 2900, 3000, 3100, 3250],
            [1900, 1250, 1300, 1400, 1350, 1450, 1500, 1500, 1550, 1600, 1700, 1850],
            [1500, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1200, 1350]
          ]
        }
      ]
    }'></div>
  </div>
  <h3 class="u-chart-title">Gráfico de área</h3>
  <p class="u-chart-desc">Série empilhada com preenchimentos em gradiente. Passe o cursor num mês e título, legenda e azulejos o acompanham.</p>
</article>

Instalação

Só este gráfico, com o core e os tokens:

curl -fsSL unslop.leallabs.dev/i | sh -s add area

Sem dependência O arquivo do gráfico já traz a própria casca.

O card completo do exemplo, em HTML pronto pra colar:

curl -fsSL unslop.leallabs.dev/i | sh -s add chart-area

Família A: casca u-chart-card > u-chart-panel > o data-u, e depois h3.u-chart-title e p.u-chart-desc.

Props

Vão em data-u-props, como JSON. Cada item de periods vira uma opção do seletor e o gráfico reanima do dado antigo pro novo.

Prop	Tipo	Padrão	O que faz
`label`	string	sem padrão	Rótulo pequeno no topo do card.
`series`	array	sem padrão	Lista de `{label}`, uma por série.
`periods`	array	sem padrão	Lista de `{label, delta, labels, data}`. data tem um array por série, um valor por rótulo.
`period`	number	0	Índice do período que abre selecionado.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
svg do gráfico	`role="img"` e `aria-label`	`"Rótulo por mês"`.
alternador de período	`role="radiogroup"`, `role="radio"`	Período atual em `aria-checked`.
lista de períodos	`role="listbox"`, `role="option"`	Abre com `aria-expanded` e marca a opção em `aria-selected`.

Teclado

Tecla	Faz
Seta para a esquerda e para a direita	troca o período no alternador
Enter ou Espaço	abre a lista de períodos
Seta para cima e para baixo	anda pelas opções
Esc	fecha sem trocar
Tab	fecha e segue o foco

Eventos e API

Nenhum evento público. A troca de período acontece dentro do card.