Status
<o-status> shows the health of a set of things as colored segments, in layers when they are grouped.
Each item is an <o-arc> with a value, so the segments stack around the ring. The middle counts the problems; point at a segment or focus it and the middle shows that item instead.
Layers
Items with children become an inner ring of groups, each as wide as its children on the outer ring. A group without its own status takes the worst one of its children.
Attributes
| Attribute | Default | What it does |
|---|---|---|
data | [] | Items: [{ label, status, note?, color?, value?, children? }], up to three levels deep. |
label | A title in the middle, above the count. | |
labels | off | Writes each label along its segment. Keep labels short: text longer than its arc is cut. |
pulse | off | Error segments pulse, except with reduced motion. |
range / from | 360 / auto | Arc span and start angle. |
thickness | 2.4, 2 with layers | Ring thickness in lanes. |
gap | 0.8 | Space between segments, in percent of the widget width. |
shape | none | Segment endings. |
size | 220px | Width of the widget. |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
| Status | Also accepted | Color |
|---|---|---|
ok | good, up, healthy, success | #16a34a |
warn | warning, degraded | #d97706 |
error | down, critical, fail, failed, danger | #dc2626 |
info | maintenance | #2563eb |
off | unknown, idle, disabled, anything else | #475569 |
note adds a detail to the item's name and to the middle while it is shown. color overrides the status color of one item; value is passed back in select untouched.
Events
| Name | What it does |
|---|---|
select | A segment was clicked, or activated with Enter or Space. event.detail has label, status, note, value, item and path, the indexes from the top level. |
Styling
| Property | Default | What it does |
|---|---|---|
--ok-status-ok | #16a34a | OK segments and text. |
--ok-status-warn | #d97706 | Warnings. |
--ok-status-error | #dc2626 | Errors. |
--ok-status-info | #2563eb | Info. |
--ok-status-off | #475569 | Off and unknown. |
--ok-status-text | #fff | Labels on the segments. |
--ok-font-size | 4.6cqmin | Label size, as a share of the widget. The middle scales with it. |
More examples
Reacting to a selection
Many small checks
A light, half-ring version
Accessibility
The element has role="group" and a name that counts each status, like “Services: 1 error, 1 warning, 3 ok”. Each segment is a button named after its item, such as “DB: Warning, slow queries”, so status is never only a color.
The ring is one tab stop. Left and Right move around a ring, Up goes out to the first child of a group, Down comes back in to the group, Home and End jump to the ends, Enter and Space fire select.