A 240-degree SVG gauge with automatic nice bounds, explicit range overrides, threshold markers, target, animated live value, and window statistics.
NormalWarningCriticalNo dataOver range
CPU load
normal| Min | 71.4 |
|---|---|
| Max | 78.4 |
| Avg | 75.66 |
<Gauge label="CPU load" value={78.4} min={0} max={100} unit="%" thresholds={limits} target={70} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Gauge } from '@chanrg/4ui';<Gauge label="CPU load" value={78.4} min={0} max={100} unit="%" thresholds={limits} target={70} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | null | Current reading. |
min / max | number | null | automatic | Optional explicit scale bounds; otherwise derived from points. |
target | number | null | null | Target marker on the arc. |
thresholds | GaugeThreshold[] | [] | Warning and critical markers. |
points | Array<number | null> | [] | Observed values used for auto-ranging and statistics. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- The SVG accessible name includes value, range, unit, and status.
- Threshold and target markers include text alternatives.