ProgressUnits

Segmented progress: a rating of 4.5 of 5 stars with a half star, the steps of a booking, the cells of a battery. Partial units are clipped exactly; the row shrinks to fit narrow containers.

Import

import { ProgressUnits } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/progress-units.

Usage

<ProgressUnits
  label="Calificación de Kevin"
  value={4.5}
  max={5}
  count={5}
  variant="icons"
  icon="star"
  size={24}
  gap={0.18}
  showValue
  animate
  loading={false}
/>

Props

Prop	Type	Default	Description
label *	string		Accessible name and data table caption, e.g. “Calificación de Kevin”.
value *	number
max	number	5	Value of a full row of units (5 for a five star rating, 100 for a percentage).
count	number	5	Number of units drawn.
step	number		Rounds the value before drawing, e.g. 0.5 for half stars. Exact partial units by default.
variant	"icons" | "segments"	"icons"	“icons”: repeated icons (stars, chairs…); “segments”: rounded cells like a battery or steps.
icon	UnitIcon	"star"
color	string		CSS color; overrides tone.
tone	"danger" | "neutral" | "warning" | "success" | "accent"		Status color family; the brand tone by default.
size	number	24	Largest unit side in pixels (the height of the component).
gap	number	0.18	Gap between units, as a fraction of the unit size.
showValue	boolean	true	Shows the value after the units (“4.5 / 5”).
valueFormat	ValueFormat
animate	boolean	true
loading	boolean	false
labels	Partial<ChartLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Exact partial (4.3)
• Rounded to half stars
• Segments (booking steps)
• Segments (capacity cells)
• Chair icons (chairs taken)
• Loading
• Narrow

Source

packages/ui/src/charts/progress-units/progress-units.tsx