Tracker

時系列ステータス

GitHub でソースを見る

プレビュー

  1. 正常
  2. 正常
  3. 遅延（警告）
  4. 正常
  5. 障害（異常）
  6. 正常
  7. 正常
  8. 正常
  9. 遅延（警告）
  10. 正常
  11. 正常
  12. 正常

使いどころ

使う場面

  • 時間や回数の並びを、1 つの区間ごとの状態で見せる（稼働状況の 90 日、日次バッチの成否、連続達成）
  • 区間ごとの状態は tone で表す。positive は正常、negative は異常、warning は警告、info は情報、default はデータなし
  • tooltip に日付や理由を入れると、マウスでの確認と読み上げの両方に使われる

使わない場面

  • 数値の大きさを比べること。BarChart か ColumnChart を使う
  • 区間が少なく（5 個以下）、それぞれの内容を読ませたいとき。List か Timeline を使う
  • 進捗の割合。Progress を使う

使い方

<Tracker
  data={[
    { tone: "positive", tooltip: "正常" },
    { tone: "warning", tooltip: "遅延" },
    { tone: "negative", tooltip: "障害" },
  ]}
  label="サービス稼働状況"
/>

プロパティ

名前型デフォルト説明
data必須TrackerItem[]なしステータスセグメントの配列（必須）
labelstringなしアクセシブルラベル

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • role="figure" と aria-label が付く。label を省略すると「N区間」になる。「過去 90 日の稼働状況」のように、何を表すかを label に書く
  • 各区間には、tone に応じた「正常」「異常」「警告」「情報」「データなし」の文字が読み上げ用に入る。tooltip があれば「tooltip（状態）」の形で読まれる
  • title は表示のためだけで、キーボードでは出ない。重要な内容は tooltip に頼らず、近くの文章でも伝える

文言

  • tooltip は「10 月 12 日 障害発生（30 分）」のように、日付と事実を短く。状態名は自動で付くので繰り返さない

関連するコンポーネント