Segmented Meter
Show resource usage in cells, with warning and danger thresholds.
import { SegmentedMeter, SegmentedMeterThreshold } from '@youj/react'
Installation & usage
npm i @youj/reactFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
Use a segmented meter for usage people compare across a panel: threads, disk, a backlog, seats. The discrete cells make levels countable, and the cells past a threshold light in its tone, so the warning shows exactly where usage crossed the line. For one headline score, use a Gauge; for progress through a task, use Progress.
import { SegmentedMeter } from '@youj/react'
<SegmentedMeter label="Disk" value={84} thresholds={[{ value: 80, tone: 'warning', label: 'High' }]} />
<SegmentedMeter label="Backlog" value={870} max={2400} format={{}} />The value on the end side is a percentage of the range by default; pass format (Intl.NumberFormat options) to show the raw value, as the backlog does. segments sets the number of cells (default 40), tone the lit cells' tone below every threshold (default neutral, the ink) and showValue={false} hides the value.
Description
Threads, Disk and Backlog meters, with buttons that move Disk to 52, 84 or 96 percent.
Each threshold's tone applies to the lit cells from its value up. The leading cell always shows the value's own band, so a value in the danger band is never drawn only in warning. The band's label is spoken after the value.
Workspace health scores in a list, each as twelve pips in the color of the band its score falls in.
colorBy="value" lights every cell in the value's band instead of the band each cell sits in, so a score reads as one color. Without a visible label, name each meter with aria-label.
A credit-usage dialog: the month's total over a progress bar with when it resets, a filter and a sort, and a tick meter per feature.
Each row's meter is a SegmentedMeter with thresholds set from that feature's own limit (amber from 80%, red from 95%), so the tick row shows how close each feature is to running out. The band's label is spoken with the value. The list sits in a region of fixed height, so filtering swaps the rows without resizing the dialog.
Code
segmented-meter-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propsvalue, min, max… (11)
Props
| Prop | Type | |
|---|---|---|
valueRequired | number | – |
min | numberdefault 0 | 0 |
max | numberdefault 100 | 100 |
label | ReactNodeThe visible name on the start side: "CPU". | – |
segments | numberHow many cells. default 40 | 40 |
tone | MeterTone'accent''success''warning''danger''neutral'The lit cells' tone below every threshold. default 'neutral' | 'neutral' |
thresholds | SegmentedMeterThreshold[]Bands: cells from a threshold's value up light in its tone. | – |
colorBy | 'position' | 'value'
default 'position' | 'position' |
format | Intl.NumberFormatOptionsIntl.NumberFormat options for the value. Default: a percentage of the range. | – |
locale | stringDefault: the YoujProvider locale. | – |
showValue | booleanShow the value on the end side. default true | true |
Other props pass through: extends MeterPrimitive.Root.Props. | ||
StylingParts and data attributes
Styling
Parts: segmented-meter, segmented-meter-header, segmented-meter-label, segmented-meter-value, segmented-meter-track and segmented-meter-cell. Each cell has data-state (on or off) and, when lit, data-tone. The label takes the theme's label voice (mono capitals in Basalt).
MotionFill, each cell, new value · reduced motion
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Fillwhen half of it scrolls into view the cells light one after another at a constant rate, the whole row spanning the deliberate token | duration.deliberate560ms | 560ms | |
| Each cellfades to its tone | duration.fastease.standard140ms · cubic-bezier(0.2, 0, 0, 1) | 140mscubic-bezier(0.2, 0, 0, 1) | |
| New valuelights or darkens the cells between the edge on screen and the new one, in order | duration.fastease.standard140ms · cubic-bezier(0.2, 0, 0, 1) | 140mscubic-bezier(0.2, 0, 0, 1) |
Reduced motion
The cells are lit at once, and a new value relights them in place.
Reduced motion
Every cell is lit at once, with no stagger.
AccessibilityARIA
Accessibility
- It's a
meter(Base UI Meter) named by its visiblelabel; without one, give itaria-label. - The value is spoken with its band: "88%, High". A warning or danger band without a label is spoken as "Warning" or "Critical".
- The cells are hidden from assistive tech. They fill from the inline start, so right to left in RTL.