@agions/taroviz 1.1.0 → 1.2.0

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

@@ -0,0 +1,113 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import BarChart 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 specific ECharts chart imports
+jest.mock('echarts/charts', () => ({
+  BarChart: jest.fn(),
+}));
+
+jest.mock('echarts/components', () => ({
+  GridComponent: jest.fn(),
+  TooltipComponent: jest.fn(),
+  TitleComponent: jest.fn(),
+  LegendComponent: jest.fn(),
+}));
+
+jest.mock('../../common/BaseChartWrapper', () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="base-chart-wrapper"
+      className={`taroviz-${props.chartType} ${props.className || ''}`}
+      style={{ width: props.width, height: props.height }}
+    >
+      <div data-testid="chart-option">{JSON.stringify(props.option)}</div>
+    </div>
+  ),
+}));
+
+describe('BarChart Component', () => {
+  const mockOption = {
+    xAxis: {
+      type: 'category' as const,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value' as const,
+    },
+    series: [
+      {
+        data: [150, 230, 224, 218, 135, 147, 260],
+        type: 'bar' as const,
+      },
+    ],
+  };
+
+  it('should render correctly with default props', () => {
+    const { getByTestId } = render(<BarChart option={mockOption} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+    expect(chartWrapper).toHaveClass('taroviz-bar-chart');
+  });
+
+  it('should pass the correct option to BaseChartWrapper', () => {
+    const { getByTestId } = render(<BarChart option={mockOption} />);
+
+    const chartOption = getByTestId('chart-option');
+    expect(JSON.parse(chartOption.textContent || '')).toEqual(mockOption);
+  });
+
+  it('should render with custom width and height', () => {
+    const customWidth = '600px';
+    const customHeight = '450px';
+
+    const { getByTestId } = render(
+      <BarChart option={mockOption} width={customWidth} height={customHeight} />
+    );
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toHaveStyle(`width: ${customWidth}`);
+    expect(chartWrapper).toHaveStyle(`height: ${customHeight}`);
+  });
+
+  it('should render with custom className', () => {
+    const customClass = 'custom-bar-chart';
+
+    const { getByTestId } = render(<BarChart option={mockOption} className={customClass} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toHaveClass(customClass);
+  });
+
+  it('should render with loading state', () => {
+    const { getByTestId } = render(<BarChart option={mockOption} loading={true} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+  });
+
+  it('should render with svg renderer', () => {
+    const { getByTestId } = render(<BarChart option={mockOption} renderer="svg" />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+  });
+});

package/src/charts/bar/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * 柱状图组件
+ */
+import { BarChart as BarChartComponent } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { BarChartProps } from '../types';
+
+// 注册必要的组件
+echarts.use([BarChartComponent, GridComponent, TooltipComponent, TitleComponent, LegendComponent]);
+
+/**
+ * 柱状图组件
+ */
+const BarChart: React.FC<BarChartProps> = props => (
+  <BaseChartWrapper {...props} chartType="bar-chart" />
+);
+
+export default BarChart;

package/src/charts/common/BaseChartWrapper.tsx

@@ -0,0 +1,136 @@
+/**
+ * 基础图表包装组件
+ * 提供统一的图表初始化、渲染和生命周期管理
+ */
+import * as echarts from 'echarts/core';
+import React, { useEffect, useRef, useMemo } from 'react';
+
+import { getAdapter } from '../../adapters';
+import { uuid } from '../../core/utils';
+import { BaseChartProps } from '../types';
+import { processAdapterConfig, safeRenderAdapter } from '../utils';
+
+/**
+ * 基础图表包装组件
+ * 提供统一的图表初始化、渲染和生命周期管理
+ */
+const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
+  option,
+  width = '100%',
+  height = '300px',
+  theme,
+  style = {},
+  className = '',
+  autoResize = true,
+  loading = false,
+  loadingOption,
+  onChartInit,
+  onChartReady,
+  renderer = 'canvas',
+  onEvents = {},
+  chartType = 'chart',
+}) => {
+  const chartId = useRef<string>(`${chartType}-${uuid()}`);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 使用 useMemo 缓存适配器配置，并处理类型问题
+  const adapterConfig = useMemo(() => {
+    return processAdapterConfig({
+      canvasId: chartId.current,
+      containerRef,
+      width,
+      height,
+      theme,
+      autoResize,
+      renderer,
+      option,
+    });
+  }, [width, height, theme, autoResize, renderer, option, chartType]);
+
+  // 处理图表初始化
+  useEffect(() => {
+    const initConfig = processAdapterConfig({
+      ...adapterConfig,
+      onInit: (instance: echarts.ECharts) => {
+        chartInstance.current = instance;
+
+        // 绑定事件
+        if (onEvents) {
+          Object.keys(onEvents).forEach(eventName => {
+            instance.on(eventName, onEvents[eventName]);
+          });
+        }
+
+        // 初始化回调
+        if (onChartInit) {
+          onChartInit(instance);
+        }
+
+        // 准备好回调
+        if (onChartReady) {
+          onChartReady(instance);
+        }
+      },
+    });
+
+    // 获取适配器并初始化
+    const adapter = getAdapter(initConfig);
+    adapter.init();
+
+    // 组件卸载时清理
+    return () => {
+      if (chartInstance.current) {
+        // 解绑事件
+        if (onEvents) {
+          Object.keys(onEvents).forEach(eventName => {
+            chartInstance.current?.off(eventName);
+          });
+        }
+        chartInstance.current.dispose();
+        chartInstance.current = null;
+      }
+    };
+  }, [adapterConfig, onChartInit, onChartReady, onEvents]);
+
+  // 更新配置
+  useEffect(() => {
+    if (chartInstance.current) {
+      chartInstance.current.setOption(option, true);
+    }
+  }, [option]);
+
+  // 控制加载状态
+  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,
+  };
+
+  // 使用带有处理的适配器配置创建适配器实例
+  const adapter = getAdapter(adapterConfig);
+
+  return (
+    <div
+      className={`taroviz-${chartType} ${className}`}
+      style={mergedStyle}
+      ref={containerRef as React.RefObject<HTMLDivElement>}
+    >
+      {/* 安全地渲染适配器 */}
+      {safeRenderAdapter(adapter)}
+    </div>
+  );
+};
+
+export default BaseChartWrapper;

package/src/charts/funnel/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * 漏斗图组件
+ */
+import { FunnelChart as FunnelChartComponent } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { FunnelChartProps } from '../types';
+
+// 注册必要的组件
+echarts.use([
+  FunnelChartComponent,
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+]);
+
+/**
+ * 漏斗图组件
+ */
+const FunnelChart: React.FC<FunnelChartProps> = props => (
+  <BaseChartWrapper {...props} chartType="funnel-chart" />
+);
+
+export default FunnelChart;

package/src/charts/gauge/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * 仪表盘组件
+ */
+import { GaugeChart as GaugeChartComponent } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { GaugeChartProps } from '../types';
+
+// 注册必要的组件
+echarts.use([
+  GaugeChartComponent,
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+]);
+
+/**
+ * 仪表盘组件
+ */
+const GaugeChart: React.FC<GaugeChartProps> = props => (
+  <BaseChartWrapper {...props} chartType="gauge-chart" />
+);
+
+export default GaugeChart;

package/src/charts/heatmap/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * 热力图组件
+ */
+import { HeatmapChart as HeatmapChartComponent } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { HeatmapChartProps } from '../types';
+
+// 注册必要的组件
+echarts.use([
+  HeatmapChartComponent,
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+]);
+
+/**
+ * 热力图组件
+ */
+const HeatmapChart: React.FC<HeatmapChartProps> = props => (
+  <BaseChartWrapper {...props} chartType="heatmap-chart" />
+);
+
+export default HeatmapChart;

package/src/charts/index.ts

@@ -0,0 +1,21 @@
+/**
+ * TaroViz 图表组件集合
+ */
+
+// 导出基础图表组件
+export { default as LineChart } from './line';
+export { default as BarChart } from './bar';
+export { default as PieChart } from './pie';
+export { default as ScatterChart } from './scatter';
+export { default as RadarChart } from './radar';
+export { default as HeatmapChart } from './heatmap';
+export { default as GaugeChart } from './gauge';
+export { default as FunnelChart } from './funnel';
+
+// 导出类型定义
+export * from './types';
+
+/**
+ * 版本信息
+ */
+export const version = '1.1.1';

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

@@ -0,0 +1,107 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import LineChart 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 specific ECharts chart imports
+jest.mock('echarts/charts', () => ({
+  LineChart: jest.fn(),
+}));
+
+jest.mock('echarts/components', () => ({
+  GridComponent: jest.fn(),
+  TooltipComponent: jest.fn(),
+  TitleComponent: jest.fn(),
+  LegendComponent: jest.fn(),
+}));
+
+jest.mock('../../common/BaseChartWrapper', () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="base-chart-wrapper"
+      className={`taroviz-${props.chartType} ${props.className || ''}`}
+      style={{ width: props.width, height: props.height }}
+    >
+      <div data-testid="chart-option">{JSON.stringify(props.option)}</div>
+    </div>
+  ),
+}));
+
+describe('LineChart Component', () => {
+  const mockOption = {
+    xAxis: {
+      type: 'category' as const,
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value' as const,
+    },
+    series: [
+      {
+        data: [150, 230, 224, 218, 135, 147, 260],
+        type: 'line' as const,
+      },
+    ],
+  };
+
+  it('should render correctly with default props', () => {
+    const { getByTestId } = render(<LineChart option={mockOption} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+    expect(chartWrapper).toHaveClass('taroviz-line-chart');
+  });
+
+  it('should pass the correct option to BaseChartWrapper', () => {
+    const { getByTestId } = render(<LineChart option={mockOption} />);
+
+    const chartOption = getByTestId('chart-option');
+    expect(JSON.parse(chartOption.textContent || '')).toEqual(mockOption);
+  });
+
+  it('should render with custom width and height', () => {
+    const customWidth = '500px';
+    const customHeight = '400px';
+
+    const { getByTestId } = render(
+      <LineChart option={mockOption} width={customWidth} height={customHeight} />
+    );
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toHaveStyle(`width: ${customWidth}`);
+    expect(chartWrapper).toHaveStyle(`height: ${customHeight}`);
+  });
+
+  it('should render with custom className', () => {
+    const customClass = 'custom-line-chart';
+
+    const { getByTestId } = render(<LineChart option={mockOption} className={customClass} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toHaveClass(customClass);
+  });
+
+  it('should render with loading state', () => {
+    const { getByTestId } = render(<LineChart option={mockOption} loading={true} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+    // The loading state is handled by BaseChartWrapper, which we've mocked
+  });
+});

package/src/charts/line/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * 折线图组件
+ */
+import { LineChart as LineChartComponent } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { LineChartProps } from '../types';
+
+// 注册必要的组件
+echarts.use([LineChartComponent, GridComponent, TooltipComponent, TitleComponent, LegendComponent]);
+
+/**
+ * 折线图组件
+ */
+const LineChart: React.FC<LineChartProps> = props => (
+  <BaseChartWrapper {...props} chartType="line-chart" />
+);
+
+export default LineChart;

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

@@ -0,0 +1,112 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import PieChart 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 specific ECharts chart imports
+jest.mock('echarts/charts', () => ({
+  PieChart: jest.fn(),
+}));
+
+jest.mock('echarts/components', () => ({
+  GridComponent: jest.fn(),
+  TooltipComponent: jest.fn(),
+  TitleComponent: jest.fn(),
+  LegendComponent: jest.fn(),
+}));
+
+jest.mock('../../common/BaseChartWrapper', () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="base-chart-wrapper"
+      className={`taroviz-${props.chartType} ${props.className || ''}`}
+      style={{ width: props.width, height: props.height }}
+    >
+      <div data-testid="chart-option">{JSON.stringify(props.option)}</div>
+    </div>
+  ),
+}));
+
+describe('PieChart Component', () => {
+  const mockOption = {
+    series: [
+      {
+        type: 'pie' as const,
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' },
+        ],
+      },
+    ],
+  };
+
+  it('should render correctly with default props', () => {
+    const { getByTestId } = render(<PieChart option={mockOption} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+    expect(chartWrapper).toHaveClass('taroviz-pie-chart');
+  });
+
+  it('should pass the correct option to BaseChartWrapper', () => {
+    const { getByTestId } = render(<PieChart option={mockOption} />);
+
+    const chartOption = getByTestId('chart-option');
+    expect(JSON.parse(chartOption.textContent || '')).toEqual(mockOption);
+  });
+
+  it('should render with custom width and height', () => {
+    const customWidth = '400px';
+    const customHeight = '400px';
+
+    const { getByTestId } = render(
+      <PieChart option={mockOption} width={customWidth} height={customHeight} />
+    );
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toHaveStyle(`width: ${customWidth}`);
+    expect(chartWrapper).toHaveStyle(`height: ${customHeight}`);
+  });
+
+  it('should render with custom className', () => {
+    const customClass = 'custom-pie-chart';
+
+    const { getByTestId } = render(<PieChart option={mockOption} className={customClass} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toHaveClass(customClass);
+  });
+
+  it('should render with loading state', () => {
+    const { getByTestId } = render(<PieChart option={mockOption} loading={true} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+  });
+
+  it('should render with theme', () => {
+    const { getByTestId } = render(<PieChart option={mockOption} theme="dark" />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+  });
+});

package/src/charts/pie/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * 饼图组件
+ */
+import { PieChart as PieChartComponent } from 'echarts/charts';
+import { TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { BaseChartProps } from '../types';
+
+// 注册必要的组件
+echarts.use([PieChartComponent, TooltipComponent, TitleComponent, LegendComponent]);
+
+/**
+ * 饼图组件
+ */
+const PieChart: React.FC<BaseChartProps> = props => (
+  <BaseChartWrapper {...props} chartType="pie-chart" />
+);
+
+export default PieChart;