@agions/taroviz 1.3.1 → 1.6.0

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

@@ -0,0 +1,164 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ParallelChart from '../index';
+
+// Mock ECharts and adapters
+jest.mock('echarts/core', () => ({
+  use: jest.fn(),
+  init: jest.fn(() => ({
+    setOption: jest.fn(),
+    showLoading: jest.fn(),
+    hideLoading: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
+    dispose: jest.fn(),
+    resize: jest.fn(),
+  })),
+  getInstanceByDom: jest.fn(),
+}));
+
+// Mock ECharts components
+jest.mock('echarts/components', () => ({
+  GridComponent: jest.fn(),
+  TooltipComponent: jest.fn(),
+  TitleComponent: jest.fn(),
+  LegendComponent: jest.fn(),
+}));
+
+// Mock BaseChartWrapper
+jest.mock('../../common/BaseChartWrapper', () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="parallel-chart"
+      className={`taroviz-parallel ${props.className || ''}`}
+      style={{ width: props.width || '100%', height: props.height || 300, ...props.style }}
+    >
+      <div data-testid="chart-option">{JSON.stringify(props.option)}</div>
+    </div>
+  ),
+}));
+
+describe('ParallelChart', () => {
+  const basicOption = {
+    title: { text: '平行坐标图测试' },
+    parallel: {
+      left: '5%',
+      right: '10%',
+      bottom: '10%',
+      top: '20%',
+      height: '50%',
+    },
+    parallelAxisDefault: {
+      type: 'value' as const,
+      name: '指标',
+    },
+    series: [{
+      type: 'parallel' as const,
+      lineStyle: { width: 2, opacity: 0.5 },
+      data: [
+        [1, 55, 9, 56, 0.46, 2, 35],
+        [2, 25, 11, 21, 0.65, 2, 33],
+        [3, 56, 7, 63, 0.92, 3, 45],
+      ],
+    }],
+  };
+
+  describe('Basic Rendering', () => {
+    it('should render without crashing', () => {
+      render(<ParallelChart option={basicOption} />);
+      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+    });
+
+    it('should render with custom width and height', () => {
+      render(<ParallelChart option={basicOption} width={600} height={500} />);
+      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+    });
+
+    it('should have correct display name', () => {
+      expect(ParallelChart.displayName).toBe('ParallelChart');
+    });
+
+    it('should pass option to wrapper', () => {
+      render(<ParallelChart option={basicOption} />);
+      expect(screen.getByTestId('chart-option')).toHaveTextContent('平行坐标图测试');
+    });
+  });
+
+  describe('Props', () => {
+    it('should accept className prop', () => {
+      render(<ParallelChart option={basicOption} className="test-class" />);
+      expect(screen.getByTestId('parallel-chart')).toHaveClass('test-class');
+    });
+
+    it('should accept style prop', () => {
+      const style = { padding: '10px' };
+      render(<ParallelChart option={basicOption} style={style} />);
+      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+    });
+
+    it('should accept loading prop', () => {
+      render(<ParallelChart option={basicOption} loading={true} />);
+      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+    });
+
+    it('should accept theme prop', () => {
+      render(<ParallelChart option={basicOption} theme="dark" />);
+      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+    });
+  });
+
+  describe('Chart Options', () => {
+    it('should render with expandable axis', () => {
+      const expandableOption = {
+        ...basicOption,
+        parallel: {
+          ...basicOption.parallel,
+          axisExpandable: true,
+          axisExpandCenter: 3,
+          axisExpandCount: 3,
+        },
+      };
+      render(<ParallelChart option={expandableOption} />);
+      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+    });
+
+    it('should render with custom lineStyle', () => {
+      const customLineOption = {
+        ...basicOption,
+        series: [{
+          type: 'parallel' as const,
+          lineStyle: { width: 3, color: '#1890ff', opacity: 0.8 },
+          data: [[1, 55, 9, 56, 0.46, 2, 35]],
+        }],
+      };
+      render(<ParallelChart option={customLineOption} />);
+      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+    });
+
+    it('should render with category axis', () => {
+      const categoryOption = {
+        title: { text: '分类轴测试' },
+        parallel: { left: '5%', right: '10%', bottom: '10%', top: '20%' },
+        parallelAxisDefault: {
+          type: 'category' as const,
+          data: ['A', 'B', 'C', 'D', 'E'],
+          name: '分类',
+        },
+        series: [{
+          type: 'parallel' as const,
+          data: [
+            ['A', 55, 9, 56, 0.46, 2, 35],
+            ['B', 25, 11, 21, 0.65, 2, 33],
+          ],
+        }],
+      };
+      render(<ParallelChart option={categoryOption} />);
+      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+    });
+  });
+});

package/src/charts/parallel/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * 平行坐标图组件
+ * 用于展示高维数据各维度之间的关系
+ */
+import React, { memo } from 'react';
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { ParallelChartProps } from './types';
+
+const ParallelChart: React.FC<ParallelChartProps> = memo((props) => (
+  <BaseChartWrapper {...props} chartType="parallel" />
+));
+
+ParallelChart.displayName = 'ParallelChart';
+
+export default ParallelChart;
+
+// 导出类型
+export type { ParallelChartProps, ParallelOption, ParallelAxisSetting } from './types';

package/src/charts/parallel/types.ts

@@ -0,0 +1,73 @@
+/**
+ * 平行坐标图类型定义
+ */
+
+export type ParallelChartProps = {
+  option?: ParallelOption;
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  onEvents?: Record<string, (params: any) => void>;
+  loading?: boolean;
+  loadingOption?: any;
+  theme?: string;
+  onChartReady?: (chart: any) => void;
+  opts?: {
+    devicePixelRatio?: number;
+    renderer?: 'canvas' | 'svg';
+  };
+};
+
+export interface ParallelOption {
+  title?: any;
+  legend?: any;
+  parallel?: ParallelAxisSetting;
+  parallelAxisDefault?: ParallelAxisItem;
+  grid?: any;
+  tooltip?: any;
+  series: ParallelSeriesItem[];
+  dataset?: any;
+  color?: string[];
+  backgroundColor?: any;
+  textStyle?: any;
+  [key: string]: any;
+}
+
+export interface ParallelAxisSetting {
+  left?: number | string;
+  right?: number | string;
+  top?: number | string;
+  bottom?: number | string;
+  width?: number | string;
+  height?: number | string;
+  axisExpandable?: boolean;
+  axisExpandCenter?: number;
+  axisExpandCount?: number;
+  axisExpandWidth?: number;
+  z?: number;
+}
+
+export interface ParallelAxisItem {
+  type?: 'value' | 'category';
+  name?: string;
+  nameLocation?: 'start' | 'middle' | 'center' | 'end';
+  nameTextStyle?: any;
+  nameGap?: number;
+  silent?: boolean;
+  data?: any[];
+  dimension?: number;
+  parallelIndex?: number;
+}
+
+export interface ParallelSeriesItem {
+  type: 'parallel';
+  name?: string;
+  data?: any[];
+  lineStyle?: any;
+  emphasis?: any;
+  smooth?: boolean | number;
+  symbol?: string;
+  symbolSize?: number;
+  itemStyle?: any;
+}

package/src/charts/pie/index.tsx

@@ -1,19 +1,14 @@
 /**
- * 饼图组件
+ * PieChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { BaseChartProps } from '../types';
-
-// 导入统一注册的 echarts
 import '@/core/echarts';
 
-/**
- * 饼图组件
- */
-const PieChart: React.FC<BaseChartProps> = (props) => (
+const PieChart: React.FC<BaseChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="pie-chart" />
-);
+));
+PieChart.displayName = 'PieChart';
 
 export default PieChart;

package/src/charts/radar/index.tsx

@@ -1,18 +1,14 @@
 /**
- * 雷达图组件
+ * RadarChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { RadarChartProps } from '../types';
-
 import '@/core/echarts';
 
-/**
- * 雷达图组件
- */
-const RadarChart: React.FC<RadarChartProps> = (props) => (
+const RadarChart: React.FC<RadarChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="radar-chart" />
-);
+));
+RadarChart.displayName = 'RadarChart';
 
 export default RadarChart;

package/src/charts/scatter/index.tsx

@@ -1,18 +1,14 @@
 /**
- * 散点图组件
+ * ScatterChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { ScatterChartProps } from '../types';
-
 import '@/core/echarts';
 
-/**
- * 散点图组件
- */
-const ScatterChart: React.FC<ScatterChartProps> = (props) => (
+const ScatterChart: React.FC<ScatterChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="scatter-chart" />
-);
+));
+ScatterChart.displayName = 'ScatterChart';
 
 export default ScatterChart;

package/src/charts/types.ts

@@ -713,7 +713,7 @@ export interface SankeyChartProps extends BaseChartProps {
  * 箱线图属性
  * 用于展示数据的分布情况
  */
-export interface BoxplotChartProps extends BaseChartProps {
+export interface BoxplotChartProps extends Omit<BaseChartProps, 'data'> {
   /** 图表类型 */
   type?: 'boxplot';
 
@@ -743,9 +743,9 @@ export interface BoxplotChartProps extends BaseChartProps {
  * K线图/股票图属性
  * 用于展示股票、外汇等金融数据
  */
-export interface CandlestickChartProps extends BaseChartProps {
+export interface CandlestickChartProps extends Omit<BaseChartProps, 'data'> {
   /** K线数据数组，每项为 [open, close, lowest, highest] */
-  data?: number[][];
+  candlestickData?: number[][];
 
   /** X轴数据 */
   xAxisData?: (string | number)[];
@@ -874,4 +874,48 @@ export interface ChartBuilderOptions<T extends BaseChartProps = BaseChartProps>
 }
 
 // 重新导出 ECharts 类型
-export type { EChartsOption, ECharts, EChartsCoreOption };
+export type { EChartsOption, ECharts } from 'echarts';
+
+// EChartsCoreOption 是 ECBasicOption 的别名
+export type { ECBasicOption as EChartsCoreOption } from 'echarts/types/dist/shared';
+
+/**
+ * 词云图属性
+ * 用于展示文本数据的词频分布
+ */
+export interface WordCloudChartProps extends BaseChartProps {
+  /** 词云数据 - 也可以通过 option.series[0].data 传入 */
+  wordCloudData?: Array<{
+    name: string;
+    value: number;
+    textStyle?: Record<string, unknown>;
+    emphasis?: Record<string, unknown>;
+  }>;
+
+  /** 词云形状 */
+  shape?: 'circle' | 'cardioid' | 'diamond' | 'triangle' | 'star' | 'pentagon' | 'square';
+
+  /** 字体大小范围 */
+  sizeRange?: [number, number];
+
+  /** 词云旋转角度范围 */
+  rotationRange?: [number, number];
+
+  /** 旋转步长 */
+  rotationStep?: number;
+
+  /** 词云间距 */
+  gridSize?: number;
+
+  /** 是否绘制词云轮廓 */
+  drawOutOfBound?: boolean;
+
+  /** 文字样式 */
+  textStyle?: Record<string, unknown>;
+
+  /** 强调状态 */
+  emphasis?: {
+    focus?: 'self' | 'adjacency';
+    textStyle?: Record<string, unknown>;
+  };
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @version v1.5.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import WordCloudChart from '../index';
+
+describe('WordCloudChart', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<WordCloudChart />);
+    expect(container).toBeTruthy();
+  });
+
+  it('renders with custom width and height', () => {
+    const { container } = render(<WordCloudChart width={600} height={400} />);
+    expect(container.firstChild).toHaveStyle({ width: '600px', height: '400px' });
+  });
+
+  it('renders with word data', () => {
+    const option = {
+      series: [
+        {
+          type: 'wordCloud' as const,
+          data: [
+            { name: 'JavaScript', value: 10000 },
+            { name: 'TypeScript', value: 8000 },
+            { name: 'React', value: 6000 },
+          ],
+        },
+      ],
+    } as any;
+    const { container } = render(<WordCloudChart option={option} />);
+    expect(container).toBeTruthy();
+  });
+});

package/src/charts/wordcloud/index.tsx

@@ -0,0 +1,13 @@
+/**
+ * WordCloudChart组件
+ */
+import React, { memo } from 'react';
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { WordCloudChartProps } from '../types';
+
+const WordCloudChart: React.FC<WordCloudChartProps> = memo((props) => (
+  <BaseChartWrapper {...props} chartType="wordcloud-chart" />
+));
+WordCloudChart.displayName = 'WordCloudChart';
+
+export default WordCloudChart;

package/src/core/animation/AnimationManager.ts

@@ -141,6 +141,9 @@ export class AnimationManager {
   public static getInstance(config?: AnimationManagerConfig): AnimationManager {
     if (!AnimationManager.instance) {
       AnimationManager.instance = new AnimationManager(config);
+    } else if (config) {
+      // 如果传入了新配置，更新配置
+      AnimationManager.instance.updateConfig(config);
     }
     return AnimationManager.instance;
   }
@@ -345,6 +348,18 @@ export class AnimationManager {
     };
   }
 
+  /**
+   * 更新配置
+   */
+  public updateConfig(config: AnimationManagerConfig): void {
+    if (config.defaultConfig) {
+      this.defaultConfig = config.defaultConfig;
+    }
+    if (config.performance) {
+      this.updatePerformanceConfig(config.performance);
+    }
+  }
+
   /**
    * 获取性能配置
    */

package/src/core/components/Annotation.tsx

@@ -2,7 +2,7 @@
  * TaroViz 图表标注组件
  * 支持在图表上添加标记线、标记区域、散点等标注
  */
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import type { EChartsOption } from 'echarts';
 
 /**
@@ -209,7 +209,9 @@ export function convertAnnotationToMarkArea(config: MarkAreaConfig): EChartsOpti
 /**
  * 将散点标注配置转换为 ECharts 格式
  */
-export function convertAnnotationToScatter(config: ScatterAnnotationConfig): EChartsOption['series'] {
+export function convertAnnotationToScatter(
+  config: ScatterAnnotationConfig
+): EChartsOption['series'] {
   const { data, symbol, symbolSize, itemStyle, label } = config;
 
   return [
@@ -227,7 +229,7 @@ export function convertAnnotationToScatter(config: ScatterAnnotationConfig): ECh
         },
         data,
       },
-    },
+    } as any,
   ];
 }
 
@@ -239,18 +241,22 @@ export function useAnnotation(props: AnnotationProps): EChartsOption {
   const { type, markLine, markArea, scatter } = props;
 
   return useMemo(() => {
-    const series: EChartsOption['series'] = [];
+    // 使用 any 避免类型复杂性问题
+    const series: any[] = [];
 
     if (type === 'line' && markLine) {
-      series.push(...convertAnnotationToMarkLine(markLine));
+      const markLineResult = convertAnnotationToMarkLine(markLine);
+      series.push(...(Array.isArray(markLineResult) ? markLineResult : [markLineResult]));
     }
 
     if (type === 'area' && markArea) {
-      series.push(...convertAnnotationToMarkArea(markArea));
+      const markAreaResult = convertAnnotationToMarkArea(markArea);
+      series.push(...(Array.isArray(markAreaResult) ? markAreaResult : [markAreaResult]));
     }
 
     if (type === 'scatter' && scatter) {
-      series.push(...convertAnnotationToScatter(scatter));
+      const scatterResult = convertAnnotationToScatter(scatter);
+      series.push(...(Array.isArray(scatterResult) ? scatterResult : [scatterResult]));
     }
 
     return { series };
@@ -263,46 +269,42 @@ export function useAnnotation(props: AnnotationProps): EChartsOption {
 export const AnnotationPresets = {
   /** 平均线 */
   averageLine: (color = '#1890ff'): MarkLineConfig => ({
-    data: [{ type: 'average', name: '平均值' }],
+    data: [{ type: 'average', name: '平均值' }] as any,
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 最大值线 */
   maxLine: (color = '#f5222d'): MarkLineConfig => ({
-    data: [{ type: 'max', name: '最大值' }],
+    data: [{ type: 'max', name: '最大值' }] as any,
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 最小值线 */
   minLine: (color = '#52c41a'): MarkLineConfig => ({
-    data: [{ type: 'min', name: '最小值' }],
+    data: [{ type: 'min', name: '最小值' }] as any,
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 警戒线 */
   thresholdLine: (value: number, color = '#faad14'): MarkLineConfig => ({
-    data: [{ yAxis: value, name: '警戒线' }],
+    data: [{ yAxis: value, name: '警戒线' }] as any,
     lineStyle: { color, type: 'solid', width: 2 },
     label: { show: true, position: 'start', color },
   }),
 
   /** 目标区域 */
   targetArea: (min: number, max: number, color = 'rgba(82, 196, 26, 0.1)'): MarkAreaConfig => ({
-    data: [
-      [{ yAxis: min }, { yAxis: max }],
-    ],
+    data: [[{ yAxis: min }, { yAxis: max }]],
     style: { color, opacity: 0.3 },
     label: { show: true, position: 'inside', color: '#52c41a' },
   }),
 
   /** 预警区域 */
   warningArea: (min: number, max: number, color = 'rgba(250, 173, 20, 0.1)'): MarkAreaConfig => ({
-    data: [
-      [{ yAxis: min }, { yAxis: max }],
-    ],
+    data: [[{ yAxis: min }, { yAxis: max }]],
     style: { color, opacity: 0.3 },
     label: { show: true, position: 'inside', color: '#faad14' },
   }),
@@ -319,17 +321,20 @@ export function createCompositeAnnotation(
     scatter?: ScatterAnnotationConfig;
   }>
 ): EChartsOption {
-  const allSeries: EChartsOption['series'] = [];
+  const allSeries: any[] = [];
 
   annotations.forEach((annotation) => {
     if (annotation.type === 'line' && annotation.markLine) {
-      allSeries.push(...convertAnnotationToMarkLine(annotation.markLine));
+      const result = convertAnnotationToMarkLine(annotation.markLine);
+      allSeries.push(...(Array.isArray(result) ? result : [result]));
     }
     if (annotation.type === 'area' && annotation.markArea) {
-      allSeries.push(...convertAnnotationToMarkArea(annotation.markArea));
+      const result = convertAnnotationToMarkArea(annotation.markArea);
+      allSeries.push(...(Array.isArray(result) ? result : [result]));
     }
     if (annotation.type === 'scatter' && annotation.scatter) {
-      allSeries.push(...convertAnnotationToScatter(annotation.scatter));
+      const result = convertAnnotationToScatter(annotation.scatter);
+      allSeries.push(...(Array.isArray(result) ? result : [result]));
     }
   });