TimeseriesGauge

TimeseriesGauge renders a half (180°) radial gauge whose fill is the latest value of a metric over its maximum (a .limit-style metric or a fixed number), both read live from the timeseries store. The centre shows the utilisation percentage, with the value/max caption below; the arc colour crosses warning and danger thresholds. An expand button opens the full value/max time-series chart in a modal (a TimeseriesPanel), so the gauge gives the at-a-glance reading and the chart the trend.

Source

Import

import { TimeseriesGauge } from "@flanksource/clicky-ui/data";

Demos

Healthy · Open in Storybook

Warning · Open in Storybook

Danger · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
baseUrl	string	—	Common prefix; the value/max requests are `baseUrl + id` (unless a series has `load`).
centerDisplay	enum	value	What to print in the centre: the formatted value (default) or the utilisation percentage of max (e.g. CPU usage out of its millicore limit).
className	string	—	—
expandable	boolean	true	Show an expand button that opens the value/max time-series chart in a modal. Default true.
fetcher	(…) => Promise<TimeseriesResponse>	async (url) => { const res = await fetch(url); if (!res.ok) throw new Error(`metrics request failed: ${res.status}`); return res.json(); }	Override the default fetch (e.g. to route through an app's API client).
hoverCard	boolean	true	Wrap the gauge in a hover card summarising the metric (label + current / min / max / avg / capacity over the window). Defaults to true.
icon	string | ComponentClass<any, any> | FunctionComponent<any>	—	Iconify name or static icon component shown beside the label.
max	number | GaugeSeries	—	The gauge maximum. Either a metric series (its latest value, e.g. a `.limit` metric) or a fixed number. When omitted, or when the resolved max is 0, the gauge shows the raw value with no fill (an unbounded reading).
range	string	1h	Look-back window for the expand chart, passed as ?since=; defaults to "1h".
refreshMs	number	5000	Poll interval in ms; defaults to 5000. Pass 0 to disable polling.
shape	enum	radial	Fill geometry: a radial half-gauge (default) or a horizontal progress bar.
showLabel	boolean	true	Show the title text. Icons and values remain visible when false.
thresholds	[warning: number, danger: number]	[75, 90]	Utilisation thresholds (percent of max) at which the arc turns amber then red. Defaults to [75, 90].
title*	string	—	—
unit	string	—	Grafana-style unit key for the readout (e.g. "bytes", "percent", "short", "ms").
value*	GaugeSeries	—	The metric whose latest value fills the gauge.
variant	enum	default	Visual density/layout. `cell` is a compact inline form for table/grid cells.