TimeseriesCoreBars

TimeseriesCoreBars reads usage and limit live from the timeseries store (mirroring TimeseriesGauge’s data plumbing) and renders them as quantised utilisation bars via {@link ProgressBars}. Usage and limit flow through each series’ optional transform; the hover card summarises current/min/max/avg/ capacity over the look-back window.

Source

Import

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

Demos

Four Cores · Open in Storybook

Horizontal · Open in Storybook

Value Hidden · 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`).
className	string	—	—
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 bars 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 capacity. Either a `.limit`-style metric series (its latest value) or a fixed number, in the same raw domain as `value`. Determines the number of bars (one per `unit.perBar`). When omitted or 0, the bar count falls back to the ceiling of the usage so an unbounded reading still renders.
orientation	enum	—	Bar direction. Vertical bars fill bottom-up; horizontal bars fill left-to-right.
range	string	1h	Look-back window passed as ?since=; defaults to "1h".
refreshMs	number	5000	Poll interval in ms; defaults to 5000. Pass 0 to disable polling.
showCapacity	boolean	false	Include the capacity in the caption ("2.3 / 4 cores"). Defaults to false — the caption shows only the current value ("2.3 cores") since the bars already convey capacity. Set true to append the "/ <capacity>".
showLabel	boolean	true	Show the title text. Icons and values remain visible unless separately hidden.
showValue	boolean	true	Show the value/capacity caption. Icons and bars remain visible when false.
thresholds	[warning: number, danger: number]	[75, 90]	Utilisation thresholds (percent of capacity) at which the fill turns amber then red. Defaults to [75, 90].
title*	string	—	—
unit	ProgressBarsUnit	—	What one bar represents. Defaults to CPU cores (perBar 1000, label "cores").
value*	GaugeSeries	—	The metric whose latest value (CPU millicores) fills the bars.
variant	enum	default	Visual density/layout. `cell` is a compact inline form for table/grid cells.