GaugeChart
MoleculeHalf-donut gauge (role="meter") with threshold bands, optional needle, three sizes and a stale state for readings that stopped updating. Part of the Chart library (`@/modules/ui/Chart`); the colour comes from semantic tokens through `bands[].tone`.
CPU 34% (success band), Disk 91% (error band)
34%CPU
010091%Disk
0100<GaugeChart value={34} unit="%" label="CPU" bands={bands} />
<GaugeChart value={91} unit="%" label="Disk" bands={bands} />Disk 91% with a needle
91%Disk
0100<GaugeChart value={91} min={0} max={100} unit="%" label="Disk" needle bands={bands} />The value stopped updating
72Stale reading
0100stale
<GaugeChart value={72} size="sm" label="Stale reading" stale />sm, md, lg at 55%
55%sm
010055%md
010055%lg
0100<GaugeChart value={55} unit="%" label="sm" size="sm" bands={bands} />
<GaugeChart value={55} unit="%" label="md" size="md" bands={bands} />
<GaugeChart value={55} unit="%" label="lg" size="lg" bands={bands} />