GaugeNew in 0.7.0

Usage

import { RadialGauge, LinearGauge } from "@vesture/react";

const bands = [
  { from: 0, to: 60, color: "#008300" },
  { from: 60, to: 85, color: "#eda100" },
  { from: 85, to: 100, color: "#e34948" },
];

<RadialGauge value={72} label="CPU" ranges={bands} ticks={6} showTickLabels target={90} formatValue={(v) => `${v}%`} />

<RadialGauge value={72} sweep={360} startAngle={-90} renderCenter={({ formatted }) => <strong>{formatted}%</strong>} />

<LinearGauge value={58} label="Quota" target={75} thickness={14} />

Behavior

• ranges are color bands ({ from, to, color }); the fill takes the color of the band the value falls in, falling back to color and then the theme primary.
• RadialGauge's startAngle and sweep reshape the dial: 270° (default) is a classic speedometer, 180° a half-dial, 360° a full progress ring. thickness, squareCaps and trackColor tune the stroke.
• ticks adds evenly spaced tick marks (showTickLabels prints their values); target draws a marker at a goal or SLA threshold on either gauge.
• renderCenter on the dial and renderValue on the bar replace the default readout with anything — icons, units, secondary values.
• Values outside min/max are clamped visually; the real value still goes to aria-valuenow.