@hsu-react/ui 0.0.1

package/src/components/Chart/Sankey/index.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import styles from "../index.module.less";
+import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
+import * as echarts from "echarts";
+
+type SankeyNodeItemOption = echarts.SankeySeriesOption["data"];
+type SankeyEdgeItemOption = echarts.SankeySeriesOption["links"];
+
+export interface ChartSankeyProps extends ChartCommonProps {
+  seriesData: SankeyNodeItemOption;
+  seriesLinks: SankeyEdgeItemOption;
+  getImage?: (img: string) => void;
+}
+
+const Sankey: React.FC<ChartSankeyProps> = (props) => {
+  const { className, style, seriesData, seriesLinks, series, getImage } = props;
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
+  // 使用 useMemo 缓存 chart 配置
+  const chartOption = useMemo(() => {
+    const option: ChartsOption = {
+      series: {
+        type: "sankey",
+        layout: "none",
+        top: 0,
+        left: 0,
+        right: 180,
+        bottom: 0,
+        nodeGap: 1,
+        layoutIterations: 0,
+        data: seriesData?.map((item) => {
+          return {
+            name: item.name,
+            itemStyle: {
+              color: "#156FFF",
+            },
+            label: {
+              position: "right",
+              textStyle: {
+                fontWeight: 800,
+              },
+            },
+          };
+        }),
+        links: seriesLinks?.map((item) => {
+          return { ...item, value: 10 };
+        }),
+        draggable: true,
+        roam: true,
+        focusNodeAdjacency: "allEdges",
+        levels: [
+          {
+            depth: 0,
+            itemStyle: {
+              color: "yellow",
+            },
+            lineStyle: {
+              color: "source",
+              opacity: 0.2,
+            },
+          },
+          {
+            depth: 1,
+            lineStyle: {
+              color: "source",
+              opacity: 0.2,
+            },
+          },
+          {
+            depth: 2,
+            lineStyle: {
+              color: "source",
+              opacity: 0.2,
+            },
+          },
+          {
+            depth: 3,
+            label: {
+              fontSize: 12,
+            },
+          },
+        ],
+        label: {
+          fontSize: 14,
+          color: "#666",
+        },
+        itemStyle: {
+          color: "transparent",
+          borderColor: "transparent",
+          borderWidth: 20,
+        },
+        ...series,
+      } as ChartOptionType,
+    };
+
+    return option;
+  }, [seriesData, seriesLinks, series]);
+
+  // 处理图表 resize 的回调
+  const handleResize = useCallback(() => {
+    chartInstanceRef.current?.resize();
+  }, []);
+
+  // 初始化图表
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    // 初始化或获取已存在的实例
+    let chart = chartInstanceRef.current;
+    if (!chart) {
+      chart = echarts.init(chartRef.current);
+      chartInstanceRef.current = chart;
+
+      // 首次初始化时添加 finished 事件监听
+      chart.on("finished", () => {
+        getImage?.(
+          chart!.getDataURL({
+            type: "png",
+            pixelRatio: 1,
+            backgroundColor: "#fff",
+          })
+        );
+      });
+    }
+
+    // 设置配置
+    chart.setOption(chartOption as ChartOptionType, true);
+
+    // 添加 resize 监听
+    window.addEventListener("resize", handleResize);
+
+    // 添加 ResizeObserver
+    if (chartRef.current && !resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(handleResize);
+      resizeObserverRef.current.observe(chartRef.current);
+    }
+
+    // 清理函数
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [chartOption, handleResize, getImage]);
+
+  // 组件卸载时清理资源
+  useEffect(() => {
+    return () => {
+      // 清理 ResizeObserver
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      // 销毁图表实例
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.off("finished");
+        chartInstanceRef.current.dispose();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, []);
+
+  function getMaxLevelCount() {
+    if (!seriesData?.length) return 0;
+    const level: Record<number, number> = {};
+    seriesData?.forEach((v) => {
+      const { level: _level } = v as unknown as { level: number };
+
+      if (!level[_level]) {
+        level[_level] = 1;
+        return;
+      }
+      level[_level] += 1;
+    });
+    const max = Math.max(...Object.values(level));
+    return max > 10 ? max : 10;
+  }
+
+  return (
+    <div
+      className={`${styles["chart-container"]} ${className ?? ""}`}
+      style={style}
+    >
+      <div
+        ref={chartRef}
+        style={{
+          width: "100%",
+          height: "100%",
+          minHeight: `${getMaxLevelCount() * 30}px`,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Sankey;

package/src/components/Chart/Tree/index.tsx

@@ -0,0 +1,113 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import styles from "../index.module.less";
+import {
+  ChartCommonProps,
+  ChartOptionType,
+  ChartsOption,
+  SeriesData,
+} from "..";
+import * as echarts from "echarts";
+import { deepCopy } from "hsu-utils";
+import { handleTreeData } from "../_utils/tree";
+
+export interface ChartTreeProps extends ChartCommonProps {
+  seriesData: SeriesData[];
+  getImage?: (img: string) => void;
+}
+
+const Tree: React.FC<ChartTreeProps> = (props) => {
+  const { className, style, seriesData, series, getImage } = props;
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
+  // 使用 useMemo 缓存 chart 配置
+  const chartOption = useMemo(() => {
+    const option: ChartsOption = {
+      series: {
+        type: "tree",
+        data: handleTreeData(deepCopy(seriesData), 0),
+        left: "10%",
+        right: "10%",
+        top: "10%",
+        bottom: "10%",
+        ...series,
+      } as ChartOptionType,
+    };
+
+    return option;
+  }, [seriesData, series]);
+
+  // 处理图表 resize 的回调
+  const handleResize = useCallback(() => {
+    chartInstanceRef.current?.resize();
+  }, []);
+
+  // 初始化图表
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    // 初始化或获取已存在的实例
+    let chart = chartInstanceRef.current;
+    if (!chart) {
+      chart = echarts.init(chartRef.current);
+      chartInstanceRef.current = chart;
+
+      // 首次初始化时添加 finished 事件监听
+      chart.on("finished", () => {
+        getImage?.(
+          chart!.getDataURL({
+            type: "png",
+            pixelRatio: 1,
+            backgroundColor: "#fff",
+          })
+        );
+      });
+    }
+
+    // 设置配置
+    chart.setOption(chartOption as ChartOptionType, true);
+
+    // 添加 resize 监听
+    window.addEventListener("resize", handleResize);
+
+    // 添加 ResizeObserver
+    if (chartRef.current && !resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(handleResize);
+      resizeObserverRef.current.observe(chartRef.current);
+    }
+
+    // 清理函数
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [chartOption, handleResize, getImage]);
+
+  // 组件卸载时清理资源
+  useEffect(() => {
+    return () => {
+      // 清理 ResizeObserver
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      // 销毁图表实例
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.off("finished");
+        chartInstanceRef.current.dispose();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={`${styles["chart-container"]} ${className ?? ""}`}
+      style={style}
+    >
+      <div ref={chartRef} style={{ width: "100%", height: "100%" }} />
+    </div>
+  );
+};
+
+export default Tree;

package/src/components/Chart/_utils/autoScrollLegend.ts

@@ -0,0 +1,107 @@
+import * as echarts from "echarts";
+
+export interface AutoScrollLegendProps {
+  chart: echarts.ECharts;
+  total: number;
+  visibleCount?: number;
+  interval?: number;
+  autoStart?: boolean;
+  stopOnWheel?: boolean;
+}
+
+export function autoScrollLegend(props: AutoScrollLegendProps) {
+  const {
+    chart,
+    total,
+    visibleCount = 8,
+    interval = 1500,
+    autoStart = true,
+    stopOnWheel = true,
+  } = props;
+
+  let currentIndex = 0;
+  let scrollInterval: NodeJS.Timeout | null = null;
+  let isManualScrolling = false;
+
+  function start() {
+    if (scrollInterval) {
+      stop();
+    }
+
+    scrollInterval = setInterval(() => {
+      currentIndex++;
+      if (currentIndex > total - visibleCount) {
+        currentIndex = 0;
+      }
+
+      chart.setOption({
+        legend: {
+          scrollDataIndex: currentIndex,
+        },
+      });
+    }, interval);
+  }
+
+  function stop() {
+    if (scrollInterval) {
+      clearInterval(scrollInterval);
+      scrollInterval = null;
+    }
+  }
+
+  function handleMouseOver() {
+    stop();
+  }
+
+  function handleMouseOut() {
+    if (!isManualScrolling) {
+      start();
+    }
+  }
+
+  function handleWheel(event: Event) {
+    const wheelEvent = event as WheelEvent;
+    wheelEvent.preventDefault();
+
+    if (wheelEvent.deltaY > 0) {
+      currentIndex++;
+      if (currentIndex > total - visibleCount) {
+        currentIndex = total - visibleCount;
+      }
+    } else {
+      currentIndex--;
+      if (currentIndex < 0) {
+        currentIndex = 0;
+      }
+    }
+
+    chart.setOption({
+      legend: {
+        scrollDataIndex: currentIndex,
+      },
+    });
+
+    if (stopOnWheel) {
+      isManualScrolling = true;
+      stop();
+    }
+  }
+
+  const chartDom = chart.getDom();
+  chartDom.addEventListener("mouseover", handleMouseOver);
+  chartDom.addEventListener("mouseout", handleMouseOut);
+  chartDom.addEventListener("wheel", handleWheel, { passive: false });
+
+  function dispose() {
+    stop();
+    chartDom.removeEventListener("mouseover", handleMouseOver);
+    chartDom.removeEventListener("mouseout", handleMouseOut);
+    chartDom.removeEventListener("wheel", handleWheel);
+  }
+
+  if (autoStart) {
+    start();
+  }
+
+  return { start, stop, dispose };
+}

package/src/components/Chart/_utils/autoSmooth.ts

@@ -0,0 +1,164 @@
+import * as echarts from "echarts";
+
+export interface AutoScrollByItemProps {
+  chart: echarts.ECharts;
+  xAxisData?: Array<string>;
+  windowSize?: number;
+  interval?: number;
+  startIndex?: number;
+  autoPlay?: boolean;
+  enableWheelScroll?: boolean;
+}
+
+export function autoScrollByItem(props: AutoScrollByItemProps) {
+  const {
+    chart,
+    xAxisData,
+    windowSize = 10,
+    interval = 2000,
+    startIndex = 0,
+    autoPlay = true,
+    enableWheelScroll = true,
+  } = props;
+  const total = xAxisData?.length ?? 0;
+  if (total <= 0) {
+    return {
+      pause: () => {},
+      resume: () => {},
+      dispose: () => {},
+    };
+  }
+
+  const initialStartIndex = Math.max(
+    0,
+    Math.min(startIndex, Math.max(total - 1, 0)),
+  );
+  const stepPercent = total > 0 ? (1 / total) * 100 : 0;
+  const windowSizePercent = total > 0 ? (windowSize / total) * 100 : 100;
+  const initialStartPercent = total > 0 ? (initialStartIndex / total) * 100 : 0;
+  let start = initialStartPercent;
+  let end = Math.min(initialStartPercent + windowSizePercent, 100);
+
+  const syncDataZoomRange = () => {
+    const option = chart.getOption() as {
+      dataZoom?: Array<Record<string, unknown>>;
+    };
+    const currentDataZoom = option?.dataZoom;
+    if (!currentDataZoom?.length) return;
+    chart.setOption({
+      dataZoom: currentDataZoom.map((dz) => ({
+        ...dz,
+        start,
+        end,
+      })),
+    });
+  };
+
+  syncDataZoomRange();
+
+  let timer: NodeJS.Timeout | null = null;
+  if (autoPlay) {
+    timer = setInterval(tick, interval);
+  }
+
+  function tick() {
+    start += stepPercent;
+    end += stepPercent;
+
+    if (end > 100) {
+      start = 0;
+      end = windowSizePercent;
+    }
+
+    syncDataZoomRange();
+  }
+
+  if (autoPlay) {
+    chart.getZr().on("mouseover", pause);
+    chart.getZr().on("mouseout", resume);
+  }
+
+  function pause() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+  function resume() {
+    if (autoPlay && !timer) {
+      timer = setInterval(tick, interval);
+    }
+  }
+
+  const chartDom = chart.getDom();
+  const applyWheelDelta = (delta: number) => {
+    if (delta === 0) return;
+    const direction = delta > 0 ? 1 : -1;
+
+    start += direction * stepPercent;
+    end += direction * stepPercent;
+
+    if (start < 0) {
+      start = 0;
+      end = windowSizePercent;
+    }
+    if (end > 100) {
+      end = 100;
+      start = Math.max(0, 100 - windowSizePercent);
+    }
+
+    syncDataZoomRange();
+  };
+
+  function handleWheel(event: Event) {
+    if (!enableWheelScroll) return;
+    const wheelEvent = event as WheelEvent;
+    wheelEvent.preventDefault();
+    applyWheelDelta(wheelEvent.deltaY);
+  }
+
+  function handleZrMouseWheel(params: unknown) {
+    if (!enableWheelScroll) return;
+    const eventLike = (params as { event?: Record<string, unknown> })?.event;
+    const nativeEvent = eventLike?.event as WheelEvent | undefined;
+    const deltaFromNative = nativeEvent?.deltaY;
+    const deltaFromEventLike =
+      (eventLike?.deltaY as number | undefined) ??
+      (eventLike?.zrDelta as number | undefined);
+    const wheelDelta = eventLike?.wheelDelta as number | undefined;
+    const resolvedDelta =
+      deltaFromNative ??
+      deltaFromEventLike ??
+      (typeof wheelDelta === "number" ? -wheelDelta : undefined);
+
+    if (typeof resolvedDelta !== "number") return;
+    nativeEvent?.preventDefault();
+    applyWheelDelta(resolvedDelta);
+  }
+
+  if (enableWheelScroll) {
+    chartDom.addEventListener("wheel", handleWheel, { passive: false });
+    chart.getZr().on("mousewheel", handleZrMouseWheel);
+  }
+
+  const handleWindowResize = () => {
+    chart.resize();
+    syncDataZoomRange();
+  };
+  window.addEventListener("resize", handleWindowResize);
+
+  function dispose() {
+    pause();
+    if (autoPlay) {
+      chart.getZr().off("mouseover", pause);
+      chart.getZr().off("mouseout", resume);
+    }
+    if (enableWheelScroll) {
+      chartDom.removeEventListener("wheel", handleWheel);
+      chart.getZr().off("mousewheel", handleZrMouseWheel);
+    }
+    window.removeEventListener("resize", handleWindowResize);
+  }
+
+  return { pause, resume, dispose };
+}