Gráficos B

Radar

Uma série em eixos radiais, com o ponto e o eixo destacados no hover.

data-u="radar"Família B

Exemplo

Gráfico de radar

Polígono preenchido sobre uma grade hexagonal. Passe o mouse sobre um eixo e o título conta até o valor dele, com o azulejo correspondente em destaque.

<article class="u-chartb-card">
  <div class="u-chartb-panel" data-u="radar" data-u-props="{&quot;label&quot;:&quot;Usuários ativos&quot;,&quot;axes&quot;:[&quot;Janeiro&quot;,&quot;Fevereiro&quot;,&quot;Março&quot;,&quot;Abril&quot;,&quot;Maio&quot;,&quot;Junho&quot;],&quot;short&quot;:[&quot;Jan&quot;,&quot;Fev&quot;,&quot;Mar&quot;,&quot;Abr&quot;,&quot;Mai&quot;,&quot;Jun&quot;],&quot;max&quot;:450,&quot;periods&quot;:[{&quot;label&quot;:&quot;1º semestre&quot;,&quot;values&quot;:[310,402,365,371,338,394],&quot;delta&quot;:4.8},{&quot;label&quot;:&quot;2º semestre&quot;,&quot;values&quot;:[352,331,398,420,377,405],&quot;delta&quot;:6.1},{&quot;label&quot;:&quot;Ano passado&quot;,&quot;values&quot;:[270,298,311,286,305,322],&quot;delta&quot;:-1.9}]}"></div>
  <div class="u-chartb-copy">
    <h3>Gráfico de radar</h3>
    <p>Polígono preenchido sobre uma grade hexagonal. Passe o mouse sobre um eixo e o título conta até o valor dele, com o azulejo correspondente em destaque.</p>
  </div>
</article>

Instalação

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

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

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

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.
`axes`	array	sem padrão	Nome de cada eixo.
`short`	array	sem padrão	Abreviação de cada eixo, opcional.
`max`	number	calculado	Topo da escala. Sem ele, arredonda o maior valor pra cima.
`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`	`"Gráfico de radar"`.
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.