@easyv/charts 1.10.28 → 1.10.29

package/lib/components/Legend.js

@@ -27,7 +27,7 @@ var defaultFont = {
   fontWeight: "normal"
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _config$value, _config$percent, _config$value2, _config$value3, _config$name, _ref3;
+  var _ref2, _config$value, _config$percent, _config$value2, _config$value3, _config$name, _ref4;
   var series = _ref.series,
     height = _ref.height,
     data = _ref.data,
@@ -88,15 +88,30 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     scrollStep = _useState2[0],
-    setScrollStep = _useState2[1]; // 行高度
+    setScrollStep = _useState2[1]; // 每次滚动距离
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    loopContainerHeight = _useState4[0],
+    setLoopContainerHeight = _useState4[1]; // 按父高度推算的 loop 视口高度
 
-  // 初始化行高
+  // 根据父级 height 计算可见项数，视口高度 = N*行高 + (N-1)*间距（最后一项下方不留空）
   (0, _react.useEffect)(function () {
-    if (ref_container.current) {
-      var rowHeight = ref_container.current.querySelector("li").clientHeight + gridRowGap;
-      setScrollStep(rowHeight);
+    var _series$length;
+    if (!ref_container.current) return;
+    var li = ref_container.current.querySelector("li");
+    if (!li) return;
+    var itemHeight = li.offsetHeight;
+    var step = itemHeight + gridRowGap;
+    setScrollStep(step);
+    if (!loop.show || !height) {
+      setLoopContainerHeight(null);
+      return;
     }
-  }, [gridRowGap]);
+    var totalItems = (_series$length = series === null || series === void 0 ? void 0 : series.length) !== null && _series$length !== void 0 ? _series$length : 0;
+    var visibleCount = Math.min(totalItems, Math.max(1, Math.floor((height + gridRowGap) / step)));
+    setLoopContainerHeight(visibleCount * itemHeight + Math.max(0, visibleCount - 1) * gridRowGap);
+  }, [gridRowGap, loop.show, series, height]);
+  var loopHeight = loop.show ? (_ref2 = loopContainerHeight !== null && loopContainerHeight !== void 0 ? loopContainerHeight : height) !== null && _ref2 !== void 0 ? _ref2 : "auto" : "auto";
 
   // 启动自动滚动定时器
   (0, _react.useEffect)(function () {
@@ -155,8 +170,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   var valueSuffix = ((_config$value2 = config.value) === null || _config$value2 === void 0 || (_config$value2 = _config$value2.suffix) === null || _config$value2 === void 0 ? void 0 : _config$value2.text) || "";
   var valueSplitConfig = ((_config$value3 = config.value) === null || _config$value3 === void 0 ? void 0 : _config$value3.splitConfig) || {};
   var getValueStr = function getValueStr(item) {
-    var _ref2, _item$data$y, _item$data;
-    var valueStr = ((_ref2 = (_item$data$y = (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.y) !== null && _item$data$y !== void 0 ? _item$data$y : item.value) !== null && _ref2 !== void 0 ? _ref2 : "") + (valueSuffix || "");
+    var _ref3, _item$data$y, _item$data;
+    var valueStr = ((_ref3 = (_item$data$y = (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.y) !== null && _item$data$y !== void 0 ? _item$data$y : item.value) !== null && _ref3 !== void 0 ? _ref3 : "") + (valueSuffix || "");
     if (valueSplitConfig.show && valueSplitConfig.separator) {
       valueStr = valueStr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, valueSplitConfig.separator);
     }
@@ -213,13 +228,15 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   var isFixedWidth = isPieChart ? isPieFixedWidthGrid : LegendType == "FixedWidth";
   var isSideLegend = isPieAdaptive && isSidePlacement;
   var isTopBottomAdaptive = isPieAdaptive && isCenterTopOrBottom;
-  var fullWidth = (_ref3 = componentWidth !== null && componentWidth !== void 0 ? componentWidth : chartWidth) !== null && _ref3 !== void 0 ? _ref3 : 0;
+  var fullWidth = (_ref4 = componentWidth !== null && componentWidth !== void 0 ? componentWidth : chartWidth) !== null && _ref4 !== void 0 ? _ref4 : 0;
   // Adaptive+上下：组件总宽；Adaptive+左右：仅 maxWidth = 总宽 − 左右 chart.margin，宽度由内容撑开
   var pieLegendFullWidth = Math.max(0, fullWidth);
   var pieLegendInnerWidth = Math.max(0, fullWidth - marginLeft - marginRight);
   var sideLegendMaxWidth = isSideLegend ? pieLegendInnerWidth : 0;
   var fixedColumnsPerRow = Math.min(Math.max(1, Number(gridTemplateColumns) || 1), length);
   var isPieTopBottomFixedMultiCol = isPieChart && isFixedWidth && isCenterTopOrBottom && fixedColumnsPerRow > 1;
+  var columnsPerRow = Math.max(1, Number(gridTemplateColumns) || 1);
+  var totalRows = Math.ceil(length / columnsPerRow);
   var formatterExtra = _objectSpread(_objectSpread(_objectSpread({}, config), {}, {
     valueMaxWidth: valueMaxWidth,
     percentMaxWidth: percentMaxWidth,
@@ -284,13 +301,15 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       speed: speed
     })));
   };
+  var legendAlignContent = alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end";
   var stylePieOrAxis = formatter ? _objectSpread(_objectSpread({
     display: "flex",
-    alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
+    alignContent: loop.show ? "flex-start" : legendAlignContent,
     flexDirection: "column",
+    gap: loop.show ? "".concat(gridRowGap, "px") : undefined,
     position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
-    height: loop.show ? height : "auto",
+    height: loopHeight,
     overflowY: loop.show ? "scroll" : "auto"
   }) : _objectSpread(_objectSpread({
     width: "100%",
@@ -298,20 +317,22 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     boxSizing: "border-box",
     position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
-    height: loop.show ? height : "auto",
+    height: loopHeight,
     overflowY: loop.show ? "scroll" : "auto"
   });
   if (isPieAdaptive && isSideLegend) {
     // 左右侧图例：水平方向始终左对齐，图标落在同一条纵线上（与九宫格水平分量无关）
-    var pieAdaptiveWrapperStyle = _objectSpread(_objectSpread({
+    var pieAdaptiveWrapperStyle = _objectSpread(_objectSpread(_objectSpread({
       position: "absolute",
       display: "flex",
       flexDirection: "column",
       width: "max-content",
       maxWidth: sideLegendMaxWidth || undefined,
       alignItems: "flex-start"
-    }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : "auto",
+    }, loop.show ? {
+      justifyContent: "flex-start"
+    } : {}), getPosition(position, _alignment, x, y)), {}, {
+      height: loopHeight,
       overflowY: loop.show ? "scroll" : "auto"
     });
     var pieAdaptiveListStyle = {
@@ -342,7 +363,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       maxWidth: pieLegendFullWidth || "100%",
       boxSizing: "border-box"
     }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : "auto",
+      height: loopHeight,
       overflowY: loop.show ? "scroll" : "auto"
     });
     var topBottomListStyle = {
@@ -414,7 +435,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       position: "absolute",
       display: "flex"
     }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : "auto",
+      height: loopHeight,
       overflowY: loop.show ? "scroll" : "auto"
     }),
     ref: ref_container
@@ -473,7 +494,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     className: "__easyv-legend-wrapper",
     style: stylePieOrAxis,
     ref: ref_container
-  }, formatter ? (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
+  }, formatter ? (0, _toConsumableArray2["default"])(Array(totalRows)).map(function (_, indexs) {
     return /*#__PURE__*/_react["default"].createElement("ul", {
       key: indexs,
       style: {
@@ -481,10 +502,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         width: "fit-content",
         justifyContent: legendMainAlign,
         gap: "".concat(gridRowGap, "px  ").concat(gridColumnGap, "px"),
-        marginBottom: gridRowGap + "px"
+        margin: 0
       }
     }, _series.map(function (series, i) {
-      if (Math.floor(i / gridTemplateColumns) == indexs) {
+      if (Math.floor(i / columnsPerRow) == indexs) {
         var _series$config4;
         var type = series.type,
           name = series.name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.10.28",
+  "version": "1.10.29",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Legend.js

@@ -54,16 +54,34 @@ export default memo(
     const ref_container = useRef(null); // 滚动容器
     const ref_scrollTop = useRef(0); // 当前滚动距离
 
-    const [scrollStep, setScrollStep] = useState(0); // 行高度
+    const [scrollStep, setScrollStep] = useState(0); // 每次滚动距离
+    const [loopContainerHeight, setLoopContainerHeight] = useState(null); // 按父高度推算的 loop 视口高度
 
-    // 初始化行高
+    // 根据父级 height 计算可见项数，视口高度 = N*行高 + (N-1)*间距（最后一项下方不留空）
     useEffect(() => {
-      if (ref_container.current) {
-        const rowHeight =
-          ref_container.current.querySelector("li").clientHeight + gridRowGap;
-        setScrollStep(rowHeight);
+      if (!ref_container.current) return;
+      const li = ref_container.current.querySelector("li");
+      if (!li) return;
+      const itemHeight = li.offsetHeight;
+      const step = itemHeight + gridRowGap;
+      setScrollStep(step);
+      if (!loop.show || !height) {
+        setLoopContainerHeight(null);
+        return;
       }
-    }, [gridRowGap]);
+      const totalItems = series?.length ?? 0;
+      const visibleCount = Math.min(
+        totalItems,
+        Math.max(1, Math.floor((height + gridRowGap) / step)),
+      );
+      setLoopContainerHeight(
+        visibleCount * itemHeight + Math.max(0, visibleCount - 1) * gridRowGap,
+      );
+    }, [gridRowGap, loop.show, series, height]);
+
+    const loopHeight = loop.show
+      ? (loopContainerHeight ?? height ?? "auto")
+      : "auto";
 
     // 启动自动滚动定时器
     useEffect(() => {
@@ -249,6 +267,9 @@ export default memo(
       isCenterTopOrBottom &&
       fixedColumnsPerRow > 1;
 
+    const columnsPerRow = Math.max(1, Number(gridTemplateColumns) || 1);
+    const totalRows = Math.ceil(length / columnsPerRow);
+
     const formatterExtra = {
       ...config,
       valueMaxWidth,
@@ -330,25 +351,26 @@ export default memo(
       );
     };
 
+    const legendAlignContent =
+      alignment.split(" ")[0] == "center" &&
+      (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right")
+        ? alignment.split(" ")[1] == "left"
+          ? "flex-start"
+          : "flex-end"
+        : alignment.split(" ")[0] == "left"
+          ? "flex-start"
+          : alignment.split(" ")[0] == "center"
+            ? "center"
+            : "flex-end";
     const stylePieOrAxis = formatter
       ? {
           display: "flex",
-          alignContent:
-            alignment.split(" ")[0] == "center" &&
-            (alignment.split(" ")[1] == "left" ||
-              alignment.split(" ")[1] == "right")
-              ? alignment.split(" ")[1] == "left"
-                ? "flex-start"
-                : "flex-end"
-              : alignment.split(" ")[0] == "left"
-                ? "flex-start"
-                : alignment.split(" ")[0] == "center"
-                  ? "center"
-                  : "flex-end",
+          alignContent: loop.show ? "flex-start" : legendAlignContent,
           flexDirection: "column",
+          gap: loop.show ? `${gridRowGap}px` : undefined,
           position: "absolute",
           ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : "auto",
+          height: loopHeight,
           overflowY: loop.show ? "scroll" : "auto",
         }
       : {
@@ -357,7 +379,7 @@ export default memo(
           boxSizing: "border-box",
           position: "absolute",
           ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : "auto",
+          height: loopHeight,
           overflowY: loop.show ? "scroll" : "auto",
         };
     if (isPieAdaptive && isSideLegend) {
@@ -369,8 +391,9 @@ export default memo(
         width: "max-content",
         maxWidth: sideLegendMaxWidth || undefined,
         alignItems: "flex-start",
+        ...(loop.show ? { justifyContent: "flex-start" } : {}),
         ...getPosition(position, _alignment, x, y),
-        height: loop.show ? height : "auto",
+        height: loopHeight,
         overflowY: loop.show ? "scroll" : "auto",
       };
       const pieAdaptiveListStyle = {
@@ -404,7 +427,7 @@ export default memo(
         maxWidth: pieLegendFullWidth || "100%",
         boxSizing: "border-box",
         ...getPosition(position, _alignment, x, y),
-        height: loop.show ? height : "auto",
+        height: loopHeight,
         overflowY: loop.show ? "scroll" : "auto",
       };
       const topBottomListStyle = {
@@ -491,7 +514,7 @@ export default memo(
           position: "absolute",
           display: "flex",
           ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : "auto",
+          height: loopHeight,
           overflowY: loop.show ? "scroll" : "auto",
         }}
         ref={ref_container}
@@ -577,66 +600,60 @@ export default memo(
         ref={ref_container}
       >
         {formatter ? (
-          [...Array(Math.ceil(series.length / gridTemplateColumns))].map(
-            (_, indexs) => (
-              <ul
-                key={indexs}
-                style={{
-                  display: "flex",
-                  width: "fit-content",
-                  justifyContent: legendMainAlign,
-                  gap: `${gridRowGap}px  ${gridColumnGap}px`,
-                  marginBottom: gridRowGap + "px",
-                }}
-              >
-                {_series.map((series, i) => {
-                  if (Math.floor(i / gridTemplateColumns) == indexs) {
-                    const {
-                      type,
-                      name,
-                      displayName,
-                      fieldName,
-                      icon,
-                      selected,
-                      index,
-                    } = series;
-                    const _icon = getIcon(
-                      type,
-                      icon,
-                      series?.config?.line?.type,
-                    );
-                    return (
-                      <li
-                        key={i}
-                        onClick={onClick(fieldName)}
-                        data-name={displayName || name}
-                        data-index={index}
-                        style={{
-                          display: "flex",
-                          opacity: selected === false ? opacity / 100 : 1,
-                          alignItems: "center",
-                          cursor: "pointer",
-                          gap: _icon.gap,
-                          overflow: "visible",
-                        }}
-                      >
-                        {formatter(series, {
-                          ...config,
-                          valueMaxWidth,
-                          percentMaxWidth,
-                          nameMaxWidth,
-                          otherData: data,
-                          columnsSeries,
-                          fieldColumnKeys,
-                          fieldsColumnWidths,
-                        })}
-                      </li>
-                    );
-                  }
-                })}
-              </ul>
-            ),
-          )
+          [...Array(totalRows)].map((_, indexs) => (
+            <ul
+              key={indexs}
+              style={{
+                display: "flex",
+                width: "fit-content",
+                justifyContent: legendMainAlign,
+                gap: `${gridRowGap}px  ${gridColumnGap}px`,
+                margin: 0,
+              }}
+            >
+              {_series.map((series, i) => {
+                if (Math.floor(i / columnsPerRow) == indexs) {
+                  const {
+                    type,
+                    name,
+                    displayName,
+                    fieldName,
+                    icon,
+                    selected,
+                    index,
+                  } = series;
+                  const _icon = getIcon(type, icon, series?.config?.line?.type);
+                  return (
+                    <li
+                      key={i}
+                      onClick={onClick(fieldName)}
+                      data-name={displayName || name}
+                      data-index={index}
+                      style={{
+                        display: "flex",
+                        opacity: selected === false ? opacity / 100 : 1,
+                        alignItems: "center",
+                        cursor: "pointer",
+                        gap: _icon.gap,
+                        overflow: "visible",
+                      }}
+                    >
+                      {formatter(series, {
+                        ...config,
+                        valueMaxWidth,
+                        percentMaxWidth,
+                        nameMaxWidth,
+                        otherData: data,
+                        columnsSeries,
+                        fieldColumnKeys,
+                        fieldsColumnWidths,
+                      })}
+                    </li>
+                  );
+                }
+              })}
+            </ul>
+          ))
         ) : (
           <ul
             style={{