Gráficos A

Combinado

Barras num eixo e linha de taxa no outro, volume e conversão juntos.

data-u="combo"Família A

Exemplo

Gráfico combinado

Barras num eixo e uma linha de conversão no outro, volume e taxa lidos juntos em uma tela.

<article class="u-chart-card">
  <div class="u-chart-panel">
    <div data-u="combo" data-u-props='{
      "label": "Pedidos",
      "bars": {"label": "Pedidos"},
      "line": {"label": "Conversão"},
      "periods": [
        {
          "label": "Este ano",
          "delta": 9.4,
          "labels": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
          "bars": [1220, 1290, 1380, 1350, 1460, 1550, 1510, 1610, 1700, 1670, 1840, 2060],
          "line": [3.5, 3.7, 3.9, 3.8, 4.1, 4.3, 4.2, 4.4, 4.6, 4.5, 4.7, 4.9]
        },
        {
          "label": "Ano passado",
          "delta": 6.1,
          "labels": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
          "bars": [1000, 1050, 1100, 1100, 1150, 1250, 1200, 1300, 1350, 1350, 1450, 1650],
          "line": [3.1, 3.3, 3.5, 3.4, 3.7, 3.9, 3.8, 4, 4.2, 4.1, 4.3, 4.5]
        },
        {
          "label": "Últimos 12 meses",
          "delta": 7.8,
          "labels": ["Dez", "Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov"],
          "bars": [2150, 1300, 1350, 1450, 1400, 1550, 1650, 1600, 1700, 1800, 1750, 1950],
          "line": [5, 3.6, 3.8, 4, 3.9, 4.2, 4.4, 4.3, 4.5, 4.7, 4.6, 4.8]
        }
      ]
    }'></div>
  </div>
  <h3 class="u-chart-title">Gráfico combinado</h3>
  <p class="u-chart-desc">Barras num eixo e uma linha de conversão no outro, volume e taxa lidos juntos em uma tela.</p>
</article>

Instalação

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

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

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

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.
`bars`	object	sem padrão	`{label}` da série de barras.
`line`	object	sem padrão	`{label}` da linha, em %.
`periods`	array	sem padrão	Lista de `{label, delta, labels, bars, line}`.
`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.