@agions/taroviz 1.3.1 → 1.6.0

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

@@ -0,0 +1,130 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import BoxplotChart 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="boxplot-chart"
+      className={`taroviz-boxplot ${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('BoxplotChart', () => {
+  const basicOption = {
+    title: { text: '箱线图测试' },
+    xAxis: { type: 'category' as const, data: ['A', 'B', 'C'] },
+    yAxis: { type: 'value' as const },
+    series: [{
+      type: 'boxplot' as const,
+      data: [
+        [850, 940, 980, 1050, 1130],
+        [920, 1000, 1050, 1150, 1200],
+        [780, 850, 920, 1050, 1150],
+      ],
+    }],
+  };
+
+  describe('Basic Rendering', () => {
+    it('should render without crashing', () => {
+      const { getByTestId } = render(<BoxplotChart option={basicOption} />);
+      expect(getByTestId('boxplot-chart')).toBeInTheDocument();
+    });
+
+    it('should render with custom width and height', () => {
+      const { getByTestId } = render(<BoxplotChart option={basicOption} width={600} height={500} />);
+      expect(getByTestId('boxplot-chart')).toBeInTheDocument();
+    });
+
+    it('should have correct display name', () => {
+      expect(BoxplotChart.displayName).toBe('BoxplotChart');
+    });
+
+    it('should pass option to wrapper', () => {
+      const { getByTestId } = render(<BoxplotChart option={basicOption} />);
+      expect(getByTestId('chart-option')).toHaveTextContent('箱线图测试');
+    });
+  });
+
+  describe('Props', () => {
+    it('should accept className prop', () => {
+      const { getByTestId } = render(<BoxplotChart option={basicOption} className="test-class" />);
+      expect(getByTestId('boxplot-chart')).toHaveClass('test-class');
+    });
+
+    it('should accept style prop', () => {
+      const { getByTestId } = render(<BoxplotChart option={basicOption} style={{ padding: '10px' }} />);
+      expect(getByTestId('boxplot-chart')).toBeInTheDocument();
+    });
+
+    it('should accept loading prop', () => {
+      const { getByTestId } = render(<BoxplotChart option={basicOption} loading={true} />);
+      expect(getByTestId('boxplot-chart')).toBeInTheDocument();
+    });
+
+    it('should accept theme prop', () => {
+      const { getByTestId } = render(<BoxplotChart option={basicOption} theme="dark" />);
+      expect(getByTestId('boxplot-chart')).toBeInTheDocument();
+    });
+  });
+
+  describe('Chart Options', () => {
+    it('should render with multiple data series', () => {
+      const multiOption = {
+        ...basicOption,
+        series: [
+          { type: 'boxplot' as const, name: '2024', data: [[850, 940, 980, 1050, 1130]] },
+          { type: 'boxplot' as const, name: '2025', data: [[920, 1000, 1050, 1150, 1200]] },
+        ],
+      };
+      const { getByTestId } = render(<BoxplotChart option={multiOption} />);
+      expect(getByTestId('boxplot-chart')).toBeInTheDocument();
+    });
+
+    it('should render with custom itemStyle', () => {
+      const optionWithStyle = {
+        ...basicOption,
+        series: [{
+          type: 'boxplot' as const,
+          data: [[850, 940, 980, 1050, 1130]],
+          itemStyle: { color: '#1890ff', borderColor: '#000' },
+        }],
+      };
+      const { getByTestId } = render(<BoxplotChart option={optionWithStyle} />);
+      expect(getByTestId('boxplot-chart')).toBeInTheDocument();
+    });
+  });
+});

package/src/charts/boxplot/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * 箱线图组件
+ * 用于展示数据的分布情况，包括最小值、Q1、中位数、Q3、最大值
+ */
+import React, { memo } from 'react';
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { BoxplotChartProps } from './types';
+
+const BoxplotChart: React.FC<BoxplotChartProps> = memo((props) => (
+  <BaseChartWrapper {...props} chartType="boxplot" />
+));
+
+BoxplotChart.displayName = 'BoxplotChart';
+
+export default BoxplotChart;
+
+// 导出类型
+export type { BoxplotChartProps, BoxplotOption, BoxplotSeriesItem } from './types';

package/src/charts/boxplot/types.ts

@@ -0,0 +1,46 @@
+/**
+ * 箱线图类型定义
+ */
+
+export type BoxplotChartProps = {
+  option?: BoxplotOption;
+  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';
+    useDirtyRect?: boolean;
+  };
+};
+
+export interface BoxplotOption {
+  title?: any;
+  legend?: any;
+  grid?: any;
+  xAxis?: any;
+  yAxis?: any;
+  tooltip?: any;
+  series: BoxplotSeriesItem[];
+  dataset?: any;
+  color?: string[];
+  backgroundColor?: any;
+  textStyle?: any;
+  [key: string]: any;
+}
+
+export interface BoxplotSeriesItem {
+  type: 'boxplot';
+  name?: string;
+  data?: any[];
+  itemStyle?: any;
+  emphasis?: any;
+  dimensions?: string[];
+  encode?: any;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * @version v1.5.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import CandlestickChart from '../index';
+
+describe('CandlestickChart', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<CandlestickChart />);
+    expect(container).toBeTruthy();
+  });
+
+  it('renders with custom width and height', () => {
+    const { container } = render(<CandlestickChart width={500} height={400} />);
+    expect(container.firstChild).toHaveStyle({ width: '500px', height: '400px' });
+  });
+
+  it('renders with stock data', () => {
+    const option = {
+      xAxis: { data: ['2024-01', '2024-02', '2024-03'] },
+      series: [
+        {
+          type: 'candlestick' as const,
+          data: [
+            [20, 30, 15, 35], // [open, close, lowest, highest]
+            [25, 35, 20, 40],
+            [30, 25, 20, 35],
+          ],
+        },
+      ],
+    };
+    const { container } = render(<CandlestickChart option={option} />);
+    expect(container).toBeTruthy();
+  });
+});

package/src/charts/candlestick/index.tsx

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

package/src/charts/common/BaseChartWrapper.tsx

@@ -2,7 +2,6 @@
  * 基础图表包装组件
  * 提供统一的图表初始化、渲染和生命周期管理
  */
-import * as echarts from 'echarts/core';
 import React, { useEffect, useRef, useMemo } from 'react';
 
 import { getAdapter } from '../../adapters';
@@ -31,7 +30,7 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
   chartType = 'chart',
 }) => {
   const chartId = useRef<string>(`${chartType}-${uuid()}`);
-  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const chartInstance = useRef<any>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
   // 使用 useMemo 缓存适配器配置，并处理类型问题
@@ -46,56 +45,66 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
       renderer,
       option,
     });
-  }, [width, height, theme, autoResize, renderer, option, chartType]);
+  }, [width, height, theme, autoResize, renderer, option]);
 
   // 处理图表初始化
   useEffect(() => {
-    const initConfig = processAdapterConfig({
-      ...adapterConfig,
-      onInit: (instance: echarts.ECharts) => {
-        chartInstance.current = instance;
-
-        // 绑定事件
-        if (onEvents) {
-          Object.keys(onEvents).forEach((eventName) => {
-            instance.on(eventName, onEvents[eventName]);
-          });
-        }
+    const initChart = async () => {
+      const initConfig = processAdapterConfig({
+        ...adapterConfig,
+        onInit: (instance: any) => {
+          chartInstance.current = instance;
 
-        // 初始化回调
-        if (onChartInit) {
-          onChartInit(instance);
-        }
+          // 绑定事件
+          if (onEvents) {
+            Object.keys(onEvents).forEach((eventName) => {
+              instance.on(eventName, (onEvents as any)[eventName]);
+            });
+          }
+
+          // 初始化回调
+          if (onChartInit) {
+            onChartInit(instance);
+          }
+
+          // 准备好回调
+          if (onChartReady) {
+            onChartReady(instance);
+          }
+        },
+      });
+
+      // 获取适配器并初始化（异步动态导入）
+      const adapter = await getAdapter(initConfig);
+      adapter.init();
 
-        // 准备好回调
-        if (onChartReady) {
-          onChartReady(instance);
+      // 返回清理函数
+      return () => {
+        if (chartInstance.current) {
+          // 解绑事件
+          if (onEvents) {
+            Object.keys(onEvents).forEach((eventName) => {
+              chartInstance.current?.off(eventName);
+            });
+          }
+          chartInstance.current.dispose();
+          chartInstance.current = null;
         }
-      },
-    });
+      };
+    };
 
-    // 获取适配器并初始化
-    const adapter = getAdapter(initConfig);
-    adapter.init();
+    // 执行异步初始化并获取清理函数
+    const cleanupPromise = initChart();
 
-    // 组件卸载时清理
+    // 返回清理函数
     return () => {
-      if (chartInstance.current) {
-        // 解绑事件
-        if (onEvents) {
-          Object.keys(onEvents).forEach((eventName) => {
-            chartInstance.current?.off(eventName);
-          });
-        }
-        chartInstance.current.dispose();
-        chartInstance.current = null;
-      }
+      cleanupPromise.then((cleanup) => cleanup?.());
     };
   }, [adapterConfig, onChartInit, onChartReady, onEvents]);
 
   // 更新配置
   useEffect(() => {
-    if (chartInstance.current) {
+    if (chartInstance.current && option) {
       chartInstance.current.setOption(option, true);
     }
   }, [option]);

package/src/charts/funnel/index.tsx

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

package/src/charts/gauge/index.tsx

@@ -1,18 +1,14 @@
 /**
- * 仪表盘组件
+ * GaugeChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { GaugeChartProps } from '../types';
-
 import '@/core/echarts';
 
-/**
- * 仪表盘组件
- */
-const GaugeChart: React.FC<GaugeChartProps> = (props) => (
+const GaugeChart: React.FC<GaugeChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="gauge-chart" />
-);
+));
+GaugeChart.displayName = 'GaugeChart';
 
 export default GaugeChart;

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

@@ -0,0 +1,41 @@
+/**
+ * @version v1.5.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import GraphChart from '../index';
+
+describe('GraphChart', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<GraphChart />);
+    expect(container).toBeTruthy();
+  });
+
+  it('renders with custom className', () => {
+    const { container } = render(<GraphChart className="test-graph" />);
+    expect(container.firstChild).toHaveClass('test-graph');
+  });
+
+  it('renders with custom width and height', () => {
+    const { container } = render(<GraphChart width={500} height={400} />);
+    expect(container.firstChild).toHaveStyle({ width: '500px', height: '400px' });
+  });
+
+  it('renders with basic option', () => {
+    const option = {
+      series: [
+        {
+          type: 'graph' as const,
+          nodes: [
+            { id: '1', name: 'Node 1' },
+            { id: '2', name: 'Node 2' },
+          ],
+          links: [{ source: '1', target: '2' }],
+        },
+      ],
+    };
+    const { container } = render(<GraphChart option={option} />);
+    expect(container).toBeTruthy();
+  });
+});

package/src/charts/graph/index.tsx

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

package/src/charts/heatmap/index.tsx

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

package/src/charts/index.ts

@@ -17,10 +17,19 @@ export { default as TreeMapChart } from './treemap';
 export { default as SunburstChart } from './sunburst';
 export { default as SankeyChart } from './sankey';
 
+// 导出新增图表组件
+export { default as GraphChart } from './graph';
+export { default as CandlestickChart } from './candlestick';
+export { default as WordCloudChart } from './wordcloud';
+
+// 导出 v1.6.0 新增图表组件
+export { default as BoxplotChart } from './boxplot';
+export { default as ParallelChart } from './parallel';
+
 // 导出类型定义
 export * from './types';
 
 /**
  * 版本信息
  */
-export const version = '1.2.1';
+export const version = '1.6.0';

package/src/charts/line/index.tsx

@@ -1,18 +1,15 @@
 /**
  * 折线图组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { LineChartProps } from '../types';
 
 import '@/core/echarts';
 
-/**
- * 折线图组件
- */
-const LineChart: React.FC<LineChartProps> = (props) => (
+const LineChart: React.FC<LineChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="line-chart" />
-);
+));
+LineChart.displayName = 'LineChart';
 
 export default LineChart;