Skip to content
fandhe-frontendcore v0.4.3
GitHub

Stat

fandhe-frontend-wireframe-ui の数値指標カードプレースホルダーです。ラベル・大きな数値・任意の増減インジケータからなる、非インタラクティブな表示専用部品です。API は stat(label, value, delta, size) の 4 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。

blocks.pm には対応する部品がなく、wireframe-ui 独自の追加部品です(詳細は docs/design/wireframe-ui-architecture.md §8 の「独自追加部品」区分を参照してください)。

本部品は表示専用のため、数値の桁区切り・単位・時系列比較等の整形は一切行いません(label/value/delta.value はいずれも不透明な文字列として扱います)。実際にアクセシブルな統計表示が必要な場合は Stat(Themes) を検討してください。

Demo

上昇

売上¥1,234,567+12%

下降

解約率3.2%-0.4pt

変化なし

在庫42±0

増減インジケータ省略

会員数8,901

サイズ比較(Xs〜Xl)

売上¥1,234,567+12%
売上¥1,234,567+12%
売上¥1,234,567+12%
売上¥1,234,567+12%
売上¥1,234,567+12%

引数表

引数型既定値説明
label&str必須指標名の文言。
value&str必須不透明な文字列として扱う数値表現。桁区切り・単位等の整形はしない。
deltaOption<StatDelta<'_>>None省略可能な増減インジケータ(value + trend)。None のときはパート要素自体を出力しない。
sizeSizeSize::Mdサイズ段階(xs〜xl)。

原案差分メモ

  • API は独自設計: docs/design/wireframe-ui-architecture.md §4・§6 の Figma プロパティ変換規約から独立設計しました。
  • 独自追加部品: blocks.pm に対応する部品はありません。
  • 増減インジケータは Option<&str> ではなく StatDelta: 増減値の文字列だけでは向き(上昇/下降/変化なし)を表現できず、先頭の +/- から向きを推測する暗黙の文字列解析も採りませんでした。代わりに menu::MenuItem と同型の公開構造体 StatDelta { value, trend } を導入し、delta が存在するのに向きだけ存在しないという矛盾した状態を型で作れないようにしています。
  • 既存の caret アイコンを再利用: 上昇/下降のグリフには新規アイコンを追加せず、既存の icon::caret_up/icon::caret_down を再利用します。変化なし(Flat、既定)はグリフを出力しません。
  • size は最後の引数: alert/toast/menu 等の既存部品の引数順に揃え、Size を最後の引数にしています。
  • 数値の整形はしない: 桁区切り・単位・符号の付与はいずれも UI コンポーネント層の責務外という既存方針(docs/policy/intentional-non-adoption.md §3.23)と同じ判断です。
  • 非対話: role/aria-*/tabindex/style/on*/<button>/<a> は一切出力しません(同文書 §7 の非対話制約)。
  • 配色はグレースケールのみ: 向きの区別に色を使わず、上昇のみ太字、下降・変化なしは --fw-wire-ink-muted で表します。