@agions/taroviz 1.9.0 → 1.11.1

package/src/core/components/LazyChart.tsx

@@ -3,6 +3,7 @@
  * 用于按需加载图表，减少首屏体积
  */
 import React, { Suspense, lazy, ComponentType } from 'react';
+import type { BaseChartProps } from '../../charts/types';
 
 // 懒加载各个图表组件
 const LazyLineChart = lazy(() => import('../../charts/line'));
@@ -18,7 +19,7 @@ const LazySunburstChart = lazy(() => import('../../charts/sunburst'));
 const LazySankeyChart = lazy(() => import('../../charts/sankey'));
 
 // 统一的图表类型到懒加载组件映射
-const LAZY_CHART_MODULES: Record<string, () => Promise<{ default: ComponentType<any> }>> = {
+const LAZY_CHART_MODULES: Record<string, () => Promise<{ default: ComponentType<BaseChartProps> }>> = {
   line: () => import('../../charts/line'),
   bar: () => import('../../charts/bar'),
   pie: () => import('../../charts/pie'),
@@ -35,10 +36,14 @@ const LAZY_CHART_MODULES: Record<string, () => Promise<{ default: ComponentType<
 export const LAZY_CHART_TYPES = Object.keys(LAZY_CHART_MODULES);
 
 /**
- * 默认加载状态组件
+ * 默认加载状态组件（使用 CSS 变量，与 ThemeManager 对齐）
+ * 包含完整的无障碍支持
  */
 const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中...' }) => (
   <div
+    role="status"
+    aria-label={text}
+    aria-busy="true"
     style={{
       display: 'flex',
       alignItems: 'center',
@@ -46,8 +51,8 @@ const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中
       width: '100%',
       height: '100%',
       minHeight: '200px',
-      backgroundColor: '#f5f5f5',
-      borderRadius: '8px',
+      backgroundColor: 'var(--tv-bg-color-secondary, #f5f5f5)',
+      borderRadius: 'var(--tv-border-radius, 8px)',
     }}
   >
     <div style={{ textAlign: 'center' }}>
@@ -55,12 +60,13 @@ const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中
         style={{
           width: '40px',
           height: '40px',
-          border: '3px solid #1890ff',
+          border: '3px solid var(--tv-primary-color, #1890ff)',
           borderTopColor: 'transparent',
           borderRadius: '50%',
           animation: 'taroviz-spin 1s linear infinite',
           margin: '0 auto 12px',
         }}
+        aria-hidden="true"
       />
       <style>
         {`
@@ -69,7 +75,28 @@ const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中
           }
         `}
       </style>
-      <span style={{ color: '#666', fontSize: '14px' }}>{text}</span>
+      {/*
+        视觉隐藏文本，屏幕阅读器可读取加载状态
+        避免干扰视觉布局
+      */}
+      <span
+        style={{
+          position: 'absolute',
+          width: '1px',
+          height: '1px',
+          padding: 0,
+          margin: '-1px',
+          overflow: 'hidden',
+          clip: 'rect(0, 0, 0, 0)',
+          whiteSpace: 'nowrap',
+          border: 0,
+        }}
+      >
+        {text}
+      </span>
+      <span style={{ color: 'var(--tv-text-color-secondary, #666)', fontSize: 'var(--tv-font-size, 14px)' }}>
+        {text}
+      </span>
     </div>
   </div>
 );
@@ -136,8 +163,8 @@ export function preloadAllCharts(): Promise<void[]> {
  * 创建懒加载图表映射
  * 用于动态导入图表
  */
-export function createLazyChart(chartType: string): ComponentType<any> | null {
-  const lazyCharts: Record<string, ComponentType<any>> = {
+export function createLazyChart(chartType: string): ComponentType<BaseChartProps> | null {
+  const lazyCharts: Record<string, ComponentType<BaseChartProps>> = {
     line: LazyLineChart,
     bar: LazyBarChart,
     pie: LazyPieChart,
@@ -159,7 +186,7 @@ export function createLazyChart(chartType: string): ComponentType<any> | null {
  * 用于按名称动态获取懒加载图表组件
  */
 export const LazyChartRegistry = {
-  get(chartType: string): ComponentType<any> | null {
+  get(chartType: string): ComponentType<BaseChartProps> | null {
     return createLazyChart(chartType);
   },
 

package/src/core/themes/ThemeManager.ts

@@ -578,6 +578,39 @@ class ThemeManager {
     return this.currentTheme.isDark || this.currentTheme.type === 'dark';
   }
 
+  /**
+   * 检测系统 prefers-color-scheme 是否为暗色
+   */
+  public getSystemPrefersDark(): boolean {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  /**
+   * 订阅系统主题变化，自动切换匹配的主题
+   * @returns 取消订阅的函数
+   */
+  public watchSystemTheme(): () => void {
+    if (typeof window === 'undefined') return () => {};
+
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      // 当系统主题切换时，自动应用对应主题
+      this.setTheme(e.matches ? 'dark' : 'default');
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }
+
+  /**
+   * 应用初始主题（根据系统偏好自动选择 dark/default）
+   * 必须在 DOM 加载后调用
+   */
+  public applyInitialTheme(): void {
+    const prefersDark = this.getSystemPrefersDark();
+    this.setTheme(prefersDark ? 'dark' : 'default');
+  }
+
   /**
    * 注册主题变更监听器
    */

package/src/core/types/common.ts

@@ -4,24 +4,119 @@
 export type { EChartsOption } from 'echarts';
 
 /**
- * 图表事件参数类型
- * 使用 ECharts 内的事件参数接口
+ * ECharts 鼠标事件参数类型
+ * 基于 ECharts CallbackDataParams，用于 click、mousemove 等鼠标事件
  */
-export interface ChartEventParams {
-  componentType?: string;
+export interface EChartsMouseEventParams {
+  componentType: string;
+  componentSubType?: string;
+  componentIndex?: number;
   seriesType?: string;
   seriesIndex?: number;
+  seriesId?: string;
   seriesName?: string;
   name?: string;
   dataIndex?: number;
   data?: unknown;
+  dataType?: string;
   value?: unknown;
   color?: string;
   borderColor?: string;
   borderWidth?: number;
-  target?: unknown;
+  dimensionNames?: string[];
+  encode?: Record<string, number[]>;
+  marker?: string;
+  status?: string;
+  dimensionIndex?: number;
+  percent?: number;
 }
 
+/**
+ * ECharts DataZoom 事件参数类型
+ */
+export interface EChartsDataZoomEventParams {
+  type: 'datazoom';
+  start?: number;
+  end?: number;
+  startValue?: number;
+  endValue?: number;
+  dataZoomIndex?: number;
+  batch?: Array<{
+    start?: number;
+    end?: number;
+    startValue?: number;
+    endValue?: number;
+    dataZoomIndex?: number;
+  }>;
+}
+
+/**
+ * ECharts Legend 事件参数类型
+ */
+export interface EChartsLegendEventParams {
+  type: 'legendselectchanged' | 'legendselected' | 'legendunselected';
+  name: string;
+  selected: Record<string, boolean>;
+}
+
+/**
+ * ECharts Tooltip 事件参数类型
+ */
+export interface EChartsTooltipEventParams {
+  type: 'tooltipshow' | 'tooltiphide';
+  data?: unknown;
+  dataIndex?: number;
+  dataType?: string;
+  name?: string;
+  value?: unknown;
+}
+
+/**
+ * 图表事件参数类型（向后兼容别名）
+ */
+export type ChartEventParams = EChartsMouseEventParams;
+
+/**
+ * 图表导出选项
+ */
+export interface ChartExportOptions {
+  type?: 'png' | 'jpeg' | 'svg';
+  filename?: string;
+  pixelRatio?: number;
+  backgroundColor?: string;
+}
+
+/**
+ * 图表联动配置
+ */
+export interface ChartLinkageConfig {
+  linkedChartIds?: string[];
+  enableClickLinkage?: boolean;
+  enableZoomLinkage?: boolean;
+  enableLegendLinkage?: boolean;
+  enableFilterLinkage?: boolean;
+}
+
+/**
+ * ECharts 系列数据基本类型
+ */
+export interface EChartsSeriesData {
+  name?: string;
+  type?: string;
+  data?: unknown[];
+  [key: string]: unknown;
+}
+
+/**
+ * ECharts 事件参数联合类型
+ */
+export type EChartsEventParams =
+  | EChartsMouseEventParams
+  | EChartsDataZoomEventParams
+  | EChartsLegendEventParams
+  | EChartsTooltipEventParams
+  | Record<string, unknown>;
+
 /**
  * 图表事件监听器
  */

package/src/core/utils/chartUtils.ts

@@ -3,6 +3,10 @@
  */
 import type { EChartsOption } from 'echarts';
 
+interface SeriesItem {
+  data?: unknown[] | Record<string, unknown>;
+}
+
 /**
  * Normalize size value to CSS string
  */
@@ -19,7 +23,7 @@ export function calculateDataLength(option: { series?: unknown } | undefined): n
   let count = 0;
   if (option.series) {
     const series = Array.isArray(option.series) ? option.series : [option.series];
-    for (const seriesItem of series as any[]) {
+    for (const seriesItem of series as SeriesItem[]) {
       if (seriesItem.data) {
         if (Array.isArray(seriesItem.data)) {
           count += seriesItem.data.length;
@@ -35,11 +39,12 @@ export function calculateDataLength(option: { series?: unknown } | undefined): n
 /**
  * Filter data by filter conditions
  */
-export function filterDataByKeys(data: any[], filters: Record<string, any>): any[] {
+export function filterDataByKeys<T>(data: T[], filters: Record<string, unknown>): T[] {
   if (!filters || Object.keys(filters).length === 0) return data;
   return data.filter((item) => {
     for (const [key, value] of Object.entries(filters)) {
-      if (item[key] !== value && !item[key]?.includes?.(value)) return false;
+      const itemVal = (item as Record<string, unknown>)[key];
+      if (itemVal !== value && !(Array.isArray(itemVal) && itemVal.includes(value))) return false;
     }
     return true;
   });

package/src/core/utils/export/ExportUtils.ts

@@ -8,12 +8,41 @@ import type { ECharts } from 'echarts';
 // 类型定义
 // ============================================================================
 
+/**
+ * ECharts 支持的图片导出类型
+ * 注意: webp/gif 类型为扩展支持，不在官方类型中
+ */
+type ExportImageType = 'png' | 'jpeg' | 'svg' | 'webp' | 'gif';
+
+/**
+ * getDataURL 方法参数（基于 ECharts 官方类型，扩展 webp/gif 支持）
+ */
+interface EChartsDataURLOptions {
+  type?: ExportImageType;
+  pixelRatio?: number;
+  backgroundColor?: string;
+  quality?: number;
+  excludeComponents?: string[];
+}
+
+/**
+ * jsPDF 库类型（简化版）
+ */
+interface JSPDFInstance {
+  setProperties(props: Record<string, string>): void;
+  setFontSize(size: number): void;
+  setTextColor(r: number, g: number, b: number): void;
+  text(text: string, x: number, y: number): void;
+  addImage(imageData: string, format: string, x: number, y: number, width: number, height: number): void;
+  output(type: 'blob'): Blob;
+}
+
 /**
  * 图片导出选项
  */
 export interface ExportImageOptions {
   /** 图片类型 */
-  type?: 'png' | 'jpeg' | 'webp' | 'gif';
+  type?: ExportImageType;
   /** 设备像素比 */
   pixelRatio?: number;
   /** 背景色 */
@@ -155,13 +184,13 @@ class ChartExporter {
     const { type = 'png', pixelRatio = 2, backgroundColor = '#ffffff', quality = 0.8 } = options;
 
     const mimeType = `image/${type}`;
-    // 使用 any 避免 ECharts 类型定义与实际支持类型不匹配
-    const data = (chart.getDataURL as any)({
+    // 使用类型断言：ECharts 实际支持 webp/gif，但官方类型未声明
+    const data = chart.getDataURL({
       type,
       pixelRatio,
       backgroundColor,
       quality,
-    });
+    } as unknown as Parameters<typeof chart.getDataURL>[0]);
 
     return {
       data,
@@ -177,7 +206,7 @@ class ChartExporter {
     const { compress = false } = options;
 
     // ECharts 5.x 使用 getDataURL 获取 SVG
-    const svgData = (chart.getDataURL as any)({ type: 'svg' });
+    const svgData = chart.getDataURL({ type: 'svg' });
     if (!svgData || svgData === 'data:image/svg+xml;charset=utf8,') {
       throw new Error('SVG export is not supported. Please use canvas renderer.');
     }
@@ -219,11 +248,12 @@ class ChartExporter {
     });
 
     // 动态导入 jspdf
-    let jsPDF: any;
+    let JSPDFClass: new (options: Record<string, string>) => JSPDFInstance;
     try {
       // 尝试使用动态导入，使用 webpackIgnore 注释避免预解析
       // @ts-expect-error - 动态导入
-      jsPDF = (await import(/* webpackIgnore: true */ 'jspdf')).default;
+      const module = await import(/* webpackIgnore: true */ 'jspdf');
+      JSPDFClass = module.default as new (options: Record<string, string>) => JSPDFInstance;
     } catch {
       // 如果没有 jspdf，提供备选方案
       console.warn('[TaroViz] jspdf not found, falling back to image download');
@@ -246,7 +276,7 @@ class ChartExporter {
     const isLandscape = orientation === 'landscape';
 
     // 创建 PDF
-    const doc = new jsPDF({
+    const doc = new JSPDFClass({
       orientation,
       unit: 'mm',
       format: pageSize,
@@ -289,7 +319,7 @@ class ChartExporter {
     doc.text(`Generated by TaroViz on ${new Date().toLocaleDateString()}`, marginLeft, footerY);
 
     // 导出为 Blob
-    const pdfBlob = doc.output('blob');
+    const pdfBlob = doc.output('blob') as Blob;
 
     return {
       data: pdfBlob,

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

@@ -9,6 +9,7 @@ import {
   PerformanceAnalysisResult,
   PerformanceEventType,
   PerformanceEventHandler,
+  PerformanceEventData,
   PerformanceReportConfig,
 } from './types';
 
@@ -118,11 +119,20 @@ export class PerformanceAnalyzer {
   /**
    * 触发事件
    */
-  private emit(eventType: PerformanceEventType, data?: any): void {
+  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 {
     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 };
     handlers?.forEach((handler) => {
       try {
-        handler({ type: eventType, data });
+        handler(eventData);
       } catch (error) {
         console.error('Error in performance event handler:', error);
       }
@@ -324,7 +334,7 @@ export class PerformanceAnalyzer {
   /**
    * 记录数据大小
    */
-  public recordDataSize(data: any): void {
+  public recordDataSize(data: unknown): void {
     try {
       const dataSize = new Blob([JSON.stringify(data)]).size / 1024;
       this.recordMetric('dataSize', dataSize, 'KB', '图表数据大小');
@@ -450,8 +460,8 @@ export class PerformanceAnalyzer {
   private generateJsonReport(
     result: PerformanceAnalysisResult,
     _config: PerformanceReportConfig
-  ): object {
-    const report: any = {
+  ): Record<string, unknown> {
+    const report: Record<string, unknown> = {
       timestamp: new Date().toISOString(),
       duration: result.duration,
       score: result.score,

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

@@ -154,10 +154,19 @@ export enum PerformanceEventType {
   ANALYSIS_COMPLETE = 'performanceAnalysisComplete',
 }
 
+/**
+ * 性能事件数据
+ */
+export type PerformanceEventData =
+  | { type: PerformanceEventType.MONITORING_START }
+  | { type: PerformanceEventType.MONITORING_END }
+  | { type: PerformanceEventType.METRIC_UPDATE; data: PerformanceMetric }
+  | { type: PerformanceEventType.ANALYSIS_COMPLETE; data: PerformanceAnalysisResult };
+
 /**
  * 性能事件回调类型
  */
-export type PerformanceEventHandler = (event: { type: PerformanceEventType; data?: any }) => void;
+export type PerformanceEventHandler = (event: PerformanceEventData) => void;
 
 /**
  * 性能分析报告配置

package/src/hooks/index.ts

@@ -9,6 +9,8 @@ import type { EChartsOption } from 'echarts';
 import { useDataZoom } from './useDataZoom';
 import { useChartConnect } from './useChartConnect';
 import { useChartDownload } from './useChartDownload';
+import { useChartHistory } from './useChartHistory';
+import { useChartSelection } from './useChartSelection';
 
 // ============================================================================
 // 类型定义
@@ -651,6 +653,55 @@ export {
   type DownloadDataOptions,
 } from './useChartDownload';
 
+// 图表下载工具函数
+export {
+  generateFilename,
+  downloadBlob,
+  downloadDataUrl,
+  csvToBlob,
+  jsonToBlob,
+  convertToCSV,
+  convertToJSON,
+  createPdfFromImage,
+} from './utils/chartDownloadUtils';
+
+// 数据转换工具函数（类型导出）
+export type {
+  DataItem,
+  DataSource,
+  AggregationType,
+  TimePeriod,
+  TransformMapping,
+} from './utils/dataTransformUtils';
+
+// 数据转换工具函数（值导出）
+export {
+  transformLineOrBar,
+  transformPie,
+  transformScatter,
+  transformRadar,
+  transformHeatmap,
+  groupByTime,
+  aggregateValues,
+} from './utils/dataTransformUtils';
+
+// 图表历史记录 Hook (Undo/Redo)
+export {
+  useChartHistory,
+  type UseChartHistoryOptions,
+  type UseChartHistoryReturn,
+} from './useChartHistory';
+
+// 图表选择 Hook
+export {
+  useChartSelection,
+  type UseChartSelectionOptions,
+  type UseChartSelectionReturn,
+  type DataPointKey,
+  type SelectionMode,
+  type SelectionEvent,
+} from './useChartSelection';
+
 // ============================================================================
 // 导出
 // ============================================================================
@@ -683,4 +734,6 @@ export default {
   useDataZoom,
   useChartConnect,
   useChartDownload,
+  useChartHistory,
+  useChartSelection,
 };