メーターMeterExperimental
Capacity / utilisation meter (role=meter): a value-against-max bar whose tone is derived from thresholds (near-full → warning, over → destructive), with an optional incoming overlay to preview 'after this change' and a compact inline size for table cells. For warehouse fill, truck load, storage usage and quota — or set direction='higher-is-better' with a target marker for occupancy / utilisation / SLA / yield goals, or direction='fill-is-good' (no target) for coverage / fulfillment. Pass formatValue to format the visible readout (e.g. grouped JPY).
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | - | Current measured value. |
| max | number | 100 | Upper bound of the range. |
| incoming | number | - | Extra amount layered on top of value as a striped overlay — preview the result of a pending change. Also drives the tone, so an overflow is flagged before it's committed. |
| thresholds | { warning?: number; over?: number } | { warning: 0.8, over: 1 } | Fractions of max that flip the auto tone (near-full → warning, over → destructive). |
| direction | "higher-is-worse" | "higher-is-better" | "fill-is-good" | "higher-is-worse" | higher-is-worse (default) is capacity/load. higher-is-better flips it for occupancy/utilisation/SLA/yield — at/above target is success. fill-is-good tones by fill toward max (no target needed) — for coverage / fulfillment / completion. |
| target | number | - | Goal value (same units as value) drawn as a marker line on the track. With direction='higher-is-better' it also drives the auto tone; under the default direction it is a visual reference only. |
| formatValue | (value: number) => string | - | Format the numbers in the visible readout (e.g. grouped JPY via formatCurrency). Overrides the default round(n,1) + unit. A percentage meter (unit='%', max 100) shows the value once instead of '/ 100%（%）'. |
| tone | "success" | "warning" | "destructive" | "info" | "primary" | "muted" | - | Force the fill tone instead of deriving it from thresholds. |
| label | ReactNode | - | Accessible name — a meter needs one. |
| valueText / unit | string | - | Override the announced value text, or set a unit suffix (kg / m³) for the default readout. |
| size | "default" | "sm" | "inline" | "default" | inline is a thin bar + compact % for table cells. |
| showValue | boolean | true | Show the numeric readout. |
| className | string | - | Additional CSS class names. |
Usage
import { Meter } from "@gunjo/ui"
// tone is derived from thresholds; incoming previews a pending change
<Meter
label="重量積載率"
value={2100}
max={3000}
incoming={350} // striped overlay: "after I add this shipment"
unit="kg"
thresholds={{ warning: 0.8, over: 1 }}
/>
// compact size for a table cell
<Meter size="inline" value={41} max={40} label="棚 D-03 充填" />
// higher-is-better: at/above the target marker is success, just under it warns
<Meter
label="入居率"
value={87}
max={100}
unit="%"
direction="higher-is-better"
target={90} // goal line drawn on the track; drives the auto tone
/>