recharts

你可以使用 Recharts 构建图表，并集成 HeroUI v3 设计令牌和 Tailwind CSS v4。请根据现有提交、文档和代码判断项目使用美式英语还是英式英语，并在所有输出中保持一致。

请阅读 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. 生成组件 — 应用全部三项规则构建图表组件：外层容器包装、CSS 变量颜色，以及自定义提示框／图例。
5. 验证 — 根据每项规则检查生成的代码。确认没有硬编码的十六进制颜色、ResponsiveContainer 已正确包装，且提示框使用 HeroUI 类。

审查现有图表？

1. 扫描 — 使用 glob 查找从 recharts 导入内容的文件。读取每个文件，并根据 rules/ 中的每项规则进行检查。
2. 报告 — 按规则归类列出违规项，并注明文件路径和行号。
3. 修复 — 一次修正一项违规。

快速提醒

• 始终在每个图表内部将 <AccessibilityLayer /> 作为第一个子元素，以支持屏幕阅读器
• 在会频繁重新渲染的组件（表格、筛选器）中，将图表元素的 isAnimationActive={false} 设为禁用动画
• Recharts 使用 SVG — 请使用 stroke 和 fill 属性设置样式，而非 CSS color
• 单独导出图表属性接口，以便使用者扩展
• 使用 cartesianGrid，设置 strokeDasharray="3 3"，并使用适配主题的描边颜色
• 切勿为 ResponsiveContainer 设置固定的 width — 必须始终使用 width="100%"

假设

• React + TypeScript 项目
• 已安装 Recharts（依赖项中包含 recharts）
• 已安装 HeroUI v3 和 Tailwind CSS v4
• HeroUI 主题中的 CSS 变量可全局使用