@easyv/charts 1.10.33 → 1.10.34

package/lib/components/Legend.js

@@ -46,6 +46,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _ref$config$layout$al = _ref$config$layout.alignment,
     alignment = _ref$config$layout$al === void 0 ? "right center" : _ref$config$layout$al,
     gridTemplateColumns = _ref$config$layout.gridTemplateColumns,
+    layoutType = _ref$config$layout.layoutType,
     _ref$config$layout$gr = _ref$config$layout.gridGap,
     gridColumnGap = _ref$config$layout$gr.gridColumnGap,
     gridRowGap = _ref$config$layout$gr.gridRowGap,
@@ -226,6 +227,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   var isPieAdaptive = isPieChart && layoutMode === "Adaptive";
   var isPieFixedWidthGrid = isPieChart && (layoutMode === "FixedWidth" || (layoutMode == null || layoutMode === "") && LegendType == "FixedWidth");
   var isFixedWidth = isPieChart ? isPieFixedWidthGrid : LegendType == "FixedWidth";
+  var isAxisFixedWidth = !isPieChart && (LegendType == "FixedWidth" || rootLayoutMode === "FixedWidth" || layoutType === "FixedWidth");
   var isSideLegend = isPieAdaptive && isSidePlacement;
   var isTopBottomAdaptive = isPieAdaptive && isCenterTopOrBottom;
   var fullWidth = (_ref4 = componentWidth !== null && componentWidth !== void 0 ? componentWidth : chartWidth) !== null && _ref4 !== void 0 ? _ref4 : 0;
@@ -429,6 +431,66 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       })));
     })));
   }
+  if (isAxisFixedWidth) {
+    var axisLegendTextWidth = normalizeCssSize(maxWidth);
+    var axisGridColumns = Math.min(Math.max(1, Number(gridTemplateColumns) || 1), length);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "__easyv-legend-wrapper",
+      style: _objectSpread(_objectSpread({
+        position: "absolute",
+        display: "flex"
+      }, getPosition(position, _alignment, x, y)), {}, {
+        height: loopHeight,
+        overflowY: loop.show ? "scroll" : "auto"
+      }),
+      ref: ref_container
+    }, /*#__PURE__*/_react["default"].createElement("ul", {
+      style: {
+        display: "grid",
+        gridGap: gridRowGap + "px " + gridColumnGap + "px",
+        gridTemplateColumns: "repeat(" + axisGridColumns + ", 1fr)"
+      }
+    }, _series.map(function (series, i) {
+      var _series$config3;
+      var type = series.type,
+        name = series.name,
+        displayName = series.displayName,
+        fieldName = series.fieldName,
+        icon = series.icon,
+        selected = series.selected,
+        index = series.index;
+      var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config3 = series.config) === null || _series$config3 === void 0 || (_series$config3 = _series$config3.line) === null || _series$config3 === void 0 ? void 0 : _series$config3.type);
+      return /*#__PURE__*/_react["default"].createElement("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
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: _objectSpread(_objectSpread({}, _icon), {}, {
+          flexShrink: 0
+        })
+      }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+        type: textOverflow,
+        value: displayName || name,
+        style: _objectSpread(_objectSpread({}, font), {}, {
+          width: axisLegendTextWidth,
+          minWidth: axisLegendTextWidth,
+          flexShrink: 0,
+          boxSizing: "border-box",
+          fontStyle: italic ? "italic" : "normal",
+          fontWeight: bold ? "bold" : "normal"
+        }),
+        speed: speed
+      }));
+    })));
+  }
   return isFixedWidth ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
     style: _objectSpread(_objectSpread({
@@ -448,7 +510,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       gridTemplateColumns: isPieTopBottomFixedMultiCol ? "repeat(".concat(fixedColumnsPerRow, ", max-content)") : "repeat(".concat(fixedColumnsPerRow, ", minmax(0, 1fr))")
     }
   }, _series.map(function (series, i) {
-    var _series$config3;
+    var _series$config4;
     var type = series.type,
       name = series.name,
       displayName = series.displayName,
@@ -456,7 +518,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       icon = series.icon,
       selected = series.selected,
       index = series.index;
-    var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config3 = series.config) === null || _series$config3 === void 0 || (_series$config3 = _series$config3.line) === null || _series$config3 === void 0 ? void 0 : _series$config3.type);
+    var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config4 = series.config) === null || _series$config4 === void 0 || (_series$config4 = _series$config4.line) === null || _series$config4 === void 0 ? void 0 : _series$config4.type);
     return /*#__PURE__*/_react["default"].createElement("li", {
       key: i,
       onClick: onClick(fieldName),
@@ -506,7 +568,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       }
     }, _series.map(function (series, i) {
       if (Math.floor(i / columnsPerRow) == indexs) {
-        var _series$config4;
+        var _series$config5;
         var type = series.type,
           name = series.name,
           displayName = series.displayName,
@@ -514,7 +576,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           icon = series.icon,
           selected = series.selected,
           index = series.index;
-        var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config4 = series.config) === null || _series$config4 === void 0 || (_series$config4 = _series$config4.line) === null || _series$config4 === void 0 ? void 0 : _series$config4.type);
+        var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config5 = series.config) === null || _series$config5 === void 0 || (_series$config5 = _series$config5.line) === null || _series$config5 === void 0 ? void 0 : _series$config5.type);
         return /*#__PURE__*/_react["default"].createElement("li", {
           key: i,
           onClick: onClick(fieldName),
@@ -554,7 +616,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       gap: "".concat(gridRowGap, "px ").concat(gridColumnGap, "px")
     }
   }, _series.map(function (series, i) {
-    var _series$config5;
+    var _series$config6;
     var type = series.type,
       name = series.name,
       displayName = series.displayName,
@@ -562,7 +624,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       icon = series.icon,
       selected = series.selected,
       index = series.index;
-    var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config5 = series.config) === null || _series$config5 === void 0 || (_series$config5 = _series$config5.line) === null || _series$config5 === void 0 ? void 0 : _series$config5.type);
+    var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config6 = series.config) === null || _series$config6 === void 0 || (_series$config6 = _series$config6.line) === null || _series$config6 === void 0 ? void 0 : _series$config6.type);
     return /*#__PURE__*/_react["default"].createElement("li", {
       key: i,
       onClick: onClick(fieldName),
@@ -597,6 +659,17 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }));
   })));
 });
+var normalizeCssSize = function normalizeCssSize(value) {
+  if (value == null || value === "") return value;
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return "".concat(value, "px");
+  }
+  var str = String(value).trim();
+  if (/^-?\d+(\.\d+)?$/.test(str)) {
+    return "".concat(str, "px");
+  }
+  return str;
+};
 var getPosition = function getPosition(position, alignment) {
   var x = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var y = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;

package/lib/components/PieChart.js

@@ -27,8 +27,8 @@ var _excluded = ["startAngle", "endAngle", "antiClockwise"],
   _excluded2 = ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"],
   _excluded3 = ["formatter"],
   _excluded4 = ["startAngle", "endAngle"];
-/**
- * 饼环图
+/**
+ * 饼环图
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && {}.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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.10.33",
+  "version": "1.10.34",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -55,4 +55,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/Legend.js

@@ -29,6 +29,7 @@ export default memo(
       layout: {
         alignment = "right center",
         gridTemplateColumns,
+        layoutType,
         gridGap: { gridColumnGap, gridRowGap },
         translate: { x, y },
       },
@@ -247,6 +248,11 @@ export default memo(
     const isFixedWidth = isPieChart
       ? isPieFixedWidthGrid
       : LegendType == "FixedWidth";
+    const isAxisFixedWidth =
+      !isPieChart &&
+      (LegendType == "FixedWidth" ||
+        rootLayoutMode === "FixedWidth" ||
+        layoutType === "FixedWidth");
     const isSideLegend = isPieAdaptive && isSidePlacement;
     const isTopBottomAdaptive = isPieAdaptive && isCenterTopOrBottom;
     const fullWidth = componentWidth ?? chartWidth ?? 0;
@@ -507,6 +513,79 @@ export default memo(
       );
     }
 
+    if (isAxisFixedWidth) {
+      const axisLegendTextWidth = normalizeCssSize(maxWidth);
+      const axisGridColumns = Math.min(
+        Math.max(1, Number(gridTemplateColumns) || 1),
+        length,
+      );
+      return (
+        <div
+          className="__easyv-legend-wrapper"
+          style={{
+            position: "absolute",
+            display: "flex",
+            ...getPosition(position, _alignment, x, y),
+            height: loopHeight,
+            overflowY: loop.show ? "scroll" : "auto",
+          }}
+          ref={ref_container}
+        >
+          <ul
+            style={{
+              display: "grid",
+              gridGap: gridRowGap + "px " + gridColumnGap + "px",
+              gridTemplateColumns: "repeat(" + axisGridColumns + ", 1fr)",
+            }}
+          >
+            {_series.map((series, i) => {
+              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,
+                  }}
+                >
+                  <span style={{ ..._icon, flexShrink: 0 }} />
+                  <TextOverflow
+                    type={textOverflow}
+                    value={displayName || name}
+                    style={{
+                      ...font,
+                      width: axisLegendTextWidth,
+                      minWidth: axisLegendTextWidth,
+                      flexShrink: 0,
+                      boxSizing: "border-box",
+                      fontStyle: italic ? "italic" : "normal",
+                      fontWeight: bold ? "bold" : "normal",
+                    }}
+                    speed={speed}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      );
+    }
+
     return isFixedWidth ? (
       <div
         className="__easyv-legend-wrapper"
@@ -723,6 +802,18 @@ export default memo(
   },
 );
 
+const normalizeCssSize = (value) => {
+  if (value == null || value === "") return value;
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  const str = String(value).trim();
+  if (/^-?\d+(\.\d+)?$/.test(str)) {
+    return `${str}px`;
+  }
+  return str;
+};
+
 const getPosition = (position, alignment, x = 0, y = 0) => {
   switch (position) {
     case "top":