@agions/taroviz 1.5.0 → 1.7.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;
+}

package/src/charts/tree/index.tsx

@@ -0,0 +1,117 @@
+/**
+ * 树图组件
+ * ECharts 内置 tree 类型
+ */
+import React, { memo, useMemo } from 'react';
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { TreeChartProps, TreeSeries } from './types';
+
+/**
+ * 树图组件
+ */
+const TreeChart: React.FC<TreeChartProps> = memo((props) => {
+  const {
+    option,
+    treeData,
+    layout = 'orthogonal',
+    orient = 'horizontal',
+    nodeGap,
+    nodeWidth,
+    initialTreeDepth,
+    symbol,
+    symbolSize,
+    showLine = true,
+    lineCurveness,
+    label,
+    labelPosition,
+    labelAlign,
+    lineStyle,
+    itemStyle,
+    ...restProps
+  } = props;
+
+  // 构建树图配置
+  const mergedOption = useMemo(() => {
+    const baseOption = option || {};
+
+    // 如果用户提供了 series，直接返回
+    if (baseOption.series && baseOption.series.length > 0) {
+      return baseOption;
+    }
+
+    // 构建树图 series
+    const seriesConfig: TreeSeries = {
+      type: 'tree',
+      layout,
+      orient,
+      data: treeData,
+      showLine,
+    };
+
+    // 添加可选参数
+    if (nodeGap !== undefined) {
+      seriesConfig.nodeGap = nodeGap;
+    }
+    if (nodeWidth !== undefined) {
+      seriesConfig.nodeWidth = nodeWidth;
+    }
+    if (initialTreeDepth !== undefined) {
+      seriesConfig.initialTreeDepth = initialTreeDepth;
+    }
+    if (symbol !== undefined) {
+      seriesConfig.symbol = symbol;
+    }
+    if (symbolSize !== undefined) {
+      seriesConfig.symbolSize = symbolSize;
+    }
+    if (lineCurveness !== undefined) {
+      seriesConfig.lineCurveness = lineCurveness;
+    }
+    if (label !== undefined) {
+      seriesConfig.label = label;
+    }
+    if (labelPosition !== undefined) {
+      seriesConfig.labelPosition = labelPosition;
+    }
+    if (labelAlign !== undefined) {
+      seriesConfig.labelAlign = labelAlign;
+    }
+    if (lineStyle !== undefined) {
+      seriesConfig.lineStyle = lineStyle;
+    }
+    if (itemStyle !== undefined) {
+      seriesConfig.itemStyle = itemStyle;
+    }
+
+    return {
+      ...baseOption,
+      series: [seriesConfig],
+    };
+  }, [
+    option,
+    treeData,
+    layout,
+    orient,
+    nodeGap,
+    nodeWidth,
+    initialTreeDepth,
+    symbol,
+    symbolSize,
+    showLine,
+    lineCurveness,
+    label,
+    labelPosition,
+    labelAlign,
+    lineStyle,
+    itemStyle,
+  ]);
+
+  return <BaseChartWrapper {...restProps} option={mergedOption as any} chartType="tree" />;
+});
+
+TreeChart.displayName = 'TreeChart';
+
+export default TreeChart;
+
+// 导出类型
+export type { TreeChartProps, TreeOption, TreeNode, TreeSeries } from './types';

package/src/charts/tree/types.ts

@@ -0,0 +1,174 @@
+/**
+ * 树图类型定义
+ * ECharts 内置 tree 类型
+ */
+import type { EChartsOption } from 'echarts';
+
+// ============================================================================
+// 树图数据节点
+// ============================================================================
+
+/**
+ * 树图数据节点
+ */
+export interface TreeNode {
+  /** 节点名称 */
+  name: string;
+  /** 节点值 */
+  value?: number;
+  /** 是否展开 */
+  collapsed?: boolean;
+  /** 图标 */
+  icon?: string;
+  /** 图形 */
+  symbol?: string;
+  /** 图形大小 */
+  symbolSize?: number | [number, number];
+  /** 标签配置 */
+  label?: Record<string, unknown>;
+  /** 元素样式 */
+  itemStyle?: Record<string, unknown>;
+  /** emphasis状态 */
+  emphasis?: Record<string, unknown>;
+  /** 线条样式 */
+  lineStyle?: Record<string, unknown>;
+  /** 子节点 */
+  children?: TreeNode[];
+  /** 其他自定义属性 */
+  [key: string]: any;
+}
+
+// ============================================================================
+// 树图系列配置
+// ============================================================================
+
+/** 树图系列配置 */
+export interface TreeSeries {
+  /** 系列类型 */
+  type?: 'tree';
+  /** 系列名称 */
+  name?: string;
+  /** 数据数组 (树的根节点) */
+  data?: TreeNode[];
+  /** 树的布局: 'orthogonal' | 'radial' */
+  layout?: string;
+  /** 树的方向: 'horizontal' | 'vertical' */
+  orient?: string;
+  /** 节点之间的间距 */
+  nodeGap?: number;
+  /** 节点的宽度 */
+  nodeWidth?: number;
+  /** 展开层级 */
+  initialTreeDepth?: number;
+  /** 标签配置 */
+  label?: Record<string, unknown>;
+  /** 标签位置 */
+  labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+  /** 标签对齐 */
+  labelAlign?: 'left' | 'right' | 'center';
+  /** 标签格式化 */
+  labelFormatter?: string | ((value: number, data: TreeNode) => string);
+  /** 线条样式 */
+  lineStyle?: Record<string, unknown>;
+  /** 是否显示连接线 */
+  showLine?: boolean;
+  /** 连接线的弯曲度 */
+  lineCurveness?: number;
+  /** 树节点图形 */
+  symbol?: string;
+  /** 树节点大小 */
+  symbolSize?: number | [number, number];
+  /** 图形内标签 */
+  innerLabel?: Record<string, unknown>;
+  /** 元素样式 */
+  itemStyle?: Record<string, unknown>;
+  /** emphasis状态 */
+  emphasis?: Record<string, unknown>;
+  /** 聚焦状态 */
+  focus?: Record<string, unknown>;
+  /** leaves配置 */
+  leaves?: Record<string, unknown>;
+  /** 动画配置 */
+  animation?: boolean;
+  /** 动画时长 */
+  animationDuration?: number;
+  /** 动画缓动函数 */
+  animationEasing?: string;
+  /** 动画延迟 */
+  animationDelay?: number | ((idx: number) => number);
+  /** 动画更新时长 */
+  animationDurationUpdate?: number;
+  /** 动画更新缓动函数 */
+  animationEasingUpdate?: string;
+}
+
+/** 树图选项配置 */
+export interface TreeOption extends Omit<EChartsOption, 'series'> {
+  series?: TreeSeries[];
+}
+
+// ============================================================================
+// 组件 Props
+// ============================================================================
+
+/**
+ * 树图组件属性
+ */
+export interface TreeChartProps {
+  /** 图表配置项 (EChartsOption) */
+  option?: TreeOption;
+  /** 宽度 */
+  width?: string | number;
+  /** 高度 */
+  height?: string | number;
+  /** 树形数据 */
+  treeData?: TreeNode[];
+  /** 树的布局: 'orthogonal' (直角树) | 'radial' (辐射树) */
+  layout?: 'orthogonal' | 'radial';
+  /** 树的方向: 'horizontal' (水平) | 'vertical' (垂直) */
+  orient?: 'horizontal' | 'vertical';
+  /** 节点之间的间距 */
+  nodeGap?: number;
+  /** 节点的宽度 */
+  nodeWidth?: number;
+  /** 展开层级 */
+  initialTreeDepth?: number;
+  /** 节点图形 */
+  symbol?: string;
+  /** 节点大小 */
+  symbolSize?: number | [number, number];
+  /** 是否显示连接线 */
+  showLine?: boolean;
+  /** 连接线的弯曲度 */
+  lineCurveness?: number;
+  /** 标签配置 */
+  label?: Record<string, unknown>;
+  /** 标签位置 */
+  labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+  /** 标签对齐 */
+  labelAlign?: 'left' | 'right' | 'center';
+  /** 线条样式 */
+  lineStyle?: Record<string, unknown>;
+  /** 元素样式 */
+  itemStyle?: Record<string, unknown>;
+  /** 主题 */
+  theme?: string | Record<string, unknown>;
+  /** 样式 */
+  style?: React.CSSProperties;
+  /** 类名 */
+  className?: string;
+  /** 是否自动调整大小 */
+  autoResize?: boolean;
+  /** 渲染器类型 */
+  renderer?: 'canvas' | 'svg';
+  /** 加载状态 */
+  loading?: boolean;
+  /** 加载配置 */
+  loadingOption?: Record<string, unknown>;
+  /** 图表初始化回调 */
+  onChartInit?: (chart: any) => void;
+  /** 图表就绪回调 */
+  onChartReady?: (chart: any) => void;
+  /** 事件回调 */
+  onEvents?: Record<string, (params: any) => void>;
+}