@agions/taroviz 1.1.1 → 1.2.1

package/src/adapters/index.ts

@@ -0,0 +1,166 @@
+/**
+ * TaroViz 平台适配器
+ * 自动检测并加载适合当前平台的适配器
+ */
+
+import { PlatformType } from '../core';
+
+import type { AdapterOptions, Adapter } from './types';
+
+/**
+ * 平台配置映射
+ */
+interface PlatformConfig {
+  name: string;
+  requireComponent?: boolean;
+}
+
+const PLATFORM_CONFIGS: Record<PlatformType, PlatformConfig> = {
+  [PlatformType.H5]: { name: 'H5' },
+  [PlatformType.WEAPP]: { name: 'Wechat', requireComponent: true },
+  [PlatformType.ALIPAY]: { name: 'Alipay', requireComponent: true },
+  [PlatformType.SWAN]: { name: 'Baidu', requireComponent: true },
+  [PlatformType.TT]: { name: 'ByteDance', requireComponent: true },
+  [PlatformType.QQ]: { name: 'QQ', requireComponent: true },
+  [PlatformType.JD]: { name: 'JD', requireComponent: true },
+  [PlatformType.DD]: { name: 'DingTalk', requireComponent: true },
+  [PlatformType.QYWX]: { name: 'QiyeWechat' },
+  [PlatformType.LARK]: { name: 'Lark' },
+  [PlatformType.HARMONY]: { name: 'HarmonyOS', requireComponent: true },
+};
+
+/**
+ * 检测当前运行的平台环境
+ */
+export function detectPlatform(): PlatformType {
+  if (typeof window === 'undefined') {
+    return PlatformType.H5;
+  }
+
+  const checks: Array<{ test: () => boolean; platform: PlatformType }> = [
+    {
+      test: () =>
+        'wx' in window && (window as any).wx?.getSystemInfoSync && !(window as any).wx?.qy,
+      platform: PlatformType.WEAPP,
+    },
+    {
+      test: () => 'my' in window && (window as any).my?.getSystemInfoSync,
+      platform: PlatformType.ALIPAY,
+    },
+    {
+      test: () => 'swan' in window && (window as any).swan?.getSystemInfoSync,
+      platform: PlatformType.SWAN,
+    },
+    {
+      test: () => 'tt' in window && (window as any).tt?.getSystemInfoSync,
+      platform: PlatformType.TT,
+    },
+    {
+      test: () => 'qq' in window && (window as any).qq?.getSystemInfoSync,
+      platform: PlatformType.QQ,
+    },
+    {
+      test: () => 'jd' in window && (window as any).jd?.getSystemInfoSync,
+      platform: PlatformType.JD,
+    },
+    {
+      test: () => 'dd' in window && (window as any).dd?.getSystemInfoSync,
+      platform: PlatformType.DD,
+    },
+    { test: () => 'wx' in window && (window as any).wx?.qy, platform: PlatformType.QYWX },
+    {
+      test: () => 'tt' in window && (window as any).tt?.env?.appName === 'lark',
+      platform: PlatformType.LARK,
+    },
+    { test: () => navigator.userAgent.includes('HarmonyOS'), platform: PlatformType.HARMONY },
+  ];
+
+  for (const check of checks) {
+    if (check.test()) {
+      return check.platform;
+    }
+  }
+
+  return PlatformType.H5;
+}
+
+/**
+ * 判断运行环境
+ */
+export function getEnv(): 'h5' | 'weapp' | 'unknown' {
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    return 'h5';
+  }
+  if (typeof global !== 'undefined' && (global as any)?.wx?.getSystemInfoSync) {
+    return 'weapp';
+  }
+  return 'unknown';
+}
+
+/**
+ * 创建适配器实例
+ */
+function createAdapterInstance(platform: PlatformType, options: AdapterOptions): Adapter {
+  const adapters: Record<PlatformType, () => Adapter> = {
+    [PlatformType.H5]: () => require('./h5').default.create(options),
+    [PlatformType.WEAPP]: () => require('./weapp').default.create(options),
+    [PlatformType.SWAN]: () => require('./swan').default.create(options),
+    [PlatformType.TT]: () => require('./tt').default.create(options),
+    [PlatformType.HARMONY]: () => require('./harmony').default.create(options),
+    [PlatformType.ALIPAY]: () => require('./h5').default.create(options),
+    [PlatformType.QQ]: () => require('./h5').default.create(options),
+    [PlatformType.JD]: () => require('./h5').default.create(options),
+    [PlatformType.DD]: () => require('./h5').default.create(options),
+    [PlatformType.QYWX]: () => require('./h5').default.create(options),
+    [PlatformType.LARK]: () => require('./h5').default.create(options),
+  };
+
+  return adapters[platform]();
+}
+
+/**
+ * 获取适配器
+ */
+export function getAdapter(options: AdapterOptions): Adapter {
+  const platform = detectPlatform();
+  const config = PLATFORM_CONFIGS[platform];
+
+  // 检查是否需要 component 属性
+  if (config?.requireComponent && !('component' in options)) {
+    console.warn(
+      `[TaroViz] ${config.name}Adapter requires component property, fallback to H5Adapter`
+    );
+  }
+
+  try {
+    return createAdapterInstance(platform, options);
+  } catch (error) {
+    console.error(`[TaroViz] Failed to load adapter for platform '${platform}':`, error);
+    return require('./h5').default.create(options);
+  }
+}
+
+// 导出所有适配器
+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.2.0';
+
+export * from './types';
+
+export default {
+  getAdapter,
+  getEnv,
+  detectPlatform,
+  h5: require('./h5').default,
+  weapp: require('./weapp').default,
+  swan: require('./swan').default,
+  tt: require('./tt').default,
+  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;

package/src/adapters/tt/index.ts

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