ユースケース別(逆引き)

「何を作りたいか」から正しいコンポーネントを引く。名前だけでは見つけにくい部品(ABC分析→ParetoChart、シフト表→ScheduleGrid、署名記録→SignedRecord 等)を、作るものの言葉で。

スケジュール・時間

最も取り違えられる族。データの形で選ぶ。

離散マトリクス:時間割/シフト表/予約グリッド/可用性(行×列・1セル1件)

スタッフ×曜日・卓×時間・利用者×ケア項目。ソート表は DataTable、値の色塗りは HeatmapChart。

月カレンダー+日付にイベント

編集/コンテンツカレンダー・予約。日セルにチップ。

週の時刻グリッド(重なりを横に詰める)

面接/予定を時刻×曜日で。

リソース行×連続時間軸(バー)

生産ライン・設備/車両・工程。

日付・期間を選ぶ

グラフ・階層・関係

多親・多子の有向グラフ(系譜・リネージ・依存・ETL)

ツリーで描けない合流/分岐。

単親ツリー(組織図・階層)

開閉・1ノード1親。

ファイル/フォルダツリー

時系列の出来事

人・関係

人物セル:アバター+氏名+役職/部署+状態

名簿行・担当ピッカー・コメント・承認者行。

2人を並べる(上司↔部下・担当↔利用者)

1on1・メンター・ケア担当の組。

アバターの集合

サマリ・指標・値

ダッシュボード冒頭の KPI 指標行(件数/金額/期限/アラート)

Card 包みの Statistic 群。単一は Statistic。

単一の指標

差分/トレンド付き KPI ヒーローカード

容量/稼働/充足のメーター

value÷max のバー。読み上げの金額整形は formatValue={formatCurrency}。direction でトーンの意味(判断 vs 中立)が変わる。

測定値を基準範囲で判定(バイタル・公差・基準値 H/L)

H/L/HH/LL を自動・色だけに非依存。flagValue() は純関数。

符号付き差分・増減

表・編集グリッド

ソート/ページング/絞り込み・モバイルでカード化する表

renderCard でモバイルはカード崩し。

編集明細・列揃え合計(請求書/明細)

素の表プリミティブ

チャート・分析

推移

referenceValue で予算/目標線。極小は SparklineChart。

棒・積み上げ棒

ABC分析・パレート(上位+累積80%)

累積%軸が内蔵。2チャート重ねで偽装しない。

構成比(ドーナツ)

ドーナツ+中央合計+コールアウト。素は DonutChart(showLegend)。LabeledDonutCard は showCallouts。

多軸レーダー(360度/多面評価)

曜日×時間帯の強度

1本バーの分布・キャリブレーション

ゲージ

承認・署名・記録

多段承認ワークフロー(進める/差戻し/却下)

稟議/経費/審査/内定/交付。

承認ステップ表示

署名・ロック・追記のみの法的記録(確定後は追記のみ)

退院サマリ・介護記録・ケアプラン交付。署名でロック・修正は追記。

2人確認・ダブルチェック

同一人物ガード付き(与薬・人事確定・明細確定)。

ボード

カード列のボード:パイプライン/KDS/タスク/キュー

ステージ列にカードを束ね、選択可能。

入力・スキャン・金額

金額入力(¥)

円/数値/%の整形(ja-JP・JPY 既定)

Intl 不要。formatValue prop にも渡せる。

formatCurrency / formatNumber / formatPercent

バーコードスキャン・段階スキャン

チェックリスト(チェック+ラベル+読み上げ名)

見つからないユースケースは GitHub Issue へ。各コンポーネントの JSDoc は「これに使う/これには使わない」を明記しています。