@agions/taroviz 1.1.1 → 1.2.1

package/src/adapters/types.ts

@@ -0,0 +1,162 @@
+/**
+ * TaroViz 适配器类型定义
+ */
+import { CSSProperties } from 'react';
+
+import { PlatformType, Adapter as CoreAdapter } from '../core';
+
+export type Adapter = CoreAdapter;
+export { PlatformType };
+
+/**
+ * 基础适配器选项
+ */
+export interface AdapterOptions {
+  /**
+   * 画布ID
+   */
+  canvasId?: string;
+
+  /**
+   * 宽度
+   */
+  width?: number | string;
+
+  /**
+   * 高度
+   */
+  height?: number | string;
+
+  /**
+   * 主题
+   */
+  theme?: string | object;
+
+  /**
+   * 初始化回调
+   */
+  onInit?: (instance: any) => void;
+
+  /**
+   * 图表选项
+   */
+  option?: any;
+
+  /**
+   * 样式
+   */
+  style?: CSSProperties;
+
+  /**
+   * 是否自动调整大小
+   */
+  autoResize?: boolean;
+
+  /**
+   * 设备像素比
+   */
+  devicePixelRatio?: number;
+
+  /**
+   * 渲染器类型
+   */
+  renderer?: 'canvas' | 'svg';
+
+  /**
+   * CSS类名
+   */
+  className?: string;
+
+  /**
+   * 容器引用
+   */
+  containerRef?: any;
+
+  /**
+   * 额外的平台特定选项
+   */
+  [key: string]: any;
+}
+
+/**
+ * H5适配器选项
+ */
+export interface H5AdapterOptions extends AdapterOptions {
+  /**
+   * 容器引用
+   */
+  containerRef?: any;
+}
+
+/**
+ * 微信小程序适配器选项
+ */
+export interface WeappAdapterOptions extends AdapterOptions {
+  /**
+   * 微信小程序组件实例
+   */
+  component?: any;
+}
+
+/**
+ * 支付宝小程序适配器选项
+ */
+export interface AlipayAdapterOptions extends AdapterOptions {
+  /**
+   * 支付宝小程序特有属性
+   */
+}
+
+/**
+ * 百度小程序适配器选项
+ */
+export interface SwanAdapterOptions extends AdapterOptions {
+  /**
+   * 百度小程序特有属性
+   */
+}
+
+/**
+ * 鸿蒙OS适配器选项
+ */
+export interface HarmonyAdapterOptions extends AdapterOptions {
+  /**
+   * HarmonyOS特有属性
+   */
+}
+
+/**
+ * 钉钉小程序适配器选项
+ */
+export interface DDAdapterOptions extends AdapterOptions {
+  /**
+   * 钉钉小程序特有属性
+   */
+}
+
+/**
+ * 企业微信小程序适配器选项
+ */
+export interface QywxAdapterOptions extends AdapterOptions {
+  /**
+   * 企业微信小程序特有属性
+   */
+}
+
+/**
+ * 飞书小程序适配器选项
+ */
+export interface LarkAdapterOptions extends AdapterOptions {
+  /**
+   * 飞书小程序特有属性
+   */
+}
+
+/**
+ * 小程序通用适配器选项
+ */
+export interface MiniAppAdapterOptions extends AdapterOptions {
+  /**
+   * 小程序特有属性
+   */
+}

package/src/adapters/weapp/index.ts

@@ -0,0 +1,237 @@
+/**
+ * TaroViz 微信小程序适配器
+ * 基于微信小程序canvas组件实现图表渲染
+ */
+import * as React from 'react';
+
+import { Adapter, WeappAdapterOptions } from '../types';
+
+// 扩展 WeappAdapterOptions 类型
+interface ExtendedWeappAdapterOptions extends WeappAdapterOptions {
+  component?: any;
+  canvasId?: string;
+  width?: number | string;
+  height?: number | string;
+  theme?: string | object;
+  option?: any;
+  onInit?: (instance: any) => void;
+}
+
+/**
+ * 微信小程序环境下的图表适配器
+ */
+class WeappAdapter implements Adapter {
+  /**
+   * 配置项
+   */
+  private config: ExtendedWeappAdapterOptions;
+
+  /**
+   * 图表实例
+   */
+  private chartInstance: any | null = null;
+
+  /**
+   * 组件实例
+   */
+  private component: any | null = null;
+
+  /**
+   * 构造函数
+   * @param config 适配器配置
+   */
+  constructor(config: ExtendedWeappAdapterOptions) {
+    this.config = config;
+    this.component = config.component;
+  }
+
+  /**
+   * 创建微信小程序适配器实例
+   * @param options 适配器选项
+   * @returns 适配器实例
+   */
+  static create(options: ExtendedWeappAdapterOptions): WeappAdapter {
+    return new WeappAdapter(options);
+  }
+
+  /**
+   * 获取图表实例
+   */
+  getInstance(): any {
+    return this.chartInstance;
+  }
+
+  /**
+   * 初始化图表
+   */
+  init(): any {
+    const { canvasId, width, height, theme, option } = this.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.createChart({
+      id: canvasId,
+      width: width,
+      height: height,
+      theme: theme,
+    });
+
+    // 设置图表选项
+    if (option) {
+      chart.setOption(option);
+    }
+
+    // 存储图表实例
+    this.chartInstance = chart;
+
+    // 初始化回调
+    if (this.config.onInit) {
+      this.config.onInit(chart);
+    }
+
+    return chart;
+  }
+
+  /**
+   * 设置图表选项
+   */
+  setOption(option: any, opts?: any): void {
+    if (this.chartInstance) {
+      this.chartInstance.setOption(option, opts);
+    } else {
+      this.config.option = option;
+    }
+  }
+
+  /**
+   * 设置主题
+   */
+  setTheme(theme: string | object): void {
+    this.config.theme = theme;
+    if (this.chartInstance) {
+      this.chartInstance.setTheme?.(theme);
+    }
+  }
+
+  /**
+   * 获取图表宽度
+   */
+  getWidth(): number {
+    return 0;
+  }
+
+  /**
+   * 获取图表高度
+   */
+  getHeight(): number {
+    return 0;
+  }
+
+  /**
+   * 获取DOM元素
+   */
+  getDom(): HTMLElement | null {
+    return null;
+  }
+
+  /**
+   * 转换为DataURL
+   */
+  convertToDataURL(opts?: any): string | undefined {
+    return this.chartInstance?.getDataURL(opts);
+  }
+
+  /**
+   * 清空图表
+   */
+  clear(): void {
+    if (this.chartInstance) {
+      this.chartInstance.clear();
+    }
+  }
+
+  /**
+   * 绑定事件
+   */
+  on(event: string, handler: (params: any) => void): void {
+    if (this.chartInstance) {
+      this.chartInstance.on(event, handler);
+    }
+  }
+
+  /**
+   * 解绑事件
+   */
+  off(event: string, handler?: (params: any) => void): void {
+    if (this.chartInstance) {
+      this.chartInstance.off(event, handler);
+    }
+  }
+
+  /**
+   * 显示加载动画
+   */
+  showLoading(opts?: object): void {
+    if (this.chartInstance) {
+      this.chartInstance.showLoading(opts);
+    }
+  }
+
+  /**
+   * 隐藏加载动画
+   */
+  hideLoading(): void {
+    if (this.chartInstance) {
+      this.chartInstance.hideLoading();
+    }
+  }
+
+  /**
+   * 销毁图表
+   */
+  dispose(): void {
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
+
+  /**
+   * 处理图表大小变化
+   */
+  resize(opts?: any): void {
+    if (this.chartInstance) {
+      this.chartInstance.resize(opts);
+    }
+  }
+
+  /**
+   * 设置组件实例
+   */
+  setComponent(component: any): void {
+    this.component = component;
+  }
+
+  /**
+   * 渲染图表组件
+   */
+  render(): JSX.Element {
+    const { canvasId = 'ec-canvas', width = '100%', height = '300px', style = {} } = this.config;
+    // 注意：这里需要根据实际使用的Taro版本和组件库来调整
+    return React.createElement('view', {
+      id: canvasId,
+      style: { width, height, ...style },
+    });
+  }
+}
+
+export default WeappAdapter;

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

@@ -0,0 +1,113 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import BarChart 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', () => ({
+  BarChart: 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('BarChart 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: 'bar' as const,
+      },
+    ],
+  };
+
+  it('should render correctly with default props', () => {
+    const { getByTestId } = render(<BarChart option={mockOption} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+    expect(chartWrapper).toHaveClass('taroviz-bar-chart');
+  });
+
+  it('should pass the correct option to BaseChartWrapper', () => {
+    const { getByTestId } = render(<BarChart option={mockOption} />);
+
+    const chartOption = getByTestId('chart-option');
+    expect(JSON.parse(chartOption.textContent || '')).toEqual(mockOption);
+  });
+
+  it('should render with custom width and height', () => {
+    const customWidth = '600px';
+    const customHeight = '450px';
+
+    const { getByTestId } = render(
+      <BarChart 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-bar-chart';
+
+    const { getByTestId } = render(<BarChart option={mockOption} className={customClass} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toHaveClass(customClass);
+  });
+
+  it('should render with loading state', () => {
+    const { getByTestId } = render(<BarChart option={mockOption} loading={true} />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+  });
+
+  it('should render with svg renderer', () => {
+    const { getByTestId } = render(<BarChart option={mockOption} renderer="svg" />);
+
+    const chartWrapper = getByTestId('base-chart-wrapper');
+    expect(chartWrapper).toBeInTheDocument();
+  });
+});

package/src/charts/bar/index.tsx

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

package/src/charts/common/BaseChartWrapper.tsx

@@ -0,0 +1,136 @@
+/**
+ * 基础图表包装组件
+ * 提供统一的图表初始化、渲染和生命周期管理
+ */
+import * as echarts from 'echarts/core';
+import React, { useEffect, useRef, useMemo } from 'react';
+
+import { getAdapter } from '../../adapters';
+import { uuid } from '../../core/utils';
+import { BaseChartProps } from '../types';
+import { processAdapterConfig, safeRenderAdapter } from '../utils';
+
+/**
+ * 基础图表包装组件
+ * 提供统一的图表初始化、渲染和生命周期管理
+ */
+const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
+  option,
+  width = '100%',
+  height = '300px',
+  theme,
+  style = {},
+  className = '',
+  autoResize = true,
+  loading = false,
+  loadingOption,
+  onChartInit,
+  onChartReady,
+  renderer = 'canvas',
+  onEvents = {},
+  chartType = 'chart',
+}) => {
+  const chartId = useRef<string>(`${chartType}-${uuid()}`);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 使用 useMemo 缓存适配器配置，并处理类型问题
+  const adapterConfig = useMemo(() => {
+    return processAdapterConfig({
+      canvasId: chartId.current,
+      containerRef,
+      width,
+      height,
+      theme,
+      autoResize,
+      renderer,
+      option,
+    });
+  }, [width, height, theme, autoResize, renderer, option, chartType]);
+
+  // 处理图表初始化
+  useEffect(() => {
+    const initConfig = processAdapterConfig({
+      ...adapterConfig,
+      onInit: (instance: echarts.ECharts) => {
+        chartInstance.current = instance;
+
+        // 绑定事件
+        if (onEvents) {
+          Object.keys(onEvents).forEach((eventName) => {
+            instance.on(eventName, onEvents[eventName]);
+          });
+        }
+
+        // 初始化回调
+        if (onChartInit) {
+          onChartInit(instance);
+        }
+
+        // 准备好回调
+        if (onChartReady) {
+          onChartReady(instance);
+        }
+      },
+    });
+
+    // 获取适配器并初始化
+    const adapter = getAdapter(initConfig);
+    adapter.init();
+
+    // 组件卸载时清理
+    return () => {
+      if (chartInstance.current) {
+        // 解绑事件
+        if (onEvents) {
+          Object.keys(onEvents).forEach((eventName) => {
+            chartInstance.current?.off(eventName);
+          });
+        }
+        chartInstance.current.dispose();
+        chartInstance.current = null;
+      }
+    };
+  }, [adapterConfig, onChartInit, onChartReady, onEvents]);
+
+  // 更新配置
+  useEffect(() => {
+    if (chartInstance.current) {
+      chartInstance.current.setOption(option, true);
+    }
+  }, [option]);
+
+  // 控制加载状态
+  useEffect(() => {
+    if (chartInstance.current) {
+      if (loading) {
+        chartInstance.current.showLoading(loadingOption);
+      } else {
+        chartInstance.current.hideLoading();
+      }
+    }
+  }, [loading, loadingOption]);
+
+  // 自定义样式
+  const mergedStyle = {
+    width: typeof width === 'number' ? `${width}px` : width,
+    height: typeof height === 'number' ? `${height}px` : height,
+    ...style,
+  };
+
+  // 使用带有处理的适配器配置创建适配器实例
+  const adapter = getAdapter(adapterConfig);
+
+  return (
+    <div
+      className={`taroviz-${chartType} ${className}`}
+      style={mergedStyle}
+      ref={containerRef as React.RefObject<HTMLDivElement>}
+    >
+      {/* 安全地渲染适配器 */}
+      {safeRenderAdapter(adapter)}
+    </div>
+  );
+};
+
+export default BaseChartWrapper;

package/src/charts/funnel/index.tsx

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

package/src/charts/gauge/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * 仪表盘组件
+ */
+import React from 'react';
+
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { GaugeChartProps } from '../types';
+
+import '@/core/echarts';
+
+/**
+ * 仪表盘组件
+ */
+const GaugeChart: React.FC<GaugeChartProps> = (props) => (
+  <BaseChartWrapper {...props} chartType="gauge-chart" />
+);
+
+export default GaugeChart;

package/src/charts/heatmap/index.tsx

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