@agions/taroviz 1.1.0 → 1.2.0

package/src/adapters/index.ts

@@ -0,0 +1,234 @@
+/**
+ * TaroViz 平台适配器
+ * 自动检测并加载适合当前平台的适配器
+ */
+
+import { PlatformType } from '../core';
+
+import type { AdapterOptions, Adapter } from './types';
+
+/**
+ * 检测当前运行的平台环境
+ * @returns 当前平台类型
+ */
+export function detectPlatform(): PlatformType {
+  // 服务端渲染环境
+  if (typeof window === 'undefined') {
+    return PlatformType.H5; // 默认返回H5，实际并不会在服务端渲染图表
+  }
+
+  // 微信小程序
+  if (
+    typeof window !== 'undefined' &&
+    'wx' in window &&
+    typeof (window as any).wx.getSystemInfoSync === 'function'
+  ) {
+    return PlatformType.WEAPP;
+  }
+
+  // 支付宝小程序
+  if (
+    typeof window !== 'undefined' &&
+    'my' in window &&
+    typeof (window as any).my.getSystemInfoSync === 'function'
+  ) {
+    return PlatformType.ALIPAY;
+  }
+
+  // 百度小程序
+  if (
+    typeof window !== 'undefined' &&
+    'swan' in window &&
+    typeof (window as any).swan.getSystemInfoSync === 'function'
+  ) {
+    return PlatformType.SWAN;
+  }
+
+  // 字节跳动小程序
+  if (
+    typeof window !== 'undefined' &&
+    'tt' in window &&
+    typeof (window as any).tt.getSystemInfoSync === 'function'
+  ) {
+    return PlatformType.TT;
+  }
+
+  // QQ小程序
+  if (
+    typeof window !== 'undefined' &&
+    'qq' in window &&
+    typeof (window as any).qq.getSystemInfoSync === 'function'
+  ) {
+    return PlatformType.QQ;
+  }
+
+  // 京东小程序
+  if (
+    typeof window !== 'undefined' &&
+    'jd' in window &&
+    typeof (window as any).jd.getSystemInfoSync === 'function'
+  ) {
+    return PlatformType.JD;
+  }
+
+  // 钉钉小程序
+  if (
+    typeof window !== 'undefined' &&
+    'dd' in window &&
+    typeof (window as any).dd.getSystemInfoSync === 'function'
+  ) {
+    return PlatformType.DD;
+  }
+
+  // 企业微信小程序
+  if (typeof window !== 'undefined' && 'wx' in window && 'qy' in (window as any).wx) {
+    return PlatformType.QYWX;
+  }
+
+  // 飞书小程序
+  if (
+    typeof window !== 'undefined' &&
+    'tt' in window &&
+    typeof (window as any).tt.getSystemInfoSync === 'function' &&
+    (window as any).tt.env?.appName === 'lark'
+  ) {
+    return PlatformType.LARK;
+  }
+
+  // 鸿蒙OS（通过UserAgent判断）
+  if (typeof navigator !== 'undefined' && navigator.userAgent.includes('HarmonyOS')) {
+    return PlatformType.HARMONY;
+  }
+
+  // 默认为H5
+  return PlatformType.H5;
+}
+
+/**
+ * 判断运行环境
+ * @returns 当前环境类型 ('h5' | 'weapp' | 'unknown')
+ */
+export function getEnv(): 'h5' | 'weapp' | 'unknown' {
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    return 'h5';
+  } else if (
+    typeof global !== 'undefined' &&
+    typeof (global as any)['wx'] !== 'undefined' &&
+    typeof (global as any)['wx'].getSystemInfoSync === 'function'
+  ) {
+    return 'weapp';
+  }
+  return 'unknown';
+}
+
+/**
+ * 获取适配器
+ * @param options 适配器选项
+ * @returns 适配器实例
+ */
+export function getAdapter(options: AdapterOptions): Adapter {
+  const platform = detectPlatform();
+
+  try {
+    switch (platform) {
+      case PlatformType.H5: {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const H5Adapter = require('./h5').default;
+        return H5Adapter.create(options) as Adapter;
+      }
+      case PlatformType.WEAPP: {
+        // 微信小程序环境需要component属性
+        // 如果提供了component，则使用WeappAdapter
+        // 否则回退到H5Adapter
+        if ('component' in options) {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          const WeappAdapter = require('./weapp').default;
+          return WeappAdapter.create(options as any) as Adapter;
+        }
+        console.error('[TaroViz] WeappAdapter requires component property, fallback to H5Adapter');
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const FallbackH5Adapter = require('./h5').default;
+        return FallbackH5Adapter.create(options) as Adapter;
+      }
+      case PlatformType.SWAN: {
+        // 百度小程序环境需要component属性
+        if ('component' in options) {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          const SwanAdapter = require('./swan').default;
+          return SwanAdapter.create(options as any) as Adapter;
+        }
+        console.error('[TaroViz] SwanAdapter requires component property, fallback to H5Adapter');
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const FallbackH5Adapter = require('./h5').default;
+        return FallbackH5Adapter.create(options) as Adapter;
+      }
+      case PlatformType.TT: {
+        // 字节跳动小程序环境需要component属性
+        if ('component' in options) {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          const TTAdapter = require('./tt').default;
+          return TTAdapter.create(options as any) as Adapter;
+        }
+        console.error('[TaroViz] TTAdapter requires component property, fallback to H5Adapter');
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const FallbackH5Adapter = require('./h5').default;
+        return FallbackH5Adapter.create(options) as Adapter;
+      }
+      case PlatformType.HARMONY: {
+        // HarmonyOS环境需要component属性
+        if ('component' in options) {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          const HarmonyAdapter = require('./harmony').default;
+          return HarmonyAdapter.create(options as any) as Adapter;
+        }
+        console.error(
+          '[TaroViz] HarmonyAdapter requires component property, fallback to H5Adapter'
+        );
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const FallbackH5Adapter = require('./h5').default;
+        return FallbackH5Adapter.create(options) as Adapter;
+      }
+      default: {
+        console.warn(`[TaroViz] Platform '${platform}' not supported, fallback to H5Adapter`);
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const DefaultH5Adapter = require('./h5').default;
+        return DefaultH5Adapter.create(options) as Adapter;
+      }
+    }
+  } catch (error) {
+    console.error(`[TaroViz] Failed to load adapter for platform '${platform}':`, error);
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const DefaultH5Adapter = require('./h5').default;
+    return DefaultH5Adapter.create(options) as Adapter;
+  }
+}
+
+// 导出所有适配器
+export { default as H5Adapter } from './h5';
+export { default as WeappAdapter } from './weapp';
+export { default as SwanAdapter } from './swan';
+export { default as TTAdapter } from './tt';
+export { default as HarmonyAdapter } from './harmony';
+
+/**
+ * 版本信息
+ */
+export const version = '1.1.1';
+
+export * from './types';
+
+export default {
+  getAdapter,
+  getEnv,
+  detectPlatform,
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  h5: require('./h5').default,
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  weapp: require('./weapp').default,
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  swan: require('./swan').default,
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  tt: require('./tt').default,
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  harmony: require('./harmony').default,
+};

package/src/adapters/swan/index.ts

@@ -0,0 +1,274 @@
+/**
+ * TaroViz 百度小程序适配器
+ * 基于百度小程序canvas组件实现图表渲染
+ */
+import * as React from 'react';
+
+import { Adapter, SwanAdapterOptions } from '../types';
+
+// 扩展 SwanAdapterOptions 类型
+interface ExtendedSwanAdapterOptions extends SwanAdapterOptions {
+  /**
+   * 百度小程序组件实例
+   */
+  component?: any;
+  /**
+   * 画布ID
+   */
+  canvasId?: string;
+  /**
+   * 宽度
+   */
+  width?: number | string;
+  /**
+   * 高度
+   */
+  height?: number | string;
+  /**
+   * 主题
+   */
+  theme?: string | object;
+  /**
+   * 图表选项
+   */
+  option?: any;
+  /**
+   * 初始化回调
+   */
+  onInit?: (instance: any) => void;
+}
+
+/**
+ * 百度小程序环境下的图表适配器
+ */
+class SwanAdapter implements Adapter {
+  /**
+   * 配置项
+   */
+  private config: ExtendedSwanAdapterOptions;
+
+  /**
+   * 图表实例
+   */
+  private chartInstance: any | null = null;
+
+  /**
+   * 组件实例
+   */
+  private component: any | null = null;
+
+  /**
+   * 构造函数
+   * @param config 适配器配置
+   */
+  constructor(config: ExtendedSwanAdapterOptions) {
+    this.config = config;
+    this.component = config.component;
+  }
+
+  /**
+   * 创建百度小程序适配器实例
+   * @param options 适配器选项
+   * @returns 适配器实例
+   */
+  static create(options: ExtendedSwanAdapterOptions): SwanAdapter {
+    return new SwanAdapter(options);
+  }
+
+  /**
+   * 获取图表实例
+   */
+  getInstance(): any {
+    return this.chartInstance;
+  }
+
+  /**
+   * 初始化图表
+   */
+  init(): any {
+    const { canvasId, width, height, theme, option } = this.config;
+
+    if (!this.component) {
+      console.error('[TaroViz] SwanAdapter: component is required');
+      return null;
+    }
+
+    if (!canvasId) {
+      console.error('[TaroViz] SwanAdapter: 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 },
+    });
+  }
+
+  /**
+   * 触发图表行为
+   */
+  dispatchAction(payload: any): void {
+    if (this.chartInstance) {
+      this.chartInstance.dispatchAction(payload);
+    }
+  }
+
+  /**
+   * 获取DataURL
+   */
+  getDataURL(opts?: any): string | undefined {
+    return this.chartInstance?.getDataURL(opts);
+  }
+}
+
+export default SwanAdapter;