Meter

In context

Purpose

Meter turns a target into a picture. A shop owner shouldn't have to divide ฿8,900 by ฿9,000 to feel "almost there" — the bar says it. Stack a few for a week's targets; the shapes compare at a glance.

Anatomy

• Label — what's being measured ("Revenue").
• Readout (optional) — the numbers ("฿8,900 of ฿9,000").
• Bar — a track with a fill, progress 0–1 (clamps).
• Dot (optional) — a legend dot when several meters share a key.
• Caption (optional) — a plain-words read ("Comfortably in surplus").

Variants

• Default — teal fill toward a goal.
• met — tints the readout in the bar colour to signal the target is hit.
• Custom color — e.g. an amber spend meter.

Code

import { Meter } from '@daytwo/components'

<Meter label="Revenue" value="฿8,900 of ฿9,000" progress={0.99} caption="Almost there" />
<Meter label="Surplus" value="฿2,800 of ฿2,200" progress={1} met />

When to use

• Target vs actual on a Progress/targets screen.
• A budget or savings bar where the ratio is the point.

When NOT to use

• A single circular score — use a ProgressRing.
• A trend over time — use a chart, not a bar.
• A yes/no state — use a StatusLabel.

Good vs bad

• Good: three stacked meters for the week — revenue, expenses (amber), surplus (met) — the owner sees the whole week's health in one look.
• Bad: a meter with no label or readout and a mystery fill — a bar with no numbers is decoration; the user can't act on it.

Edge cases

Tokens used