/// Feedback

SemiCircleProgress

A half-ring gauge drawn as a hand-rolled SVG arc, with a mono centre value and optional caption.

import { SemiCircleProgress } from "@protocore/pds";

View as Markdown

Basics

Pass a value (and a max if not out of 100). The arc sweeps left to right over the top semicircle in the accent, above a faint track. The centre renders a mono tabular percentage by default; add a caption for a mono-UPPER unit label.

Tones and sizing

tone swaps the accent arc for a status color when the reading itself carries meaning — a near-full capacity gauge in danger. size and thickness scale the geometry; formatValue customises the centre label.

When to use it

A semicircle gauge reads as a dashboard dial: capacity, usage, a score out of a known maximum. It occupies half the vertical space of a full RadialProgress ring, which makes it a natural fit at the top of a StatCard or in a compact tile.

The accent is the default arc color — the reserved brand signal for a single live value. Only reach for tone when the value crossing a threshold is itself the message (capacity in the red). It's a display gauge, not a control, so it renders on the server with no interactivity.

Usage

Use it for a value against a known maximum (capacity, score, usage).
Keep the accent arc for a neutral reading; it's the live-value signal.
Add a `caption` to name the unit the number measures.
Reach for `tone` only when crossing a threshold is the point.

Don't

Use it for indeterminate progress; that's a Spinner.
Stack many tones in one view; the accent should stay reserved.
Omit `label`; the gauge needs an accessible name.

Accessibility

Exposes `role="progressbar"` with `aria-valuenow/min/max` and an `aria-label` from the `label` prop.
The SVG arc and centre label are `aria-hidden`; the value is conveyed through the ARIA attributes so it isn't announced twice.