@agions/taroviz 1.2.0 → 1.3.0

package/src/core/components/LazyChart.tsx

@@ -0,0 +1,200 @@
+/**
+ * TaroViz 懒加载图表组件
+ * 用于按需加载图表，减少首屏体积
+ */
+import React, { Suspense, lazy, ComponentType } from 'react';
+
+// 懒加载各个图表组件
+const LazyLineChart = lazy(() => import('../../charts/line'));
+const LazyBarChart = lazy(() => import('../../charts/bar'));
+const LazyPieChart = lazy(() => import('../../charts/pie'));
+const LazyScatterChart = lazy(() => import('../../charts/scatter'));
+const LazyRadarChart = lazy(() => import('../../charts/radar'));
+const LazyHeatmapChart = lazy(() => import('../../charts/heatmap'));
+const LazyGaugeChart = lazy(() => import('../../charts/gauge'));
+const LazyFunnelChart = lazy(() => import('../../charts/funnel'));
+const LazyTreeMapChart = lazy(() => import('../../charts/treemap'));
+const LazySunburstChart = lazy(() => import('../../charts/sunburst'));
+const LazySankeyChart = lazy(() => import('../../charts/sankey'));
+
+/**
+ * 懒加载图表包装器
+ */
+interface LazyChartWrapperProps {
+  children?: React.ReactNode;
+  fallback?: React.ReactNode;
+  loading?: boolean;
+  loadingText?: string;
+}
+
+/**
+ * 默认加载状态组件
+ */
+const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中...' }) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      height: '100%',
+      minHeight: '200px',
+      backgroundColor: '#f5f5f5',
+      borderRadius: '8px',
+    }}
+  >
+    <div style={{ textAlign: 'center' }}>
+      <div
+        style={{
+          width: '40px',
+          height: '40px',
+          border: '3px solid #1890ff',
+          borderTopColor: 'transparent',
+          borderRadius: '50%',
+          animation: 'taroviz-spin 1s linear infinite',
+          margin: '0 auto 12px',
+        }}
+      />
+      <style>
+        {`
+          @keyframes taroviz-spin {
+            to { transform: rotate(360deg); }
+          }
+        `}
+      </style>
+      <span style={{ color: '#666', fontSize: '14px' }}>{text}</span>
+    </div>
+  </div>
+);
+
+/**
+ * 懒加载图表包装组件
+ */
+export function withLazyLoad<P extends object>(
+  ChartComponent: ComponentType<P>,
+  loadingFallback?: ComponentType<{ text?: string }>
+): ComponentType<P & { loadingText?: string; fallback?: React.ReactNode }> {
+  const LazyWrapper: React.FC<P & { loadingText?: string; fallback?: React.ReactNode }> = ({
+    loadingText,
+    fallback,
+    ...props
+  }) => {
+    const LoadingComponent = loadingFallback || DefaultLoadingFallback;
+    return (
+      <Suspense fallback={<LoadingComponent text={loadingText} />}>
+        {fallback ? (
+          <React.Fragment>
+            {fallback}
+            <ChartComponent {...props} />
+          </React.Fragment>
+        ) : (
+          <ChartComponent {...props} />
+        )}
+      </Suspense>
+    );
+  };
+
+  LazyWrapper.displayName = `withLazyLoad(${ChartComponent.displayName || ChartComponent.name || 'Chart'})`;
+
+  return LazyWrapper;
+}
+
+/**
+ * 预加载图表组件
+ * 在需要显示图表之前预先加载
+ */
+export function preloadChart(chartType: string): void {
+  const chartModules: Record<string, () => Promise<{ default: ComponentType<any> }>> = {
+    line: () => import('../../charts/line'),
+    bar: () => import('../../charts/bar'),
+    pie: () => import('../../charts/pie'),
+    scatter: () => import('../../charts/scatter'),
+    radar: () => import('../../charts/radar'),
+    heatmap: () => import('../../charts/heatmap'),
+    gauge: () => import('../../charts/gauge'),
+    funnel: () => import('../../charts/funnel'),
+    treemap: () => import('../../charts/treemap'),
+    sunburst: () => import('../../charts/sunburst'),
+    sankey: () => import('../../charts/sankey'),
+  };
+
+  const loader = chartModules[chartType];
+  if (loader) {
+    loader().catch(console.error);
+  }
+}
+
+/**
+ * 预加载所有图表组件
+ */
+export function preloadAllCharts(): void {
+  const chartTypes = [
+    'line',
+    'bar',
+    'pie',
+    'scatter',
+    'radar',
+    'heatmap',
+    'gauge',
+    'funnel',
+    'treemap',
+    'sunburst',
+    'sankey',
+  ];
+
+  chartTypes.forEach((type) => preloadChart(type));
+}
+
+/**
+ * 创建懒加载图表映射
+ * 用于动态导入图表
+ */
+export function createLazyChart(chartType: string): ComponentType<any> | null {
+  const lazyCharts: Record<string, ComponentType<any>> = {
+    line: LazyLineChart,
+    bar: LazyBarChart,
+    pie: LazyPieChart,
+    scatter: LazyScatterChart,
+    radar: LazyRadarChart,
+    heatmap: LazyHeatmapChart,
+    gauge: LazyGaugeChart,
+    funnel: LazyFunnelChart,
+    treemap: LazyTreeMapChart,
+    sunburst: LazySunburstChart,
+    sankey: LazySankeyChart,
+  };
+
+  return lazyCharts[chartType] || null;
+}
+
+/**
+ * 懒加载图表注册表
+ * 用于按名称动态获取懒加载图表组件
+ */
+export const LazyChartRegistry = {
+  get(chartType: string): ComponentType<any> | null {
+    return createLazyChart(chartType);
+  },
+
+  preload(chartType: string): void {
+    preloadChart(chartType);
+  },
+
+  preloadAll(): void {
+    preloadAllCharts();
+  },
+};
+
+export {
+  LazyLineChart,
+  LazyBarChart,
+  LazyPieChart,
+  LazyScatterChart,
+  LazyRadarChart,
+  LazyHeatmapChart,
+  LazyGaugeChart,
+  LazyFunnelChart,
+  LazyTreeMapChart,
+  LazySunburstChart,
+  LazySankeyChart,
+};

package/src/core/echarts.ts

@@ -0,0 +1,80 @@
+/**
+ * ECharts 组件注册中心
+ * 统一管理所有图表组件的注册，避免重复注册
+ * 
+ * 使用 tree-shaking 友好型导入
+ * 仅在用户使用特定图表时加载对应模块
+ */
+import * as echarts from 'echarts/core';
+
+// 图表类型 - 按需导入
+import { PieChart } from 'echarts/charts';
+import { LineChart } from 'echarts/charts';
+import { BarChart } from 'echarts/charts';
+import { GaugeChart } from 'echarts/charts';
+import { ScatterChart } from 'echarts/charts';
+import { RadarChart } from 'echarts/charts';
+import { HeatmapChart } from 'echarts/charts';
+import { FunnelChart } from 'echarts/charts';
+
+// 组件 - 按需导入
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+} from 'echarts/components';
+
+// 渲染器
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册渲染器
+echarts.use(CanvasRenderer);
+
+// 注册所有图表类型
+const chartTypes = [
+  PieChart,
+  LineChart,
+  BarChart,
+  GaugeChart,
+  ScatterChart,
+  RadarChart,
+  HeatmapChart,
+  FunnelChart,
+];
+
+// 注册所有组件
+const components = [
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+];
+
+// 统一注册
+echarts.use([...chartTypes, ...components]);
+
+export default echarts;
+
+// 导出图表类型供按需加载使用
+export {
+  PieChart,
+  LineChart,
+  BarChart,
+  GaugeChart,
+  ScatterChart,
+  RadarChart,
+  HeatmapChart,
+  FunnelChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  CanvasRenderer,
+};

package/src/core/index.ts

@@ -12,8 +12,11 @@ export * from './utils';
 // 核心组件
 export type { ChartProps } from './components/BaseChart';
 
+// ECharts 统一导出
+export { default as echarts } from './echarts';
+
 /**
  * 库信息
  */
 export const name = 'taroviz';
-export const version = '1.1.1';
+export const version = '1.2.0';