recharts

HeroUI v3 のデザイントークンと Tailwind CSS v4 を統合した Recharts のチャートを作成します。既存のコミット、ドキュメント、コードからプロジェクトの英語の表記規則（米国英語／英国英語）を判定し、すべての出力でそれに合わせます。

詳細なパターンとコード例については、rules/ 内の各ルールファイルをお読みください。

ルールの概要

ルール	影響度	ファイル
コンテナパターン	HIGH	rules/container-pattern.md
テーマ連携	HIGH	rules/theme-integration.md
カスタムコンポーネント	HIGH	rules/custom-components.md

ワークフロー

チャートを作成する場合

1. セットアップを検出する — package.json に recharts が含まれていることを確認します。HeroUI v3（@heroui/react または個別のパッケージ）がインストールされているか確認します。Tailwind CSS v4（@tailwindcss/*）を検出します。
2. ルールを読む — rules/ 内のすべてのファイルを読み、コンテナパターン、テーマトークンのマッピング、カスタムコンポーネントのテンプレートを確認します。
3. テーマトークンを取得する — HeroUI の現在のテーマ変数を確認し、プロジェクトで利用可能なトークン名を把握します。
4. コンポーネントを生成する — 3 つのルール（外側のコンテナラッパー、CSS 変数の色、カスタムのツールチップ／凡例）をすべて適用して、チャートコンポーネントを作成します。
5. 検証する — 生成されたコードが各ルールに準拠しているか確認します。ハードコードされた HEX 色がないこと、ResponsiveContainer が正しくラップされていること、ツールチップに HeroUI のクラスが使われていることを確認します。

既存のチャートをレビューする場合

1. スキャンする — recharts をインポートしているファイルを glob で検索します。各ファイルを読み、rules/ 内のすべてのルールに照らして確認します。
2. 報告する — 違反をルールごとにまとめ、ファイルパスと行番号を記載します。
3. 修正する — 違反を一つずつ修正します。

すぐに確認するポイント

• スクリーンリーダーに対応するため、すべてのチャートで最初の子要素として <AccessibilityLayer /> を必ず追加します。
• 頻繁に再レンダリングされるコンポーネント（テーブル、フィルターなど）内では、チャート要素に isAnimationActive={false} を設定します。
• Recharts は SVG を使用するため、CSS の color ではなく stroke と fill のプロパティでスタイルを指定します。
• 利用側で拡張できるよう、チャートのプロパティインターフェースは個別にエクスポートします。
• strokeDasharray="3 3" とテーマに合わせたストローク色を指定して、cartesianGrid を使用します。
• ResponsiveContainer に固定の width を設定しないでください。必ず width="100%" にします。

前提

• React + TypeScript プロジェクト
• Recharts がインストール済み（依存関係に recharts が含まれる）
• Tailwind CSS v4 とともに HeroUI v3 がインストール済み
• HeroUI テーマの CSS 変数がグローバルに利用可能