上限監視LimitMonitorExperimental
Value against a NAMED regulatory limit (soft + optional hard) with near/over/critical states and a bar that shows how close — or how far past — the value sits, with the limit drawn as a line. The 'value vs a named limit' sibling of ExpiryBadge (value vs a deadline), ReferenceValue (value vs a range) and Meter (value vs a capacity): limits are in the value's OWN units and the breach tone is DERIVED from them (unlike Meter's fraction-of-max thresholds + reference-only target which does not drive tone). For 改善基準告示 (拘束時間/連続運転/休息期間), SLA budgets, quotas, 過積載, 残業, rate limits. direction="floor" for must-stay-above limits (休息期間). Pairs with the pure classifyLimit() helper (value → {state, over}), mirroring ExpiryBadge↔classifyExpiry and ReferenceValue↔flagValue. RSC-safe.
プレビュー
Props
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | - | 計測値。 |
| limit | number | - | ソフト/基準の上限（値の単位そのまま＝maxの割合ではない）。 |
| hardLimit | number | - | ハード/絶対上限（上限・最大）。第2の線を描画・超過で critical。 |
| warnWithin | number | - | limit の手前このマージンで near（基準間近）。値の単位。 |
| direction | "ceiling" | "floor" | "ceiling" | ceiling＝下回るべき（拘束/連続運転/過積載）・floor＝上回るべき（休息期間）。 |
| max | number | - | バー正規化の最大値。既定＝value/hardLimit/limit×1.25 の最大。 |
| label | ReactNode | - | 指標名（拘束時間/連続運転/過積載率）。 |
| formatValue | (value: number) => ReactNode | - | 値+上限の表示整形。既定 toLocaleString。 |
| labels | Partial<Record<LimitState, ReactNode>> | - | 状態チップのラベル上書き（ok/near/over/critical）。 |
| classifyLimit(value, options) | → { state, over } | - | 純粋関数（classifyExpiry/flagValue の上限版）。over＝基準を超えた符号付き差。KPI/キュー計算に。 |
Usage
import { LimitMonitor, classifyLimit } from "@gunjo/ui"
// 拘束時間: ceiling — 基準13h / 上限16h, 1h 前から near. Limits in HOURS, not fractions of max.
<LimitMonitor
label="拘束時間（当日）"
value={13.5}
limit={13}
hardLimit={16}
warnWithin={1}
formatValue={(v) => `${v.toFixed(1)}時間`}
/>
// 休息期間: floor — value must stay ABOVE 11h
<LimitMonitor label="休息期間" value={9.5} limit={11} direction="floor" />
// Pure classifier for KPI/queue logic (server-side):
const { state, over } = classifyLimit(13.5, { limit: 13, hardLimit: 16 })
// → { state: "over", over: 0.5 }