@hsu-react/ui 0.0.1

package/lib/components/Chart/Radar/index.js

@@ -0,0 +1,291 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var echarts = _interopRequireWildcard(require("echarts"));
+var _react = _interopRequireWildcard(require("react"));
+var _indexModule = _interopRequireDefault(require("../index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** 单指标 tooltip 触发方式
+ * - `point`  仅悬停在数据点/线上触发（echarts 原生 item trigger）
+ * - `region` 进入该指标的扇形区域即触发，并在命中扇形区内填充高亮色
+ */
+
+const Radar = props => {
+  const {
+    className,
+    style,
+    indicators,
+    data,
+    color = "#0364f5",
+    name = "热力值",
+    radar,
+    series,
+    singleIndicatorTooltip: singleIndicatorTooltipProp = false,
+    singleIndicatorMode,
+    singleIndicatorHoverFill,
+    ...coreOption
+  } = props;
+  const chartRef = (0, _react.useRef)(null);
+  const chartInstanceRef = (0, _react.useRef)(null);
+  const resizeObserverRef = (0, _react.useRef)(null);
+  const hoveredIndicatorRef = (0, _react.useRef)(-1);
+  const singleIndicatorEnabled = Boolean(singleIndicatorTooltipProp) && singleIndicatorMode !== undefined;
+  const singleIndicatorFormatter = typeof singleIndicatorTooltipProp === "function" ? singleIndicatorTooltipProp : undefined;
+  const singleIndicatorRegion = singleIndicatorMode === "region";
+  const singleIndicatorHighlight = singleIndicatorRegion;
+  const chartOption = (0, _react.useMemo)(() => {
+    const tooltipOption = coreOption?.tooltip;
+    const seriesOverride = series;
+    const overrideData = seriesOverride?.data;
+    const extraData = Array.isArray(overrideData) ? overrideData : [];
+
+    // 将每个 extraData item 拆为独立 series，使图例可以分别控制显隐
+    const extraSeries = extraData.map(item => {
+      const d = item;
+      return {
+        type: "radar",
+        name: d.name ?? "",
+        data: [d]
+      };
+    });
+    const mainSeries = {
+      type: "radar",
+      name,
+      data: [{
+        value: data,
+        name,
+        areaStyle: {
+          color,
+          opacity: 0.3
+        },
+        lineStyle: {
+          color,
+          width: 2
+        },
+        itemStyle: {
+          color: "#fff",
+          borderColor: color,
+          borderWidth: 2
+        },
+        symbol: "circle",
+        symbolSize: 6
+      }]
+    };
+    const option = {
+      color: [color],
+      radar: {
+        indicator: indicators.map(ind => ({
+          name: ind.name,
+          max: ind.max ?? 40
+        })),
+        center: ["50%", "50%"],
+        radius: "70%",
+        splitNumber: 4,
+        shape: "polygon",
+        splitArea: {
+          areaStyle: {
+            color: ["rgba(3, 100, 245, 0.05)", "rgba(3, 100, 245, 0.1)"]
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: "rgba(3, 100, 245, 0.2)",
+            type: "dashed"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: "rgba(3, 100, 245, 0.2)",
+            type: "dashed"
+          }
+        },
+        axisLabel: {
+          show: false
+        },
+        axisName: {
+          color: "#7B7B7B",
+          fontSize: 14,
+          fontWeight: 400
+        },
+        ...radar
+      },
+      series: [...extraSeries, mainSeries],
+      ...coreOption,
+      tooltip: {
+        show: true,
+        ...(singleIndicatorEnabled ? {
+          trigger: "item",
+          ...(singleIndicatorRegion ? {
+            triggerOn: "none"
+          } : {}),
+          formatter: params => {
+            const idx = hoveredIndicatorRef.current;
+            if (idx < 0 || idx >= indicators.length) return "";
+            if (singleIndicatorFormatter) {
+              return singleIndicatorFormatter(idx, params, indicators[idx]);
+            }
+            const p = params;
+            const rawValue = p?.data?.value ?? p?.value;
+            const value = Array.isArray(rawValue) ? rawValue[idx] : rawValue;
+            const seriesName = p?.data?.name ?? p?.name ?? "";
+            const dot = `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${p?.color ?? color};margin-right:6px;"></span>`;
+            return `${dot}${seriesName ? seriesName + " · " : ""}${indicators[idx].name}：${value ?? "-"}`;
+          }
+        } : {}),
+        ...tooltipOption
+      }
+    };
+    return option;
+  }, [indicators, data, color, name, radar, series, coreOption, singleIndicatorEnabled, singleIndicatorFormatter, singleIndicatorRegion]);
+  const handleResize = (0, _react.useCallback)(() => {
+    chartInstanceRef.current?.resize();
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!chartRef.current) return;
+    let chart = chartInstanceRef.current;
+    if (!chart) {
+      chart = echarts.init(chartRef.current);
+      chartInstanceRef.current = chart;
+    }
+    chart.setOption(chartOption, true);
+    let zrMoveHandler = null;
+    let zrOutHandler = null;
+    let hoverShape = null;
+    if (singleIndicatorEnabled) {
+      const zr = chart.getZr();
+      const mainSeriesIndex = chartOption.series?.length != null ? chartOption.series.length - 1 : 0;
+      const hoverFill = singleIndicatorHoverFill ?? color;
+      if (singleIndicatorHighlight) {
+        const Polygon = echarts.graphic.Polygon;
+        hoverShape = new Polygon({
+          shape: {
+            points: []
+          },
+          style: {
+            fill: hoverFill,
+            opacity: 0.12
+          },
+          silent: true,
+          z: 0,
+          invisible: true
+        });
+        zr.add(hoverShape);
+      }
+      const hideTip = () => {
+        hoveredIndicatorRef.current = -1;
+        if (singleIndicatorRegion) {
+          chartInstanceRef.current?.dispatchAction({
+            type: "hideTip"
+          });
+        }
+        if (hoverShape) hoverShape.attr({
+          invisible: true
+        });
+      };
+      zrMoveHandler = e => {
+        const model = chart.getModel();
+        const coord = model.getComponent("radar")?.coordinateSystem;
+        if (!coord) return;
+        const dx = e.offsetX - coord.cx;
+        const dy = e.offsetY - coord.cy;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const outerR = coord.r ?? Infinity;
+        if (distance > outerR) {
+          hideTip();
+          return;
+        }
+        const axes = coord.getIndicatorAxes();
+        // echarts 雷达轴角度按数学约定（y 向上），而屏幕坐标 y 向下，需翻转 y
+        const mouseAngle = Math.atan2(-dy, dx);
+        let bestI = -1;
+        let bestDA = Infinity;
+        axes.forEach((ax, i) => {
+          let da = Math.abs(mouseAngle - ax.angle);
+          if (da > Math.PI) da = 2 * Math.PI - da;
+          if (da < bestDA) {
+            bestDA = da;
+            bestI = i;
+          }
+        });
+        hoveredIndicatorRef.current = bestI;
+        if (hoverShape && bestI >= 0) {
+          // 以与雷达多边形一致的边界构造扇形区：
+          // 中心 → 与上一轴顶边的中点 → 当前轴顶 → 与下一轴顶边的中点
+          const n = axes.length;
+          const tipOf = idx => {
+            const a = axes[idx].angle;
+            return [coord.cx + outerR * Math.cos(a), coord.cy - outerR * Math.sin(a)];
+          };
+          const midOf = (a, b) => [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+          const prevTip = tipOf((bestI - 1 + n) % n);
+          const curTip = tipOf(bestI);
+          const nextTip = tipOf((bestI + 1) % n);
+          const points = [[coord.cx, coord.cy], midOf(prevTip, curTip), curTip, midOf(curTip, nextTip)];
+          hoverShape.attr({
+            shape: {
+              points
+            },
+            invisible: false
+          });
+        }
+        if (singleIndicatorRegion) {
+          chartInstanceRef.current?.dispatchAction({
+            type: "showTip",
+            seriesIndex: mainSeriesIndex,
+            dataIndex: 0,
+            position: [e.offsetX, e.offsetY]
+          });
+        }
+      };
+      zrOutHandler = () => hideTip();
+      zr.on("mousemove", zrMoveHandler);
+      zr.on("globalout", zrOutHandler);
+    }
+    window.addEventListener("resize", handleResize);
+    if (chartRef.current && !resizeObserverRef.current) {
+      resizeObserverRef.current = new ResizeObserver(handleResize);
+      resizeObserverRef.current.observe(chartRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (chartInstanceRef.current) {
+        const zr = chartInstanceRef.current.getZr();
+        if (zrMoveHandler) zr.off("mousemove", zrMoveHandler);
+        if (zrOutHandler) zr.off("globalout", zrOutHandler);
+        if (hoverShape) {
+          zr.remove(hoverShape);
+        }
+      }
+    };
+  }, [chartOption, handleResize, singleIndicatorEnabled, singleIndicatorRegion, singleIndicatorHighlight, singleIndicatorHoverFill, color]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.dispose();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${_indexModule.default["chart-container"]} ${className ?? ""}`,
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: chartRef,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    })
+  });
+};
+var _default = exports.default = Radar;

package/lib/components/Chart/Sankey/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ChartCommonProps } 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;
+}
+declare const Sankey: React.FC<ChartSankeyProps>;
+export default Sankey;

package/lib/components/Chart/Sankey/index.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _indexModule = _interopRequireDefault(require("../index.module.less"));
+var echarts = _interopRequireWildcard(require("echarts"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Sankey = props => {
+  const {
+    className,
+    style,
+    seriesData,
+    seriesLinks,
+    series,
+    getImage
+  } = props;
+  const chartRef = (0, _react.useRef)(null);
+  const chartInstanceRef = (0, _react.useRef)(null);
+  const resizeObserverRef = (0, _react.useRef)(null);
+
+  // 使用 useMemo 缓存 chart 配置
+  const chartOption = (0, _react.useMemo)(() => {
+    const option = {
+      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
+      }
+    };
+    return option;
+  }, [seriesData, seriesLinks, series]);
+
+  // 处理图表 resize 的回调
+  const handleResize = (0, _react.useCallback)(() => {
+    chartInstanceRef.current?.resize();
+  }, []);
+
+  // 初始化图表
+  (0, _react.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, 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]);
+
+  // 组件卸载时清理资源
+  (0, _react.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 = {};
+    seriesData?.forEach(v => {
+      const {
+        level: _level
+      } = v;
+      if (!level[_level]) {
+        level[_level] = 1;
+        return;
+      }
+      level[_level] += 1;
+    });
+    const max = Math.max(...Object.values(level));
+    return max > 10 ? max : 10;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${_indexModule.default["chart-container"]} ${className ?? ""}`,
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: chartRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        minHeight: `${getMaxLevelCount() * 30}px`
+      }
+    })
+  });
+};
+var _default = exports.default = Sankey;

package/lib/components/Chart/Tree/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ChartCommonProps, SeriesData } from "..";
+export interface ChartTreeProps extends ChartCommonProps {
+    seriesData: SeriesData[];
+    getImage?: (img: string) => void;
+}
+declare const Tree: React.FC<ChartTreeProps>;
+export default Tree;

package/lib/components/Chart/Tree/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _indexModule = _interopRequireDefault(require("../index.module.less"));
+var echarts = _interopRequireWildcard(require("echarts"));
+var _hsuUtils = require("hsu-utils");
+var _tree = require("../_utils/tree");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Tree = props => {
+  const {
+    className,
+    style,
+    seriesData,
+    series,
+    getImage
+  } = props;
+  const chartRef = (0, _react.useRef)(null);
+  const chartInstanceRef = (0, _react.useRef)(null);
+  const resizeObserverRef = (0, _react.useRef)(null);
+
+  // 使用 useMemo 缓存 chart 配置
+  const chartOption = (0, _react.useMemo)(() => {
+    const option = {
+      series: {
+        type: "tree",
+        data: (0, _tree.handleTreeData)((0, _hsuUtils.deepCopy)(seriesData), 0),
+        left: "10%",
+        right: "10%",
+        top: "10%",
+        bottom: "10%",
+        ...series
+      }
+    };
+    return option;
+  }, [seriesData, series]);
+
+  // 处理图表 resize 的回调
+  const handleResize = (0, _react.useCallback)(() => {
+    chartInstanceRef.current?.resize();
+  }, []);
+
+  // 初始化图表
+  (0, _react.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, 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]);
+
+  // 组件卸载时清理资源
+  (0, _react.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 /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: `${_indexModule.default["chart-container"]} ${className ?? ""}`,
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: chartRef,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    })
+  });
+};
+var _default = exports.default = Tree;

package/lib/components/Chart/_utils/autoScrollLegend.d.ts

@@ -0,0 +1,14 @@
+import * as echarts from "echarts";
+export interface AutoScrollLegendProps {
+    chart: echarts.ECharts;
+    total: number;
+    visibleCount?: number;
+    interval?: number;
+    autoStart?: boolean;
+    stopOnWheel?: boolean;
+}
+export declare function autoScrollLegend(props: AutoScrollLegendProps): {
+    start: () => void;
+    stop: () => void;
+    dispose: () => void;
+};