Charts B
Rings
Goals in three rings or a month of mini rings per day.
Example
Goal rings
Three concentric rings that fill up with the day's goal. Hover a ring to read its progress in the center.
Ring calendar
The same idea in miniature: every day of the month gets three rings. The picker changes the month with a transition.
<article class="u-chartb-card">
<div class="u-chartb-panel" data-u="rings" data-u-props="{"variant":"activity","label":"Daily goals","rings":["Focus","Deliveries","Reviews"],"periods":[{"label":"Today","pct":[0.72,0.78,0.8],"text":["4h 20m","7 of 9","12 of 15"]},{"label":"Yesterday","pct":[0.95,0.67,0.6],"text":["5h 42m","6 of 9","9 of 15"]},{"label":"This week","pct":[0.84,0.88,0.73],"text":["25h 10m","34 of 39","55 of 75"]}]}"></div>
<div class="u-chartb-copy">
<h3>Goal rings</h3>
<p>Three concentric rings that fill up with the day's goal. Hover a ring to read its progress in the center.</p>
</div>
</article>
<article class="u-chartb-card">
<div class="u-chartb-panel" data-u="rings" data-u-props="{"variant":"calendar","label":"Most productive days","unit":"deliveries this month","hoverUnit":"deliveries","month":2,"months":[{"label":"April","days":30,"start":3,"total":152,"seed":2},{"label":"May","days":31,"start":5,"total":171,"seed":5},{"label":"June","days":30,"start":1,"total":184,"seed":3},{"label":"July","days":31,"start":3,"total":163,"seed":9}]}"></div>
<div class="u-chartb-copy">
<h3>Ring calendar</h3>
<p>The same idea in miniature: every day of the month gets three rings. The picker changes the month with a transition.</p>
</div>
</article>Installation
Just this chart, with the core and the tokens:
curl -fsSL unslop.leallabs.dev/i | sh -s add ringsDependency Pulls in b-shell (shell for B charts). The installer downloads it and puts it in the right order.
The full card from the example, as HTML ready to paste:
curl -fsSL unslop.leallabs.dev/i | sh -s add chart-ringsFamily B: shell u-chartb-card > the data-u with the u-chartb-panel class, then div.u-chartb-copy with h3 and p.
Props
They go in data-u-props, as JSON. Each item in periods becomes an option in the picker and the chart animates from the old data to the new.
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | no default | Small label at the top of the card. |
variant | string | no default | "activity" (three rings) or "calendar" (mini rings per day). |
rings | array | no default | activity: the three names. |
periods | array | no default | activity: list of {label, pct, text}, pct from 0 to 1. |
unit | string | no default | calendar: unit for the total. |
hoverUnit | string | no default | calendar: unit in the day hover. |
month | number | last | calendar: month it opens on. |
months | array | no default | calendar: list of {label, days, start, total, seed}. start is the weekday of day 1 (0 is Sunday). |
period | number | 0 | Index of the period that opens selected. |
Accessibility and keyboard
State and roles
| Where | Attribute | What it says |
|---|---|---|
| chart svg | role="img" and aria-label | "Label". |
| period list | role="listbox", role="option" | Opens with aria-expanded and marks the option in aria-selected. |
Keyboard
| Key | Does |
|---|---|
| Enter or Space | opens the period list |
| Up and down arrows | moves through the options |
| Esc | closes without changing |
| Tab | closes and moves focus on |
Events and API
No public events. The period change happens inside the card.