@agions/taroviz 1.9.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agions/taroviz",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "基于 Taro 和 ECharts 的多端图表组件库",
   "type": "module",
   "main": "dist/cjs/index.js",

package/src/charts/boxplot/types.ts

@@ -1,6 +1,8 @@
 /**
  * 箱线图类型定义
  */
+import type { EChartsType, ECElementEvent } from 'echarts';
+import type { LoadingOptions } from '../types';
 
 export type BoxplotChartProps = {
   option?: BoxplotOption;
@@ -8,11 +10,11 @@ export type BoxplotChartProps = {
   height?: string | number;
   className?: string;
   style?: React.CSSProperties;
-  onEvents?: Record<string, (params: any) => void>;
+  onEvents?: Record<string, (params: ECElementEvent) => void>;
   loading?: boolean;
-  loadingOption?: any;
+  loadingOption?: LoadingOptions;
   theme?: string;
-  onChartReady?: (chart: any) => void;
+  onChartReady?: (chart: EChartsType) => void;
   opts?: {
     devicePixelRatio?: number;
     renderer?: 'canvas' | 'svg';

package/src/charts/parallel/types.ts

@@ -2,17 +2,20 @@
  * 平行坐标图类型定义
  */
 
+import type { EChartsType, ECElementEvent } from 'echarts';
+import type { LoadingOptions } from '../types';
+
 export type ParallelChartProps = {
   option?: ParallelOption;
   width?: string | number;
   height?: string | number;
   className?: string;
   style?: React.CSSProperties;
-  onEvents?: Record<string, (params: any) => void>;
+  onEvents?: Record<string, (params: ECElementEvent) => void>;
   loading?: boolean;
-  loadingOption?: any;
+  loadingOption?: LoadingOptions;
   theme?: string;
-  onChartReady?: (chart: any) => void;
+  onChartReady?: (chart: EChartsType) => void;
   opts?: {
     devicePixelRatio?: number;
     renderer?: 'canvas' | 'svg';

package/src/charts/tree/types.ts

@@ -2,7 +2,7 @@
  * 树图类型定义
  * ECharts 内置 tree 类型
  */
-import type { EChartsOption } from 'echarts';
+import type { EChartsOption, EChartsType, ECElementEvent } from 'echarts';
 
 // ============================================================================
 // 树图数据节点
@@ -166,9 +166,9 @@ export interface TreeChartProps {
   /** 加载配置 */
   loadingOption?: Record<string, unknown>;
   /** 图表初始化回调 */
-  onChartInit?: (chart: any) => void;
+  onChartInit?: (chart: EChartsType) => void;
   /** 图表就绪回调 */
-  onChartReady?: (chart: any) => void;
+  onChartReady?: (chart: EChartsType) => void;
   /** 事件回调 */
-  onEvents?: Record<string, (params: any) => void>;
+  onEvents?: Record<string, (params: ECElementEvent) => void>;
 }

package/src/core/components/Annotation.tsx

@@ -32,7 +32,7 @@ export interface MarkAreaStyle {
 }
 
 /**
- * 标记线数据点
+ * 标记线数据点 — 支持常规坐标和 ECharts 统计类型
  */
 export interface MarkLineDataPoint {
   /** X轴值 */
@@ -41,6 +41,8 @@ export interface MarkLineDataPoint {
   yAxis?: string | number;
   /** 数据点名称 */
   name?: string;
+  /** ECharts 统计/特殊类型（'average' | 'max' | 'min' | 'median'） */
+  type?: string;
 }
 
 /**
@@ -97,7 +99,7 @@ export interface ScatterAnnotationConfig {
   data: Array<{
     coord: [number | string, number];
     value?: number;
-    name?: string;
+    name: string;
   }>;
   /** 符号类型 */
   symbol?: string;
@@ -109,7 +111,7 @@ export interface ScatterAnnotationConfig {
   label?: {
     show?: boolean;
     position?: string;
-    formatter?: string | ((value: any) => string);
+    formatter?: string | ((value: unknown) => string);
     color?: string;
   };
 }
@@ -223,14 +225,14 @@ export function convertAnnotationToScatter(
         itemStyle,
         label: {
           show: label?.show !== false,
-          position: label?.position || 'top',
+          position: label?.position || ('top' as const),
           formatter: label?.formatter,
           color: label?.color || '#333',
         },
         data,
       },
-    } as any,
-  ];
+    },
+  ] as unknown as EChartsOption['series'];
 }
 
 /**
@@ -269,28 +271,28 @@ export function useAnnotation(props: AnnotationProps): EChartsOption {
 export const AnnotationPresets = {
   /** 平均线 */
   averageLine: (color = '#1890ff'): MarkLineConfig => ({
-    data: [{ type: 'average', name: '平均值' }] as any,
+    data: [{ type: 'average', name: '平均值' }],
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 最大值线 */
   maxLine: (color = '#f5222d'): MarkLineConfig => ({
-    data: [{ type: 'max', name: '最大值' }] as any,
+    data: [{ type: 'max', name: '最大值' }],
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 最小值线 */
   minLine: (color = '#52c41a'): MarkLineConfig => ({
-    data: [{ type: 'min', name: '最小值' }] as any,
+    data: [{ type: 'min', name: '最小值' }],
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 警戒线 */
   thresholdLine: (value: number, color = '#faad14'): MarkLineConfig => ({
-    data: [{ yAxis: value, name: '警戒线' }] as any,
+    data: [{ yAxis: value, name: '警戒线' }],
     lineStyle: { color, type: 'solid', width: 2 },
     label: { show: true, position: 'start', color },
   }),

package/src/core/components/BaseChart.tsx

@@ -95,8 +95,8 @@ export interface ChartProps {
   enableZoom?: boolean;
   onZoom?: (data: { start: number; end: number; dataZoomIndex: number }) => void;
   enableDataFiltering?: boolean;
-  filters?: Record<string, any>;
-  onDataFiltered?: (filteredData: any[], filters: Record<string, any>) => void;
+  filters?: Record<string, string | number | boolean | string[] | null>;
+  onDataFiltered?: (filteredData: unknown[], filters: Record<string, unknown>) => void;
   enableLegendInteraction?: boolean;
   legendInteractionMode?: 'single' | 'multiple' | 'all';
   onLegendSelect?: (params: { name: string; selected: Record<string, boolean> }) => void;
@@ -485,7 +485,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
   };
 
   const wrapperProps: BaseChartProps & { chartType: string } = {
-    option: wrappedOption as any,
+    option: wrappedOption as unknown as Record<string, unknown>,
     width,
     height,
     theme: typeof theme === 'string' ? theme : (theme as Record<string, unknown>),

package/src/core/components/ErrorBoundary.tsx

@@ -65,25 +65,30 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
         return fallback(error, this.handleReset);
       }
 
-      // 默认错误展示
+      // 默认错误展示（使用 CSS 变量，与 ThemeManager 对齐）
       return (
         <div
+          role="alert"
+          aria-live="assertive"
           style={{
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            padding: '20px',
-            backgroundColor: '#fff',
-            border: '1px solid #ff4d4f',
-            borderRadius: '8px',
-            color: '#333',
+            padding: 'var(--tv-border-radius, 16px)',
+            backgroundColor: 'var(--tv-bg-color, #fff)',
+            border: '1px solid var(--tv-error-color, #ff4d4f)',
+            borderRadius: 'var(--tv-border-radius, 8px)',
+            color: 'var(--tv-text-color, #333)',
             minHeight: '200px',
+            fontFamily: 'var(--tv-font-family, sans-serif)',
           }}
         >
-          <div style={{ fontSize: '48px', marginBottom: '16px' }}>⚠️</div>
-          <h3 style={{ margin: '0 0 12px', color: '#ff4d4f' }}>图表渲染失败</h3>
-          <p style={{ margin: '0 0 16px', color: '#666', textAlign: 'center' }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }} aria-hidden="true">⚠️</div>
+          <h3 style={{ margin: '0 0 12px', color: 'var(--tv-error-color, #ff4d4f)', fontWeight: 700 }}>
+            图表渲染失败
+          </h3>
+          <p style={{ margin: '0 0 16px', color: 'var(--tv-text-color-secondary, #666)', textAlign: 'center', maxWidth: '320px' }}>
             图表在渲染过程中遇到错误，请检查数据配置是否正确
           </p>
           {showDetails && (
@@ -91,15 +96,15 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
               style={{
                 width: '100%',
                 padding: '12px',
-                backgroundColor: '#f5f5f5',
-                borderRadius: '4px',
-                fontSize: '12px',
-                fontFamily: 'monospace',
+                backgroundColor: 'var(--tv-bg-color-secondary, #f5f5f5)',
+                borderRadius: 'var(--tv-border-radius-small, 4px)',
+                fontSize: 'var(--tv-font-size-small, 12px)',
+                fontFamily: 'var(--tv-font-family, monospace)',
                 overflow: 'auto',
                 maxHeight: '150px',
               }}
             >
-              <summary style={{ cursor: 'pointer', marginBottom: '8px' }}>错误详情</summary>
+              <summary style={{ cursor: 'pointer', marginBottom: '8px', fontWeight: 600 }}>错误详情</summary>
               <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                 {error.message}
                 {'\n\n'}
@@ -112,12 +117,20 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
             style={{
               marginTop: '16px',
               padding: '8px 24px',
-              backgroundColor: '#1890ff',
+              backgroundColor: 'var(--tv-primary-color, #1890ff)',
               color: '#fff',
               border: 'none',
-              borderRadius: '4px',
+              borderRadius: 'var(--tv-border-radius-small, 4px)',
               cursor: 'pointer',
-              fontSize: '14px',
+              fontSize: 'var(--tv-font-size, 14px)',
+              fontWeight: 600,
+              transition: 'background-color var(--tv-transition-duration, 0.3s)',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = 'var(--tv-primary-color-hover, #40a9ff)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = 'var(--tv-primary-color, #1890ff)';
             }}
           >
             重试

package/src/core/components/LazyChart.tsx

@@ -18,7 +18,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<Record<string, unknown>> }>> = {
   line: () => import('../../charts/line'),
   bar: () => import('../../charts/bar'),
   pie: () => import('../../charts/pie'),
@@ -35,10 +35,12 @@ 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}
     style={{
       display: 'flex',
       alignItems: 'center',
@@ -46,8 +48,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 +57,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 +72,9 @@ const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中
           }
         `}
       </style>
-      <span style={{ color: '#666', fontSize: '14px' }}>{text}</span>
+      <span style={{ color: 'var(--tv-text-color-secondary, #666)', fontSize: 'var(--tv-font-size, 14px)' }}>
+        {text}
+      </span>
     </div>
   </div>
 );
@@ -136,8 +141,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<Record<string, unknown>> | null {
+  const lazyCharts: Record<string, ComponentType<Record<string, unknown>>> = {
     line: LazyLineChart,
     bar: LazyBarChart,
     pie: LazyPieChart,
@@ -159,7 +164,7 @@ export function createLazyChart(chartType: string): ComponentType<any> | null {
  * 用于按名称动态获取懒加载图表组件
  */
 export const LazyChartRegistry = {
-  get(chartType: string): ComponentType<any> | null {
+  get(chartType: string): ComponentType<Record<string, unknown>> | 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/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/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,23 @@ export {
   type DownloadDataOptions,
 } from './useChartDownload';
 
+// 图表历史记录 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 +702,6 @@ export default {
   useDataZoom,
   useChartConnect,
   useChartDownload,
+  useChartHistory,
+  useChartSelection,
 };