@agions/taroviz 1.1.1 → 1.2.1

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,18 @@
+/**
+ * 折线图组件
+ */
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { LineChartProps } from '../types';
+
+import '@/core/echarts';
+
+/**
+ * 折线图组件
+ */
+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,19 @@
+/**
+ * 饼图组件
+ */
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { BaseChartProps } from '../types';
+
+// 导入统一注册的 echarts
+import '@/core/echarts';
+
+/**
+ * 饼图组件
+ */
+const PieChart: React.FC<BaseChartProps> = (props) => (
+  <BaseChartWrapper {...props} chartType="pie-chart" />
+);
+
+export default PieChart;

package/src/charts/radar/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * 雷达图组件
+ */
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { RadarChartProps } from '../types';
+
+import '@/core/echarts';
+
+/**
+ * 雷达图组件
+ */
+const RadarChart: React.FC<RadarChartProps> = (props) => (
+  <BaseChartWrapper {...props} chartType="radar-chart" />
+);
+
+export default RadarChart;

package/src/charts/scatter/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * 散点图组件
+ */
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { ScatterChartProps } from '../types';
+
+import '@/core/echarts';
+
+/**
+ * 散点图组件
+ */
+const ScatterChart: React.FC<ScatterChartProps> = (props) => (
+  <BaseChartWrapper {...props} chartType="scatter-chart" />
+);
+
+export default ScatterChart;