@agions/taroviz 1.11.1 → 2.0.3

package/src/charts/graph/index.tsx

@@ -1,13 +1,70 @@
 /**
- * GraphChart组件
+ * TaroViz 关系图组件
+ *
+ * 基于 ECharts graph 系列实现关系图/力导向图可视化
  */
-import React, { memo } from 'react';
-import BaseChartWrapper from '../common/BaseChartWrapper';
-import { GraphChartProps } from '../types';
-
-const GraphChart: React.FC<GraphChartProps> = memo((props) => (
-  <BaseChartWrapper {...props} chartType="graph-chart" />
-));
-GraphChart.displayName = 'GraphChart';
+import { createOptionChartComponent } from '@/charts/createOptionChartComponent';
+import type { GraphChartProps } from './types';
+// 类型 GraphNode、GraphLink 通过下方 export type 导出供外部使用
+
+/**
+ * 构建关系图 ECharts option
+ */
+function buildGraphOption(props: GraphChartProps) {
+  const { nodes, links, layout, force, draggable, optionMerge } = props;
+
+  // 验证数据
+  if (!nodes || nodes.length === 0) {
+    console.warn('[TaroViz] GraphChart: nodes is required');
+    return null;
+  }
+
+  // 构建关系图 series
+  const series: any = {
+    type: 'graph' as const,
+    layout: layout || 'force',
+    data: nodes,
+    links: links || [],
+    draggable: draggable !== false,
+    label: {
+      show: true,
+      position: 'right',
+    },
+    emphasis: {
+      focus: 'adjacency',
+      lineStyle: {
+        width: 4,
+      },
+    },
+  };
+
+  // 添加力导向布局配置
+  if (layout === 'force' && force) {
+    series.force = force;
+  }
+
+  const option: any = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        if (!params || !params.data) return '';
+        return `<b>${params.data.name}</b>`;
+      },
+    },
+    legend: {
+      data: nodes.map((n) => n.name),
+    },
+    series,
+  };
+
+  // 合并自定义配置
+  if (optionMerge) {
+    Object.assign(option, optionMerge);
+  }
+
+  return option;
+}
+
+const GraphChart = createOptionChartComponent<GraphChartProps>('GraphChart', buildGraphOption);
 
 export default GraphChart;

package/src/charts/graph/types.ts

@@ -0,0 +1,6 @@
+/**
+ * TaroViz 关系图类型定义
+ *
+ * 从主 types 文件导入基础类型，只导出组件特有的类型
+ */
+export type { GraphChartProps, GraphNode, GraphLink } from '../types';

package/src/charts/heatmap/__tests__/index.test.tsx

@@ -0,0 +1,139 @@
+/**
+ * HeatmapChart 组件测试
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import HeatmapChart from '../index';
+
+// 使用正确的 mock 方式，参考 parallel 图表的测试
+jest.mock('../../common/BaseChartWrapper');
+jest.mock('echarts/charts', () => ({ HeatmapChart: jest.fn() }));
+
+describe('HeatmapChart', () => {
+  const mockXData = ['周一', '周二', '周三', '周四', '周五'];
+  const mockYData = ['A', 'B', 'C', 'D'];
+  const mockData = [
+    { x: 0, y: 0, value: 10 },
+    { x: 1, y: 0, value: 20 },
+    { x: 2, y: 0, value: 30 },
+    { x: 3, y: 0, value: 40 },
+    { x: 4, y: 0, value: 50 },
+    { x: 0, y: 1, value: 15 },
+    { x: 1, y: 1, value: 25 },
+    { x: 2, y: 1, value: 35 },
+    { x: 3, y: 1, value: 45 },
+    { x: 4, y: 1, value: 55 },
+  ];
+
+  it('应该渲染热力图组件', () => {
+    render(
+      <HeatmapChart xData={mockXData} yData={mockYData} data={mockData} width={600} height={400} />
+    );
+
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('应该传递正确的 option 到 BaseChart', () => {
+    render(
+      <HeatmapChart xData={mockXData} yData={mockYData} data={mockData} width={600} height={400} />
+    );
+
+    const baseChartWrapper = screen.getByTestId('base-chart-wrapper');
+    const optionElement = baseChartWrapper.querySelector('[data-testid="chart-option"]');
+    const option = JSON.parse(optionElement?.textContent || '{}');
+
+    expect(option.xAxis).toBeDefined();
+    expect(option.xAxis.data).toEqual(mockXData);
+    expect(option.yAxis).toBeDefined();
+    expect(option.yAxis.data).toEqual(mockYData);
+    expect(option.series).toBeDefined();
+    expect(option.series.type).toBe('heatmap');
+  });
+
+  it('当 xData 为空时应该返回 null', () => {
+    const { container } = render(
+      <HeatmapChart xData={[]} yData={mockYData} data={mockData} width={600} height={400} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('当 yData 为空时应该返回 null', () => {
+    const { container } = render(
+      <HeatmapChart xData={mockXData} yData={[]} data={mockData} width={600} height={400} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('当 data 为空时应该返回 null', () => {
+    const { container } = render(
+      <HeatmapChart xData={mockXData} yData={mockYData} data={[]} width={600} height={400} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('应该支持自定义 visualMap', () => {
+    render(
+      <HeatmapChart
+        xData={mockXData}
+        yData={mockYData}
+        data={mockData}
+        visualMap={{
+          min: 5,
+          max: 60,
+          orient: 'vertical',
+          right: 10,
+          top: 'center',
+        }}
+        width={600}
+        height={400}
+      />
+    );
+
+    const baseChartWrapper = screen.getByTestId('base-chart-wrapper');
+    const optionElement = baseChartWrapper.querySelector('[data-testid="chart-option"]');
+    const option = JSON.parse(optionElement?.textContent || '{}');
+
+    expect(option.visualMap.min).toBe(5);
+    expect(option.visualMap.max).toBe(60);
+    expect(option.visualMap.orient).toBe('vertical');
+  });
+
+  it('应该支持 optionMerge 自定义配置', () => {
+    const customTitle = { title: { text: '热力图标题', left: 'center' } };
+
+    render(
+      <HeatmapChart
+        xData={mockXData}
+        yData={mockYData}
+        data={mockData}
+        optionMerge={customTitle}
+        width={600}
+        height={400}
+      />
+    );
+
+    const baseChartWrapper = screen.getByTestId('base-chart-wrapper');
+    const optionElement = baseChartWrapper.querySelector('[data-testid="chart-option"]');
+    const option = JSON.parse(optionElement?.textContent || '{}');
+
+    expect(option.title).toEqual(customTitle.title);
+  });
+
+  it('应该正确转换数据格式', () => {
+    render(
+      <HeatmapChart xData={mockXData} yData={mockYData} data={mockData} width={600} height={400} />
+    );
+
+    const baseChartWrapper = screen.getByTestId('base-chart-wrapper');
+    const optionElement = baseChartWrapper.querySelector('[data-testid="chart-option"]');
+    const option = JSON.parse(optionElement?.textContent || '{}');
+
+    // 验证数据被正确转换为 [x, y, value] 格式
+    expect(option.series.data[0]).toEqual([0, 0, 10]);
+    expect(option.series.data[4]).toEqual([4, 0, 50]);
+  });
+});

package/src/charts/heatmap/index.tsx

@@ -1,14 +1,107 @@
 /**
- * HeatmapChart组件
+ * TaroViz 热力图组件
+ *
+ * 基于 ECharts heatmap 系列实现二维数据密度可视化
  */
-import React, { memo } from 'react';
-import BaseChartWrapper from '../common/BaseChartWrapper';
-import { HeatmapChartProps } from '../types';
-import '@/core/echarts';
-
-const HeatmapChart: React.FC<HeatmapChartProps> = memo((props) => (
-  <BaseChartWrapper {...props} chartType="heatmap-chart" />
-));
-HeatmapChart.displayName = 'HeatmapChart';
+import { createOptionChartComponent } from '@/charts/createOptionChartComponent';
+import type { HeatmapChartProps } from './types';
+// 类型 HeatmapDataItem、HeatmapAxis 通过下方 export type 导出供外部使用
+
+/**
+ * 构建热力图 ECharts option
+ */
+function buildHeatmapOption(props: HeatmapChartProps) {
+  const { xData, yData, data, visualMap, optionMerge } = props;
+
+  // 验证数据
+  if (!xData || xData.length === 0) {
+    console.warn('[TaroViz] HeatmapChart: xData is required');
+    return null;
+  }
+
+  if (!yData || yData.length === 0) {
+    console.warn('[TaroViz] HeatmapChart: yData is required');
+    return null;
+  }
+
+  if (!data || data.length === 0) {
+    console.warn('[TaroViz] HeatmapChart: data is required');
+    return null;
+  }
+
+  // 构建热力图 series
+  const series = {
+    type: 'heatmap' as const,
+    data: data.map((item) => [item.x, item.y, item.value]),
+    label: {
+      show: true,
+      formatter: (params: any) => {
+        if (!params || params.value?.length !== 3) return '';
+        return params.value[2];
+      },
+    },
+    emphasis: {
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+    },
+  };
+
+  // 构建坐标轴
+  const xAxis: any = {
+    type: 'category',
+    data: xData,
+    axisLabel: {
+      rotate: xData.length > 10 ? 45 : 0,
+    },
+  };
+
+  const yAxis: any = {
+    type: 'category',
+    data: yData,
+    axisLabel: {
+      rotate: yData.length > 10 ? 45 : 0,
+    },
+  };
+
+  // 构建 visualMap
+  const visualMapConfig = visualMap || {
+    min: 0,
+    max: Math.max(...data.map((d) => d.value)),
+    calculable: true,
+    orient: 'horizontal',
+    left: 'center',
+    top: 'bottom',
+    text: ['高', '低'],
+  };
+
+  const option: any = {
+    tooltip: {
+      position: 'top',
+      formatter: (params: any) => {
+        if (!params || !params.data) return '';
+        const [x, y, value] = params.data;
+        return `<b>${x} × ${y}</b><br/>值: ${value}`;
+      },
+    },
+    xAxis,
+    yAxis,
+    series,
+    visualMap: visualMapConfig,
+  };
+
+  // 合并自定义配置
+  if (optionMerge) {
+    Object.assign(option, optionMerge);
+  }
+
+  return option;
+}
+
+const HeatmapChart = createOptionChartComponent<HeatmapChartProps>(
+  'HeatmapChart',
+  buildHeatmapOption
+);
 
 export default HeatmapChart;

package/src/charts/heatmap/types.ts

@@ -0,0 +1,6 @@
+/**
+ * TaroViz 热力图类型定义
+ *
+ * 从主 types 文件导入基础类型，只导出组件特有的类型
+ */
+export type { HeatmapChartProps, HeatmapDataItem, HeatmapAxis } from '../types';

package/src/charts/index.ts

@@ -1,39 +1,87 @@
 /**
  * TaroViz 图表组件集合
+ * 使用工厂函数消除重复代码
  */
 
-// 导出基础图表组件
-export { default as LineChart } from './line';
-export { default as BarChart } from './bar';
-export { default as PieChart } from './pie';
-export { default as ScatterChart } from './scatter';
-export { default as RadarChart } from './radar';
+import { createChartComponent } from './createChartComponent';
+import type {
+  LineChartProps,
+  BarChartProps,
+  PieChartProps,
+  ScatterChartProps,
+  TreeMapChartProps,
+  SunburstChartProps,
+} from './types';
+
+// ===== 标准图表（用工厂函数创建）=====
+
+/** 基础图表 */
+export const LineChart = createChartComponent<LineChartProps>('LineChart', 'line-chart');
+export const BarChart = createChartComponent<BarChartProps>('BarChart', 'bar-chart');
+export const PieChart = createChartComponent<PieChartProps>('PieChart', 'pie-chart');
+export const ScatterChart = createChartComponent<ScatterChartProps>(
+  'ScatterChart',
+  'scatter-chart'
+);
+
+/** 扩展图表 */
+export const TreeMapChart = createChartComponent<TreeMapChartProps>(
+  'TreeMapChart',
+  'treemap-chart'
+);
+export const SunburstChart = createChartComponent<SunburstChartProps>(
+  'SunburstChart',
+  'sunburst-chart'
+);
+
+// ===== 特殊图表（自定义实现）=====
+
+/** 热力图 - 使用自定义实现 */
 export { default as HeatmapChart } from './heatmap';
-export { default as GaugeChart } from './gauge';
-export { default as FunnelChart } from './funnel';
 
-// 导出扩展图表组件
-export { default as TreeMapChart } from './treemap';
-export { default as SunburstChart } from './sunburst';
-export { default as SankeyChart } from './sankey';
+/** 漏斗图 - 使用自定义实现 */
+export { default as FunnelChart } from './funnel';
 
-// 导出新增图表组件
-export { default as GraphChart } from './graph';
-export { default as CandlestickChart } from './candlestick';
-export { default as WordCloudChart } from './wordcloud';
+/** 平行坐标图 - 使用自定义实现 */
+export { default as ParallelChart } from './parallel';
 
-// 导出 v1.6.0 新增图表组件
+/** 箱线图 - 使用自定义实现 */
 export { default as BoxplotChart } from './boxplot';
-export { default as ParallelChart } from './parallel';
 
-// 导出 v1.7.0 新增图表组件
-export { default as LiquidChart } from './liquid';
+/** 树图 - 使用自定义实现 */
 export { default as TreeChart } from './tree';
 
-// 导出类型定义
-export * from './types';
+/** 雷达图 - 使用自定义实现 */
+export { default as RadarChartCustom } from './radar';
 
-/**
- * 版本信息
- */
-export const version = '1.7.0';
+/** 关系图 - 使用自定义实现 */
+export { default as GraphChart } from './graph';
+
+/** 桑基图 - 使用自定义实现 */
+export { default as SankeyChart } from './sankey';
+
+/** 词云图 - 使用自定义实现 */
+export { default as WordCloudChart } from './wordcloud';
+
+// ===== 类型导出 =====
+
+export type {
+  BaseChartProps,
+  LineChartProps,
+  BarChartProps,
+  PieChartProps,
+  ScatterChartProps,
+  RadarChartProps,
+  FunnelChartProps,
+  HeatmapChartProps,
+  SunburstChartProps,
+  TreeMapChartProps,
+  SankeyChartProps,
+  GraphChartProps,
+  WordCloudChartProps,
+  BoxplotChartProps,
+  TreeChartProps,
+} from './types';
+
+// 特殊图表类型（从独立目录导出）
+export type { ParallelChartProps } from './parallel/types';

package/src/charts/liquid/__tests__/index.test.tsx

@@ -0,0 +1,52 @@
+/**
+ * LiquidChart 测试
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import LiquidChart from '../index';
+
+// Mock BaseChartWrapper
+jest.mock('../../common/BaseChartWrapper');
+
+describe('LiquidChart', () => {
+  const mockProps = {
+    width: 200,
+    height: 200,
+    waveData: [0.6],
+  };
+
+  it('should render without crashing', () => {
+    render(<LiquidChart {...mockProps} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should render with different wave data', () => {
+    render(<LiquidChart {...mockProps} waveData={[0.3, 0.5, 0.7]} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle shape prop', () => {
+    render(<LiquidChart {...mockProps} shape="rect" />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle amplitude prop', () => {
+    render(<LiquidChart {...mockProps} amplitude={50} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle color prop', () => {
+    render(<LiquidChart {...mockProps} color={['#ff0000', '#00ff00']} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle backgroundColor prop', () => {
+    render(<LiquidChart {...mockProps} backgroundColor="#f0f0f0" />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle showLabel prop', () => {
+    render(<LiquidChart {...mockProps} showLabel={true} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+});