Gráficos B

Radar comparado

Duas séries no mesmo radar, com a legenda isolando uma delas.

data-u="radar-compare"Família B

Exemplo

Comparação de radares

Duas séries só com contorno sobre a mesma grade. A legenda é viva: passe o mouse sobre uma série para isolá-la.

<article class="u-chartb-card">
  <div class="u-chartb-panel" data-u="radar-compare" data-u-props="{&quot;label&quot;:&quot;Sessões&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;:300,&quot;periods&quot;:[{&quot;label&quot;:&quot;1º semestre&quot;,&quot;delta&quot;:4.8,&quot;series&quot;:[{&quot;name&quot;:&quot;Web&quot;,&quot;values&quot;:[210,255,238,230,196,221]},{&quot;name&quot;:&quot;App&quot;,&quot;values&quot;:[120,147,127,141,142,153]}]},{&quot;label&quot;:&quot;2º semestre&quot;,&quot;delta&quot;:3.2,&quot;series&quot;:[{&quot;name&quot;:&quot;Web&quot;,&quot;values&quot;:[225,240,251,262,238,247]},{&quot;name&quot;:&quot;App&quot;,&quot;values&quot;:[131,158,149,171,164,180]}]},{&quot;label&quot;:&quot;Ano passado&quot;,&quot;delta&quot;:-0.8,&quot;series&quot;:[{&quot;name&quot;:&quot;Web&quot;,&quot;values&quot;:[190,205,214,201,208,219]},{&quot;name&quot;:&quot;App&quot;,&quot;values&quot;:[88,102,97,110,121,126]}]}]}"></div>
  <div class="u-chartb-copy">
    <h3>Comparação de radares</h3>
    <p>Duas séries só com contorno sobre a mesma grade. A legenda é viva: passe o mouse sobre uma série para isolá-la.</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-compare

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

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.
`max`	number	calculado	Topo da escala.
`periods`	array	sem padrão	Lista de `{label, delta, series: [{name, values}`]}, com duas séries.
`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.