GaugeChart

GaugeChart - Presentational gauge / speedometer chart. Implementation note: this component used to wrap the `react-gauge-chart` NPM package, but that package…

GaugeChart - Presentational gauge / speedometer chart.

Implementation note: this component used to wrap the react-gauge-chart NPM package, but that package is published only as CommonJS with a broken module field that points at the same CJS file. That made it crash under ESM bundlers that don't add a __esModule ? .default : module interop shim (Webpack 4, raw esbuild, certain SSR setups, etc.) with React's "Element type is invalid" error. We replaced it with a pure-SVG internal implementation (see ./gauge-svg.tsx) so the component is bundler- and runtime-agnostic and has zero third-party runtime dependencies.

import { GaugeChart } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`percent`	Required	`number`	—	Value between 0 and 1 (e.g. 0.75 = 75%). Values outside the range are clamped.
`colors`	Optional	`string[] \| undefined`	—	Arc colours in HEX format.
`arcWidth`	Optional	`number \| undefined`	—	Arc thickness as a fraction of the gauge radius (0–1).
`nrOfLevels`	Optional	`number \| undefined`	—	Number of arc segments. Ignored when `arcsLength` is provided.
`arcsLength`	Optional	`number[] \| undefined`	—	Custom arc-segment proportions (auto-normalised), overriding `nrOfLevels`. e.g. `[0.7, 0.3]` for a progress-style gauge whose first arc is the fill.
`needleColor`	Optional	`string \| undefined`	—	Needle + hub colour.
`hideNeedle`	Optional	`boolean \| undefined`	—	Hide the needle + hub (e.g. for a progress-style gauge).
`formatTextValue`	Optional	`((percent: number) => string) \| undefined`	—	Format the centre label from the clamped fraction (0–1).
`hideText`	Optional	`boolean \| undefined`	—	Hide the percentage text rendered inside the gauge.
`id`	Optional	`string \| undefined`	—	Stable id used for the gauge's accessibility labels.
`height`	Optional	`string \| number \| undefined`	—	Chart height in pixels or any CSS length (e.g. `'200px'` or `'50%'`).
`maxWidth`	Optional	`number \| undefined`	—	Maximum width in pixels.
`className`	Optional	`string \| undefined`	—	—

Usage

A gauge / speedometer chart drawn as pure inline SVG (no third-party runtime dependency). Accepts a percent value between 0 and 1 and displays it as a coloured arc.

Notes

percent is automatically clamped to [0, 1].
When rendering multiple gauges on the same page, provide a unique id for each instance so their SVG accessibility labels stay distinct.
For a progress-style gauge (single fill arc, no needle) pass arcsLength={[percent, 1 - percent]} with two colors and hideNeedle.

Example

/** * Runnable example for GaugeChart. */import { GaugeChart } from '@tetherto/mdk-react-devkit'export const GaugeChartExample = () => (  <div className="mdk-example-row">    <GaugeChart percent={0.72} id="gauge-hash-rate" />    <GaugeChart      percent={0.45}      id="gauge-efficiency"      colors={['#34C759', '#FF9500', '#FF3B30']}      nrOfLevels={5}    />    <GaugeChart percent={0.95} id="gauge-uptime" hideText height={160} />    <GaugeChart      percent={0.68}      id="gauge-progress"      arcsLength={[0.68, 0.32]}      colors={['#009393', '#00939330']}      hideNeedle      formatTextValue={(p) => `${Math.round(p * 100)}%`}    />  </div>)