One share of a whole: a title, the percentage as a KPI, an ink bar on the series track, and a caption with the raw numbers. Values over 100 fill the bar and keep their number.
import { MeterCard, Meter, InlineMeter } from "@puckoops/camelot";| Name | Description | Default | Control |
|---|---|---|---|
| title* | ReactNode | - | |
| percent* | 0–100; more keeps its number number | - | 013078 |
| caption | ReactNode | - | |
| className | string | - |
Use MeterCard for one share of a whole. Use InlineMeter inside a drawer or row for the Allocated / Committed / Consumed / Invoiced stack.
Zero is a real value: the track shows, the figure reads 0%.
Nothing billed against October yet.
Exactly used.
£42,000 of £42,000 committed.
Past 100 the bar stays full and the figure tells the overrun.
56 of 50 estimated hours.
Empty, partial, full and over, as a 3 × 4 row of counts.
Nothing billed yet.
31 of 40 hours.
£42,000 of £42,000.
56 of 50 hours.