|
|
@@ -0,0 +1,621 @@
|
|
|
+# <!-- Powered by BMAD™ Core -->
|
|
|
+
|
|
|
+# Story 016.004: 搬迁图表数据点计算函数到独立模块并添加类型定义
|
|
|
+
|
|
|
+## Status
|
|
|
+
|
|
|
+Approved
|
|
|
+
|
|
|
+## Story
|
|
|
+
|
|
|
+**作为** 图表库开发者,
|
|
|
+**我想要** 将 u-charts 核心库中的各种图表类型的数据点计算函数**搬迁**到独立模块并添加 TypeScript 类型定义,
|
|
|
+**以便** 提高代码的可维护性、可测试性和类型安全性,为后续 React 组件封装打下基础。
|
|
|
+
|
|
|
+## Acceptance Criteria
|
|
|
+
|
|
|
+1. `charts-data/` 目录下所有文件创建完成
|
|
|
+2. 所有数据点计算函数都有完整类型注解
|
|
|
+3. 类型检查通过(pnpm typecheck),无 any 类型(除非必要)
|
|
|
+4. 每个文件控制在 500 行以内
|
|
|
+5. 代码逻辑与原始 u-charts.ts 完全一致
|
|
|
+
|
|
|
+## Tasks / Subtasks
|
|
|
+
|
|
|
+- [ ] Task 1: 分析图表数据点计算函数 (AC: 1, 2, 5)
|
|
|
+ - [ ] 1.1 识别基础图表数据点函数(getDataPoints、getColumnDataPoints、getLineDataPoints等)
|
|
|
+ - [ ] 1.2 识别饼图数据点函数(getPieDataPoints、getRoseDataPoints等)
|
|
|
+ - [ ] 1.3 识别雷达图数据点函数(getRadarDataPoints等)
|
|
|
+ - [ ] 1.4 识别仪表盘和环形图数据点函数(getGaugeDataPoints、getArcbarDataPoints等)
|
|
|
+ - [ ] 1.5 识别漏斗图和其他图表数据点函数(getFunnelDataPoints等)
|
|
|
+ - [ ] 1.6 识别堆叠图表数据点函数(getStackDataPoints、getBarStackDataPoints等)
|
|
|
+ - [ ] 1.7 识别条形图和柱状图数据点函数(getBarDataPoints、getColumnDataPoints等)
|
|
|
+
|
|
|
+- [ ] Task 2: 创建 charts-data 模块目录结构 (AC: 1)
|
|
|
+ - [ ] 2.1 创建 `src/lib/charts-data/` 目录
|
|
|
+ - [ ] 2.2 创建 `basic-charts.ts` 文件
|
|
|
+ - [ ] 2.3 创建 `pie-charts.ts` 文件
|
|
|
+ - [ ] 2.4 创建 `radar-charts.ts` 文件
|
|
|
+ - [ ] 2.5 创建 `gauge-charts.ts` 文件
|
|
|
+ - [ ] 2.6 创建 `funnel-charts.ts` 文件
|
|
|
+ - [ ] 2.7 创建 `index.ts` 统一导出文件
|
|
|
+
|
|
|
+- [ ] Task 3: **搬迁**基础图表数据点计算函数并添加类型注解 (AC: 2, 3, 4, 5)
|
|
|
+ - [ ] 3.1 将 getDataPoints 函数**搬迁**到 basic-charts.ts
|
|
|
+ - [ ] 3.2 将 getLineDataPoints 函数**搬迁**到 basic-charts.ts
|
|
|
+ - [ ] 3.3 将 getColumnDataPoints 函数**搬迁**到 basic-charts.ts
|
|
|
+ - [ ] 3.4 将 getBarDataPoints 函数**搬迁**到 basic-charts.ts
|
|
|
+ - [ ] 3.5 将 getCandleDataPoints 函数**搬迁**到 basic-charts.ts
|
|
|
+ - [ ] 3.6 将 getStackDataPoints 函数**搬迁**到 basic-charts.ts
|
|
|
+ - [ ] 3.7 将 getBarStackDataPoints 函数**搬迁**到 basic-charts.ts
|
|
|
+ - [ ] 3.8 将 getMountDataPoints 函数**搬迁**到 basic-charts.ts
|
|
|
+ - [ ] 3.9 为所有基础图表数据点计算函数添加完整的 TypeScript 类型注解
|
|
|
+
|
|
|
+- [ ] Task 4: **搬迁**饼图数据点计算函数并添加类型注解 (AC: 2, 3, 4, 5)
|
|
|
+ - [ ] 4.1 将 getPieDataPoints 函数**搬迁**到 pie-charts.ts
|
|
|
+ - [ ] 4.2 将 getRoseDataPoints 函数**搬迁**到 pie-charts.ts
|
|
|
+ - [ ] 4.3 为饼图数据点计算函数添加完整的 TypeScript 类型注解
|
|
|
+
|
|
|
+- [ ] Task 5: **搬迁**雷达图数据点计算函数并添加类型注解 (AC: 2, 3, 4, 5)
|
|
|
+ - [ ] 5.1 将 getRadarDataPoints 函数**搬迁**到 radar-charts.ts
|
|
|
+ - [ ] 5.2 为雷达图数据点计算函数添加完整的 TypeScript 类型注解
|
|
|
+
|
|
|
+- [ ] Task 6: **搬迁**仪表盘和环形图数据点计算函数并添加类型注解 (AC: 2, 3, 4, 5)
|
|
|
+ - [ ] 6.1 将 getGaugeDataPoints 函数**搬迁**到 gauge-charts.ts
|
|
|
+ - [ ] 6.2 将 getGaugeArcbarDataPoints 函数**搬迁**到 gauge-charts.ts
|
|
|
+ - [ ] 6.3 将 getArcbarDataPoints 函数**搬迁**到 gauge-charts.ts
|
|
|
+ - [ ] 6.4 为仪表盘和环形图数据点计算函数添加完整的 TypeScript 类型注解
|
|
|
+
|
|
|
+- [ ] Task 7: **搬迁**漏斗图数据点计算函数并添加类型注解 (AC: 2, 3, 4, 5)
|
|
|
+ - [ ] 7.1 将 getFunnelDataPoints 函数**搬迁**到 funnel-charts.ts
|
|
|
+ - [ ] 7.2 为漏斗图数据点计算函数添加完整的 TypeScript 类型注解
|
|
|
+
|
|
|
+- [ ] Task 8: 更新导出和验证搬迁结果 (AC: 1, 2, 3, 5)
|
|
|
+ - [ ] 8.1 更新 `src/lib/charts-data/index.ts` 统一导出所有数据点计算函数
|
|
|
+ - [ ] 8.2 更新 `src/index.ts` 导出新模块
|
|
|
+ - [ ] 8.3 运行类型检查验证所有类型注解正确
|
|
|
+ - [ ] 8.4 确保所有数据点计算函数正确导出
|
|
|
+ - [ ] 8.5 确认代码逻辑与原始文件完全一致
|
|
|
+ - [ ] 8.6 验证每个文件控制在 500 行以内
|
|
|
+
|
|
|
+## Dev Notes
|
|
|
+
|
|
|
+### 前置故事见解
|
|
|
+
|
|
|
+**故事 016.001 完成状态**:
|
|
|
+- ✅ 已创建 `mini-charts` 包基础结构
|
|
|
+- ✅ 已迁移 u-charts 核心库到 `src/lib/u-charts.ts`(7680行代码)
|
|
|
+- ✅ 包可以成功构建和类型检查通过
|
|
|
+- ⚠️ 使用 `@ts-nocheck` 绕过原始库中的类型问题
|
|
|
+
|
|
|
+**故事 016.002 完成状态**:
|
|
|
+- ✅ 已创建 `config.ts` 和 `utils/` 目录及所有子模块文件
|
|
|
+- ✅ 所有文件行数均在 500 行以内(最大 201 行 misc.ts)
|
|
|
+- ✅ 类型检查通过(pnpm typecheck)
|
|
|
+- ✅ 为 Canvas 上下文使用 `any` 类型以兼容小程序环境
|
|
|
+
|
|
|
+**故事 016.003 完成状态**:
|
|
|
+- ✅ 已创建 `data-processing/` 目录及所有子文件
|
|
|
+- ✅ 成功搬迁了14个数据处理函数到4个独立文件
|
|
|
+- ✅ 所有函数都添加了完整的 TypeScript 类型注解
|
|
|
+- ✅ 类型检查通过(pnpm typecheck)
|
|
|
+- ✅ 构建成功,所有文件正确生成到 dist 目录
|
|
|
+- ⚠️ 最大文件为 axis-calculator.ts (595行),略有超出500行限制但可接受
|
|
|
+
|
|
|
+**关键技术决策**:
|
|
|
+- 保持代码逻辑完全不变,只改变文件组织方式
|
|
|
+- 只在搬迁过程中添加 TypeScript 类型注解,不修改代码的实现逻辑
|
|
|
+- 为复杂参数和返回值定义 TypeScript 接口
|
|
|
+- 使用 ES6 `export` 语法导出函数和类型
|
|
|
+
|
|
|
+**迁移策略**: 保持 u-charts 核心绘制逻辑不变,渐进式模块化并添加类型定义
|
|
|
+
|
|
|
+### 技术栈要求
|
|
|
+
|
|
|
+**来源**: [tech-stack.md](../../architecture/tech-stack.md)
|
|
|
+
|
|
|
+- **TypeScript**: 5.4.5 [来源: tech-stack.md]
|
|
|
+- **React**: 18.0.0(mini 包使用 React 18,不是 React 19)[来源: 故事 016.001 Dev Notes]
|
|
|
+- **Taro**: 4.1.4 [来源: tech-stack.md]
|
|
|
+- **Node.js**: 20.18.3(运行时环境)[来源: tech-stack.md]
|
|
|
+- **包管理器**: pnpm workspace [来源: source-tree.md]
|
|
|
+
|
|
|
+### 项目结构指南
|
|
|
+
|
|
|
+**来源**: [source-tree.md](../../architecture/source-tree.md)
|
|
|
+
|
|
|
+```
|
|
|
+mini-ui-packages/
|
|
|
+└── mini-charts/ # mini-charts 包
|
|
|
+ ├── src/
|
|
|
+ │ ├── index.ts # 主入口文件
|
|
|
+ │ └── lib/
|
|
|
+ │ ├── u-charts.ts # u-charts 核心库(7680行)
|
|
|
+ │ ├── config.ts # [已完成] 配置对象
|
|
|
+ │ ├── utils/ # [已完成] 工具函数目录
|
|
|
+ │ ├── data-processing/ # [已完成] 数据处理模块
|
|
|
+ │ └── charts-data/ # [新增] 图表数据点计算模块
|
|
|
+ │ ├── index.ts # 数据点计算模块统一导出
|
|
|
+ │ ├── basic-charts.ts # 基础图表数据点计算
|
|
|
+ │ ├── pie-charts.ts # 饼图数据点计算
|
|
|
+ │ ├── radar-charts.ts # 雷达图数据点计算
|
|
|
+ │ ├── gauge-charts.ts # 仪表盘数据点计算
|
|
|
+ │ └── funnel-charts.ts # 漏斗图数据点计算
|
|
|
+ ├── tests/
|
|
|
+ │ └── u-charts.test.ts
|
|
|
+ ├── package.json
|
|
|
+ ├── tsconfig.json
|
|
|
+ └── jest.config.cjs
|
|
|
+```
|
|
|
+
|
|
|
+### TypeScript 配置规范
|
|
|
+
|
|
|
+**来源**: [ui-package-standards.md](../../architecture/ui-package-standards.md#typescript配置)
|
|
|
+
|
|
|
+```json
|
|
|
+{
|
|
|
+ "compilerOptions": {
|
|
|
+ "target": "ES2020",
|
|
|
+ "lib": ["DOM", "DOM.Iterable", "ES2020"],
|
|
|
+ "module": "ESNext",
|
|
|
+ "skipLibCheck": true,
|
|
|
+ "moduleResolution": "bundler",
|
|
|
+ "allowImportingTsExtensions": true,
|
|
|
+ "resolveJsonModule": true,
|
|
|
+ "isolatedModules": true,
|
|
|
+ "noEmit": true,
|
|
|
+ "jsx": "react-jsx",
|
|
|
+ "strict": true,
|
|
|
+ "noUnusedLocals": true,
|
|
|
+ "noUnusedParameters": true,
|
|
|
+ "noFallthroughCasesInSwitch": true
|
|
|
+ },
|
|
|
+ "include": ["src"]
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**本故事重要**: 需要为所有函数添加完整的类型注解,确保 `strict: true` 模式下无类型错误。
|
|
|
+
|
|
|
+### u-charts 图表数据点计算函数分析
|
|
|
+
|
|
|
+**来源**: [mini-charts/src/lib/u-charts.ts](../../mini-ui-packages/mini-charts/src/lib/u-charts.ts)
|
|
|
+
|
|
|
+#### 基础图表数据点计算函数
|
|
|
+
|
|
|
+1. **getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config)**: 计算散点图和气泡图的数据点坐标
|
|
|
+2. **getLineDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, lineOption, chartProcess)**: 计算折线图和面积图的数据点坐标
|
|
|
+3. **getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, zeroPoints, chartProcess)**: 计算柱状图的数据点坐标
|
|
|
+4. **getBarDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config)**: 计算条形图的数据点坐标
|
|
|
+5. **getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config)**: 计算K线图的数据点坐标
|
|
|
+6. **getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, stackSeries)**: 计算堆叠图表的数据点坐标
|
|
|
+7. **getBarStackDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, seriesIndex, stackSeries)**: 计算条形堆叠图的数据点坐标
|
|
|
+8. **getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints)**: 计算山丘图的数据点坐标
|
|
|
+
|
|
|
+#### 饼图数据点计算函数
|
|
|
+
|
|
|
+1. **getPieDataPoints(series, radius)**: 计算饼图的数据点(角度、半径、比例等)
|
|
|
+2. **getRoseDataPoints(series, type, minRadius, radius)**: 计算玫瑰图的数据点
|
|
|
+
|
|
|
+#### 雷达图数据点计算函数
|
|
|
+
|
|
|
+1. **getRadarDataPoints(angleList, center, radius, series, opts)**: 计算雷达图的数据点
|
|
|
+
|
|
|
+#### 仪表盘和环形图数据点计算函数
|
|
|
+
|
|
|
+1. **getGaugeDataPoints(series, categories, gaugeOption)**: 计算仪表盘图的数据点
|
|
|
+2. **getGaugeArcbarDataPoints(series, arcbarOption)**: 计算仪表盘环形条的数据点
|
|
|
+3. **getArcbarDataPoints(series, arcbarOption)**: 计算环形条图的数据点
|
|
|
+
|
|
|
+#### 漏斗图数据点计算函数
|
|
|
+
|
|
|
+1. **getFunnelDataPoints(series, radius, option, eachSpacing)**: 计算漏斗图和金字塔图的数据点
|
|
|
+
|
|
|
+### 类型定义规范
|
|
|
+
|
|
|
+**来源**: [ui-package-standards.md](../../architecture/ui-package-standards.md#类型定义规范)
|
|
|
+
|
|
|
+**本故事重要**: 必须为所有函数添加完整的类型注解,避免使用 `any` 类型(除非必要)。
|
|
|
+
|
|
|
+**类型定义示例**:
|
|
|
+
|
|
|
+```typescript
|
|
|
+// basic-charts.ts 类型定义示例
|
|
|
+export interface DataPoint {
|
|
|
+ x: number;
|
|
|
+ y: number;
|
|
|
+ color?: string;
|
|
|
+ value?: number;
|
|
|
+ r?: number; // 气泡图半径
|
|
|
+ t?: string; // 气泡图文本
|
|
|
+}
|
|
|
+
|
|
|
+export interface ChartOptions {
|
|
|
+ type: string;
|
|
|
+ categories?: string[];
|
|
|
+ xAxis?: {
|
|
|
+ boundaryGap?: string;
|
|
|
+ };
|
|
|
+ area?: [number, number, number, number];
|
|
|
+ width?: number;
|
|
|
+ height?: number;
|
|
|
+ extra?: Record<string, any>;
|
|
|
+ chartData?: {
|
|
|
+ xAxisData?: {
|
|
|
+ ranges?: number[][];
|
|
|
+ };
|
|
|
+ };
|
|
|
+ [key: string]: any;
|
|
|
+}
|
|
|
+
|
|
|
+export interface UChartsConfig {
|
|
|
+ version: string;
|
|
|
+ color: string[];
|
|
|
+ // ... 其他配置项
|
|
|
+}
|
|
|
+
|
|
|
+export function getDataPoints(
|
|
|
+ data: (number | DataPoint | null)[],
|
|
|
+ minRange: number,
|
|
|
+ maxRange: number,
|
|
|
+ xAxisPoints: number[],
|
|
|
+ eachSpacing: number,
|
|
|
+ opts: ChartOptions,
|
|
|
+ config: UChartsConfig
|
|
|
+): (DataPoint | null)[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+
|
|
|
+export function getLineDataPoints(
|
|
|
+ data: (number | DataPoint | null)[],
|
|
|
+ minRange: number,
|
|
|
+ maxRange: number,
|
|
|
+ xAxisPoints: number[],
|
|
|
+ eachSpacing: number,
|
|
|
+ opts: ChartOptions,
|
|
|
+ config: UChartsConfig,
|
|
|
+ lineOption: {
|
|
|
+ animation?: string;
|
|
|
+ },
|
|
|
+ chartProcess: number
|
|
|
+): (DataPoint | null)[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+
|
|
|
+export function getColumnDataPoints(
|
|
|
+ data: (number | DataPoint | null)[],
|
|
|
+ minRange: number,
|
|
|
+ maxRange: number,
|
|
|
+ xAxisPoints: number[],
|
|
|
+ eachSpacing: number,
|
|
|
+ opts: ChartOptions,
|
|
|
+ config: UChartsConfig,
|
|
|
+ zeroPoints: number[],
|
|
|
+ chartProcess: number
|
|
|
+): (DataPoint | null)[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+
|
|
|
+export interface CandleDataPoint {
|
|
|
+ x: number;
|
|
|
+ y: number;
|
|
|
+}
|
|
|
+
|
|
|
+export function getCandleDataPoints(
|
|
|
+ data: (number | { value?: number })[][],
|
|
|
+ minRange: number,
|
|
|
+ maxRange: number,
|
|
|
+ xAxisPoints: number[],
|
|
|
+ eachSpacing: number,
|
|
|
+ opts: ChartOptions,
|
|
|
+ config: UChartsConfig
|
|
|
+): (CandleDataPoint[] | null)[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```typescript
|
|
|
+// pie-charts.ts 类型定义示例
|
|
|
+export interface PieDataItem {
|
|
|
+ data: number | null;
|
|
|
+ _proportion_?: number;
|
|
|
+ _rose_proportion_?: number;
|
|
|
+ _radius_?: number;
|
|
|
+ _start_?: number;
|
|
|
+ color?: string;
|
|
|
+ name?: string;
|
|
|
+}
|
|
|
+
|
|
|
+export function getPieDataPoints(
|
|
|
+ series: PieDataItem[],
|
|
|
+ radius: number
|
|
|
+): PieDataItem[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+
|
|
|
+export function getRoseDataPoints(
|
|
|
+ series: PieDataItem[],
|
|
|
+ type: string,
|
|
|
+ minRadius: number,
|
|
|
+ radius: number
|
|
|
+): PieDataItem[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```typescript
|
|
|
+// radar-charts.ts 类型定义示例
|
|
|
+export interface RadarDataItem {
|
|
|
+ color?: string;
|
|
|
+ legendShape?: string;
|
|
|
+ pointShape?: string;
|
|
|
+ data: {
|
|
|
+ angle: number;
|
|
|
+ proportion: number;
|
|
|
+ value: number;
|
|
|
+ position: { x: number; y: number };
|
|
|
+ }[];
|
|
|
+}
|
|
|
+
|
|
|
+export function getRadarDataPoints(
|
|
|
+ angleList: number[],
|
|
|
+ center: { x: number; y: number },
|
|
|
+ radius: number,
|
|
|
+ series: { data: number[]; color?: string }[],
|
|
|
+ opts: ChartOptions
|
|
|
+): RadarDataItem[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```typescript
|
|
|
+// gauge-charts.ts 类型定义示例
|
|
|
+export interface GaugeDataItem {
|
|
|
+ data: number | null;
|
|
|
+ _proportion_?: number;
|
|
|
+}
|
|
|
+
|
|
|
+export function getGaugeDataPoints(
|
|
|
+ series: GaugeDataItem[],
|
|
|
+ categories: string[],
|
|
|
+ gaugeOption: {
|
|
|
+ type?: string;
|
|
|
+ startAngle?: number;
|
|
|
+ endAngle?: number;
|
|
|
+ direction?: string;
|
|
|
+ }
|
|
|
+): any {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+
|
|
|
+export function getGaugeArcbarDataPoints(
|
|
|
+ series: GaugeDataItem[],
|
|
|
+ arcbarOption: {
|
|
|
+ type?: string;
|
|
|
+ startAngle?: number;
|
|
|
+ endAngle?: number;
|
|
|
+ direction?: string;
|
|
|
+ }
|
|
|
+): GaugeDataItem[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+
|
|
|
+export function getArcbarDataPoints(
|
|
|
+ series: GaugeDataItem[],
|
|
|
+ arcbarOption: {
|
|
|
+ type?: string;
|
|
|
+ startAngle?: number;
|
|
|
+ endAngle?: number;
|
|
|
+ direction?: string;
|
|
|
+ }
|
|
|
+): GaugeDataItem[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+```typescript
|
|
|
+// funnel-charts.ts 类型定义示例
|
|
|
+export interface FunnelDataItem {
|
|
|
+ data: number;
|
|
|
+ radius?: number;
|
|
|
+ _proportion_?: number;
|
|
|
+}
|
|
|
+
|
|
|
+export function getFunnelDataPoints(
|
|
|
+ series: FunnelDataItem[],
|
|
|
+ radius: number,
|
|
|
+ option: {
|
|
|
+ type?: string;
|
|
|
+ },
|
|
|
+ eachSpacing: number
|
|
|
+): FunnelDataItem[] {
|
|
|
+ // 实现逻辑
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+### 编码标准
|
|
|
+
|
|
|
+**来源**: [coding-standards.md](../../architecture/coding-standards.md)
|
|
|
+
|
|
|
+- **代码风格**: TypeScript 严格模式,一致的缩进和命名
|
|
|
+- **类型注解**: 必须为所有函数参数和返回值添加类型注解
|
|
|
+- **接口定义**: 为复杂数据结构定义 TypeScript 接口
|
|
|
+- **导出规范**: 使用 ES6 `export` 语法导出函数和类型
|
|
|
+
|
|
|
+### 测试策略
|
|
|
+
|
|
|
+**来源**: [coding-standards.md](../../architecture/coding-standards.md)
|
|
|
+
|
|
|
+**测试框架**: Jest(mini 包使用 Jest,不是 Vitest)
|
|
|
+
|
|
|
+**测试位置**: `tests/` 目录(与源码并列)
|
|
|
+
|
|
|
+**测试类型**:
|
|
|
+- 单元测试: 测试数据点计算函数的正确性
|
|
|
+- **不要求**集成测试和 E2E 测试(这些在后续故事中)
|
|
|
+
|
|
|
+**测试要求**:
|
|
|
+1. 为每个数据点计算函数编写单元测试
|
|
|
+2. 测试覆盖率目标: 基础测试即可,不要求高覆盖率
|
|
|
+3. Mock 相关依赖(如配置、工具函数等)
|
|
|
+
|
|
|
+**测试命令**:
|
|
|
+```bash
|
|
|
+# 进入包目录
|
|
|
+cd mini-ui-packages/mini-charts
|
|
|
+
|
|
|
+# 运行所有测试
|
|
|
+pnpm test
|
|
|
+
|
|
|
+# 运行特定测试
|
|
|
+pnpm test --testNamePattern "数据点计算函数测试"
|
|
|
+
|
|
|
+# 类型检查
|
|
|
+pnpm typecheck
|
|
|
+```
|
|
|
+
|
|
|
+### 构建和发布规范
|
|
|
+
|
|
|
+**来源**: [ui-package-standards.md](../../architecture/ui-package-standards.md#构建和发布规范)
|
|
|
+
|
|
|
+mini-charts 包在 PNPM 工作空间中:
|
|
|
+- **开发模式**: 直接使用 TypeScript 源码
|
|
|
+- **构建**: 使用 `tsc` 编译到 `dist/` 目录
|
|
|
+- **类型检查**: 使用 `tsc --noEmit` 验证类型
|
|
|
+- **发布**: 本故事不要求发布,仅验证本地构建成功
|
|
|
+
|
|
|
+**重要**: 本故事完成后,应该可以:
|
|
|
+1. ✅ 运行 `pnpm build` 成功生成 `dist/` 目录
|
|
|
+2. ✅ 运行 `pnpm typecheck` 无类型错误
|
|
|
+3. ✅ 所有新模块正确导出,可以被主入口文件引用
|
|
|
+
|
|
|
+### 开发流程
|
|
|
+
|
|
|
+**来源**: [development-workflow.md](../../architecture/development-workflow.md)
|
|
|
+
|
|
|
+**开发命令**:
|
|
|
+```bash
|
|
|
+# 进入包目录
|
|
|
+cd mini-ui-packages/mini-charts
|
|
|
+
|
|
|
+# 安装依赖(在根目录)
|
|
|
+pnpm install
|
|
|
+
|
|
|
+# 开发模式(监听文件变化)
|
|
|
+pnpm dev
|
|
|
+
|
|
|
+# 类型检查
|
|
|
+pnpm typecheck
|
|
|
+
|
|
|
+# 运行测试
|
|
|
+pnpm test
|
|
|
+
|
|
|
+# 构建
|
|
|
+pnpm build
|
|
|
+```
|
|
|
+
|
|
|
+### 环境配置
|
|
|
+
|
|
|
+**来源**: [CLAUDE.md](../../CLAUDE.md)
|
|
|
+
|
|
|
+- **Node.js**: 20.19.2
|
|
|
+- **包管理器**: pnpm
|
|
|
+- **测试调试**: 使用 `pnpm test --testNamePattern "测试名称"` 运行特定测试
|
|
|
+- **Mini 测试**: 需要 Jest,不是 Vitest
|
|
|
+- **类型检查**: 使用 `pnpm typecheck` 加 grep 来过滤要检查的指定文件
|
|
|
+
|
|
|
+### 文件位置规范
|
|
|
+
|
|
|
+**来源**: [source-tree.md](../../architecture/source-tree.md)
|
|
|
+
|
|
|
+所有新文件应创建在:
|
|
|
+- 数据点计算模块目录: `mini-ui-packages/mini-charts/src/lib/charts-data/`
|
|
|
+- 数据点计算文件:
|
|
|
+ - `basic-charts.ts`: 基础图表数据点计算(柱状图、折线图、散点图等)
|
|
|
+ - `pie-charts.ts`: 饼图数据点计算
|
|
|
+ - `radar-charts.ts`: 雷达图数据点计算
|
|
|
+ - `gauge-charts.ts`: 仪表盘数据点计算
|
|
|
+ - `funnel-charts.ts`: 漏斗图数据点计算
|
|
|
+ - `index.ts`: 数据点计算模块统一导出
|
|
|
+- 主入口: `mini-ui-packages/mini-charts/src/index.ts`(需要更新导出)
|
|
|
+- 测试文件: `mini-ui-packages/mini-charts/tests/`(可选,本故事不强制要求)
|
|
|
+
|
|
|
+### 技术约束
|
|
|
+
|
|
|
+1. **搬迁原则**: 保持代码逻辑完全不变,只改变文件组织方式
|
|
|
+2. **类型注解**: 只在搬迁过程中添加 TypeScript 类型注解,不修改代码的实现逻辑
|
|
|
+3. **文件大小**: 每个文件控制在 500 行以内
|
|
|
+4. **类型安全**: 避免使用 `any` 类型(除非必要)
|
|
|
+5. **向后兼容**: 保持与原始 u-charts.ts 的功能兼容性
|
|
|
+
|
|
|
+### 验证标准
|
|
|
+
|
|
|
+完成本故事后,应该满足:
|
|
|
+1. ✅ `src/lib/charts-data/` 目录下所有文件存在
|
|
|
+2. ✅ 所有数据点计算函数都有完整类型注解
|
|
|
+3. ✅ 运行 `pnpm typecheck` 无类型错误
|
|
|
+4. ✅ 每个文件控制在 500 行以内
|
|
|
+5. ✅ 代码逻辑与原始 u-charts.ts 完全一致
|
|
|
+6. ✅ 所有新模块正确导出,可以被主入口文件引用
|
|
|
+
|
|
|
+### 不包含在本故事中的工作
|
|
|
+
|
|
|
+**来源**: [epic-016 故事列表](../../prd/epic-016-mini-charts-package.md#故事列表)
|
|
|
+
|
|
|
+以下工作**不在**本故事范围内:
|
|
|
+- ❌ 绘制函数模块化(故事 016.005)
|
|
|
+- ❌ 核心类模块化(故事 016.006)
|
|
|
+- ❌ React 组件封装(故事 016.007)
|
|
|
+
|
|
|
+### Testing
|
|
|
+
|
|
|
+**测试框架**: Jest(不是 Vitest)
|
|
|
+
|
|
|
+**测试位置**: `tests/` 目录(与源码并列)
|
|
|
+
|
|
|
+**测试要求**:
|
|
|
+1. 创建基础测试验证数据点计算函数的正确导入和导出
|
|
|
+2. 测试数据点计算函数的基本功能(可选,本故事不强制要求)
|
|
|
+3. Mock 相关依赖(如配置、工具函数等)
|
|
|
+4. 测试覆盖率目标: 基础测试即可,不要求高覆盖率
|
|
|
+
|
|
|
+**测试命令**:
|
|
|
+```bash
|
|
|
+# 运行所有测试
|
|
|
+pnpm test
|
|
|
+
|
|
|
+# 运行特定测试
|
|
|
+pnpm test --testNamePattern "数据点计算函数测试"
|
|
|
+```
|
|
|
+
|
|
|
+**参考**: [coding-standards.md](../../architecture/coding-standards.md)
|
|
|
+
|
|
|
+## Change Log
|
|
|
+
|
|
|
+| Date | Version | Description | Author |
|
|
|
+|------|---------|-------------|--------|
|
|
|
+| 2025-12-24 | 1.0 | 创建故事文档 | Bob (Scrum Master) |
|
|
|
+| 2025-12-24 | 1.1 | 更新状态为 Approved | Bob (Scrum Master) |
|
|
|
+
|
|
|
+## Dev Agent Record
|
|
|
+
|
|
|
+*此部分由开发代理在实施过程中填写*
|
|
|
+
|
|
|
+### Agent Model Used
|
|
|
+
|
|
|
+待填写
|
|
|
+
|
|
|
+### Debug Log References
|
|
|
+
|
|
|
+待填写
|
|
|
+
|
|
|
+### Completion Notes List
|
|
|
+
|
|
|
+待填写
|
|
|
+
|
|
|
+### File List
|
|
|
+
|
|
|
+待填写
|
|
|
+
|
|
|
+## QA Results
|
|
|
+
|
|
|
+*此部分由 QA 代理在审查完成后填写*
|