A share of a whole as an ink bar on the series track. InlineMeter is the Allocated / Committed / Consumed / Invoiced stack: four thin bars with the percentage at a fixed width and an optional warning tick. Sparkbars is a row of bars for a small trend; the trailing bars carry ink. The fill moves by transform only.
import { Meter, InlineMeter, Sparkbars } from "@puckoops/camelot";| Name | Description | Default | Control |
|---|---|---|---|
| percent* | 0–100; more fills the bar number | - | 013064 |
| label | Names the meter for assistive tech string | - | |
| className | string | - | |
| size | 6px or 4px "thin""default" | "default" |
Use Meter for a measure that is not a task, such as capacity or budget used. InlineMeter compares four stages of one budget in a drawer or a row, with an optional warning tick. Sparkbars sits at the foot of a FigureCard; the trailing bars carry ink.
4px, inside a row or a table cell.
Over 100 fills the bar; say the real number beside it.
InlineMeter: one budget at four stages, with a tick where Consumed should raise a warning.
Sparkbars: the last three months in ink, the rest quiet.
highlight picks how many trailing bars carry ink; here only today.
All three on a card, as they appear in a drawer.