@easyv/charts 1.10.16 → 1.10.17

package/lib/components/Legend.js

@@ -54,9 +54,12 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     y = _ref$config$layout$tr.y,
     _ref$config$loop = _ref$config.loop,
     loop = _ref$config$loop === void 0 ? {} : _ref$config$loop,
+    rootLayoutMode = _ref$config.layoutMode,
     _ref$config$name = _ref$config.name,
     _ref$config$name2 = _ref$config$name === void 0 ? {} : _ref$config$name,
-    layoutMode = _ref$config$name2.layoutMode,
+    nameLayoutMode = _ref$config$name2.layoutMode,
+    _ref$config$iconGap = _ref$config.iconGap,
+    iconGap = _ref$config$iconGap === void 0 ? 5 : _ref$config$iconGap,
     _ref$config$font = _ref$config.font,
     _ref$config$font2 = _ref$config$font === void 0 ? defaultFont : _ref$config$font,
     italic = _ref$config$font2.italic,
@@ -202,6 +205,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     });
     return Math.max(maxMeasured, maxCfg);
   });
+
+  // legendOfRose：layoutMode 在 config 根级；legendOfPie：在 config.name.layoutMode
+  var layoutMode = nameLayoutMode !== null && nameLayoutMode !== void 0 ? nameLayoutMode : rootLayoutMode;
   var isPieAdaptive = isPieChart && layoutMode === "Adaptive";
   var isPieFixedWidthGrid = isPieChart && (layoutMode === "FixedWidth" || (layoutMode == null || layoutMode === "") && LegendType == "FixedWidth");
   var isFixedWidth = isPieChart ? isPieFixedWidthGrid : LegendType == "FixedWidth";
@@ -210,7 +216,6 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   var fullWidth = (_ref3 = componentWidth !== null && componentWidth !== void 0 ? componentWidth : chartWidth) !== null && _ref3 !== void 0 ? _ref3 : 0;
   var legendAreaWidth = Math.max(0, fullWidth - marginLeft - marginRight);
   var sideLegendMaxWidth = isSideLegend ? Math.max(0, position === "left" || _alignment === "left" ? marginLeft : marginRight) : 0;
-  var isSideLegendOnRight = isSideLegend && (position === "right" || _alignment === "right" && position !== "left");
   var fixedColumnsPerRow = Math.min(Math.max(1, Number(gridTemplateColumns) || 1), length);
   var isPieTopBottomFixedMultiCol = isPieChart && isFixedWidth && isCenterTopOrBottom && fixedColumnsPerRow > 1;
   var formatterExtra = _objectSpread(_objectSpread(_objectSpread({}, config), {}, {
@@ -238,26 +243,30 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       selected = series.selected,
       index = series.index;
     var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config = series.config) === null || _series$config === void 0 || (_series$config = _series$config.line) === null || _series$config === void 0 ? void 0 : _series$config.type);
+    var sideIconWidth = parseFloat(_icon.width) || parseFloat(_icon.minWidth) || parseFloat(icon === null || icon === void 0 ? void 0 : icon.width) || 0;
+    var sideItemGap = Number(iconGap) || parseFloat(_icon.marginRight) || 0;
+    var sideTextMaxWidth = sideLegendMaxWidth > 0 ? Math.max(0, sideLegendMaxWidth - sideIconWidth - sideItemGap) : undefined;
     return /*#__PURE__*/_react["default"].createElement("li", {
       key: i,
       onClick: onClick(fieldName),
       "data-name": displayName || name,
       "data-index": index,
       style: {
-        display: "flex",
+        display: "inline-flex",
         width: "max-content",
-        maxWidth: sideLegendMaxWidth || undefined,
+        maxWidth: "100%",
         opacity: selected === false ? opacity / 100 : 1,
         alignItems: "center",
         cursor: "pointer",
-        gap: _icon.gap,
+        gap: sideItemGap,
         minWidth: 0,
         overflow: "hidden",
         boxSizing: "border-box"
       }
     }, formatter ? formatter(series, formatterExtra) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, _icon), {}, {
-        flexShrink: 0
+        flexShrink: 0,
+        marginRight: 0
       })
     }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
       type: "ellipsis",
@@ -265,9 +274,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       style: _objectSpread(_objectSpread({}, font), {}, {
         fontStyle: italic ? "italic" : "normal",
         fontWeight: bold ? "bold" : "normal",
+        width: "auto",
+        maxWidth: sideTextMaxWidth,
         minWidth: 0,
-        flex: "1 1 0%",
-        maxWidth: "100%"
+        flex: "0 1 auto"
       }),
       speed: speed
     })));
@@ -290,13 +300,14 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     overflowY: loop.show ? "scroll" : "auto"
   });
   if (isPieAdaptive && isSideLegend) {
+    // 左右侧图例：水平方向始终左对齐，图标落在同一条纵线上（与九宫格水平分量无关）
     var pieAdaptiveWrapperStyle = _objectSpread(_objectSpread({
       position: "absolute",
       display: "flex",
       flexDirection: "column",
       width: "max-content",
       maxWidth: sideLegendMaxWidth || undefined,
-      alignItems: isSideLegendOnRight ? "flex-end" : "flex-start"
+      alignItems: "flex-start"
     }, getPosition(position, _alignment, x, y)), {}, {
       height: loop.show ? height : "auto",
       overflowY: loop.show ? "scroll" : "auto"
@@ -306,7 +317,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       flexDirection: "column",
       width: "max-content",
       maxWidth: "100%",
-      alignItems: isSideLegendOnRight ? "flex-end" : "flex-start",
+      alignItems: "flex-start",
       margin: 0,
       padding: 0,
       listStyle: "none",

package/package.json

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

package/src/components/Legend.js

@@ -33,7 +33,9 @@ export default memo(
         translate: { x, y },
       },
       loop = {},
-      name: { layoutMode } = {},
+      layoutMode: rootLayoutMode,
+      name: { layoutMode: nameLayoutMode } = {},
+      iconGap = 5,
       font: { italic, bold, ...font } = defaultFont,
       unselect: { opacity = 1 } = {},
     },
@@ -216,6 +218,8 @@ export default memo(
       return Math.max(maxMeasured, maxCfg);
     });
 
+    // legendOfRose：layoutMode 在 config 根级；legendOfPie：在 config.name.layoutMode
+    const layoutMode = nameLayoutMode ?? rootLayoutMode;
     const isPieAdaptive = isPieChart && layoutMode === "Adaptive";
     const isPieFixedWidthGrid =
       isPieChart &&
@@ -237,10 +241,6 @@ export default memo(
             : marginRight,
         )
       : 0;
-    const isSideLegendOnRight =
-      isSideLegend &&
-      (position === "right" ||
-        (_alignment === "right" && position !== "left"));
     const fixedColumnsPerRow = Math.min(
       Math.max(1, Number(gridTemplateColumns) || 1),
       length,
@@ -269,16 +269,20 @@ export default memo(
     };
 
     const renderPieSideItem = (series, i) => {
-      const {
-        type,
-        name,
-        displayName,
-        fieldName,
-        icon,
-        selected,
-        index,
-      } = series;
+      const { type, name, displayName, fieldName, icon, selected, index } =
+        series;
       const _icon = getIcon(type, icon, series?.config?.line?.type);
+      const sideIconWidth =
+        parseFloat(_icon.width) ||
+        parseFloat(_icon.minWidth) ||
+        parseFloat(icon?.width) ||
+        0;
+      const sideItemGap =
+        Number(iconGap) || parseFloat(_icon.marginRight) || 0;
+      const sideTextMaxWidth =
+        sideLegendMaxWidth > 0
+          ? Math.max(0, sideLegendMaxWidth - sideIconWidth - sideItemGap)
+          : undefined;
       return (
         <li
           key={i}
@@ -286,13 +290,13 @@ export default memo(
           data-name={displayName || name}
           data-index={index}
           style={{
-            display: "flex",
+            display: "inline-flex",
             width: "max-content",
-            maxWidth: sideLegendMaxWidth || undefined,
+            maxWidth: "100%",
             opacity: selected === false ? opacity / 100 : 1,
             alignItems: "center",
             cursor: "pointer",
-            gap: _icon.gap,
+            gap: sideItemGap,
             minWidth: 0,
             overflow: "hidden",
             boxSizing: "border-box",
@@ -302,7 +306,13 @@ export default memo(
             formatter(series, formatterExtra)
           ) : (
             <>
-              <span style={{ ..._icon, flexShrink: 0 }} />
+              <span
+                style={{
+                  ..._icon,
+                  flexShrink: 0,
+                  marginRight: 0,
+                }}
+              />
               <TextOverflow
                 type="ellipsis"
                 value={displayName || name}
@@ -310,9 +320,10 @@ export default memo(
                   ...font,
                   fontStyle: italic ? "italic" : "normal",
                   fontWeight: bold ? "bold" : "normal",
+                  width: "auto",
+                  maxWidth: sideTextMaxWidth,
                   minWidth: 0,
-                  flex: "1 1 0%",
-                  maxWidth: "100%",
+                  flex: "0 1 auto",
                 }}
                 speed={speed}
               />
@@ -353,13 +364,14 @@ export default memo(
           overflowY: loop.show ? "scroll" : "auto",
         };
     if (isPieAdaptive && isSideLegend) {
+      // 左右侧图例：水平方向始终左对齐，图标落在同一条纵线上（与九宫格水平分量无关）
       const pieAdaptiveWrapperStyle = {
         position: "absolute",
         display: "flex",
         flexDirection: "column",
         width: "max-content",
         maxWidth: sideLegendMaxWidth || undefined,
-        alignItems: isSideLegendOnRight ? "flex-end" : "flex-start",
+        alignItems: "flex-start",
         ...getPosition(position, _alignment, x, y),
         height: loop.show ? height : "auto",
         overflowY: loop.show ? "scroll" : "auto",
@@ -369,7 +381,7 @@ export default memo(
         flexDirection: "column",
         width: "max-content",
         maxWidth: "100%",
-        alignItems: isSideLegendOnRight ? "flex-end" : "flex-start",
+        alignItems: "flex-start",
         margin: 0,
         padding: 0,
         listStyle: "none",
@@ -591,7 +603,11 @@ export default memo(
                       selected,
                       index,
                     } = series;
-                    const _icon = getIcon(type, icon, series?.config?.line?.type);
+                    const _icon = getIcon(
+                      type,
+                      icon,
+                      series?.config?.line?.type,
+                    );
                     return (
                       <li
                         key={i}