上限監視LimitMonitorExperimental
計測値を基準値や上限・下限と比較し、基準内、間近、超過、重大超過を表示します。
プレビュー
拘束時間（当日）12.4h / 13.0h基準間近
基準まで 残り 0.6h
連続運転4.2h / 4.0h基準超過
基準を 0.2h 超過
休息期間9.5h / 11.0h基準超過
下限まで 1.5h 不足
分類結果: near / -0.6h
状態とバリエーション
上限監視
拘束時間や連続運転のように、値を基準以下に保つ指標です。
拘束時間（当日）12.4h / 13.0h基準間近
基準まで 残り 0.6h
連続運転4.2h / 4.0h基準超過
基準を 0.2h 超過
休息期間9.5h / 11.0h基準超過
下限まで 1.5h 不足
分類結果: near / -0.6h
下限監視
休息期間のように、値を基準以上に保つ指標です。
休息期間9.5h / 11.0h基準超過
下限まで 1.5h 不足
分類結果: over / 1.5h
重大超過
hardLimit を超えると critical の塗りつぶし表示になります。
拘束時間（重大超過）16.2h / 13.0h上限超過
基準を 3.2h 超過
分類結果: critical / 3.2h
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | - | 計測値です。 |
| limit | number | - | ソフトな基準値です。max に対する割合ではなく実単位で渡します。 |
| hardLimit | number | - | 重大超過を判定する絶対上限または下限です。 |
| warnWithin | number | 0 | 基準の手前で near とする余白です。 |
| direction | "ceiling" | "floor" | "ceiling" | 上限以下に保つか、下限以上に保つかを選びます。 |
| max | number | - | バー正規化の最大値です。 |
| label | ReactNode | - | 指標名です。 |
| formatValue | (value: number) => ReactNode | - | 値と基準値の表示を整形します。 |
| formatReadout | ({ state, over, direction, formatValue }) => ReactNode | - | バー下の説明文を整形します。 |
| labels | Partial<Record<LimitState, ReactNode>> | - | 状態チップのラベルを上書きします。 |
| classifyLimit | (value, options) => { state, over } | - | 同じ基準分類を UI なしで返す純関数です。 |
使い方
import { LimitMonitor, classifyLimit } from "@gunjo/ui";
function formatHours(value: number) {
return value.toFixed(1) + "h";
}
export function DriverLimitPanel() {
const result = classifyLimit(13.5, { limit: 13, hardLimit: 16, warnWithin: 1 });
return (
<div className="flex w-full max-w-2xl flex-col gap-4 rounded-lg border bg-card p-4">
<LimitMonitor
label="拘束時間（当日）"
value={13.5}
limit={13}
hardLimit={16}
warnWithin={1}
formatValue={formatHours}
/>
<LimitMonitor
label="連続運転"
value={4.2}
limit={4}
hardLimit={4.5}
warnWithin={0.25}
formatValue={formatHours}
/>
<LimitMonitor
label="休息期間"
value={9.5}
limit={11}
direction="floor"
warnWithin={1}
formatValue={formatHours}
/>
<p className="rounded-md border bg-muted/30 px-3 py-2 text-sm text-muted-foreground">
分類結果: {result.state} / {formatHours(result.over)}
</p>
</div>
);
}