@agions/taroviz 1.11.5 → 2.0.3

package/src/charts/index.ts

@@ -3,28 +3,15 @@
  * 使用工厂函数消除重复代码
  */
 
-import { createChartComponent, createChartComponentWithOptionCast } from './createChartComponent';
+import { createChartComponent } from './createChartComponent';
 import type {
-  BaseChartProps,
   LineChartProps,
   BarChartProps,
   PieChartProps,
   ScatterChartProps,
-  RadarChartProps,
-  FunnelChartProps,
-  GaugeChartProps,
-  HeatmapChartProps,
-  SunburstChartProps,
   TreeMapChartProps,
-  SankeyChartProps,
-  GraphChartProps,
-  WordCloudChartProps,
-  CandlestickChartProps,
+  SunburstChartProps,
 } from './types';
-import type { BoxplotChartProps } from './boxplot/types';
-import type { ParallelChartProps } from './parallel/types';
-import type { LiquidChartProps } from './liquid/types';
-import type { TreeChartProps } from './tree/types';
 
 // ===== 标准图表（用工厂函数创建）=====
 
@@ -36,13 +23,6 @@ export const ScatterChart = createChartComponent<ScatterChartProps>(
   'ScatterChart',
   'scatter-chart'
 );
-export const RadarChart = createChartComponent<RadarChartProps>('RadarChart', 'radar-chart');
-export const HeatmapChart = createChartComponent<HeatmapChartProps>(
-  'HeatmapChart',
-  'heatmap-chart'
-);
-export const GaugeChart = createChartComponent<GaugeChartProps>('GaugeChart', 'gauge-chart');
-export const FunnelChart = createChartComponent<FunnelChartProps>('FunnelChart', 'funnel-chart');
 
 /** 扩展图表 */
 export const TreeMapChart = createChartComponent<TreeMapChartProps>(
@@ -53,45 +33,55 @@ export const SunburstChart = createChartComponent<SunburstChartProps>(
   'SunburstChart',
   'sunburst-chart'
 );
-export const SankeyChart = createChartComponent<SankeyChartProps>('SankeyChart', 'sankey-chart');
-export const GraphChart = createChartComponent<GraphChartProps>('GraphChart', 'graph-chart');
-export const WordCloudChart = createChartComponent<WordCloudChartProps>(
-  'WordCloudChart',
-  'wordcloud-chart'
-);
-export const CandlestickChart = createChartComponent<CandlestickChartProps>(
-  'CandlestickChart',
-  'candlestick-chart'
-);
 
-/** 需要 option 类型转换的图表 */
-export const BoxplotChart = createChartComponentWithOptionCast<BoxplotChartProps>(
-  'BoxplotChart',
-  'boxplot'
-);
-export const ParallelChart = createChartComponentWithOptionCast<ParallelChartProps>(
-  'ParallelChart',
-  'parallel'
-);
+// ===== 特殊图表（自定义实现）=====
 
-// ===== 特殊图表（保留自定义逻辑）=====
+/** 热力图 - 使用自定义实现 */
+export { default as HeatmapChart } from './heatmap';
 
-export { default as LiquidChart } from './liquid';
+/** 漏斗图 - 使用自定义实现 */
+export { default as FunnelChart } from './funnel';
+
+/** 平行坐标图 - 使用自定义实现 */
+export { default as ParallelChart } from './parallel';
+
+/** 箱线图 - 使用自定义实现 */
+export { default as BoxplotChart } from './boxplot';
+
+/** 树图 - 使用自定义实现 */
 export { default as TreeChart } from './tree';
 
-// ===== 导出类型 =====
+/** 雷达图 - 使用自定义实现 */
+export { default as RadarChartCustom } from './radar';
+
+/** 关系图 - 使用自定义实现 */
+export { default as GraphChart } from './graph';
+
+/** 桑基图 - 使用自定义实现 */
+export { default as SankeyChart } from './sankey';
+
+/** 词云图 - 使用自定义实现 */
+export { default as WordCloudChart } from './wordcloud';
+
+// ===== 类型导出 =====
 
-export * from './types';
-export type { BoxplotChartProps, BoxplotOption, BoxplotSeriesItem } from './boxplot/types';
-export type { ParallelChartProps, ParallelOption, ParallelAxisSetting } from './parallel/types';
 export type {
-  LiquidChartProps,
-  LiquidOption,
-  LiquidShape,
-  LiquidSeries,
-  LiquidSeriesDataItem,
-} from './liquid/types';
-export type { TreeChartProps, TreeOption, TreeNode, TreeSeries } from './tree/types';
-
-/** 版本信息 */
-export { VERSION as version } from '../core/version';
+  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();
+  });
+});

package/src/charts/liquid/index.tsx

@@ -4,18 +4,11 @@
  * 使用 ECharts 5.x 自定义系列实现水球图功能，
  * 不依赖有 zrender 兼容性问题的 echarts-liquidfill。
  */
-import React, { memo, useEffect, useRef, useMemo } from 'react';
-import type {
-  EChartsType,
-  ECElementEvent,
-  EChartsOption,
-  CustomSeriesRenderItem,
-  CustomSeriesRenderItemReturn,
-} from 'echarts';
-import { getAdapter } from '../../adapters';
-import { uuid } from '../../core/utils';
-import { processAdapterConfig } from '../utils';
+import React, { memo, useMemo } from 'react';
+import type { EChartsOption, CustomSeriesRenderItem, CustomSeriesRenderItemReturn } from 'echarts';
 import { LiquidChartProps } from './types';
+import type { BaseChartProps } from '../types';
+import BaseChartWrapper from '../common/BaseChartWrapper';
 
 /** 包装容器的最大半径（px），用于归一化半径 */
 const MAX_RADIUS = 100;
@@ -216,18 +209,6 @@ function buildLiquidOption(props: {
 const LiquidChart: React.FC<LiquidChartProps> = memo((props) => {
   const {
     option,
-    width = '100%',
-    height = '300px',
-    theme,
-    style = {},
-    className = '',
-    autoResize = true,
-    loading = false,
-    loadingOption,
-    onChartInit,
-    onChartReady,
-    renderer = 'canvas',
-    onEvents = {},
     waveData = [0.6],
     shape,
     amplitude,
@@ -238,13 +219,9 @@ const LiquidChart: React.FC<LiquidChartProps> = memo((props) => {
     color,
     showLabel = true,
     labelFormatter,
+    ...rest
   } = props;
 
-  const chartId = useRef<string>(`liquid-${uuid()}`);
-  const chartInstance = useRef<EChartsType | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // 构建 ECharts 配置
   const liquidOption = useMemo((): EChartsOption => {
     const baseOption = (option || {}) as EChartsOption;
 
@@ -286,113 +263,10 @@ const LiquidChart: React.FC<LiquidChartProps> = memo((props) => {
     labelFormatter,
   ]);
 
-  // 处理图表初始化
-  useEffect(() => {
-    let mounted = true;
-
-    const initChart = async (): Promise<(() => void) | undefined> => {
-      if (!mounted || !containerRef.current) return undefined;
-
-      const initConfig = processAdapterConfig({
-        canvasId: chartId.current,
-        containerRef,
-        width,
-        height,
-        theme,
-        autoResize,
-        renderer,
-        option: liquidOption,
-        onInit: (instance: EChartsType) => {
-          chartInstance.current = instance;
-
-          // 绑定事件
-          if (onEvents) {
-            Object.entries(onEvents).forEach(([eventName, handler]) => {
-              (
-                instance as unknown as { on: (e: string, h: (ev: ECElementEvent) => void) => void }
-              ).on(eventName, handler);
-            });
-          }
-
-          if (onChartInit) {
-            onChartInit(instance);
-          }
-
-          if (onChartReady) {
-            onChartReady(instance);
-          }
-        },
-      });
-
-      const adapter = await getAdapter(initConfig);
-      adapter.init();
-
-      return () => {
-        const instance = chartInstance.current;
-        if (instance) {
-          if (onEvents) {
-            Object.keys(onEvents).forEach((eventName) => {
-              instance.off(eventName);
-            });
-          }
-          instance.dispose();
-          chartInstance.current = null;
-        }
-      };
-    };
-
-    let cleanupFn: (() => void) | undefined;
-    initChart().then((cleanup) => {
-      cleanupFn = cleanup;
-    });
-
-    return () => {
-      mounted = false;
-      cleanupFn?.();
-    };
-  }, [
-    liquidOption,
-    width,
-    height,
-    theme,
-    autoResize,
-    renderer,
-    onChartInit,
-    onChartReady,
-    onEvents,
-  ]);
-
-  // 更新配置
-  useEffect(() => {
-    if (chartInstance.current && liquidOption) {
-      chartInstance.current.setOption(liquidOption, true);
-    }
-  }, [liquidOption]);
-
-  // 控制加载状态
-  useEffect(() => {
-    if (chartInstance.current) {
-      if (loading) {
-        chartInstance.current.showLoading(loadingOption);
-      } else {
-        chartInstance.current.hideLoading();
-      }
-    }
-  }, [loading, loadingOption]);
-
-  // 自定义样式
-  const mergedStyle = {
-    width: typeof width === 'number' ? `${width}px` : width,
-    height: typeof height === 'number' ? `${height}px` : height,
-    ...style,
-  };
+  if (!liquidOption) return null;
 
   return (
-    <div
-      className={`taroviz-liquid ${className}`}
-      style={mergedStyle}
-      ref={containerRef as React.RefObject<HTMLDivElement>}
-    />
+    <BaseChartWrapper {...(rest as BaseChartProps)} option={liquidOption} chartType="liquid" />
   );
 });
 

package/src/charts/liquid/types.ts

@@ -12,7 +12,7 @@ import type { EChartsOption, EChartsType, ECElementEvent } from 'echarts';
 /** 水球图系列数据项 */
 export interface LiquidSeriesDataItem {
   /** 数据值，范围 [0, 1] */
-  value: number;
+  _value: number;
   /** 数据项名称 */
   name?: string;
   /** 图形样式 */
@@ -53,7 +53,7 @@ export interface LiquidSeries {
   /** 动画缓动函数 */
   animationEasing?: string;
   /** 动画延迟 */
-  animationDelay?: number | ((idx: number) => number);
+  animationDelay?: number | ((_idx: number) => number);
   /** 颜色数组 */
   color?: string[];
   /** 背景色 */
@@ -106,7 +106,7 @@ export interface LiquidChartProps {
   /** 是否显示标签 */
   showLabel?: boolean;
   /** 标签格式化 */
-  labelFormatter?: (value: number) => string;
+  labelFormatter?: (_value: number) => string;
   /** 主题 */
   theme?: string | Record<string, unknown>;
   /** 样式 */
@@ -122,9 +122,9 @@ export interface LiquidChartProps {
   /** 加载配置 */
   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>;
 }

package/src/charts/parallel/types.ts

@@ -2,7 +2,7 @@
  * 平行坐标图类型定义
  */
 
-import type { EChartsType, ECElementEvent } from 'echarts';
+import type { EChartsOption, EChartsType, ECElementEvent } from 'echarts';
 import type { LoadingOptions } from '../types';
 
 export type ParallelChartProps = {
@@ -11,11 +11,11 @@ export type ParallelChartProps = {
   height?: string | number;
   className?: string;
   style?: React.CSSProperties;
-  onEvents?: Record<string, (params: ECElementEvent) => void>;
+  onEvents?: Record<string, (_params: ECElementEvent) => void>;
   loading?: boolean;
   loadingOption?: LoadingOptions;
   theme?: string;
-  onChartReady?: (chart: EChartsType) => void;
+  onChartReady?: (_chart: EChartsType) => void;
   opts?: {
     devicePixelRatio?: number;
     renderer?: 'canvas' | 'svg';

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

@@ -0,0 +1,210 @@
+/**
+ * RadarChart 组件测试
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import RadarChart from '../index';
+
+// 使用正确的 mock 方式，参考 parallel 图表的测试
+jest.mock('../../common/BaseChartWrapper');
+jest.mock('echarts/charts', () => ({ RadarChart: jest.fn() }));
+
+describe('RadarChart', () => {
+  const mockIndicators = [
+    { name: '速度', max: 100 },
+    { name: '力量', max: 100 },
+    { name: '技巧', max: 100 },
+    { name: '耐力', max: 100 },
+    { name: '敏捷', max: 100 },
+  ];
+
+  const mockData = [
+    {
+      name: '角色 A',
+      value: [80, 70, 90, 60, 85],
+    },
+    {
+      name: '角色 B',
+      value: [60, 85, 75, 90, 70],
+    },
+  ];
+
+  it('应该渲染雷达图组件', () => {
+    render(<RadarChart indicators={mockIndicators} data={mockData} width={400} height={400} />);
+
+    expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
+  });
+
+  it('应该传递正确的 option 到 BaseChart', () => {
+    render(<RadarChart indicators={mockIndicators} data={mockData} width={400} 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.radar).toBeDefined();
+    expect(option.radar.indicator).toHaveLength(5);
+    expect(option.series).toHaveLength(2);
+    expect(option.series[0].type).toBe('radar');
+  });
+
+  it('应该支持自定义 startAngle', () => {
+    render(
+      <RadarChart
+        indicators={mockIndicators}
+        data={mockData}
+        startAngle={0}
+        width={400}
+        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.radar.startAngle).toBe(0);
+  });
+
+  it('应该支持 areaStyle 配置', () => {
+    render(
+      <RadarChart
+        indicators={mockIndicators}
+        data={mockData}
+        areaStyle={{
+          color: '#ff0000',
+          opacity: 0.5,
+        }}
+        width={400}
+        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[0].areaStyle).toBeDefined();
+    expect(option.series[0].areaStyle.color).toBe('#ff0000');
+    expect(option.series[0].areaStyle.opacity).toBe(0.5);
+  });
+
+  it('应该支持 label 配置', () => {
+    render(
+      <RadarChart
+        indicators={mockIndicators}
+        data={mockData}
+        label={{
+          show: true,
+          position: 'inside',
+        }}
+        width={400}
+        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[0].label.show).toBe(true);
+    expect(option.series[0].label.position).toBe('inside');
+  });
+
+  it('应该支持 optionMerge 自定义配置', () => {
+    const customTitle = { title: { text: '自定义标题', left: 'center' } };
+
+    render(
+      <RadarChart
+        indicators={mockIndicators}
+        data={mockData}
+        optionMerge={customTitle}
+        width={400}
+        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('当 indicators 为空时应该返回 null', () => {
+    const { container } = render(
+      <RadarChart indicators={[]} data={mockData} width={400} height={400} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('当 data 为空时应该返回 null', () => {
+    const { container } = render(
+      <RadarChart indicators={mockIndicators} data={[]} width={400} height={400} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('应该支持多个数据系列对比', () => {
+    const multiData = [
+      { name: '系列 1', value: [80, 70, 90, 60, 85] },
+      { name: '系列 2', value: [60, 85, 75, 90, 70] },
+      { name: '系列 3', value: [90, 60, 80, 75, 80] },
+    ];
+
+    render(<RadarChart indicators={mockIndicators} data={multiData} width={400} 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).toHaveLength(3);
+    expect(option.legend.data).toHaveLength(3);
+  });
+
+  it('应该支持自定义 lineStyle', () => {
+    render(
+      <RadarChart
+        indicators={mockIndicators}
+        data={mockData}
+        lineStyle={{
+          width: 3,
+          type: 'dashed',
+          color: '#ff0000',
+        }}
+        width={400}
+        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[0].lineStyle.width).toBe(3);
+    expect(option.series[0].lineStyle.type).toBe('dashed');
+  });
+
+  it('应该支持 centerCircle 配置', () => {
+    render(
+      <RadarChart
+        indicators={mockIndicators}
+        data={mockData}
+        centerCircle={true}
+        centerCircleSize={0.3}
+        width={400}
+        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.radar.centerCircle).toBe(true);
+    expect(option.radar.centerCircleSize).toBe(0.3);
+  });
+});