@agions/taroviz 1.11.5 → 2.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@agions/taroviz",
-  "version": "1.11.5",
-  "description": "基于 Taro 和 ECharts 的多端图表组件库",
+  "version": "2.0.3",
+  "description": "基于 Taro 和 ECharts 的多端图表组件库 - v2.0.0 大版本更新，新增 6 种图表类型",
   "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -42,10 +42,6 @@
     "test:watch": "jest --watch",
     "test:ci": "jest --ci --maxWorkers=50%",
     "test:coverage": "jest --coverage",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "cypress:component": "cypress open --component",
-    "test:e2e": "cypress run --e2e",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "lint:prettier": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
@@ -86,24 +82,24 @@
     "@commitlint/cli": "^19.0.0",
     "@commitlint/config-conventional": "^19.0.0",
     "@release-it/conventional-changelog": "^8.0.0",
-    "@testing-library/cypress": "^10.1.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.24",
+    "@types/node": "^20.19.39",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.3.7",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^8.59.1",
     "@typescript-eslint/parser": "^8.59.1",
-    "ajv": "^8.18.0",
+    "ajv": "^8.20.0",
+    "ajv-formats": "^3.0.1",
     "babel-loader": "^10.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "commitizen": "^4.3.0",
     "core-js": "3.41.0",
     "css-loader": "^7.1.2",
-    "cypress": "^15.7.0",
+    "echarts": "^5.6.0",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.3.2",
@@ -120,6 +116,7 @@
     "marked": "^12.0.2",
     "mini-css-extract-plugin": "^2.9.2",
     "prettier": "^3.2.5",
+    "react": "^18.2.0",
     "react-dom": "^18.3.1",
     "release-it": "^17.0.0",
     "rimraf": "^5.0.5",
@@ -130,13 +127,14 @@
     "ts-loader": "^9.5.2",
     "typedoc": "^0.28.2",
     "typedoc-plugin-markdown": "^3.17.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.9.3",
     "vitepress": "^1.6.4",
     "webpack": "^5.90.3",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
-    "whatwg-fetch": "^3.6.20"
+    "whatwg-fetch": "^3.6.20",
+    "zrender": "^5.6.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
@@ -147,7 +145,6 @@
     "@tarojs/runtime": "^3.6.0",
     "@tarojs/taro": "^3.6.0",
     "echarts": "^5.4.3",
-    "react": "^18.2.0",
     "zrender": "^5.4.3"
   },
   "peerDependenciesMeta": {
@@ -179,8 +176,6 @@
     "url": "https://github.com/agions/taroviz/issues"
   },
   "overrides": {
-    "ajv": "^8.18.0",
-    "ajv-formats": "^3.0.0",
     "brace-expansion": "^3.0.1",
     "esbuild": "^0.24.2",
     "systeminformation": "^5.22.0",

package/src/adapters/h5/index.ts

@@ -23,7 +23,7 @@ interface ExtendedH5AdapterOptions extends H5AdapterOptions {
   height?: number | string;
   theme?: string | object;
   option?: EChartsOption;
-  onInit?: (instance: EChartsType) => void;
+  onInit?: (_instance: EChartsType) => void;
   containerRef?: HTMLElement | { current: HTMLElement | null };
   direction?: 'ltr' | 'rtl';
 }
@@ -46,7 +46,7 @@ class H5Adapter implements Adapter {
   /**
    * 图表实例
    */
-  private instance: EChartsType | null = null;
+  private _instance: EChartsType | null = null;
   private options: ExtendedH5AdapterOptions;
   private containerRef: ExtendedH5AdapterOptions['containerRef'] = undefined;
   private canvasId: string;
@@ -70,8 +70,8 @@ class H5Adapter implements Adapter {
    * 初始化图表
    */
   init(_options?: EChartsOption): EChartsType {
-    if (this.instance) {
-      return this.instance;
+    if (this._instance) {
+      return this._instance;
     }
 
     // 获取容器元素
@@ -85,16 +85,16 @@ class H5Adapter implements Adapter {
 
     // 初始化图表
 
-    this.instance = echarts.init(container as HTMLElement, this.options.theme, {
+    this._instance = echarts.init(container as HTMLElement, this.options.theme, {
       // 性能优化选项
       useDirtyRect: true, // 使用脏矩形渲染，减少重绘区域
       renderer: this.options.renderer || 'canvas',
     }) as unknown as EChartsType;
 
     // 设置性能优化相关的全局配置
-    if (this.instance) {
+    if (this._instance) {
       // 渐进式渲染配置
-      this.instance.setOption(
+      this._instance.setOption(
         {
           animation: this.options.option?.animation !== false,
           animationDurationUpdate: 300,
@@ -107,31 +107,31 @@ class H5Adapter implements Adapter {
     }
 
     // 设置初始化选项，使用lazyUpdate优化性能
-    if (this.options.option && this.instance) {
-      this.instance.setOption(this.options.option, false, true);
+    if (this.options.option && this._instance) {
+      this._instance.setOption(this.options.option, false, true);
     }
 
     // 执行初始化回调
-    if (this.options.onInit && this.instance) {
-      this.options.onInit(this.instance);
+    if (this.options.onInit && this._instance) {
+      this.options.onInit(this._instance);
     }
 
-    return this.instance as EChartsType;
+    return this._instance as EChartsType;
   }
 
   /**
    * 获取图表实例
    */
   getInstance(): EChartsType | null {
-    return this.instance;
+    return this._instance;
   }
 
   /**
    * 设置图表选项
    */
   setOption(option: EChartsOption, notMerge?: boolean, lazyUpdate?: boolean): void {
-    if (this.instance) {
-      this.instance.setOption(option, notMerge, lazyUpdate);
+    if (this._instance) {
+      this._instance.setOption(option, notMerge, lazyUpdate);
     } else {
       this.options.option = option;
     }
@@ -142,9 +142,9 @@ class H5Adapter implements Adapter {
    */
   setTheme(theme: string | object): void {
     this.options.theme = theme;
-    if (this.instance) {
+    if (this._instance) {
       // 使用类型断言来访问私有方法
-      (this.instance as any).setTheme?.(theme);
+      (this._instance as any).setTheme?.(theme);
     }
   }
 
@@ -152,14 +152,14 @@ class H5Adapter implements Adapter {
    * 获取图表宽度
    */
   getWidth(): number {
-    return this.instance?.getWidth() || 0;
+    return this._instance?.getWidth() || 0;
   }
 
   /**
    * 获取图表高度
    */
   getHeight(): number {
-    return this.instance?.getHeight() || 0;
+    return this._instance?.getHeight() || 0;
   }
 
   /**
@@ -178,15 +178,15 @@ class H5Adapter implements Adapter {
     pixelRatio?: number;
     backgroundColor?: string;
   }): string | undefined {
-    return this.instance?.getDataURL(opts);
+    return this._instance?.getDataURL(opts);
   }
 
   /**
    * 清空图表
    */
   clear(): void {
-    if (this.instance) {
-      this.instance.clear();
+    if (this._instance) {
+      this._instance.clear();
     }
   }
 
@@ -194,8 +194,8 @@ class H5Adapter implements Adapter {
    * 绑定事件
    */
   on(event: string, handler: EventHandler): void {
-    if (this.instance) {
-      this.instance.on(event, handler as any);
+    if (this._instance) {
+      this._instance.on(event, handler as any);
     }
   }
 
@@ -203,8 +203,8 @@ class H5Adapter implements Adapter {
    * 解绑事件
    */
   off(event: string, handler?: EventHandler): void {
-    if (this.instance) {
-      this.instance.off(event, handler as any);
+    if (this._instance) {
+      this._instance.off(event, handler as any);
     }
   }
 
@@ -212,8 +212,8 @@ class H5Adapter implements Adapter {
    * 显示加载动画
    */
   showLoading(opts?: object): void {
-    if (this.instance) {
-      this.instance.showLoading(opts);
+    if (this._instance) {
+      this._instance.showLoading(opts);
     }
   }
 
@@ -221,8 +221,8 @@ class H5Adapter implements Adapter {
    * 隐藏加载动画
    */
   hideLoading(): void {
-    if (this.instance) {
-      this.instance.hideLoading();
+    if (this._instance) {
+      this._instance.hideLoading();
     }
   }
 
@@ -250,9 +250,9 @@ class H5Adapter implements Adapter {
    * 销毁图表
    */
   dispose(): void {
-    if (this.instance) {
-      this.instance.dispose();
-      this.instance = null;
+    if (this._instance) {
+      this._instance.dispose();
+      this._instance = null;
     }
   }
 
@@ -260,8 +260,8 @@ class H5Adapter implements Adapter {
    * 触发图表行为
    */
   dispatchAction(payload: { type: string; [key: string]: unknown }): void {
-    if (this.instance) {
-      this.instance.dispatchAction(payload);
+    if (this._instance) {
+      this._instance.dispatchAction(payload);
     }
   }
 
@@ -269,15 +269,15 @@ class H5Adapter implements Adapter {
    * 获取DataURL
    */
   getDataURL(opts?: object): string | undefined {
-    return this.instance?.getDataURL(opts);
+    return this._instance?.getDataURL(opts);
   }
 
   /**
    * 处理图表大小变化
    */
   resize(opts?: object): void {
-    if (this.instance) {
-      this.instance.resize(opts);
+    if (this._instance) {
+      this._instance.resize(opts);
     }
   }
 

package/src/adapters/index.ts

@@ -6,6 +6,8 @@
  */
 
 import { PlatformType } from '../core';
+import { detectRuntime } from '../core/utils/runtime';
+import type { RuntimeInfo } from '../core/utils/runtime';
 import type { AdapterOptions, Adapter } from './types';
 
 /**
@@ -31,40 +33,37 @@ const PLATFORM_CONFIGS: Record<PlatformType, PlatformConfig> = {
   [PlatformType.HARMONY]: { name: 'HarmonyOS', requireComponent: true },
 };
 
+/** Map RuntimeInfo miniAppType to PlatformType */
+const MINI_APP_TO_PLATFORM: Record<string, PlatformType> = {
+  weapp: PlatformType.WEAPP,
+  alipay: PlatformType.ALIPAY,
+  swan: PlatformType.SWAN,
+  tt: PlatformType.TT,
+  qq: PlatformType.QQ,
+  jd: PlatformType.JD,
+  dd: PlatformType.DD,
+  qywx: PlatformType.QYWX,
+  lark: PlatformType.LARK,
+  kwai: PlatformType.KWAI,
+};
+
 /**
  * 检测当前运行的平台环境
+ *
+ * Delegates to the unified detectRuntime() and maps the result to PlatformType.
+ * Also checks for HarmonyOS via userAgent, which is not a mini-app.
  */
 export function detectPlatform(): PlatformType {
-  if (typeof window === 'undefined') {
-    return PlatformType.H5;
+  const runtime: RuntimeInfo = detectRuntime();
+
+  if (runtime.platform === 'miniapp' && runtime.miniAppType) {
+    return MINI_APP_TO_PLATFORM[runtime.miniAppType] ?? PlatformType.H5;
   }
 
-  const win = window as Window & {
-    wx?: { getSystemInfoSync?: unknown; qy?: unknown };
-    my?: { getSystemInfoSync?: unknown };
-    swan?: { getSystemInfoSync?: unknown };
-    tt?: { getSystemInfoSync?: unknown; env?: { appName?: string } };
-    qq?: { getSystemInfoSync?: unknown };
-    jd?: { getSystemInfoSync?: unknown };
-    dd?: { getSystemInfoSync?: unknown };
-  };
-
-  const checks: Array<{ test: () => boolean; platform: PlatformType }> = [
-    { test: () => !!win.wx?.getSystemInfoSync && !win.wx?.qy, platform: PlatformType.WEAPP },
-    { test: () => !!win.my?.getSystemInfoSync, platform: PlatformType.ALIPAY },
-    { test: () => !!win.swan?.getSystemInfoSync, platform: PlatformType.SWAN },
-    { test: () => !!win.tt?.getSystemInfoSync, platform: PlatformType.TT },
-    { test: () => !!win.qq?.getSystemInfoSync, platform: PlatformType.QQ },
-    { test: () => !!win.jd?.getSystemInfoSync, platform: PlatformType.JD },
-    { test: () => !!win.dd?.getSystemInfoSync, platform: PlatformType.DD },
-    { test: () => !!win.wx?.qy, platform: PlatformType.QYWX },
-    { test: () => win.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;
+  // HarmonyOS: detected via userAgent in browser context
+  if (runtime.platform === 'browser' && typeof navigator !== 'undefined') {
+    if (navigator.userAgent.includes('HarmonyOS')) {
+      return PlatformType.HARMONY;
     }
   }
 
@@ -75,13 +74,12 @@ export function detectPlatform(): PlatformType {
  * 判断运行环境
  */
 export function getEnv(): 'h5' | 'weapp' | 'unknown' {
-  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  const runtime = detectRuntime();
+
+  if (runtime.isBrowser) {
     return 'h5';
   }
-  if (
-    typeof global !== 'undefined' &&
-    (global as Global & { wx?: { getSystemInfoSync?: unknown } })?.wx?.getSystemInfoSync
-  ) {
+  if (runtime.isMiniApp && runtime.miniAppType === 'weapp') {
     return 'weapp';
   }
   return 'unknown';
@@ -131,7 +129,7 @@ export async function getAdapter(options: AdapterOptions): Promise<Adapter> {
       }
       case PlatformType.HARMONY: {
         const { HarmonyAdapter } = (await import('./harmony')) as unknown as {
-          HarmonyAdapter: { create: (opts: object) => Adapter };
+          HarmonyAdapter: { create: (_opts: object) => Adapter };
         };
         return HarmonyAdapter.create(options);
       }

package/src/adapters/types.ts

@@ -22,7 +22,7 @@ export interface AdapterOptions {
   theme?: string | object;
   option?: unknown;
 
-  onInit?: (instance: EChartsType) => void;
+  onInit?: (_instance: EChartsType) => void;
   style?: CSSProperties;
   autoResize?: boolean;
   devicePixelRatio?: number;
@@ -49,57 +49,25 @@ export interface WeappAdapterOptions extends AdapterOptions {
   component?: object;
 }
 
-/**
- * 支付宝小程序适配器选项
- */
-export interface AlipayAdapterOptions extends AdapterOptions {}
-
-/**
- * 百度小程序适配器选项
- */
-export interface SwanAdapterOptions extends AdapterOptions {}
-
-/**
- * 鸿蒙OS适配器选项
- */
-export interface HarmonyAdapterOptions extends AdapterOptions {}
-
-/**
- * 钉钉小程序适配器选项
- */
-export interface DDAdapterOptions extends AdapterOptions {}
-
-/**
- * 抖音小程序适配器选项
- */
-export interface TTAdapterOptions extends AdapterOptions {}
-
-/**
- * QQ小程序适配器选项
- */
-export interface QQAdapterOptions extends AdapterOptions {}
-
-/**
- * 京东小程序适配器选项
- */
-export interface JDAdapterOptions extends AdapterOptions {}
-
-/**
- * 快手小程序适配器选项
- */
-export interface KwaiAdapterOptions extends AdapterOptions {}
-
-/**
- * 企业微信小程序适配器选项
- */
-export interface QywxAdapterOptions extends AdapterOptions {}
-
-/**
- * 飞书小程序适配器选项
- */
-export interface LarkAdapterOptions extends AdapterOptions {}
-
-/**
- * 小程序通用适配器选项
- */
-export interface MiniAppAdapterOptions extends AdapterOptions {}
+/** 支付宝小程序适配器选项 */
+export type AlipayAdapterOptions = AdapterOptions;
+/** 百度小程序适配器选项 */
+export type SwanAdapterOptions = AdapterOptions;
+/** 鸿蒙OS适配器选项 */
+export type HarmonyAdapterOptions = AdapterOptions;
+/** 钉钉小程序适配器选项 */
+export type DDAdapterOptions = AdapterOptions;
+/** 抖音小程序适配器选项 */
+export type TTAdapterOptions = AdapterOptions;
+/** QQ小程序适配器选项 */
+export type QQAdapterOptions = AdapterOptions;
+/** 京东小程序适配器选项 */
+export type JDAdapterOptions = AdapterOptions;
+/** 快手小程序适配器选项 */
+export type KwaiAdapterOptions = AdapterOptions;
+/** 企业微信小程序适配器选项 */
+export type QywxAdapterOptions = AdapterOptions;
+/** 飞书小程序适配器选项 */
+export type LarkAdapterOptions = AdapterOptions;
+/** 小程序通用适配器选项 */
+export type MiniAppAdapterOptions = AdapterOptions;

package/src/charts/boxplot/types.ts

@@ -10,11 +10,11 @@ export type BoxplotChartProps = {
   height?: string | number;
   className?: string;
   style?: React.CSSProperties;
-  onEvents?: Record<string, (params: ECElementEvent) => void>;
+  onEvents?: Record<string, (_params: ECElementEvent) => void>;
   loading?: boolean;
   loadingOption?: LoadingOptions;
   theme?: string;
-  onChartReady?: (chart: EChartsType) => void;
+  onChartReady?: (_chart: EChartsType) => void;
   opts?: {
     devicePixelRatio?: number;
     renderer?: 'canvas' | 'svg';

package/src/charts/common/BaseChartWrapper.tsx

@@ -64,7 +64,7 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
   const seriesData = useMemo(() => extractSeriesData(option), [option]);
   const ariaLabel = useMemo(() => buildAriaLabel(chartType, option), [chartType, option]);
 
-  // Keyboard handler for zoom/pan — attached to the chart container
+  // Keyboard _handler for zoom/pan — attached to the chart container
   const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
     const instance = chartInstance.current;
     if (!instance) return;
@@ -161,12 +161,12 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
           chartInstance.current = instance;
 
           if (onEvents) {
-            Object.entries(onEvents).forEach(([eventName, handler]) => {
+            Object.entries(onEvents).forEach(([_eventName, _handler]) => {
               (
                 instance as unknown as {
-                  on: (event: string, handler: (...args: unknown[]) => void) => void;
+                  on: (_event: string, _handler: (..._args: unknown[]) => void) => void;
                 }
-              ).on(eventName, handler);
+              ).on(_eventName, _handler);
             });
           }
 
@@ -181,6 +181,7 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
       });
 
       const adapter = await getAdapter(initConfig);
+      const adapterRef = adapter; // store for cleanup
 
       if (!isMountedRef.current) {
         return;
@@ -189,11 +190,12 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
       adapter.init();
 
       cleanupRef.current = () => {
+        adapterRef.dispose?.();
         const instance = chartInstance.current;
         if (instance) {
           if (onEvents) {
-            Object.entries(onEvents).forEach(([eventName]) => {
-              (instance as unknown as { off: (event: string) => void }).off(eventName);
+            Object.entries(onEvents).forEach(([_eventName]) => {
+              (instance as unknown as { off: (_event: string) => void }).off(_eventName);
             });
           }
           instance.dispose();
@@ -286,7 +288,7 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
 
       {/*
         Chart container with role="application" + keyboard navigation.
-        role="application" tells assistive tech to pass through keyboard events.
+        role="application" tells assistive tech to pass through keyboard _events.
         aria-describedby links to the hidden data table above.
       */}
       <div

package/src/charts/createChartComponent.tsx

@@ -9,37 +9,25 @@ import BaseChartWrapper from './common/BaseChartWrapper';
 import type { BaseChartProps } from './types';
 
 /**
- * 创建标准图表组件
+ * 创建图表组件
  * @param displayName 组件名称
  * @param chartType ECharts 图表类型
+ * @param needOptionCast 是否需要 option 类型转换（用于 boxplot、parallel 等）
  * @returns 带 displayName 的 memo 组件
  */
 export function createChartComponent<P extends BaseChartProps = BaseChartProps>(
   displayName: string,
-  chartType: string
-): React.FC<P> {
-  const Chart: React.FC<P> = memo((props) => (
-    <BaseChartWrapper {...(props as unknown as BaseChartProps)} chartType={chartType} />
-  ));
-  Chart.displayName = displayName;
-  return Chart;
-}
-
-/**
- * 创建需要 EChartsOption 类型转换的图表组件
- * 用于 boxplot、parallel 等使用自定义 Props 类型但需要转换 option 的图表
- * @param displayName 组件名称
- * @param chartType ECharts 图表类型
- * @returns 带 displayName 的 memo 组件
- */
-export function createChartComponentWithOptionCast<P extends Record<string, unknown>>(
-  displayName: string,
-  chartType: string
+  chartType: string,
+  needOptionCast = false
 ): React.FC<P> {
   const Chart: React.FC<P> = memo((props) => (
     <BaseChartWrapper
       {...(props as unknown as BaseChartProps)}
-      option={(props as { option?: EChartsOption }).option as EChartsOption}
+      option={
+        needOptionCast
+          ? ((props as { option?: EChartsOption }).option as EChartsOption)
+          : (props as unknown as BaseChartProps).option
+      }
       chartType={chartType}
     />
   ));

package/src/charts/createOptionChartComponent.tsx

@@ -0,0 +1,32 @@
+/**
+ * Factory for charts that follow the buildXxxOption + render pattern.
+ * Eliminates the repeated null-check + BaseChart wrapper code.
+ */
+import React from 'react';
+import BaseChart from '@/core/components/BaseChart';
+import type { BaseChartProps } from './types';
+
+interface OptionBuilderProps {
+  optionMerge?: Record<string, unknown>;
+}
+
+/**
+ * Creates a chart component from a buildOption function.
+ * @param displayName Component display name
+ * @param buildOption Function that builds ECharts option from props, returns null if invalid
+ */
+export function createOptionChartComponent<Props extends OptionBuilderProps>(
+  displayName: string,
+  buildOption: (props: Props) => Record<string, unknown> | null
+): React.FC<Props & Omit<BaseChartProps, 'option' | 'data'>> {
+  const Component: React.FC<Props & Omit<BaseChartProps, 'option' | 'data'>> = (props) => {
+    const { optionMerge, ...rest } = props;
+    const option = buildOption(props as Props);
+    if (!option) {
+      return null;
+    }
+    return <BaseChart option={option as any} {...(rest as BaseChartProps)} />;
+  };
+  Component.displayName = displayName;
+  return Component;
+}