# Recharts Integration

## Purpose

TBD - 集成Recharts图表库，实现数据可视化功能，替代@ant-design/charts。

## Requirements

### Requirement: Recharts依赖集成
系统SHALL正确集成Recharts图表库，作为数据可视化的基础依赖。

#### Scenario: 安装Recharts依赖
- **WHEN** 依赖安装完成
- **THEN** package.json中SHALL存在recharts依赖
- **AND** recharts版本SHALL为2.x最新稳定版
- **AND** Recharts组件SHALL可正常导入使用

### Requirement: UsageChart图表重写
系统SHALL使用Recharts重新实现UsageChart组件，保持原有功能。

#### Scenario: 折线图渲染
- **WHEN** UsageChart组件接收统计数据
- **THEN** SHALL使用Recharts的LineChart组件渲染
- **AND** X轴SHALL显示日期数据
- **AND** Y轴SHALL显示请求数据
- **AND** 图表SHALL支持鼠标悬停显示详情（Tooltip）
- **AND** 图表SHALL包含网格线（CartesianGrid）

#### Scenario: 响应式图表容器
- **WHEN** 图表渲染
- **THEN** SHALL使用ResponsiveContainer包裹
- **AND** 图表宽度SHALL自适应容器宽度
- **AND** 图表高度SHALL为固定300px

#### Scenario: 空数据状态处理
- **WHEN** 统计数据为空数组
- **THEN** SHALL显示"暂无数据"提示
- **AND** 不SHALL渲染图表组件

#### Scenario: 数据格式转换
- **WHEN** 接收UsageStats数组数据
- **THEN** SHALL按日期聚合计数
- **AND** 数据SHALL按日期升序排序
- **AND** 数据格式SHALL适配Recharts要求

### Requirement: 图表样式配置
系统SHALL配置Recharts图表样式，确保视觉一致性。

#### Scenario: 图表颜色配置
- **WHEN** 图表渲染
- **THEN** 折线颜色SHALL为TDesign主色（#0052D9）
- **AND** 线条宽度SHALL为2px
- **AND** 数据点样式SHALL正常显示

#### Scenario: 网格线配置
- **WHEN** 图表渲染
- **THEN** 网格线SHALL使用虚线样式（strokeDasharray="3 3"）
- **AND** 网格线SHALL不遮挡数据线

### Requirement: 移除Ant Design Charts
系统SHALL完全移除@ant-design/charts的使用。

#### Scenario: 移除Line组件
- **WHEN** 迁移完成
- **THEN** UsageChart中SHALL不存在@ant-design/charts的Line组件
- **AND** UsageChart中SHALL不存在任何@ant-design/charts导入

#### Scenario: 移除配置对象模式
- **WHEN** 图表实现
- **THEN** SHALL使用Recharts声明式组件模式
- **AND** 不SHALL使用Ant Design Charts的配置对象模式（xField、yField等）

### Requirement: 图表交互功能
系统SHALL保持图表的基本交互功能。

#### Scenario: 鼠标悬停提示
- **WHEN** 用户鼠标悬停在数据点上
- **THEN** SHALL显示Tooltip提示框
- **AND** 提示框SHALL显示日期和请求数
- **AND** 提示框SHALL不遮挡图表内容

#### Scenario: 平滑曲线效果
- **WHEN** 折线渲染
- **THEN** SHALL使用monotone类型平滑曲线
- **AND** 曲线SHALL自然流畅
- **AND** 数据点SHALL准确对应

### Requirement: 图表性能
系统SHALL确保图表渲染性能满足要求。

#### Scenario: 大数据量渲染
- **WHEN** 统计数据包含大量数据点（>100）
- **THEN** 图表SHALL在1秒内完成渲染
- **AND** 交互响应SHALL流畅无卡顿

#### Scenario: 组件重渲染优化
- **WHEN** 父组件重新渲染
- **THEN** 图表组件SHALL避免不必要的重渲染
- **AND** 数据未变化时SHALL保持稳定

### Requirement: 图表测试覆盖
系统SHALL为Recharts图表组件提供完整的测试覆盖。

#### Scenario: 组件渲染测试
- **WHEN** 运行单元测试
- **THEN** UsageChart测试SHALL验证正常渲染
- **AND** UsageChart测试SHALL验证空数据状态
- **AND** UsageChart测试SHALL验证数据格式转换

#### Scenario: 数据处理测试
- **WHEN** 运行单元测试
- **THEN** 测试SHALL覆盖日期聚合逻辑
- **AND** 测试SHALL覆盖数据排序逻辑
- **AND** 测试SHALL验证边界情况