@agions/taroviz 1.3.1 → 1.6.0

package/src/adapters/tt/index.ts

@@ -1,92 +1,26 @@
 /**
- * TaroViz 字节跳动小程序适配器
- * 基于字节跳动小程序canvas组件实现图表渲染
+ * TaroViz 抖音小程序适配器
+ * 基于抖音小程序canvas组件实现图表渲染
  */
-import * as React from 'react';
 
-import { Adapter, AdapterOptions } from '../types';
+import { BaseAdapter } from '../BaseAdapter';
+import type { Adapter, TTAdapterOptions } 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;
+export class TTAdapter extends BaseAdapter {
+  private component: unknown = null;
 
-  /**
-   * 构造函数
-   * @param config 适配器配置
-   */
-  constructor(config: ExtendedTTAdapterOptions) {
-    this.config = config;
+  constructor(config: TTAdapterOptions) {
+    super(config);
     this.component = config.component;
   }
 
-  /**
-   * 创建字节跳动小程序适配器实例
-   * @param options 适配器选项
-   * @returns 适配器实例
-   */
-  static create(options: ExtendedTTAdapterOptions): TTAdapter {
-    return new TTAdapter(options);
+  static create(options: TTAdapterOptions): Adapter {
+    return new TTAdapter(options) as unknown as Adapter;
   }
 
-  /**
-   * 获取图表实例
-   */
-  getInstance(): any {
-    return this.chartInstance;
-  }
-
-  /**
-   * 初始化图表
-   */
-  init(): any {
-    const { canvasId, width, height, theme, option } = this.config;
+  init(): unknown {
+    const config = this.config as TTAdapterOptions & { canvasId?: string };
+    const { canvasId, width, height, theme, option } = config;
 
     if (!this.component) {
       console.error('[TaroViz] TTAdapter: component is required');
@@ -98,176 +32,45 @@ class TTAdapter implements Adapter {
       return null;
     }
 
-    // 创建图表实例
-    const chart = this.component.createChart({
+    const chart = (this.component as { createChart: (config: unknown) => unknown }).createChart({
       id: canvasId,
-      width: width,
-      height: height,
-      theme: theme,
+      width,
+      height,
+      theme,
     });
 
-    // 设置图表选项
     if (option) {
-      chart.setOption(option);
+      (chart as { setOption: (o: unknown) => void }).setOption(option);
     }
 
-    // 存储图表实例
     this.chartInstance = chart;
 
-    // 初始化回调
-    if (this.config.onInit) {
-      this.config.onInit(chart);
+    const onInit = this.config['onInit'] as ((instance: unknown) => void) | undefined;
+    if (onInit) {
+      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;
+    return this.parseSize((this.config as TTAdapterOptions).width, 300);
   }
 
-  /**
-   * 获取图表高度
-   */
   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();
-    }
+    return this.parseSize((this.config as TTAdapterOptions).height, 300);
   }
 
-  /**
-   * 销毁图表
-   */
-  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 {
+  setComponent(component: unknown): 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);
-    }
+  dispatchAction(action: unknown): void {
+    (this.chartInstance as { dispatchAction?: (a: unknown) => void })?.dispatchAction?.(action);
   }
 
-  /**
-   * 获取DataURL
-   */
-  getDataURL(opts?: any): string | undefined {
-    return this.chartInstance?.getDataURL(opts);
+  getDataURL(opts?: unknown): string | undefined {
+    return (this.chartInstance as { getDataURL?: (o?: unknown) => string })?.getDataURL?.(opts);
   }
 }
 

package/src/adapters/types.ts

@@ -134,6 +134,42 @@ export interface DDAdapterOptions extends AdapterOptions {
    */
 }
 
+/**
+ * 抖音小程序适配器选项
+ */
+export interface TTAdapterOptions extends AdapterOptions {
+  /**
+   * 抖音小程序特有属性
+   */
+}
+
+/**
+ * QQ小程序适配器选项
+ */
+export interface QQAdapterOptions extends AdapterOptions {
+  /**
+   * QQ小程序特有属性
+   */
+}
+
+/**
+ * 京东小程序适配器选项
+ */
+export interface JDAdapterOptions extends AdapterOptions {
+  /**
+   * 京东小程序特有属性
+   */
+}
+
+/**
+ * 快手小程序适配器选项
+ */
+export interface KwaiAdapterOptions extends AdapterOptions {
+  /**
+   * 快手小程序特有属性
+   */
+}
+
 /**
  * 企业微信小程序适配器选项
  */

package/src/adapters/weapp/index.ts

@@ -2,70 +2,25 @@
  * 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;
-  }
+import { BaseAdapter } from '../BaseAdapter';
+import type { Adapter, WeappAdapterOptions } from '../types';
 
-  /**
-   * 创建微信小程序适配器实例
-   * @param options 适配器选项
-   * @returns 适配器实例
-   */
-  static create(options: ExtendedWeappAdapterOptions): WeappAdapter {
-    return new WeappAdapter(options);
+export class WeappAdapter extends BaseAdapter {
+  private component: unknown = null;
+
+  constructor(config: WeappAdapterOptions) {
+    super(config);
+    this.component = config.component;
   }
 
-  /**
-   * 获取图表实例
-   */
-  getInstance(): any {
-    return this.chartInstance;
+  static create(options: WeappAdapterOptions): Adapter {
+    return new WeappAdapter(options) as unknown as Adapter;
   }
 
-  /**
-   * 初始化图表
-   */
-  init(): any {
-    const { canvasId, width, height, theme, option } = this.config;
+  init(): unknown {
+    const config = this.config as WeappAdapterOptions & { canvasId?: string };
+    const { canvasId, width, height, theme, option } = config;
 
     if (!this.component) {
       console.error('[TaroViz] WeappAdapter: component is required');
@@ -77,160 +32,45 @@ class WeappAdapter implements Adapter {
       return null;
     }
 
-    // 创建图表实例
-    const chart = this.component.createChart({
+    const chart = (this.component as { createChart: (config: unknown) => unknown }).createChart({
       id: canvasId,
-      width: width,
-      height: height,
-      theme: theme,
+      width,
+      height,
+      theme,
     });
 
-    // 设置图表选项
     if (option) {
-      chart.setOption(option);
+      (chart as { setOption: (o: unknown) => void }).setOption(option);
     }
 
-    // 存储图表实例
     this.chartInstance = chart;
 
-    // 初始化回调
-    if (this.config.onInit) {
-      this.config.onInit(chart);
+    const onInit = this.config['onInit'] as ((instance: unknown) => void) | undefined;
+    if (onInit) {
+      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;
+    return this.parseSize((this.config as WeappAdapterOptions).width, 300);
   }
 
-  /**
-   * 获取图表高度
-   */
   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();
-    }
+    return this.parseSize((this.config as WeappAdapterOptions).height, 300);
   }
 
-  /**
-   * 绑定事件
-   */
-  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: unknown): void {
+    this.component = component;
   }
 
-  /**
-   * 设置组件实例
-   */
-  setComponent(component: any): void {
-    this.component = component;
+  dispatchAction(action: unknown): void {
+    (this.chartInstance as { dispatchAction?: (a: unknown) => void })?.dispatchAction?.(action);
   }
 
-  /**
-   * 渲染图表组件
-   */
-  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 },
-    });
+  getDataURL(opts?: unknown): string | undefined {
+    return (this.chartInstance as { getDataURL?: (o?: unknown) => string })?.getDataURL?.(opts);
   }
 }
 

package/src/charts/bar/index.tsx

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