統計カード

StatsCardコンポーネントは、統計情報や数値を視覚的に表示するためのカードコンポーネントです。ダッシュボード、管理画面、アプリケーションの統計表示などで使用できます。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

バリエーション: Default、Success、Warning、Error、Infoの5種類
サイズ: Small (sm)、Medium (md)、Large (lg)の3サイズ
アイコンサポート: 絵文字やUnicodeアイコンの表示
クリック可能: インタラクティブなカードとして使用可能
テーマ対応: ライトテーマとダークテーマの自動切り替え
アクセシビリティ: キーボードナビゲーションとスクリーンリーダー対応

使用方法

---
import { StatsCard } from '@karan-monorepo/ui-core';
---

<kds-stats-card
  title="総ユーザー数"
  value="1,234"
  subtitle="人"
  icon="👥"
  variant="default"
  theme="light"
/>

プロパティ

プロパティ	型	デフォルト	説明
`title`	`string`	`''`	カードのタイトル
`value`	`string`	`''`	表示する値
`subtitle`	`string`	`''`	値の補足説明
`icon`	`string`	`''`	アイコン（絵文字またはUnicode）
`variant`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	バリエーション
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	サイズ
`clickable`	`boolean`	`false`	クリック可能かどうか
`href`	`string`	`''`	クリック時のリンク先
`theme`	`'light' \| 'dark'`	`'light'`	テーマ

使用例

StatsCard Component

Statistics card component for displaying key metrics and data points.

Variants

Default

Success

Warning

Error

Sizes

Small

Medium

Large

With Icons

Revenue

Orders

Growth

Themes

Light Theme

Dark Theme

Usage Examples

Dashboard Metrics

Performance Metrics

バリエーション

StatsCardコンポーネントは5つの視覚的バリエーションをサポートします：

default: 標準的な統計カード
success: 成功状態を示す緑のカード
warning: 警告状態を示す黄色のカード
error: エラー状態を示す赤のカード
info: 情報状態を示す青のカード

<!-- デフォルト -->
<kds-stats-card
  title="総ユーザー数"
  value="1,234"
  subtitle="人"
  icon="👥"
  variant="default"
  theme="light"
/>

<!-- 成功 -->
<kds-stats-card
  title="新規登録"
  value="89"
  subtitle="今月"
  icon="📈"
  variant="success"
  theme="light"
/>

<!-- 警告 -->
<kds-stats-card
  title="警告"
  value="12"
  subtitle="件"
  icon="⚠️"
  variant="warning"
  theme="light"
/>

<!-- エラー -->
<kds-stats-card
  title="エラー"
  value="3"
  subtitle="件"
  icon="❌"
  variant="error"
  theme="light"
/>

<!-- 情報 -->
<kds-stats-card
  title="情報"
  value="456"
  subtitle="件"
  icon="ℹ️"
  variant="info"
  theme="light"
/>

サイズバリエーション

StatsCardコンポーネントは3つのサイズをサポートします：

sm: 小さな統計カード
md: 標準的な統計カード
lg: 大きな統計カード

<!-- 小さなサイズ -->
<kds-stats-card
  title="Small"
  value="123"
  subtitle="件"
  icon="📊"
  size="sm"
  theme="light"
/>

<!-- 標準サイズ -->
<kds-stats-card
  title="Medium"
  value="1,234"
  subtitle="件"
  icon="📊"
  size="md"
  theme="light"
/>

<!-- 大きなサイズ -->
<kds-stats-card
  title="Large"
  value="12,345"
  subtitle="件"
  icon="📊"
  size="lg"
  theme="light"
/>

使用ケース

ダッシュボード

<div class="dashboard-grid">
  <kds-stats-card
    title="アクティブユーザー"
    value="2,456"
    subtitle="人"
    icon="👤"
    variant="success"
    theme="light"
  />

  <kds-stats-card
    title="ダウンロード"
    value="15,678"
    subtitle="回"
    icon="⬇️"
    variant="default"
    theme="light"
  />

  <kds-stats-card
    title="CPU使用率"
    value="45%"
    subtitle=""
    icon="💻"
    variant="warning"
    theme="light"
  />
</div>

クリック可能なカード

<kds-stats-card
  title="ダッシュボード"
  value="45"
  subtitle="ページ"
  icon="📊"
  variant="default"
  clickable={true}
  href="/dashboard"
  theme="light"
/>

スタイリング

StatsCardコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

StatsCardコンポーネントには適切なアクセシビリティ機能が含まれています：

セマンティックHTMLの<article>要素を使用
キーボードナビゲーションサポート（クリック可能な場合）
高コントラスト比による視認性の確保
スクリーンリーダー対応の構造

ベストプラクティス

バリエーションは意味に基づいて選択する（成功=緑、警告=黄、エラー=赤など）
アイコンは内容を明確にするために使用する
値は適切な形式で表示する（カンマ区切り、単位など）
クリック可能な場合は明確なアクションを提供する
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

StatsCardコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Grid
CSS Flexbox