@easyv/charts 1.10.33 → 1.10.35

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;