@agions/taroviz 1.11.1 → 2.0.3

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

@@ -0,0 +1,124 @@
+/**
+ * SankeyChart 组件测试
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SankeyChart from '../index';
+
+// 使用正确的 mock 方式，参考 parallel 图表的测试
+jest.mock('../../common/BaseChartWrapper');
+jest.mock('echarts/charts', () => ({ SankeyChart: jest.fn() }));
+
+describe('SankeyChart', () => {
+  const mockNodes = [
+    { name: '节点 A' },
+    { name: '节点 B' },
+    { name: '节点 C' },
+    { name: '节点 D' },
+  ];
+
+  const mockLinks = [
+    { source: '节点 A', target: '节点 B', value: 10 },
+    { source: '节点 A', target: '节点 C', value: 20 },
+    { source: '节点 B', target: '节点 D', value: 15 },
+    { source: '节点 C', target: '节点 D', value: 25 },
+  ];
+
+  it('应该渲染桑基图组件', () => {
+    render(<SankeyChart nodes={mockNodes} links={mockLinks} width={800} height={400} />);
+
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('应该传递正确的 option 到 BaseChart', () => {
+    render(<SankeyChart nodes={mockNodes} links={mockLinks} width={800} 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('sankey');
+    expect(option.series.data).toEqual(mockNodes);
+    expect(option.series.links).toEqual(mockLinks);
+  });
+
+  it('当 nodes 为空时应该返回 null', () => {
+    const { container } = render(
+      <SankeyChart nodes={[]} links={mockLinks} width={800} height={400} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('当 links 为空时应该返回 null', () => {
+    const { container } = render(
+      <SankeyChart nodes={mockNodes} links={[]} width={800} height={400} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('应该支持自定义 orient', () => {
+    render(
+      <SankeyChart nodes={mockNodes} links={mockLinks} orient="vertical" width={800} 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.orient).toBe('vertical');
+  });
+
+  it('应该支持自定义 nodeAlign', () => {
+    render(
+      <SankeyChart
+        nodes={mockNodes}
+        links={mockLinks}
+        nodeAlign="center"
+        width={800}
+        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.nodeAlign).toBe('center');
+  });
+
+  it('应该支持自定义 nodeGap', () => {
+    render(
+      <SankeyChart nodes={mockNodes} links={mockLinks} nodeGap={15} width={800} 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.nodeGap).toBe(15);
+  });
+
+  it('应该支持 optionMerge 自定义配置', () => {
+    const customTitle = { title: { text: '桑基图标题', left: 'center' } };
+
+    render(
+      <SankeyChart
+        nodes={mockNodes}
+        links={mockLinks}
+        optionMerge={customTitle}
+        width={800}
+        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/sankey/index.tsx

@@ -1,18 +1,70 @@
 /**
- * Sankey 桑基图组件
- * 用于展示数据流向和转移关系
+ * TaroViz 桑基图组件
+ *
+ * 基于 ECharts sankey 系列实现桑基图可视化
  */
-import React, { memo } from 'react';
-import BaseChartWrapper from '../common/BaseChartWrapper';
-import { SankeyChartProps } from '../types';
+import { createOptionChartComponent } from '@/charts/createOptionChartComponent';
+import type { SankeyChartProps } from './types';
+// 类型 SankeyNode、SankeyLink 通过下方 export type 导出供外部使用
 
 /**
- * Sankey 桑基图组件
+ * 构建桑基图 ECharts option
  */
-const SankeyChart: React.FC<SankeyChartProps> = memo((props) => (
-  <BaseChartWrapper {...props} chartType="sankey-chart" />
-));
+function buildSankeyOption(props: SankeyChartProps) {
+  const { nodes, links, nodeAlign, nodeGap, nodeWidth, orient, optionMerge } = props;
 
-SankeyChart.displayName = 'SankeyChart';
+  // 验证数据
+  if (!nodes || nodes.length === 0) {
+    console.warn('[TaroViz] SankeyChart: nodes is required');
+    return null;
+  }
+
+  if (!links || links.length === 0) {
+    console.warn('[TaroViz] SankeyChart: links is required');
+    return null;
+  }
+
+  // 构建桑基图 series
+  const series = {
+    type: 'sankey' as const,
+    layout: 'none',
+    data: nodes,
+    links: links,
+    orient: orient || 'horizontal',
+    nodeAlign: nodeAlign || 'left',
+    nodeGap: nodeGap || 8,
+    nodeWidth: nodeWidth || 20,
+    label: {
+      show: true,
+      position: 'right',
+    },
+    emphasis: {
+      focus: 'adjacency',
+      lineStyle: {
+        width: 4,
+      },
+    },
+  };
+
+  const option: any = {
+    tooltip: {
+      trigger: 'item',
+      formatter: (params: any) => {
+        if (!params || !params.data) return '';
+        return `<b>${params.data.name}</b>`;
+      },
+    },
+    series,
+  };
+
+  // 合并自定义配置
+  if (optionMerge) {
+    Object.assign(option, optionMerge);
+  }
+
+  return option;
+}
+
+const SankeyChart = createOptionChartComponent<SankeyChartProps>('SankeyChart', buildSankeyOption);
 
 export default SankeyChart;

package/src/charts/sankey/types.ts

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

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

@@ -0,0 +1,71 @@
+/**
+ * TreeChart 测试
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import TreeChart from '../index';
+
+// Mock BaseChartWrapper
+jest.mock('../../common/BaseChartWrapper');
+
+describe('TreeChart', () => {
+  const mockData = {
+    name: 'root',
+    children: [
+      {
+        name: 'child1',
+        children: [{ name: 'grandchild1' }, { name: 'grandchild2' }],
+      },
+      {
+        name: 'child2',
+      },
+    ],
+  };
+
+  const mockProps = {
+    data: [mockData],
+    width: 600,
+    height: 400,
+  };
+
+  it('should render without crashing', () => {
+    render(<TreeChart {...mockProps} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should render with correct orientation', () => {
+    render(<TreeChart {...mockProps} orient="horizontal" />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle different layout types', () => {
+    render(<TreeChart {...mockProps} layout="orthogonal" />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle node gap', () => {
+    render(<TreeChart {...mockProps} nodeGap={20} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle initial tree depth', () => {
+    render(<TreeChart {...mockProps} initialTreeDepth={2} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle label position', () => {
+    render(<TreeChart {...mockProps} labelPosition="left" />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle line curveness', () => {
+    render(<TreeChart {...mockProps} lineCurveness={0.5} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('should handle symbol size', () => {
+    render(<TreeChart {...mockProps} symbolSize={10} />);
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+});

package/src/charts/tree/index.tsx

@@ -3,6 +3,7 @@
  * ECharts 内置 tree 类型
  */
 import React, { memo, useMemo } from 'react';
+import type { EChartsOption } from 'echarts';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { TreeChartProps, TreeSeries } from './types';
 
@@ -44,7 +45,7 @@ const TreeChart: React.FC<TreeChartProps> = memo((props) => {
       type: 'tree',
       layout,
       orient,
-      data: treeData,
+      _data: treeData,
       showLine,
     };
 
@@ -106,7 +107,9 @@ const TreeChart: React.FC<TreeChartProps> = memo((props) => {
     itemStyle,
   ]);
 
-  return <BaseChartWrapper {...restProps} option={mergedOption as any} chartType="tree" />;
+  return (
+    <BaseChartWrapper {...restProps} option={mergedOption as EChartsOption} chartType="tree" />
+  );
 });
 
 TreeChart.displayName = 'TreeChart';

package/src/charts/tree/types.ts

@@ -2,7 +2,7 @@
  * 树图类型定义
  * ECharts 内置 tree 类型
  */
-import type { EChartsOption, EChartsType, ECElementEvent } from 'echarts';
+import type { EChartsType, ECElementEvent, EChartsOption } from 'echarts';
 
 // ============================================================================
 // 树图数据节点
@@ -15,7 +15,7 @@ export interface TreeNode {
   /** 节点名称 */
   name: string;
   /** 节点值 */
-  value?: number;
+  _value?: number;
   /** 是否展开 */
   collapsed?: boolean;
   /** 图标 */
@@ -35,7 +35,7 @@ export interface TreeNode {
   /** 子节点 */
   children?: TreeNode[];
   /** 其他自定义属性 */
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 // ============================================================================
@@ -49,7 +49,7 @@ export interface TreeSeries {
   /** 系列名称 */
   name?: string;
   /** 数据数组 (树的根节点) */
-  data?: TreeNode[];
+  _data?: TreeNode[];
   /** 树的布局: 'orthogonal' | 'radial' */
   layout?: string;
   /** 树的方向: 'horizontal' | 'vertical' */
@@ -67,7 +67,7 @@ export interface TreeSeries {
   /** 标签对齐 */
   labelAlign?: 'left' | 'right' | 'center';
   /** 标签格式化 */
-  labelFormatter?: string | ((value: number, data: TreeNode) => string);
+  labelFormatter?: string | ((_value: number, _data: TreeNode) => string);
   /** 线条样式 */
   lineStyle?: Record<string, unknown>;
   /** 是否显示连接线 */
@@ -95,7 +95,7 @@ export interface TreeSeries {
   /** 动画缓动函数 */
   animationEasing?: string;
   /** 动画延迟 */
-  animationDelay?: number | ((idx: number) => number);
+  animationDelay?: number | ((_idx: number) => number);
   /** 动画更新时长 */
   animationDurationUpdate?: number;
   /** 动画更新缓动函数 */
@@ -166,9 +166,9 @@ export interface TreeChartProps {
   /** 加载配置 */
   loadingOption?: Record<string, unknown>;
   /** 图表初始化回调 */
-  onChartInit?: (chart: EChartsType) => void;
+  onChartInit?: (_chart: EChartsType) => void;
   /** 图表就绪回调 */
-  onChartReady?: (chart: EChartsType) => void;
+  onChartReady?: (_chart: EChartsType) => void;
   /** 事件回调 */
-  onEvents?: Record<string, (params: ECElementEvent) => void>;
+  onEvents?: Record<string, (_params: ECElementEvent) => void>;
 }