@easyv/charts 1.10.32 → 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/lib/components/Tooltip.js

@@ -51,66 +51,6 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     height = _ref.height,
     auto = _ref.auto,
     manual = _ref.manual;
-  var getBigScreenScale = function getBigScreenScale() {
-    // 优先使用全局提供的方法
-    if (typeof window.getScreenScale === "function") {
-      try {
-        var _result = window.getScreenScale();
-        if (Array.isArray(_result) && _result.length >= 6) {
-          return _result;
-        }
-      } catch (e) {
-        console.error("调用全局 getScreenScale 出错:", e);
-      }
-    }
-
-    // 获取容器元素
-    var bigscreenDom = document.getElementById("bigscreen-container");
-
-    // 元素不存在时的处理
-    if (!bigscreenDom) {
-      return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
-    }
-
-    // 确保元素可见（未被隐藏）
-    var isVisible = window.getComputedStyle(bigscreenDom).display !== "none" && window.getComputedStyle(bigscreenDom).visibility !== "hidden";
-    if (!isVisible) {
-      return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
-    }
-
-    // 获取元素的布局矩形（最可靠的尺寸获取方式）
-    var rect = bigscreenDom.getBoundingClientRect();
-
-    // 提取基础尺寸（从布局矩形获取，不受样式影响）
-    var screenWidth = rect.width || window.innerWidth;
-    var screenHeight = rect.height || window.innerHeight;
-    var screenLeft = rect.left || 0;
-    var screenTop = rect.top || 0;
-
-    // 处理缩放
-    var scaleX = 1;
-    var scaleY = 1;
-    try {
-      var computedStyle = window.getComputedStyle(bigscreenDom);
-      var transform = computedStyle.transform;
-      if (transform && transform !== "none") {
-        // 解析 transform matrix
-        var matrix = new DOMMatrix(transform);
-        scaleX = matrix.a; // 缩放X因子
-        scaleY = matrix.d; // 缩放Y因子
-      }
-    } catch (e) {
-      console.error("解析缩放样式出错:", e);
-    }
-
-    // 最终返回值（确保不会有undefined）
-    var result = [isNaN(scaleX) ? 1 : scaleX, isNaN(scaleY) ? 1 : scaleY, isNaN(screenWidth) ? window.innerWidth : screenWidth, isNaN(screenHeight) ? window.innerHeight : screenHeight, isNaN(screenLeft) ? 0 : screenLeft, isNaN(screenTop) ? 0 : screenTop];
-    return result;
-  };
-  var _getBigScreenScale = getBigScreenScale(),
-    _getBigScreenScale2 = (0, _slicedToArray2["default"])(_getBigScreenScale, 2),
-    scaleX = _getBigScreenScale2[0],
-    scaleY = _getBigScreenScale2[1];
   var tooltipRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)({
       width: 0,
@@ -121,32 +61,29 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     setTooltipSize = _useState2[1];
   var tipPosition = (0, _react.useMemo)(function () {
     var translate3d = isVertical ? _objectSpread(_objectSpread({}, translateTip), {}, {
-      y: translateTip.y / scaleY + position + marginTop / scaleY
+      y: translateTip.y + position + marginTop
     }) : _objectSpread(_objectSpread({}, translateTip), {}, {
-      x: translateTip.x / scaleX + position + marginLeft / scaleX
+      x: translateTip.x + position + marginLeft
     });
-    if (!isVertical && translate3d.x + tooltipSize.width / scaleX > width / scaleX) {
-      var newPositon = position + marginLeft / scaleX - tooltipSize.width / scaleX - translateTip.x / scaleX;
-      translate3d.x = newPositon >= 0 ? newPositon : 0;
-      console.log("translate3d", translate3d);
-      console.log("scale", scaleX, scaleY);
-      console.log("width", width, height);
-      console.log("position", position, marginLeft, marginTop);
-      console.log("tooltipSize", tooltipSize);
-      console.log("translateTip", translateTip);
+    if (!isVertical && translate3d.x + tooltipSize.width > width) {
+      translate3d.x = position + marginLeft - tooltipSize.width - translateTip.x;
+      translate3d.x = translate3d.x >= 0 ? translate3d.x : 0;
+      translate3d.x = translate3d.x + tooltipSize.width > width ? width - tooltipSize.width : translate3d.x;
+      translate3d.x = translate3d.x >= 0 ? translate3d.x : 0;
     }
-    if (isVertical && translate3d.y + tooltipSize.height / scaleY > height / scaleY) {
-      var _newPositon = position + marginTop / scaleY - tooltipSize.height / scaleY - translateTip.y / scaleY;
-      translate3d.y = _newPositon <= 0 ? _newPositon : height / scaleY - tooltipSize.height / scaleY;
+    if (isVertical && translate3d.y + tooltipSize.height > height) {
+      translate3d.y = position + marginTop - tooltipSize.height - translateTip.y;
+      translate3d.y = translate3d.y >= 0 ? translate3d.y : 0;
+      translate3d.y = translate3d.y + tooltipSize.height > height ? height - tooltipSize.height : translate3d.y;
+      translate3d.y = translate3d.y >= 0 ? translate3d.y : 0;
     }
     return (0, _utils.getTranslate3d)(translate3d);
-  }, [width, height, marginLeft, marginTop, position, tooltipSize, translateTip]);
+  }, [isVertical, width, height, marginLeft, marginTop, position, tooltipSize, translateTip]);
   (0, _react.useEffect)(function () {
     if (tooltipRef.current && (manual || auto)) {
-      var rect = tooltipRef.current.getBoundingClientRect();
       setTooltipSize({
-        width: rect.width,
-        height: rect.height
+        width: tooltipRef.current.offsetWidth,
+        height: tooltipRef.current.offsetHeight
       });
     }
   }, [manual, auto, formatter, data, series, x]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.10.32",
+  "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":