基準値判定ReferenceValueBeta

計測値を基準範囲と比較し、正常、高値、低値、異常値を色だけに頼らず表示します。

プレビュー

項目結果
体温38.9℃H高値（基準 36–37.5℃）
SpO₂88%LL異常低値（基準 ≥96%）
脈拍72回/分基準値内（基準 60–100回/分）
K（カリウム）6.8mEq/LHH異常高値（基準 3.5–5mEq/L）

状態とバリエーション

基準範囲つき

showRange で正常範囲を値の横に表示します。

項目結果
体温38.9℃H高値（基準 36–37.5℃）
SpO₂88%LL異常低値（基準 ≥96%）
脈拍72回/分基準値内（基準 60–100回/分）
K（カリウム）6.8mEq/LHH異常高値（基準 3.5–5mEq/L）

状態名を表示

showLabel はコードに加えて「高値」「異常低値」などのラベルを見せます。

38.9℃H高値（基準 36.0–37.5℃）88%LL異常低値（基準 ≥96%）72回/分基準値内（基準 60–100回/分）

チップなし

hideFlag は表内などでチップを省きたい場合に使います。

6.8mEq/L異常高値（基準 3.5–5mEq/L）

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
valuenumber-計測値です。
range{ low?: number; high?: number; criticalLow?: number; criticalHigh?: number }-正常範囲と異常値境界です。critical が通常の low/high より優先されます。
format(value: number) => ReactNode-値と基準範囲の数値表示を整形します。
unitstring-単位サフィックスです。
labelsPartial<Record<RangeFlag, string>>-状態ラベルをローカライズします。showLabel と sr-only に使われます。
showLabelbooleanfalseH/L/HH/LL の横に状態名を表示します。
showRange / rangeLabelboolean / string-基準範囲のテキストとその接頭辞です。
hideFlagbooleanfalseチップを非表示にします。値のトーンと sr-only ラベルは残ります。
affirmative / positiveLabelboolean / stringfalse基準値内の値に肯定的な success チップ（✓＋positiveLabel、既定は normal ラベル）と success トーンを付けます。合格・平均以上など「良い」値を積極的に示したい時に。異常値では無視されます。(#291)
size"default" | "inline""default"表セル向けの compact 表示にできます。
flagValue(value, range) => RangeFlag-UIなしで同じ判定を返す純関数です。

使い方

import { ReferenceValue, type ReferenceRange } from "@gunjo/ui";

type ResultRow = { name: string; value: number; unit: string; range: ReferenceRange };

const rows: ResultRow[] = [
  { name: "体温", value: 38.9, unit: "℃", range: { low: 36.0, high: 37.5, criticalHigh: 40.0 } },
  { name: "SpO₂", value: 88, unit: "%", range: { low: 96, criticalLow: 90 } },
  { name: "脈拍", value: 72, unit: "回/分", range: { low: 60, high: 100 } },
  { name: "K（カリウム）", value: 6.8, unit: "mEq/L", range: { low: 3.5, high: 5.0, criticalHigh: 6.0 } },
];

export function VitalResultTable() {
  return (
    <div className="w-full max-w-lg rounded-lg border bg-card p-4">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b text-left text-muted-foreground">
            <th scope="col" className="py-1.5 pr-3 font-medium">項目</th>
            <th scope="col" className="py-1.5 font-medium">結果</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row.name} className="border-b last:border-0">
              <th scope="row" className="py-2 pr-3 text-left font-normal text-foreground">{row.name}</th>
              <td className="py-2">
                <ReferenceValue
                  value={row.value}
                  unit={row.unit}
                  range={row.range}
                  rangeLabel="基準"
                  size="inline"
                  showRange
                  format={(value) => (Number.isInteger(value) ? String(value) : value.toFixed(1))}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

使用コンポーネント

ReferenceValue

関連コンポーネント

TableLimitMonitor