@agions/taroviz 1.11.1 → 2.0.3

package/src/core/utils/index.ts

@@ -1,162 +1,29 @@
-// 事件定义
-export const events = {
-  click: 'click',
-  mousemove: 'mousemove',
-  mouseup: 'mouseup',
-  mousedown: 'mousedown',
-  mouseover: 'mouseover',
-  mouseout: 'mouseout',
-  globalout: 'globalout',
-};
+// Re-export barrel file — all public APIs preserved
+// External import paths remain unchanged
 
-// 导入UUID工具函数
-import * as i18n from './i18n';
-import { uuid, shortId, prefixedId } from './uuid';
-
-// 导入国际化工具
-
-/**
- * 深度合并对象
- * @param target 目标对象
- * @param source 源对象
- * @returns 合并后的对象
- */
-export function deepMerge<T extends Record<string, any>>(
-  target: T,
-  source: Record<string, any>
-): T {
-  const result: any = { ...target };
-
-  Object.keys(source).forEach((key) => {
-    if (source[key] instanceof Object && key in target && target[key] instanceof Object) {
-      result[key] = deepMerge(target[key], source[key]);
-    } else {
-      result[key] = source[key];
-    }
-  });
-
-  return result;
-}
-
-/**
- * 防抖函数
- * @param fn 需要防抖的函数
- * @param delay 延迟时间（毫秒）
- * @returns 防抖后的函数
- */
-export function debounce<T extends (...args: any[]) => any>(
-  fn: T,
-  delay: number
-): (...args: Parameters<T>) => void {
-  let timer: ReturnType<typeof setTimeout> | null = null;
-
-  return function (this: any, ...args: Parameters<T>): void {
-    if (timer) {
-      clearTimeout(timer);
-    }
-
-    timer = setTimeout(() => {
-      fn.apply(this, args);
-      timer = null;
-    }, delay);
-  };
-}
-
-/**
- * 节流函数
- * @param fn 需要节流的函数
- * @param interval 间隔时间（毫秒）
- * @returns 节流后的函数
- */
-export function throttle<T extends (...args: any[]) => any>(
-  fn: T,
-  interval: number
-): (...args: Parameters<T>) => void {
-  let lastTime = 0;
+// 事件常量
+export { events } from './events';
 
-  return function (this: any, ...args: Parameters<T>): void {
-    const now = Date.now();
+// 对象合并
+export { deepMerge } from './merge';
 
-    if (now - lastTime >= interval) {
-      fn.apply(this, args);
-      lastTime = now;
-    }
-  };
-}
+// 格式化与颜色工具
+export { formatNumber, getContrastColor } from './format';
 
-/**
- * 检测当前环境
- * @returns 环境信息
- */
-export function getEnvironment() {
-  const isServer = typeof window === 'undefined';
-  const isClient = !isServer;
+// 检测当前环境（简易版，向后兼容）
+export { getEnvironment } from './runtime';
 
-  // 使用类型断言解决wx和my未定义的问题
-  const isWeapp =
-    typeof (window as any)['wx'] !== 'undefined' &&
-    typeof (window as any)['wx'].getSystemInfoSync === 'function';
-  const isAlipay =
-    typeof (window as any)['my'] !== 'undefined' &&
-    typeof (window as any)['my'].getSystemInfoSync === 'function';
-  const isWeb = isClient && !isWeapp && !isAlipay;
+// 统一运行时检测
+export { detectRuntime, resetRuntimeCache } from './runtime';
+export type { RuntimeInfo, MiniAppType } from './runtime';
 
-  return {
-    isServer,
-    isClient,
-    isWeapp,
-    isAlipay,
-    isWeb,
-  };
-}
+// UUID工具函数
+export { uuid, shortId, prefixedId } from './uuid';
 
-/**
- * 格式化数值
- * @param value 要格式化的数值
- * @param digits 小数位数
- * @param options 配置选项
- * @returns 格式化后的字符串
- */
-export function formatNumber(
-  value: number,
-  digits: number = 2,
-  options: {
-    useGrouping?: boolean;
-    locale?: string;
-  } = {}
-): string {
-  const { useGrouping = true, locale = 'zh-CN' } = options;
-
-  return new Intl.NumberFormat(locale, {
-    minimumFractionDigits: digits,
-    maximumFractionDigits: digits,
-    useGrouping,
-  }).format(value);
-}
-
-/**
- * 获取颜色的对比色
- * @param color 十六进制颜色值
- * @returns 对比色
- */
-export function getContrastColor(color: string): string {
-  // 移除#前缀
-  const hex = color.replace('#', '');
-
-  // 转换为RGB
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-
-  // 计算亮度
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-
-  // 根据亮度返回黑色或白色
-  return brightness > 128 ? '#000000' : '#FFFFFF';
-}
-
-// 导出UUID工具函数
-export { uuid, shortId, prefixedId };
-
-// 导出国际化工具
+// 国际化工具
+import * as i18n from './i18n';
 export { i18n };
+
+// 性能优化工具（含 debounce, throttle, DebounceManager 等）
+export * from './performanceUtils';
+export { DebounceManager } from './performanceUtils';

package/src/core/utils/merge.ts

@@ -0,0 +1,25 @@
+/**
+ * 深度合并对象
+ * @param target 目标对象
+ * @param source 源对象
+ * @returns 合并后的对象
+ */
+export function deepMerge<T extends Record<string, unknown>>(
+  target: T,
+  source: Partial<Record<string, unknown>>
+): T {
+  const result: Record<string, unknown> = { ...target };
+
+  Object.keys(source).forEach((key) => {
+    if (source[key] instanceof Object && key in target && target[key] instanceof Object) {
+      result[key] = deepMerge(
+        target[key] as Record<string, unknown>,
+        source[key] as Record<string, unknown>
+      );
+    } else {
+      result[key] = source[key];
+    }
+  });
+
+  return result as T;
+}

package/src/core/utils/performance/PerformanceAnalyzer.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * TaroViz 性能分析工具核心实现
  */
@@ -12,6 +13,15 @@ import {
   PerformanceEventData,
   PerformanceReportConfig,
 } from './types';
+const DEFAULT_10 = 10;
+const DEFAULT_15 = 15;
+const DEFAULT_20 = 20;
+const DEFAULT_25 = 25;
+const DEFAULT_30 = 30;
+const DEFAULT_50 = 50;
+const DEFAULT_100 = 100;
+const DEFAULT_1000 = 1000;
+const DEFAULT_1024 = 1024;
 
 /**
  * 性能分析器类
@@ -122,14 +132,25 @@ export class PerformanceAnalyzer {
   private emit(eventType: PerformanceEventType.MONITORING_START): void;
   private emit(eventType: PerformanceEventType.MONITORING_END): void;
   private emit(eventType: PerformanceEventType.METRIC_UPDATE, data: PerformanceMetric): void;
-  private emit(eventType: PerformanceEventType.ANALYSIS_COMPLETE, data: PerformanceAnalysisResult): void;
-  private emit(eventType: PerformanceEventType, data?: PerformanceMetric | PerformanceAnalysisResult): void {
+  private emit(
+    eventType: PerformanceEventType.ANALYSIS_COMPLETE,
+    data: PerformanceAnalysisResult
+  ): void;
+  private emit(
+    eventType: PerformanceEventType,
+    data?: PerformanceMetric | PerformanceAnalysisResult
+  ): void {
     const handlers = this.eventHandlers.get(eventType);
-    const eventData: PerformanceEventData = data === undefined
-      ? { type: eventType as PerformanceEventType.MONITORING_START | PerformanceEventType.MONITORING_END }
-      : eventType === PerformanceEventType.METRIC_UPDATE
-        ? { type: eventType, data: data as PerformanceMetric }
-        : { type: eventType, data: data as PerformanceAnalysisResult };
+    const eventData: PerformanceEventData =
+      data === undefined
+        ? {
+            type: eventType as
+              | PerformanceEventType.MONITORING_START
+              | PerformanceEventType.MONITORING_END,
+          }
+        : eventType === PerformanceEventType.METRIC_UPDATE
+          ? { type: eventType, data: data as PerformanceMetric }
+          : { type: eventType, data: data as PerformanceAnalysisResult };
     handlers?.forEach((handler) => {
       try {
         handler(eventData);
@@ -149,7 +170,7 @@ export class PerformanceAnalyzer {
 
     this.isMonitoring = true;
     this.startTime = Date.now();
-    this.lastFrameTime = performance.now();
+    this.lastFrameTime = typeof performance !== 'undefined' ? performance.now() : Date.now();
 
     // 启动采样定时器
     if (this.config.sampleInterval && this.config.realTime) {
@@ -211,6 +232,7 @@ export class PerformanceAnalyzer {
    * 开始帧率监控
    */
   private startFrameRateMonitoring(): void {
+    if (typeof requestAnimationFrame === 'undefined' || typeof performance === 'undefined') return;
     const updateFrameRate = () => {
       if (!this.isMonitoring) {
         return;
@@ -264,9 +286,11 @@ export class PerformanceAnalyzer {
     // 采样内存使用（如果支持）
     if (
       this.config.metrics?.includes('memoryUsage') &&
-      typeof (performance as any).memory !== 'undefined'
+      typeof (performance as Performance & { memory?: { usedJSHeapSize: number } }).memory !==
+        'undefined'
     ) {
-      const memoryUsage = ((performance as any).memory.usedJSHeapSize / (1024 * 1024)).toFixed(2);
+      const memory = (performance as Performance & { memory?: { usedJSHeapSize: number } }).memory;
+      const memoryUsage = ((memory?.usedJSHeapSize ?? 0) / (1024 * 1024)).toFixed(2);
       this.recordMetric('memoryUsage', parseFloat(memoryUsage), 'MB');
     }
   }
@@ -389,22 +413,22 @@ export class PerformanceAnalyzer {
     });
 
     // 计算性能评分和建议
-    if (averages.renderTime > 100) {
+    if (averages.renderTime !== undefined && averages.renderTime > 100) {
       score -= 20;
       suggestions.push('渲染时间过长，建议优化数据处理或减少图表复杂度');
     }
 
-    if (averages.updateTime > 50) {
+    if (averages.updateTime !== undefined && averages.updateTime > 50) {
       score -= 15;
       suggestions.push('更新时间过长，建议优化数据更新逻辑');
     }
 
-    if (averages.frameRate < 30) {
+    if (averages.frameRate !== undefined && averages.frameRate < 30) {
       score -= 25;
       suggestions.push('帧率过低，建议减少动画效果或优化渲染逻辑');
     }
 
-    if (averages.dataSize > 100) {
+    if (averages.dataSize !== undefined && averages.dataSize > 100) {
       score -= 10;
       suggestions.push('数据量过大，建议进行数据压缩或分页处理');
     }
@@ -611,13 +635,6 @@ export class PerformanceAnalyzer {
     this.config = { ...this.config, ...config };
   }
 
-  /**
-   * 获取所有指标数据
-   */
-  public getAllMetrics(): Map<PerformanceMetricType, PerformanceMetric[]> {
-    return new Map(this.metrics);
-  }
-
   /**
    * 获取特定类型的指标数据
    */

package/src/core/utils/performance/hooks.ts

@@ -0,0 +1,7 @@
+/**
+ * 性能优化 Hooks
+ * 提供动画、缩放等性能相关的 hooks
+ */
+
+export { useAnimation } from './useAnimation';
+export { useDataZoom } from './useDataZoom';

package/src/core/utils/performance/index.ts

@@ -11,3 +11,5 @@ export { PerformanceAnalyzer } from './PerformanceAnalyzer';
 // 导出默认实例
 import { PerformanceAnalyzer } from './PerformanceAnalyzer';
 export const performanceAnalyzer = PerformanceAnalyzer.getInstance();
+
+export * from './hooks';

package/src/{hooks → core/utils/performance}/useAnimation.ts

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * useAnimation - 图表动画控制 Hook
  * 提供图表动画的播放、暂停、控制等功能
  */
-import { useState, useCallback, useRef, useEffect } from 'react';
-import type { ChartInstance } from './index';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import type { ChartInstance } from '../../../hooks/types';
 
 /**
  * 动画状态
@@ -47,11 +48,11 @@ export interface UseAnimationReturn {
   /** 停止动画并重置 */
   stop: () => void;
   /** 跳转到指定帧 */
-  seekTo: (frame: number) => void;
+  seekTo: (_frame: number) => void;
   /** 跳转到指定进度 */
-  seekToProgress: (progress: number) => void;
+  seekToProgress: (_progress: number) => void;
   /** 设置播放速度 */
-  setPlaybackSpeed: (speed: number) => void;
+  setPlaybackSpeed: (_speed: number) => void;
   /** 播放速度 */
   playbackSpeed: number;
 }
@@ -81,35 +82,45 @@ export function useAnimation(
   const [playbackSpeed, setPlaybackSpeedState] = useState(1);
 
   // Refs
+  const chartRef = useRef<ChartInstance | null>(null);
+  chartRef.current = chartInstance;
+
+  // Animation state ref — tracks RAF id, start time, current frame, loop count, paused flag
   const animationRef = useRef<{
+    animationId: number | null;
     startTime: number;
     currentFrame: number;
     loopCounter: number;
-    animationId: number | null;
     isPaused: boolean;
   }>({
+    animationId: null,
     startTime: 0,
     currentFrame: 0,
     loopCounter: 0,
-    animationId: null,
     isPaused: false,
   });
 
-  const chartRef = useRef<ChartInstance | null>(null);
-  chartRef.current = chartInstance;
+  // 缓动函数 - 使用 useMemo 缓存，避免每次重新创建
+  const easingFunctions = useMemo<Record<string, (t: number) => number>>(
+    () => ({
+      cubicOut: (t) => 1 - Math.pow(1 - t, 3),
+      cubicIn: (t) => t * t * t,
+      cubicInOut: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2),
+      linear: (t) => t,
+      sinusoidalIn: (t) => 1 - Math.cos((t * Math.PI) / 2),
+      sinusoidalOut: (t) => Math.sin((t * Math.PI) / 2),
+    }),
+    []
+  );
 
   // 计算总帧数（假设 60fps）
-  const totalFrames = Math.ceil((duration / 1000) * 60);
-
-  // 缓动函数
-  const easingFunctions: Record<string, (t: number) => number> = {
-    cubicOut: (t) => 1 - Math.pow(1 - t, 3),
-    cubicIn: (t) => t * t * t,
-    cubicInOut: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
-    linear: (t) => t,
-    sinusoidalIn: (t) => 1 - Math.cos((t * Math.PI) / 2),
-    sinusoidalOut: (t) => Math.sin((t * Math.PI) / 2),
-  };
+  const totalFrames = useMemo(() => Math.ceil((duration / 1000) * 60), [duration]);
+
+  // 获取当前缓动函数
+  const getEasing = useCallback(
+    (easingName: string) => easingFunctions[easingName] ?? easingFunctions.linear,
+    [easingFunctions]
+  );
 
   // 计算当前进度对应的帧
   const calculateFrame = useCallback(
@@ -128,10 +139,7 @@ export function useAnimation(
   const animate = useCallback(() => {
     const anim = animationRef.current;
     const chart = chartRef.current;
-
-    if (!chart || anim.isPaused || disabled) {
-      return;
-    }
+    if (!chart || anim.isPaused || disabled) return;
 
     const elapsed = performance.now() - anim.startTime;
     const adjustedDuration = duration / playbackSpeed;
@@ -154,9 +162,7 @@ export function useAnimation(
 
     // 更新图表配置以反映动画进度
     try {
-      // ECharts 通过 setOption 配合 notMerge: false 更新动画
       if (chart.setOption && !anim.isPaused) {
-        // 触发图表重新渲染
         chart.setOption({}, false, true);
       }
     } catch (e) {
@@ -166,13 +172,11 @@ export function useAnimation(
     // 检查是否完成
     if (effectiveElapsed >= adjustedDuration) {
       if (loop && (loopCount === -1 || anim.loopCounter < loopCount)) {
-        // 继续循环
         anim.loopCounter++;
         anim.startTime = performance.now();
         anim.isPaused = false;
         setStatus('playing');
       } else {
-        // 动画结束
         setStatus('stopped');
         anim.animationId = null;
         return;
@@ -180,22 +184,20 @@ export function useAnimation(
     }
 
     anim.animationId = requestAnimationFrame(animate);
-  }, [duration, easing, disabled, delay, loop, loopCount, playbackSpeed, easingFunctions, calculateFrame]);
+  }, [duration, delay, loop, loopCount, playbackSpeed, disabled, easing, calculateFrame]);
 
   // 播放动画
-  const play = useCallback(() => {
+  const playRef = useRef<() => void>(() => {});
+  playRef.current = () => {
     const chart = chartRef.current;
     if (!chart || disabled) return;
 
     const anim = animationRef.current;
-
     if (status === 'paused') {
-      // 从暂停恢复
       anim.isPaused = false;
       anim.startTime = performance.now() - (anim.currentFrame / totalFrames) * duration;
       setStatus('playing');
     } else {
-      // 开始新动画
       anim.startTime = performance.now();
       anim.currentFrame = 0;
       anim.loopCounter = 0;
@@ -206,7 +208,11 @@ export function useAnimation(
     if (anim.animationId === null) {
       anim.animationId = requestAnimationFrame(animate);
     }
-  }, [status, disabled, totalFrames, duration, animate]);
+  };
+
+  const play = useCallback(() => {
+    playRef.current();
+  }, []);
 
   // 暂停动画
   const pause = useCallback(() => {
@@ -238,12 +244,12 @@ export function useAnimation(
       const chart = chartRef.current;
       if (!chart) return;
 
-      const clampedFrame = Math.max(0, Math.min(totalFrames, targetFrame));
+      const currentTotalFrames = Math.ceil((duration / 1000) * 60);
+      const clampedFrame = Math.max(0, Math.min(currentTotalFrames, targetFrame));
       anim.currentFrame = clampedFrame;
       setFrame(clampedFrame);
 
-      // 更新图表状态
-      const progress = clampedFrame / totalFrames;
+      const _progress = clampedFrame / currentTotalFrames;
       try {
         if (chart.setOption) {
           chart.setOption({}, false, true);
@@ -252,7 +258,7 @@ export function useAnimation(
         console.warn('[useAnimation] Failed to seek:', e);
       }
     },
-    [totalFrames]
+    [duration]
   );
 
   // 跳转到指定进度
@@ -362,7 +368,7 @@ export function useProgressiveLoading(
     setCurrentBatch(0);
 
     intervalRef.current = window.setInterval(() => {
-      setCurrentBatch(prev => {
+      setCurrentBatch((prev) => {
         const next = prev + 1;
         onBatchLoaded?.(next, totalBatches);
 
@@ -423,5 +429,3 @@ export function useProgressiveLoading(
     reset,
   };
 }
-
-export default useAnimation;