@agions/taroviz 1.11.1 → 2.0.3

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

@@ -1,47 +1,14 @@
 /**
- * @jest-environment jsdom
+ * ParallelChart 组件测试
  */
 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>
-  ),
-}));
+// 自动使用 src/charts/common/__mocks__/BaseChartWrapper.tsx
+jest.mock('../../common/BaseChartWrapper');
+jest.mock('echarts/charts', () => ({ ParallelChart: jest.fn() }));
 
 describe('ParallelChart', () => {
   const basicOption = {
@@ -57,26 +24,28 @@ describe('ParallelChart', () => {
       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],
-      ],
-    }],
+    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();
+      expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
     });
 
     it('should render with custom width and height', () => {
       render(<ParallelChart option={basicOption} width={600} height={500} />);
-      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+      expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
     });
 
     it('should have correct display name', () => {
@@ -92,23 +61,23 @@ describe('ParallelChart', () => {
   describe('Props', () => {
     it('should accept className prop', () => {
       render(<ParallelChart option={basicOption} className="test-class" />);
-      expect(screen.getByTestId('parallel-chart')).toHaveClass('test-class');
+      expect(screen.getByTestId('base-chart-wrapper')).toHaveClass('test-class');
     });
 
     it('should accept style prop', () => {
       const style = { padding: '10px' };
       render(<ParallelChart option={basicOption} style={style} />);
-      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+      expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
     });
 
     it('should accept loading prop', () => {
       render(<ParallelChart option={basicOption} loading={true} />);
-      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+      expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
     });
 
     it('should accept theme prop', () => {
       render(<ParallelChart option={basicOption} theme="dark" />);
-      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+      expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
     });
   });
 
@@ -124,20 +93,22 @@ describe('ParallelChart', () => {
         },
       };
       render(<ParallelChart option={expandableOption} />);
-      expect(screen.getByTestId('parallel-chart')).toBeInTheDocument();
+      expect(screen.getByTestId('base-chart-wrapper')).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]],
-        }],
+        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();
+      expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
     });
 
     it('should render with category axis', () => {
@@ -149,16 +120,18 @@ describe('ParallelChart', () => {
           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],
-          ],
-        }],
+        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();
+      expect(screen.getByTestId('base-chart-wrapper')).toBeInTheDocument();
     });
   });
 });

package/src/charts/parallel/index.tsx

@@ -3,11 +3,12 @@
  * 用于展示高维数据各维度之间的关系
  */
 import React, { memo } from 'react';
+import type { EChartsOption } from 'echarts';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { ParallelChartProps } from './types';
 
 const ParallelChart: React.FC<ParallelChartProps> = memo((props) => (
-  <BaseChartWrapper {...props} chartType="parallel" />
+  <BaseChartWrapper {...props} option={props.option as EChartsOption} chartType="parallel" />
 ));
 
 ParallelChart.displayName = 'ParallelChart';

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';
@@ -23,18 +23,18 @@ export type ParallelChartProps = {
 };
 
 export interface ParallelOption {
-  title?: any;
-  legend?: any;
-  parallel?: ParallelAxisSetting;
+  title?: unknown;
+  legend?: unknown;
+  parallel?: unknown;
   parallelAxisDefault?: ParallelAxisItem;
-  grid?: any;
-  tooltip?: any;
+  grid?: unknown;
+  tooltip?: unknown;
   series: ParallelSeriesItem[];
-  dataset?: any;
+  dataset?: unknown;
   color?: string[];
-  backgroundColor?: any;
-  textStyle?: any;
-  [key: string]: any;
+  backgroundColor?: unknown;
+  textStyle?: unknown;
+  [key: string]: unknown;
 }
 
 export interface ParallelAxisSetting {
@@ -55,10 +55,10 @@ export interface ParallelAxisItem {
   type?: 'value' | 'category';
   name?: string;
   nameLocation?: 'start' | 'middle' | 'center' | 'end';
-  nameTextStyle?: any;
+  nameTextStyle?: unknown;
   nameGap?: number;
   silent?: boolean;
-  data?: any[];
+  data?: unknown[];
   dimension?: number;
   parallelIndex?: number;
 }
@@ -66,11 +66,12 @@ export interface ParallelAxisItem {
 export interface ParallelSeriesItem {
   type: 'parallel';
   name?: string;
-  data?: any[];
-  lineStyle?: any;
-  emphasis?: any;
+  data?: unknown[];
+  lineStyle?: unknown;
+  emphasis?: unknown;
   smooth?: boolean | number;
   symbol?: string;
   symbolSize?: number;
-  itemStyle?: any;
+  itemStyle?: unknown;
+  [key: string]: unknown;
 }

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);
+  });
+});

package/src/charts/radar/index.tsx

@@ -1,14 +1,147 @@
 /**
- * RadarChart组件
+ * TaroViz 雷达图组件
+ *
+ * 基于 ECharts radar 系列实现多指标对比可视化
  */
-import React, { memo } from 'react';
-import BaseChartWrapper from '../common/BaseChartWrapper';
-import { RadarChartProps } from '../types';
-import '@/core/echarts';
-
-const RadarChart: React.FC<RadarChartProps> = memo((props) => (
-  <BaseChartWrapper {...props} chartType="radar-chart" />
-));
-RadarChart.displayName = 'RadarChart';
+import { createOptionChartComponent } from '@/charts/createOptionChartComponent';
+import type { RadarChartProps } from './types';
+// 类型 RadarIndicator、RadarDataItem 通过下方 export type 导出供外部使用
+
+/**
+ * 构建雷达图 ECharts option
+ */
+function buildRadarOption(props: RadarChartProps) {
+  const {
+    indicators,
+    data,
+    startAngle = 90,
+    centerCircle = false,
+    centerCircleSize = 0,
+    areaStyle,
+    lineStyle,
+    label,
+    smooth = false,
+    optionMerge,
+  } = props;
+
+  // 验证数据
+  if (!indicators || indicators.length === 0) {
+    console.warn('[TaroViz] RadarChart: indicators is required');
+    return null;
+  }
+
+  if (!data || data.length === 0) {
+    console.warn('[TaroViz] RadarChart: data is required');
+    return null;
+  }
+
+  // 验证数据维度匹配
+  const firstDataItem = data[0];
+  if (firstDataItem.value.length !== indicators.length) {
+    console.warn(
+      `[TaroViz] RadarChart: data value length (${firstDataItem.value.length}) ` +
+        `does not match indicators count (${indicators.length})`
+    );
+  }
+
+  // 构建雷达图 series
+  const series = data.map((item, index) => ({
+    type: 'radar' as const,
+    data: [item],
+    symbol: 'circle' as const,
+    symbolSize: 6,
+    lineStyle: {
+      width: lineStyle?.width ?? 2,
+      type: lineStyle?.type ?? ('solid' as const),
+      color: lineStyle?.color,
+    },
+    areaStyle: areaStyle
+      ? {
+          color: areaStyle.color,
+          opacity: areaStyle.opacity ?? 0.3,
+        }
+      : undefined,
+    label: label
+      ? {
+          show: label.show ?? false,
+          position: label.position ?? ('outside' as const),
+        }
+      : undefined,
+    itemStyle: {
+      color: `rgba(54, 157, 255, ${0.1 + index * 0.1})`,
+      borderColor: '#369dff',
+      borderWidth: 2,
+    },
+    emphasis: {
+      focus: 'series' as const,
+    },
+    smooth,
+  }));
+
+  // 构建 indicator 配置
+  const indicatorConfig = indicators.map((ind) => ({
+    name: ind.name,
+    max: ind.max,
+    min: ind.min ?? 0,
+  }));
+
+  const option: any = {
+    radar: {
+      indicator: indicatorConfig,
+      startAngle,
+      center: ['50%', '50%'],
+      radius: centerCircle ? `${70 - centerCircleSize * 30}%` : '70%',
+      centerCircle,
+      centerCircleSize,
+      splitNumber: 5,
+      axisName: {
+        color: '#666',
+        fontSize: 12,
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#eee', '#ddd'],
+        },
+      },
+      splitArea: {
+        areaStyle: {
+          color: ['#fafafa', '#f5f5f5'],
+          opacity: 0.5,
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc',
+        },
+      },
+    },
+    series,
+    legend: {
+      data: data.map((d, i) => d.name || `系列 ${i + 1}`),
+      top: 30,
+    },
+    tooltip: {
+      trigger: 'item' as const,
+      formatter: (params: any) => {
+        if (!params || !params.data) return '';
+        const seriesName = params.seriesName || '未知系列';
+        const dataItem = params.data as { value: number[] };
+        const values = dataItem.value.map(
+          (v: number, i: number) => `${indicators[i]?.name || 'N/A'}: ${v}`
+        );
+        return `<b>${seriesName}</b><br/>${values.join('<br/>')}`;
+      },
+    },
+  };
+
+  // 合并自定义配置
+  if (optionMerge) {
+    Object.assign(option, optionMerge);
+  }
+
+  return option;
+}
+
+const RadarChart = createOptionChartComponent<RadarChartProps>('RadarChart', buildRadarOption);
 
 export default RadarChart;

package/src/charts/radar/types.ts

@@ -0,0 +1,13 @@
+/**
+ * TaroViz 雷达图类型定义
+ *
+ * 从主 types 文件导入基础类型，只导出组件特有的类型
+ */
+export type {
+  RadarIndicator,
+  RadarDataItem,
+  RadarAreaStyle,
+  RadarLineStyle,
+  RadarLabel,
+  RadarChartProps,
+} from '../types';