@agions/taroviz 1.11.5 → 2.0.3

package/src/charts/radar/index.tsx

@@ -0,0 +1,147 @@
+/**
+ * TaroViz 雷达图组件
+ *
+ * 基于 ECharts radar 系列实现多指标对比可视化
+ */
+import { createOptionChartComponent } from '@/charts/createOptionChartComponent';
+import type { RadarChartProps } from './types';
+// 类型 RadarIndicator、RadarDataItem 通过下方 export type 导出供外部使用
+
+/**
+ * 构建雷达图 ECharts option
+ */
+function buildRadarOption(props: RadarChartProps) {
+  const {
+    indicators,
+    data,
+    startAngle = 90,
+    centerCircle = false,
+    centerCircleSize = 0,
+    areaStyle,
+    lineStyle,
+    label,
+    smooth = false,
+    optionMerge,
+  } = props;
+
+  // 验证数据
+  if (!indicators || indicators.length === 0) {
+    console.warn('[TaroViz] RadarChart: indicators is required');
+    return null;
+  }
+
+  if (!data || data.length === 0) {
+    console.warn('[TaroViz] RadarChart: data is required');
+    return null;
+  }
+
+  // 验证数据维度匹配
+  const firstDataItem = data[0];
+  if (firstDataItem.value.length !== indicators.length) {
+    console.warn(
+      `[TaroViz] RadarChart: data value length (${firstDataItem.value.length}) ` +
+        `does not match indicators count (${indicators.length})`
+    );
+  }
+
+  // 构建雷达图 series
+  const series = data.map((item, index) => ({
+    type: 'radar' as const,
+    data: [item],
+    symbol: 'circle' as const,
+    symbolSize: 6,
+    lineStyle: {
+      width: lineStyle?.width ?? 2,
+      type: lineStyle?.type ?? ('solid' as const),
+      color: lineStyle?.color,
+    },
+    areaStyle: areaStyle
+      ? {
+          color: areaStyle.color,
+          opacity: areaStyle.opacity ?? 0.3,
+        }
+      : undefined,
+    label: label
+      ? {
+          show: label.show ?? false,
+          position: label.position ?? ('outside' as const),
+        }
+      : undefined,
+    itemStyle: {
+      color: `rgba(54, 157, 255, ${0.1 + index * 0.1})`,
+      borderColor: '#369dff',
+      borderWidth: 2,
+    },
+    emphasis: {
+      focus: 'series' as const,
+    },
+    smooth,
+  }));
+
+  // 构建 indicator 配置
+  const indicatorConfig = indicators.map((ind) => ({
+    name: ind.name,
+    max: ind.max,
+    min: ind.min ?? 0,
+  }));
+
+  const option: any = {
+    radar: {
+      indicator: indicatorConfig,
+      startAngle,
+      center: ['50%', '50%'],
+      radius: centerCircle ? `${70 - centerCircleSize * 30}%` : '70%',
+      centerCircle,
+      centerCircleSize,
+      splitNumber: 5,
+      axisName: {
+        color: '#666',
+        fontSize: 12,
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#eee', '#ddd'],
+        },
+      },
+      splitArea: {
+        areaStyle: {
+          color: ['#fafafa', '#f5f5f5'],
+          opacity: 0.5,
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc',
+        },
+      },
+    },
+    series,
+    legend: {
+      data: data.map((d, i) => d.name || `系列 ${i + 1}`),
+      top: 30,
+    },
+    tooltip: {
+      trigger: 'item' as const,
+      formatter: (params: any) => {
+        if (!params || !params.data) return '';
+        const seriesName = params.seriesName || '未知系列';
+        const dataItem = params.data as { value: number[] };
+        const values = dataItem.value.map(
+          (v: number, i: number) => `${indicators[i]?.name || 'N/A'}: ${v}`
+        );
+        return `<b>${seriesName}</b><br/>${values.join('<br/>')}`;
+      },
+    },
+  };
+
+  // 合并自定义配置
+  if (optionMerge) {
+    Object.assign(option, optionMerge);
+  }
+
+  return option;
+}
+
+const RadarChart = createOptionChartComponent<RadarChartProps>('RadarChart', buildRadarOption);
+
+export default RadarChart;

package/src/charts/radar/types.ts

@@ -0,0 +1,13 @@
+/**
+ * TaroViz 雷达图类型定义
+ *
+ * 从主 types 文件导入基础类型，只导出组件特有的类型
+ */
+export type {
+  RadarIndicator,
+  RadarDataItem,
+  RadarAreaStyle,
+  RadarLineStyle,
+  RadarLabel,
+  RadarChartProps,
+} from '../types';

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

@@ -0,0 +1,70 @@
+/**
+ * TaroViz 桑基图组件
+ *
+ * 基于 ECharts sankey 系列实现桑基图可视化
+ */
+import { createOptionChartComponent } from '@/charts/createOptionChartComponent';
+import type { SankeyChartProps } from './types';
+// 类型 SankeyNode、SankeyLink 通过下方 export type 导出供外部使用
+
+/**
+ * 构建桑基图 ECharts option
+ */
+function buildSankeyOption(props: SankeyChartProps) {
+  const { nodes, links, nodeAlign, nodeGap, nodeWidth, orient, optionMerge } = props;
+
+  // 验证数据
+  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

@@ -45,7 +45,7 @@ const TreeChart: React.FC<TreeChartProps> = memo((props) => {
       type: 'tree',
       layout,
       orient,
-      data: treeData,
+      _data: treeData,
       showLine,
     };
 

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;
   /** 图标 */
@@ -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>;
 }