Gráficos A

Funil

Etapas com halo em camadas e a conversão entre colunas.

data-u="funnel"Família A

Exemplo

Gráfico de funil

Etapas com halo em camadas e pílulas de conversão, curvas suaves ou cortes nítidos, e azulejos com o número de cada coluna.

<article class="u-chart-card">
  <div class="u-chart-panel">
    <div data-u="funnel" data-u-props='{
      "label": "Cadastro",
      "curve": true,
      "stages": [
        {"label": "Visitou"},
        {"label": "Criou conta"},
        {"label": "Ativou"},
        {"label": "Assinou"}
      ],
      "periods": [
        {"label": "Últimos 7 dias", "delta": 6.1, "values": [2340, 1310, 820, 310]},
        {
          "label": "Últimos 30 dias",
          "delta": 3.4,
          "values": [9870, 5240, 3480, 1290]
        },
        {
          "label": "Últimos 90 dias",
          "delta": -1.8,
          "values": [28900, 15100, 9700, 3650]
        }
      ]
    }'></div>
  </div>
  <h3 class="u-chart-title">Gráfico de funil</h3>
  <p class="u-chart-desc">Etapas com halo em camadas e pílulas de conversão, curvas suaves ou cortes nítidos, e azulejos com o número de cada coluna.</p>
</article>

Instalação

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

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

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

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.
`curve`	boolean	true	Curva suave entre etapas. false dá cortes retos.
`stages`	array	sem padrão	Lista de `{label}`, uma por etapa.
`periods`	array	sem padrão	Lista de `{label, delta, values}`. Um valor por etapa.
`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: etapa valor, ..."` com os números da 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.