@agions/taroviz 1.11.1 → 2.0.3

package/src/adapters/types.ts

@@ -20,10 +20,9 @@ export interface AdapterOptions {
   width?: number | string;
   height?: number | string;
   theme?: string | object;
-  /** 初始化完成回调 */
-  onInit?: (instance: EChartsType) => void;
-  /** 图表配置 */
-  option?: EChartsOption;
+  option?: unknown;
+
+  onInit?: (_instance: EChartsType) => void;
   style?: CSSProperties;
   autoResize?: boolean;
   devicePixelRatio?: number;
@@ -50,57 +49,25 @@ export interface WeappAdapterOptions extends AdapterOptions {
   component?: object;
 }
 
-/**
- * 支付宝小程序适配器选项
- */
-export interface AlipayAdapterOptions extends AdapterOptions {}
-
-/**
- * 百度小程序适配器选项
- */
-export interface SwanAdapterOptions extends AdapterOptions {}
-
-/**
- * 鸿蒙OS适配器选项
- */
-export interface HarmonyAdapterOptions extends AdapterOptions {}
-
-/**
- * 钉钉小程序适配器选项
- */
-export interface DDAdapterOptions extends AdapterOptions {}
-
-/**
- * 抖音小程序适配器选项
- */
-export interface TTAdapterOptions extends AdapterOptions {}
-
-/**
- * QQ小程序适配器选项
- */
-export interface QQAdapterOptions extends AdapterOptions {}
-
-/**
- * 京东小程序适配器选项
- */
-export interface JDAdapterOptions extends AdapterOptions {}
-
-/**
- * 快手小程序适配器选项
- */
-export interface KwaiAdapterOptions extends AdapterOptions {}
-
-/**
- * 企业微信小程序适配器选项
- */
-export interface QywxAdapterOptions extends AdapterOptions {}
-
-/**
- * 飞书小程序适配器选项
- */
-export interface LarkAdapterOptions extends AdapterOptions {}
-
-/**
- * 小程序通用适配器选项
- */
-export interface MiniAppAdapterOptions extends AdapterOptions {}
+/** 支付宝小程序适配器选项 */
+export type AlipayAdapterOptions = AdapterOptions;
+/** 百度小程序适配器选项 */
+export type SwanAdapterOptions = AdapterOptions;
+/** 鸿蒙OS适配器选项 */
+export type HarmonyAdapterOptions = AdapterOptions;
+/** 钉钉小程序适配器选项 */
+export type DDAdapterOptions = AdapterOptions;
+/** 抖音小程序适配器选项 */
+export type TTAdapterOptions = AdapterOptions;
+/** QQ小程序适配器选项 */
+export type QQAdapterOptions = AdapterOptions;
+/** 京东小程序适配器选项 */
+export type JDAdapterOptions = AdapterOptions;
+/** 快手小程序适配器选项 */
+export type KwaiAdapterOptions = AdapterOptions;
+/** 企业微信小程序适配器选项 */
+export type QywxAdapterOptions = AdapterOptions;
+/** 飞书小程序适配器选项 */
+export type LarkAdapterOptions = AdapterOptions;
+/** 小程序通用适配器选项 */
+export type MiniAppAdapterOptions = AdapterOptions;

package/src/adapters/weapp/index.ts

@@ -1,77 +1,14 @@
 /**
  * TaroViz 微信小程序适配器
- * 基于微信小程序canvas组件实现图表渲染
  */
+import { MiniAppAdapter, createMiniAppAdapter } from '../MiniAppAdapter';
+import type { WeappAdapterOptions } from '../types';
 
-import { BaseAdapter } from '../BaseAdapter';
-import type { Adapter, WeappAdapterOptions } from '../types';
-
-export class WeappAdapter extends BaseAdapter {
-  private component: unknown = null;
-
-  constructor(config: WeappAdapterOptions) {
-    super(config);
-    this.component = config.component;
-  }
-
-  static create(options: WeappAdapterOptions): Adapter {
-    return new WeappAdapter(options) as unknown as Adapter;
-  }
-
-  init(): unknown {
-    const config = this.config as WeappAdapterOptions & { canvasId?: string };
-    const { canvasId, width, height, theme, option } = config;
-
-    if (!this.component) {
-      console.error('[TaroViz] WeappAdapter: component is required');
-      return null;
-    }
-
-    if (!canvasId) {
-      console.error('[TaroViz] WeappAdapter: canvasId is required');
-      return null;
-    }
-
-    const chart = (this.component as { createChart: (config: unknown) => unknown }).createChart({
-      id: canvasId,
-      width,
-      height,
-      theme,
-    });
-
-    if (option) {
-      (chart as { setOption: (o: unknown) => void }).setOption(option);
-    }
-
-    this.chartInstance = chart;
-
-    const onInit = this.config['onInit'] as ((instance: unknown) => void) | undefined;
-    if (onInit) {
-      onInit(chart);
-    }
-
-    return chart;
-  }
-
-  getWidth(): number {
-    return this.parseSize((this.config as WeappAdapterOptions).width, 300);
-  }
-
-  getHeight(): number {
-    return this.parseSize((this.config as WeappAdapterOptions).height, 300);
-  }
-
-  setComponent(component: unknown): void {
-    this.component = component;
-  }
-
-  dispatchAction(action: unknown): void {
-    (this.chartInstance as { dispatchAction?: (a: unknown) => void })?.dispatchAction?.(action);
-  }
-
-  getDataURL(opts?: unknown): string | undefined {
-    return (this.chartInstance as { getDataURL?: (o?: unknown) => string })?.getDataURL?.(opts);
+export class WeappAdapter extends MiniAppAdapter {
+  protected get platformName(): string {
+    return 'Weapp';
   }
 }
 
+export const createWeappAdapter = createMiniAppAdapter(WeappAdapter);
 export default WeappAdapter;

package/src/charts/__tests__/testUtils.tsx

@@ -0,0 +1,87 @@
+/**
+ * TaroViz 图表测试工具函数
+ * 消除各图表组件测试文件中的重复测试逻辑
+ *
+ * 使用方式：
+ * 1. 测试文件顶层写：jest.mock('../common/BaseChartWrapper');
+ *    Jest 会自动使用 src/charts/common/__mocks__/BaseChartWrapper.tsx
+ * 2. 图表特定 mock：jest.mock('echarts/charts', () => ({ XxxChart: jest.fn() }));
+ * 3. import { runStandardChartTests } from '../../__tests__/testUtils';
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+/**
+ * 标准图表测试用例
+ * 所有基础图表共享的测试逻辑
+ */
+export function runStandardChartTests(
+  ChartComponent: React.ComponentType<any>,
+  chartType: string,
+  mockOption: Record<string, unknown>
+): void {
+  describe(`${chartType} Component`, () => {
+    it('should render correctly with default props', () => {
+      const { getByTestId } = render(
+        React.createElement(ChartComponent, { option: mockOption } as any)
+      );
+
+      const chartWrapper = getByTestId('base-chart-wrapper');
+      expect(chartWrapper).toBeInTheDocument();
+      expect(chartWrapper).toHaveClass(`taroviz-${chartType}`);
+    });
+
+    it('should pass the correct option to BaseChartWrapper', () => {
+      const { getByTestId } = render(
+        React.createElement(ChartComponent, { option: mockOption } as any)
+      );
+
+      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(
+        React.createElement(ChartComponent, {
+          option: mockOption,
+          width: customWidth,
+          height: customHeight,
+        } as any)
+      );
+
+      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-${chartType}`;
+
+      const { getByTestId } = render(
+        React.createElement(ChartComponent, {
+          option: mockOption,
+          className: customClass,
+        } as any)
+      );
+
+      const chartWrapper = getByTestId('base-chart-wrapper');
+      expect(chartWrapper).toHaveClass(customClass);
+    });
+
+    it('should render with loading state', () => {
+      const { getByTestId } = render(
+        React.createElement(ChartComponent, {
+          option: mockOption,
+          loading: true,
+        } as any)
+      );
+
+      const chartWrapper = getByTestId('base-chart-wrapper');
+      expect(chartWrapper).toBeInTheDocument();
+    });
+  });
+}

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

@@ -1,130 +1,76 @@
 /**
- * @jest-environment jsdom
+ * BoxplotChart 组件测试
  */
 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(),
-}));
+import BoxplotChart from '../index';
 
-// 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>
-  ),
-}));
+// 自动使用 src/charts/common/__mocks__/BaseChartWrapper.tsx
+jest.mock('../../common/BaseChartWrapper');
+jest.mock('echarts/charts', () => ({ BoxplotChart: jest.fn() }));
 
-describe('BoxplotChart', () => {
-  const basicOption = {
-    title: { text: '箱线图测试' },
-    xAxis: { type: 'category' as const, data: ['A', 'B', 'C'] },
-    yAxis: { type: 'value' as const },
-    series: [{
+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('BoxplotChart', () => {
+  it('should render without crashing', () => {
+    const { getByTestId } = render(<BoxplotChart option={basicOption} />);
+    expect(getByTestId('base-chart-wrapper')).toBeInTheDocument();
   });
 
-  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 have correct display name', () => {
+    expect(BoxplotChart.displayName).toBe('BoxplotChart');
+  });
 
-    it('should accept loading prop', () => {
-      const { getByTestId } = render(<BoxplotChart option={basicOption} loading={true} />);
-      expect(getByTestId('boxplot-chart')).toBeInTheDocument();
-    });
+  it('should accept className prop', () => {
+    const { getByTestId } = render(<BoxplotChart option={basicOption} className="test-class" />);
+    expect(getByTestId('base-chart-wrapper')).toHaveClass('test-class');
+  });
 
-    it('should accept theme prop', () => {
-      const { getByTestId } = render(<BoxplotChart option={basicOption} theme="dark" />);
-      expect(getByTestId('boxplot-chart')).toBeInTheDocument();
-    });
+  it('should accept loading prop', () => {
+    const { getByTestId } = render(<BoxplotChart option={basicOption} loading={true} />);
+    expect(getByTestId('base-chart-wrapper')).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 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('base-chart-wrapper')).toBeInTheDocument();
+  });
 
-    it('should render with custom itemStyle', () => {
-      const optionWithStyle = {
-        ...basicOption,
-        series: [{
+  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();
-    });
+        },
+      ],
+    };
+    const { getByTestId } = render(<BoxplotChart option={optionWithStyle} />);
+    expect(getByTestId('base-chart-wrapper')).toBeInTheDocument();
   });
 });

package/src/charts/boxplot/index.tsx

@@ -3,11 +3,12 @@
  * 用于展示数据的分布情况，包括最小值、Q1、中位数、Q3、最大值
  */
 import React, { memo } from 'react';
+import type { EChartsOption } from 'echarts';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { BoxplotChartProps } from './types';
 
 const BoxplotChart: React.FC<BoxplotChartProps> = memo((props) => (
-  <BaseChartWrapper {...props} chartType="boxplot" />
+  <BaseChartWrapper {...props} option={props.option as EChartsOption} chartType="boxplot" />
 ));
 
 BoxplotChart.displayName = 'BoxplotChart';

package/src/charts/boxplot/types.ts

@@ -10,11 +10,11 @@ export type BoxplotChartProps = {
   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';
@@ -23,26 +23,27 @@ export type BoxplotChartProps = {
 };
 
 export interface BoxplotOption {
-  title?: any;
-  legend?: any;
-  grid?: any;
-  xAxis?: any;
-  yAxis?: any;
-  tooltip?: any;
+  title?: unknown;
+  legend?: unknown;
+  grid?: unknown;
+  xAxis?: unknown;
+  yAxis?: unknown;
+  tooltip?: unknown;
   series: BoxplotSeriesItem[];
-  dataset?: any;
+  dataset?: unknown;
   color?: string[];
-  backgroundColor?: any;
-  textStyle?: any;
-  [key: string]: any;
+  backgroundColor?: unknown;
+  textStyle?: unknown;
+  [key: string]: unknown;
 }
 
 export interface BoxplotSeriesItem {
   type: 'boxplot';
   name?: string;
-  data?: any[];
-  itemStyle?: any;
-  emphasis?: any;
+  data?: unknown[];
+  itemStyle?: unknown;
+  emphasis?: unknown;
   dimensions?: string[];
-  encode?: any;
+  encode?: Record<string, number | string>;
+  [key: string]: unknown;
 }