ProgressBars

ProgressBars renders quantised utilisation as a row of bars — one bar per unit of capacity (the ceiling of the limit) — filled left to right by the usage. The bar that straddles the usage boundary is partially filled (“blocked out”) to show the fractional unit in use, and the trailing bars stay empty to show headroom; the bar colour crosses warning and danger thresholds. A “ / ” caption sits below with the icon+title. It is purely presentational — pass plain usage/max numbers (TimeseriesCoreBars wraps it with live data).

Source

Import

import { ProgressBars } 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
className	string	—	—
error	Error | null	null	A failed read. Its message replaces the caption (in red) and the accessible label's reading, and is the hover card's only row, as TimeseriesGauge shows one.
hoverCard	boolean	true	Wrap the bars in a hover card summarising the metric (label + current / min / max / avg / capacity). Defaults to true.
hoverFooter	ReactNode	—	Footer note in the hover card, e.g. the look-back window ("over last 1h").
icon	string | ComponentClass<any, any> | FunctionComponent<any>	—	Iconify name or static icon component shown beside the label.
max	number	—	The capacity, in the same raw domain as `usage`. 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.
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.
stats	ProgressBarsStats | null	—	Summary stats for the hover card's Min/Max/Avg rows, in the SAME raw domain as `usage`/`max` (NOT divided by perBar). Pass null to omit those rows.
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").
usage*	number | undefined	—	Usage that fills the bars, in the raw domain (e.g. CPU millicores).
variant	enum	default	Visual density/layout. `cell` is a compact inline form for table/grid cells.