Data

Ring and legend

Segmented ring that draws itself on entry, a number in the center and a legend that highlights the segment.

data-u="ring"

Example

Build health

Stable.

Tests: 1,180 passing

Lint: no new warnings

Types: 2 pending

<article class="u-card u-wall" data-wall="sleep">
  <div class="u-panel">
    <div class="u-head">
      <div><div class="u-label">Build health</div><div class="u-big">Stable.</div></div>
    </div>
    <div data-u="ring" data-u-props='{
      "value": 98,
      "segments": [
        {"v": 38, "color": "var(--c6)"},
        {"v": 34, "color": "var(--c1)"},
        {"v": 28, "color": "var(--c2)"}
      ]
    }'></div>
    <div class="u-legend">
      <div class="u-legend__row" data-seg="0"><i class="u-legend__sq" style="background:var(--c6)"></i>Tests: 1,180 passing</div>
      <div class="u-legend__row" data-seg="1"><i class="u-legend__sq" style="background:var(--c1)"></i>Lint: no new warnings</div>
      <div class="u-legend__row" data-seg="2"><i class="u-legend__sq" style="background:var(--c2)"></i>Types: 2 pending</div>
    </div>
  </div>
</article>

Installation

Ring and legend ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

A ready-made block that uses ring and legend:

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

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

Props

They go in data-u-props, as JSON.

Prop	Type	Default	What it does
`segments`	array	`[]`	List of `{v, color}`. v is the segment weight; color is optional and falls back to --c1, --c2...
`value`	number	0	Number in the center, counting up from 0.
`gap`	number	20	Gap between segments, in circumference units (314).

Classes and variants

Class	What it does
`u-legend`	The legend.
`u-legend__row[data-seg="i"]`	Row tied to segment i: hover highlights the segment and fades the rest.
`u-legend__sq`	Color swatch.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
svg	`aria-hidden="true"`	The ring is decoration. The text legend carries the information.

The highlight is pointer-driven. With the keyboard, the legend is read as text.