Gráficos A

Receita

Barras arredondadas sobre trilho, eixo de valores e total que conta.

data-u="earnings"Família A

Exemplo

Gráfico de receita

Barras arredondadas sobre um trilho, com alternador de período, título que conta até o valor e contorno no hover.

<article class="u-chart-card">
  <div class="u-chart-panel">
    <div data-u="earnings" data-u-props='{
      "label": "Receita no período",
      "ticks": [0, 2500, 5000, 7500, 10000],
      "periods": [
        {
          "label": "Semanal",
          "total": 66300,
          "delta": 11.3,
          "labels": ["S1", "S2", "S3", "S4", "S5", "S6", "S7", "S8", "S9", "S10", "S11", "S12"],
          "values": [3400, 4700, 6900, 5200, 2800, 3900, 5600, 7400, 4300, 6100, 8800, 7200]
        },
        {
          "label": "Mensal",
          "total": 86200,
          "delta": 8.7,
          "labels": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
          "values": [5100, 4400, 6600, 7000, 5800, 7300, 7900, 6700, 8200, 8600, 9100, 9500]
        },
        {
          "label": "Anual",
          "total": 59000,
          "delta": 19.5,
          "labels": ["&#39;15", "&#39;16", "&#39;17", "&#39;18", "&#39;19", "&#39;20", "&#39;21", "&#39;22", "&#39;23", "&#39;24", "&#39;25", "&#39;26"],
          "values": [1100, 1800, 2400, 3100, 3600, 4500, 4900, 5800, 6600, 7500, 8400, 9300]
        }
      ]
    }'></div>
  </div>
  <h3 class="u-chart-title">Gráfico de receita</h3>
  <p class="u-chart-desc">Barras arredondadas sobre um trilho, com alternador de período, título que conta até o valor e contorno no hover.</p>
</article>

Instalação

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

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

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-earnings

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.
`ticks`	array	`[0, 3000, 5000, 10000]`	Marcas do eixo. A última é o teto.
`periods`	array	sem padrão	Lista de `{label, total, delta, labels, values}`. Todos com o mesmo número de barras.
`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 período"`.
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.