Status-tinted period bars with an active hatch, target reference, responsive geometry, and focusable tooltip detail.
NormalWarningCriticalActiveNo data
<KpiPeriodBars points={periods} target={96} unit="%" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { KpiPeriodBars } from '@chanrg/4ui';<KpiPeriodBars points={periods} target={96} unit="%" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
points | KpiPeriod[] | [] | Ordered periods. |
target | number | null | null | Visible target reference. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Each bar is keyboard focusable and has a complete period/value/status label.