Gráficos A

Barras por etapa

Etapas em barras horizontais com ícone, valor e participação, mais azulejos.

data-u="stages"Família A

Exemplo

Barras por etapa

O funil de vendas como barras horizontais com ícone, valor e participação de cada etapa, mais uma grade de azulejos.

<article class="u-chart-card">
  <div class="u-chart-panel">
    <div data-u="stages" data-u-props='{
      "label": "Pipeline de vendas",
      "stages": [
        {"label": "Lead", "icon": "eye"},
        {"label": "Contato", "icon": "user-plus"},
        {"label": "Proposta", "icon": "bolt"},
        {"label": "Negociação", "icon": "crown"},
        {"label": "Fechado", "icon": "users"},
        {"label": "Expansão", "icon": "building"}
      ],
      "periods": [
        {
          "label": "Últimos 7 dias",
          "delta": 3.2,
          "values": [960, 640, 410, 240, 130, 52]
        },
        {
          "label": "Últimos 30 dias",
          "delta": 5.6,
          "values": [4120, 2760, 1730, 980, 540, 218]
        },
        {
          "label": "Últimos 90 dias",
          "delta": 2.1,
          "values": [12800, 8300, 5100, 2900, 1620, 640]
        }
      ]
    }'></div>
  </div>
  <h3 class="u-chart-title">Barras por etapa</h3>
  <p class="u-chart-desc">O funil de vendas como barras horizontais com ícone, valor e participação de cada etapa, mais uma grade de azulejos.</p>
</article>

Instalação

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

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

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

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.
`stages`	array	sem padrão	Lista de `{label, icon}`. icon: eye, `user-plus`, bolt, crown, users ou building (outro cai em eye).
`periods`	array	sem padrão	Lista de `{label, delta, values}`.
`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 etapa"`.
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.