@agions/taroviz 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agions/taroviz",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "基于 Taro 和 ECharts 的多端图表组件库",
   "type": "module",
   "main": "dist/cjs/index.js",

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/index.ts

@@ -22,10 +22,14 @@ 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.4.0';
+export const version = '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;
+}