Gráficos B
Anéis
Metas em três anéis ou um mês de mini anéis por dia.
Exemplo
Anéis de metas
Três anéis concêntricos que preenchem conforme a meta do dia. Passe o mouse sobre um anel para ler o progresso no centro.
Calendário de anéis
A mesma ideia em miniatura: cada dia do mês ganha três anéis. O seletor troca de mês com transição.
<article class="u-chartb-card">
<div class="u-chartb-panel" data-u="rings" data-u-props="{"variant":"activity","label":"Metas do dia","rings":["Foco","Entregas","Revisões"],"periods":[{"label":"Hoje","pct":[0.72,0.78,0.8],"text":["4h 20m","7 de 9","12 de 15"]},{"label":"Ontem","pct":[0.95,0.67,0.6],"text":["5h 42m","6 de 9","9 de 15"]},{"label":"Esta semana","pct":[0.84,0.88,0.73],"text":["25h 10m","34 de 39","55 de 75"]}]}"></div>
<div class="u-chartb-copy">
<h3>Anéis de metas</h3>
<p>Três anéis concêntricos que preenchem conforme a meta do dia. Passe o mouse sobre um anel para ler o progresso no centro.</p>
</div>
</article>
<article class="u-chartb-card">
<div class="u-chartb-panel" data-u="rings" data-u-props="{"variant":"calendar","label":"Dias mais produtivos","unit":"entregas no mês","hoverUnit":"entregas","month":2,"months":[{"label":"Abril","days":30,"start":3,"total":152,"seed":2},{"label":"Maio","days":31,"start":5,"total":171,"seed":5},{"label":"Junho","days":30,"start":1,"total":184,"seed":3},{"label":"Julho","days":31,"start":3,"total":163,"seed":9}]}"></div>
<div class="u-chartb-copy">
<h3>Calendário de anéis</h3>
<p>A mesma ideia em miniatura: cada dia do mês ganha três anéis. O seletor troca de mês com transição.</p>
</div>
</article>Instalação
Só este gráfico, com o core e os tokens:
curl -fsSL unslop.leallabs.dev/i | sh -s add ringsDependê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-ringsFamí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. |
variant | string | sem padrão | "activity" (três anéis) ou "calendar" (mini anéis por dia). |
rings | array | sem padrão | activity: os três nomes. |
periods | array | sem padrão | activity: lista de {label, pct, text}, pct de 0 a 1. |
unit | string | sem padrão | calendar: unidade do total. |
hoverUnit | string | sem padrão | calendar: unidade no hover do dia. |
month | number | último | calendar: mês que abre. |
months | array | sem padrão | calendar: lista de {label, days, start, total, seed}. start é o dia da semana do dia 1 (0 é domingo). |
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". |
| 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.