稼働メーターOccupancyMeterExperimental
A labeled occupancy and capacity gauge with a neutral fill, formatted readout, and optional target marker.
プレビュー
満席率2 / 7卓
状態とバリエーション
満席率（中立）
既定 direction=neutral。低い値でも赤にならず、target はマーカー。
満席率2 / 7卓
満ちると困るものは direction を変える
同時に作れる品数のように「上限に近づくほど困る」ゲージは higher-is-worse にします。8割で警告、上限に届くと危険色になります。
11:30 の調理枠5 / 14品
12:15 の調理枠12 / 14品
12:45 の調理枠14 / 14品
読み出しを言葉に差し替える
既定の読み出しは「2 / 7卓」です。現場が数えたいのが残りなら caption で差し替えます。バーの位置は value のままです。
満席率残り2卓（5 / 7卓）
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| label | ReactNode | - | キャプションのラベル（満席率 / 稼働率 など）。文字列なら meter のアクセシブル名にもなります。 |
| value / max | number | - | 現在値と上限。 |
| unit | string | - | readout の単位（卓・% など）。 |
| caption | ReactNode | - | 右側の readout を差し替え。既定は value / max。 |
| target | number | - | 目標マーカー。 |
| direction | MeterProps['direction'] | "neutral" | Meter に転送。既定は neutral（低い値を赤にしない）。 |
| tone / formatValue / size | — | - | Meter にそのまま転送。 |
使い方
import { OccupancyMeter } from "@gunjo/ui";
// A caption row (label + "2 / 7卓") above a neutral Meter bar.
<OccupancyMeter label="満席率" value={2} max={7} unit="卓" target={6} />