Gauge
A radial meter — the circular counterpart to Progress. Drawn with stroke-dasharray rather than an arc path, so the sweep is one number and there is no arc-flag maths to get wrong.
src/components/ui/gauge.tsxAbout
From the component's own source, where it was written.
A radial meter — the circular counterpart to Progress.
Drawn with stroke-dasharray on a circle rather than an arc path, so the sweep is one number to animate and there is no arc-flag maths to get wrong near 180 degrees.
It reports as a real progressbar with aria-valuenow, because a ring of SVG is otherwise invisible to a screen reader — the number in the middle is decoration, not an accessible value.
Install
npx astralyx-ui add gauge
Usage
import { Gauge } from '@/components/ui/gauge'
<Gauge value={72} label="CPU" />Composer
Change the props and the source below follows.
<Gauge value={72} label="CPU" showValue={true} />Examples
Thresholds
<Gauge value={38} label="Memory" />
<Gauge value={82} label="Disk" />
<Gauge value={96} label="Quota" />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
Gauge
A radial meter — the circular counterpart to Progress.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | max: 100 | Reported as a real progressbar with aria-valuenow — a ring of SVG is otherwise invisible to a screen reader. |
| max | number | 100 | Reported as a real progressbar with aria-valuenow — a ring of SVG is otherwise invisible to a screen reader. |
| size | number | 96 | Rendered size in pixels; geometry is a fixed 100-unit viewBox so it stays independent of that. |
| thickness | number | 8 | Rendered size in pixels; geometry is a fixed 100-unit viewBox so it stays independent of that. |
| label | ReactNode | — | Caption under the ring, small text inside it, and whether the percentage is drawn. |
| hint | ReactNode | — | Caption under the ring, small text inside it, and whether the percentage is drawn. |
| tone | string | — | Any CSS colour. Defaults to a threshold ramp — green, amber above 75%, red above 90%. |
| showValue | boolean | true | Caption under the ring, small text inside it, and whether the percentage is drawn. |