Gráficos B

Velocímetro

Partes de um total numa meia-volta de segmentos.

data-u="gauge"Família B

Exemplo

Velocímetro

Meia-volta de segmentos empilhados e arredondados, com a maior parcela no centro. Passe o mouse sobre um segmento para trocar o centro.

<article class="u-chartb-card">
  <div class="u-chartb-panel" data-u="gauge" data-u-props="{&quot;label&quot;:&quot;Tráfego por dispositivo&quot;,&quot;periods&quot;:[{&quot;label&quot;:&quot;Últimos 7 dias&quot;,&quot;delta&quot;:3.4,&quot;items&quot;:[{&quot;name&quot;:&quot;Desktop&quot;,&quot;value&quot;:1560},{&quot;name&quot;:&quot;Celular&quot;,&quot;value&quot;:900},{&quot;name&quot;:&quot;Tablet&quot;,&quot;value&quot;:330},{&quot;name&quot;:&quot;TV&quot;,&quot;value&quot;:210}]},{&quot;label&quot;:&quot;Semana passada&quot;,&quot;delta&quot;:-0.6,&quot;items&quot;:[{&quot;name&quot;:&quot;Desktop&quot;,&quot;value&quot;:1420},{&quot;name&quot;:&quot;Celular&quot;,&quot;value&quot;:960},{&quot;name&quot;:&quot;Tablet&quot;,&quot;value&quot;:360},{&quot;name&quot;:&quot;TV&quot;,&quot;value&quot;:260}]},{&quot;label&quot;:&quot;Últimos 30 dias&quot;,&quot;delta&quot;:7.9,&quot;items&quot;:[{&quot;name&quot;:&quot;Desktop&quot;,&quot;value&quot;:6400},{&quot;name&quot;:&quot;Celular&quot;,&quot;value&quot;:4300},{&quot;name&quot;:&quot;Tablet&quot;,&quot;value&quot;:1500},{&quot;name&quot;:&quot;TV&quot;,&quot;value&quot;:800}]}]}"></div>
  <div class="u-chartb-copy">
    <h3>Velocímetro</h3>
    <p>Meia-volta de segmentos empilhados e arredondados, com a maior parcela no centro. Passe o mouse sobre um segmento para trocar o centro.</p>
  </div>
</article>

Instalação

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

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

Dependência Puxa junto b-shell (casca dos gráficos B). O instalador baixa e já põe na ordem certa.

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

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

Família B: casca u-chartb-card > o data-u com a classe u-chartb-panel, e depois div.u-chartb-copy com h3 e p.

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.
`periods`	array	sem padrão	Lista de `{label, delta, items: [{name, value}`]}, como no radial.
`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 segmento"`.
lista de períodos	`role="listbox"`, `role="option"`	Abre com `aria-expanded` e marca a opção em `aria-selected`.

Teclado

Tecla	Faz
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.