データグリッドカード

DataGridCardコンポーネントは、構造化されたデータをグリッドレイアウトで表示するカードコンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

• グリッドレイアウト: カスタマイズ可能な列数でのデータ表示
• ハイライト機能: 重要なデータの強調表示
• クリック可能: インタラクティブなカードとして使用可能
• レスポンシブ: モバイルデバイスでの適切な表示
• テーマ対応: ライトテーマとダークテーマの自動切り替え

使用方法

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

<kds-data-grid-card
  title="売上概要"
  subtitle="Q1 2024 パフォーマンス"
  data='[{"label": "総売上", "value": "$125,000", "highlight": true}]'
  columns={2}
  theme="light"
>
</kds-data-grid-card>

プロパティ

プロパティ	型	デフォルト	説明
title	string	''	カードのタイトル
subtitle	string	''	カードのサブタイトル
data	DataGridItem[]	[]	表示するデータの配列
footer	string	''	カードのフッターテキスト
theme	'light' | 'dark'	'light'	カードのカラーテーマ
clickable	boolean	false	クリック可能なカードにするか
columns	number	2	グリッドの列数

DataGridItem型

interface DataGridItem {
  label: string;        // データのラベル
  value: string;        // データの値
  highlight?: boolean;  // ハイライト表示するか
}

使用例

DataGridCard Component

Display structured data in a grid layout with customizable columns and styling.

Basic Usage

Simple Data Grid

Variations

With Footer

Clickable Card

Column Layouts

Single Column

Two Columns

Three Columns

Themes

Light Theme

Dark Theme

Real-world Examples

Dashboard Metrics

基本的な使用

シンプルなデータグリッド

<kds-data-grid-card
  title="売上概要"
  data='[
    {"label": "総売上", "value": "$125,000", "highlight": true},
    {"label": "注文数", "value": "1,250"},
    {"label": "コンバージョン", "value": "3.2%"},
    {"label": "成長率", "value": "+12.5%"}
  ]'
  columns={2}
>
</kds-data-grid-card>

フッター付きカード

<kds-data-grid-card
  title="ユーザー統計"
  data='[
    {"label": "アクティブユーザー", "value": "2,450"},
    {"label": "新規ユーザー", "value": "180"},
    {"label": "リテンション", "value": "85%"}
  ]'
  footer="最終更新: 2024年3月15日"
  columns={1}
>
</kds-data-grid-card>

列レイアウト

1列レイアウト

<kds-data-grid-card
  title="メトリクス"
  data='[
    {"label": "収益", "value": "$50,000"},
    {"label": "利益", "value": "$12,500"},
    {"label": "マージン", "value": "25%"}
  ]'
  columns={1}
>
</kds-data-grid-card>

3列レイアウト

<kds-data-grid-card
  title="チーム統計"
  data='[
    {"label": "開発者", "value": "12"},
    {"label": "デザイナー", "value": "4"},
    {"label": "QA", "value": "3"},
    {"label": "PM", "value": "2"},
    {"label": "DevOps", "value": "2"},
    {"label": "合計", "value": "23"}
  ]'
  columns={3}
>
</kds-data-grid-card>

インタラクティブなカード

クリック可能なカード

<kds-data-grid-card
  title="プロジェクト状況"
  subtitle="現在のスプリント"
  data='[
    {"label": "完了", "value": "8/12"},
    {"label": "進行中", "value": "3/12"},
    {"label": "ブロック", "value": "1/12"}
  ]'
  clickable={true}
  columns={1}
>
</kds-data-grid-card>

ハイライト機能

重要なデータを強調表示するには、highlightプロパティを使用します：

<kds-data-grid-card
  title="パフォーマンス"
  data='[
    {"label": "稼働時間", "value": "99.9%", "highlight": true},
    {"label": "応答時間", "value": "120ms"},
    {"label": "エラー率", "value": "0.1%"}
  ]'
  columns={1}
>
</kds-data-grid-card>

使用ケース

ダッシュボードメトリクス

<div class="dashboard-grid">
  <kds-data-grid-card
    title="収益"
    subtitle="今月"
    data='[
      {"label": "総額", "value": "$125,000", "highlight": true},
      {"label": "成長率", "value": "+15.2%"},
      {"label": "目標", "value": "$100,000"}
    ]'
    columns={1}
  />

  <kds-data-grid-card
    title="ユーザー"
    subtitle="アクティブユーザー"
    data='[
      {"label": "総数", "value": "2,450", "highlight": true},
      {"label": "新規", "value": "180"},
      {"label": "リピート", "value": "2,270"}
    ]'
    columns={1}
  />
</div>

設定パネル

<kds-data-grid-card
  title="システム設定"
  data='[
    {"label": "CPU使用率", "value": "45%"},
    {"label": "メモリ", "value": "2.1GB"},
    {"label": "ディスク容量", "value": "78%"},
    {"label": "ネットワーク", "value": "125MB/s"}
  ]'
  columns={2}
  footer="リアルタイム更新"
>
</kds-data-grid-card>

スタイリング

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

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

アクセシビリティ

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

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

ベストプラクティス

1. 列数はデータの量と表示領域に応じて選択する
2. 重要なデータはhighlightプロパティで強調する
3. タイトルとサブタイトルでコンテキストを明確にする
4. フッターで追加情報や更新日時を提供する
5. クリック可能な場合は適切なイベントハンドリングを実装する
6. 両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

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

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