@agions/taroviz 1.11.5 → 2.0.3

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

@@ -0,0 +1,99 @@
+/**
+ * FunnelChart 组件测试
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FunnelChart from '../index';
+
+// 使用正确的 mock 方式，参考 parallel 图表的测试
+jest.mock('../../common/BaseChartWrapper');
+jest.mock('echarts/charts', () => ({ FunnelChart: jest.fn() }));
+
+describe('FunnelChart', () => {
+  const mockData = [
+    { value: 100, name: '访问' },
+    { value: 80, name: '咨询' },
+    { value: 60, name: '订单' },
+    { value: 40, name: '成交' },
+    { value: 20, name: '退款' },
+  ];
+
+  it('应该渲染漏斗图组件', () => {
+    render(<FunnelChart data={mockData} width={600} height={400} />);
+
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('应该传递正确的 option 到 BaseChart', () => {
+    render(<FunnelChart 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.series).toBeDefined();
+    expect(option.series.type).toBe('funnel');
+    expect(option.series.data).toEqual(mockData);
+    expect(option.series.sort).toBe('descending');
+  });
+
+  it('当 data 为空时应该返回 null', () => {
+    const { container } = render(<FunnelChart data={[]} width={600} height={400} />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('应该支持自定义 sort 排序', () => {
+    render(<FunnelChart data={mockData} sort="ascending" 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.series.sort).toBe('ascending');
+  });
+
+  it('应该支持自定义 align 对齐', () => {
+    render(<FunnelChart data={mockData} align="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.series.align).toBe('center');
+  });
+
+  it('应该支持自定义 gap 间隙', () => {
+    render(<FunnelChart data={mockData} gap={10} 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.series.gap).toBe(10);
+  });
+
+  it('应该支持自定义 min/max 高度', () => {
+    render(<FunnelChart data={mockData} min={10} max={120} 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.series.min).toBe(10);
+    expect(option.series.max).toBe(120);
+  });
+
+  it('应该支持 optionMerge 自定义配置', () => {
+    const customTitle = { title: { text: '漏斗图标题', left: 'center' } };
+
+    render(<FunnelChart 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);
+  });
+});

package/src/charts/funnel/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * TaroViz 漏斗图组件
+ *
+ * 基于 ECharts funnel 系列实现漏斗图可视化
+ */
+import { createOptionChartComponent } from '@/charts/createOptionChartComponent';
+import type { FunnelChartProps } from './types';
+// 类型 FunnelDataItem 通过下方 export type 导出供外部使用
+
+/**
+ * 构建漏斗图 ECharts option
+ */
+function buildFunnelOption(props: FunnelChartProps) {
+  const { data, sort, align, gap, min, max, optionMerge } = props;
+
+  // 验证数据
+  if (!data || data.length === 0) {
+    console.warn('[TaroViz] FunnelChart: data is required');
+    return null;
+  }
+
+  // 构建漏斗图 series
+  const series = {
+    type: 'funnel' as const,
+    data: data,
+    sort: sort || 'descending',
+    align: align || 'left',
+    gap: gap || 2,
+    min: min || 0,
+    max: max || 100,
+    label: {
+      show: true,
+      position: 'inside',
+    },
+    emphasis: {
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+    },
+  };
+
+  const option: any = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        if (!params || !params.data) return '';
+        return `<b>${params.data.name}</b><br/>值: ${params.data.value}`;
+      },
+    },
+    series,
+  };
+
+  // 合并自定义配置
+  if (optionMerge) {
+    Object.assign(option, optionMerge);
+  }
+
+  return option;
+}
+
+const FunnelChart = createOptionChartComponent<FunnelChartProps>('FunnelChart', buildFunnelOption);
+
+export default FunnelChart;

package/src/charts/funnel/types.ts

@@ -0,0 +1,6 @@
+/**
+ * TaroViz 漏斗图类型定义
+ *
+ * 从主 types 文件导入基础类型，只导出组件特有的类型
+ */
+export type { FunnelChartProps, FunnelDataItem, FunnelLabel } from '../types';

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

@@ -0,0 +1,116 @@
+/**
+ * GraphChart 组件测试
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import GraphChart from '../index';
+
+// 使用正确的 mock 方式，参考 parallel 图表的测试
+jest.mock('../../common/BaseChartWrapper');
+jest.mock('echarts/charts', () => ({ GraphChart: jest.fn() }));
+
+describe('GraphChart', () => {
+  const mockNodes = [
+    { id: '1', name: '节点 A', value: 10 },
+    { id: '2', name: '节点 B', value: 20 },
+    { id: '3', name: '节点 C', value: 30 },
+    { id: '4', name: '节点 D', value: 40 },
+  ];
+
+  const mockLinks = [
+    { source: '1', target: '2', value: 5 },
+    { source: '2', target: '3', value: 8 },
+    { source: '3', target: '4', value: 12 },
+  ];
+
+  it('应该渲染关系图组件', () => {
+    render(<GraphChart nodes={mockNodes} links={mockLinks} width={600} height={400} />);
+
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('应该传递正确的 option 到 BaseChart', () => {
+    render(<GraphChart nodes={mockNodes} links={mockLinks} 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.series).toBeDefined();
+    expect(option.series.type).toBe('graph');
+    expect(option.series.data).toEqual(mockNodes);
+    expect(option.series.links).toEqual(mockLinks);
+  });
+
+  it('当 nodes 为空时应该返回 null', () => {
+    const { container } = render(
+      <GraphChart nodes={[]} links={mockLinks} width={600} height={400} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('应该支持自定义 layout', () => {
+    render(
+      <GraphChart nodes={mockNodes} links={mockLinks} layout="circular" 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.series.layout).toBe('circular');
+  });
+
+  it('应该支持自定义 force 配置', () => {
+    render(
+      <GraphChart
+        nodes={mockNodes}
+        links={mockLinks}
+        layout="force"
+        force={{ repulsion: 200, edgeLength: 100 }}
+        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.series.force).toEqual({ repulsion: 200, edgeLength: 100 });
+  });
+
+  it('应该支持 draggable 配置', () => {
+    render(
+      <GraphChart nodes={mockNodes} links={mockLinks} draggable={true} 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.series.draggable).toBe(true);
+  });
+
+  it('应该支持 optionMerge 自定义配置', () => {
+    const customTitle = { title: { text: '关系图标题', left: 'center' } };
+
+    render(
+      <GraphChart
+        nodes={mockNodes}
+        links={mockLinks}
+        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);
+  });
+});

package/src/charts/graph/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * TaroViz 关系图组件
+ *
+ * 基于 ECharts graph 系列实现关系图/力导向图可视化
+ */
+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

@@ -0,0 +1,107 @@
+/**
+ * TaroViz 热力图组件
+ *
+ * 基于 ECharts heatmap 系列实现二维数据密度可视化
+ */
+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';