Gráficos B
Radial
Partes de um total em anéis concêntricos.
Exemplo
Gráfico radial
Anéis concêntricos com o nome escrito ao longo do próprio arco. Passe o mouse sobre um anel e os outros recuam, enquanto título e azulejo acompanham.
<article class="u-chartb-card">
<div class="u-chartb-panel" data-u="radial" data-u-props="{"label":"Canais","periods":[{"label":"Últimos 7 dias","delta":3.2,"items":[{"name":"Busca","value":640},{"name":"Direto","value":480},{"name":"Social","value":410},{"name":"E-mail","value":290},{"name":"Outros","value":160}]},{"label":"Últimos 30 dias","delta":5.6,"items":[{"name":"Busca","value":2310},{"name":"Direto","value":1720},{"name":"Social","value":1480},{"name":"E-mail","value":1040},{"name":"Outros","value":590}]},{"label":"Semana passada","delta":-1.4,"items":[{"name":"Busca","value":590},{"name":"Direto","value":455},{"name":"Social","value":430},{"name":"E-mail","value":262},{"name":"Outros","value":143}]}]}"></div>
<div class="u-chartb-copy">
<h3>Gráfico radial</h3>
<p>Anéis concêntricos com o nome escrito ao longo do próprio arco. Passe o mouse sobre um anel e os outros recuam, enquanto título e azulejo acompanham.</p>
</div>
</article>Instalação
Só este gráfico, com o core e os tokens:
curl -fsSL unslop.leallabs.dev/i | sh -s add radialDependê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-radialFamí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}]}, com os mesmos itens em todos os períodos. |
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 anel". |
| 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.