@easyv/charts 1.10.12 → 1.10.14

package/lib/components/Legend.js

@@ -117,6 +117,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
     _alignment = _alignment$split2[0],
     position = _alignment$split2[1];
+  var legendMainAlign = alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end";
   var length = _series.length;
   var onClick = (0, _react.useCallback)(function (fieldName) {
     return function (e) {
@@ -198,10 +199,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     overflowY: loop.show ? "scroll" : "auto"
   }) : _objectSpread(_objectSpread({
     width: "100%",
-    display: "flex",
-    flexWrap: "wrap",
-    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",
-    flexDirection: "column",
+    maxWidth: "100%",
+    boxSizing: "border-box",
     position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
     height: loop.show ? height : "auto",
@@ -270,16 +269,16 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     className: "__easyv-legend-wrapper",
     style: stylePieOrAxis,
     ref: ref_container
-  }, (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
+  }, formatter ? (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
     return /*#__PURE__*/_react["default"].createElement("ul", {
       key: indexs,
-      style: (0, _defineProperty2["default"])({
+      style: {
         display: "flex",
         width: "fit-content",
-        justifyContent: alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
-        marginBottom: "0px",
-        gap: "".concat(gridRowGap, "px  ").concat(gridColumnGap, "px")
-      }, "marginBottom", gridRowGap + "px")
+        justifyContent: legendMainAlign,
+        gap: "".concat(gridRowGap, "px  ").concat(gridColumnGap, "px"),
+        marginBottom: gridRowGap + "px"
+      }
     }, _series.map(function (series, i) {
       if (Math.floor(i / gridTemplateColumns) == indexs) {
         var _series$config2;
@@ -302,9 +301,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
             alignItems: "center",
             cursor: "pointer",
             gap: _icon.gap,
-            overflow: formatter ? "visible" : undefined
+            overflow: "visible"
           }
-        }, formatter ? formatter(series, _objectSpread(_objectSpread({}, config), {}, {
+        }, formatter(series, _objectSpread(_objectSpread({}, config), {}, {
           valueMaxWidth: valueMaxWidth,
           percentMaxWidth: percentMaxWidth,
           nameMaxWidth: nameMaxWidth,
@@ -312,22 +311,66 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           columnsSeries: columnsSeries,
           fieldColumnKeys: fieldColumnKeys,
           fieldsColumnWidths: fieldsColumnWidths
-        })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-          style: _icon
-        }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
-          ShowType: LegendType,
-          type: "ellipsis",
-          value: displayName || name,
-          style: _objectSpread(_objectSpread({}, font), {}, {
-            fontStyle: italic ? "italic" : "normal",
-            fontWeight: bold ? "bold" : "normal",
-            minWidth: getCanvasTextWidth(displayName ? displayName.substring(0, 5) || name.substring(0, 5) : "", font.letterSpacing, "".concat(font.fontSize, "px ").concat(font.fontFamily))
-          }),
-          speed: speed
         })));
       }
     }));
-  }));
+  }) : /*#__PURE__*/_react["default"].createElement("ul", {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      width: "100%",
+      maxWidth: "100%",
+      boxSizing: "border-box",
+      margin: 0,
+      padding: 0,
+      listStyle: "none",
+      justifyContent: legendMainAlign,
+      gap: "".concat(gridRowGap, "px ").concat(gridColumnGap, "px")
+    }
+  }, _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: "inline-flex",
+        alignItems: "center",
+        maxWidth: "100%",
+        minWidth: 0,
+        boxSizing: "border-box",
+        verticalAlign: "middle",
+        opacity: selected === false ? opacity / 100 : 1,
+        cursor: "pointer",
+        gap: _icon.gap
+      }
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      style: _objectSpread(_objectSpread({}, _icon), {}, {
+        flexShrink: 0
+      })
+    }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+      type: "ellipsis",
+      value: displayName || name,
+      style: _objectSpread(_objectSpread({}, font), {}, {
+        fontStyle: italic ? "italic" : "normal",
+        fontWeight: bold ? "bold" : "normal",
+        minWidth: 0,
+        flex: "1 1 0%",
+        maxWidth: "100%"
+      }),
+      speed: speed
+    }));
+  })));
 });
 var getPosition = function getPosition(position, alignment) {
   var x = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;

package/lib/components/PieChart.js

@@ -605,10 +605,21 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     },
     arcs: _arcs,
     judge: judgeData
-  }))), tooltip && mousePos && mousePos.x != 0 && mousePos.y != 0 && tooltip.manual && /*#__PURE__*/_react["default"].createElement("div", {
+  }))), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
+    height: chartHeight,
+    columnsSeries: columnsSeries,
+    data: data,
+    series: _arcs.map(function (arc) {
+      return _objectSpread(_objectSpread({}, arc), {}, {
+        percent: arc.percent.toFixed(legendPrecision)
+      });
+    }),
+    pieClick: onClick,
+    formatter: formatter,
+    judge: judgeData
+  })), tooltip && mousePos && mousePos.x != 0 && mousePos.y != 0 && tooltip.manual && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       position: "absolute",
-      zIndex: 9999,
       pointerEvents: "none"
     }
   }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
@@ -621,18 +632,6 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       y: maxRadius + marginTop
     },
     mousePos: mousePos
-  })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
-    height: chartHeight,
-    columnsSeries: columnsSeries,
-    data: data,
-    series: _arcs.map(function (arc) {
-      return _objectSpread(_objectSpread({}, arc), {}, {
-        percent: arc.percent.toFixed(legendPrecision)
-      });
-    }),
-    pieClick: onClick,
-    formatter: formatter,
-    judge: judgeData
   }))) : /*#__PURE__*/_react["default"].createElement("div", {
     ref: domRef
   }, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
@@ -776,10 +775,21 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     config: decorate,
     arcs: _arcs,
     radius: radius
-  }), tooltip && mousePos && mousePos.x != 0 && mousePos.y != 0 && tooltip.manual && /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
+    height: chartHeight,
+    data: data,
+    columnsSeries: columnsSeries,
+    series: _arcs.map(function (arc) {
+      return _objectSpread(_objectSpread({}, arc), {}, {
+        percent: arc.percent.toFixed(legendPrecision)
+      });
+    }),
+    pieClick: onClick,
+    formatter: formatter,
+    judge: judgeData
+  })), tooltip && mousePos && mousePos.x != 0 && mousePos.y != 0 && tooltip.manual && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       position: "absolute",
-      zIndex: 9999,
       pointerEvents: "none"
     }
   }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
@@ -792,18 +802,6 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       y: maxRadius + marginTop
     },
     mousePos: mousePos
-  })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
-    height: chartHeight,
-    data: data,
-    columnsSeries: columnsSeries,
-    series: _arcs.map(function (arc) {
-      return _objectSpread(_objectSpread({}, arc), {}, {
-        percent: arc.percent.toFixed(legendPrecision)
-      });
-    }),
-    pieClick: onClick,
-    formatter: formatter,
-    judge: judgeData
   })));
 });
 var Current = function Current(_ref9) {

package/lib/components/TextOverflow.js

@@ -24,8 +24,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     _props$speed = props.speed,
     speed = _props$speed === void 0 ? 5 : _props$speed,
     _props$config = props.config,
-    config = _props$config === void 0 ? {} : _props$config,
-    ShowType = props.ShowType;
+    config = _props$config === void 0 ? {} : _props$config;
   var _config$needTitle = config.needTitle,
     needTitle = _config$needTitle === void 0 ? true : _config$needTitle;
   var getTextOverflow = function getTextOverflow(type) {
@@ -62,9 +61,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     style: styles,
     ref: ref
   }) : /*#__PURE__*/_react["default"].createElement("div", {
-    style: _objectSpread(_objectSpread({}, styles), {}, {
-      whiteSpace: ShowType == "Adaptive" ? "normal" : styles.whiteSpace
-    }),
+    style: _objectSpread({}, styles),
     ref: ref,
     title: needTitle && type == "ellipsis" ? text || undefined : undefined,
     dangerouslySetInnerHTML: {

package/lib/components/Tooltip.js

@@ -99,8 +99,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }, (0, _utils.getFontStyle)(font)), {}, {
       width: "fit-content",
       maxWidth: "none",
-      overflow: "visible",
-      zIndex: 9999
+      overflow: "visible"
     })
   }, formatter ? formatter({
     series: series,

package/package.json

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

package/src/components/Legend.js

@@ -87,6 +87,12 @@ export default memo(
 
     const _series = sortPie(series, order, columnsSeries);
     const [_alignment, position] = alignment.split(" ");
+    const legendMainAlign =
+      alignment.split(" ")[0] == "left"
+        ? "flex-start"
+        : alignment.split(" ")[0] == "center"
+          ? "center"
+          : "flex-end";
     const length = _series.length;
 
     const onClick = useCallback(
@@ -221,21 +227,8 @@ export default memo(
         }
       : {
           width: "100%",
-          display: "flex",
-          flexWrap: "wrap",
-          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",
-          flexDirection: "column",
+          maxWidth: "100%",
+          boxSizing: "border-box",
           position: "absolute",
           ...getPosition(position, _alignment, x, y),
           height: loop.show ? height : "auto",
@@ -326,53 +319,47 @@ export default memo(
         style={stylePieOrAxis}
         ref={ref_container}
       >
-        {[...Array(Math.ceil(series.length / gridTemplateColumns))].map(
-          (_, indexs) => (
-            <ul
-              key={indexs}
-              style={{
-                display: "flex",
-                width: "fit-content",
-                justifyContent:
-                  alignment.split(" ")[0] == "left"
-                    ? "flex-start"
-                    : alignment.split(" ")[0] == "center"
-                      ? "center"
-                      : "flex-end",
-                marginBottom: "0px",
-                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: formatter ? "visible" : undefined,
-                      }}
-                    >
-                      {formatter ? (
-                        formatter(series, {
+        {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,
@@ -381,37 +368,77 @@ export default memo(
                           columnsSeries,
                           fieldColumnKeys,
                           fieldsColumnWidths,
-                        })
-                      ) : (
-                        <>
-                          <span style={_icon} />
-                          <TextOverflow
-                            ShowType={LegendType}
-                            type="ellipsis"
-                            value={displayName || name}
-                            style={{
-                              ...font,
-                              fontStyle: italic ? "italic" : "normal",
-                              fontWeight: bold ? "bold" : "normal",
-                              minWidth: getCanvasTextWidth(
-                                displayName
-                                  ? displayName.substring(0, 5) ||
-                                      name.substring(0, 5)
-                                  : "",
-                                font.letterSpacing,
-                                `${font.fontSize}px ${font.fontFamily}`,
-                              ),
-                            }}
-                            speed={speed}
-                          ></TextOverflow>
-                        </>
-                      )}
-                    </li>
-                  );
-                }
-              })}
-            </ul>
-          ),
+                        })}
+                      </li>
+                    );
+                  }
+                })}
+              </ul>
+            ),
+          )
+        ) : (
+          <ul
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              flexWrap: "wrap",
+              width: "100%",
+              maxWidth: "100%",
+              boxSizing: "border-box",
+              margin: 0,
+              padding: 0,
+              listStyle: "none",
+              justifyContent: legendMainAlign,
+              gap: `${gridRowGap}px ${gridColumnGap}px`,
+            }}
+          >
+            {_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: "inline-flex",
+                    alignItems: "center",
+                    maxWidth: "100%",
+                    minWidth: 0,
+                    boxSizing: "border-box",
+                    verticalAlign: "middle",
+                    opacity: selected === false ? opacity / 100 : 1,
+                    cursor: "pointer",
+                    gap: _icon.gap,
+                  }}
+                >
+                  <span style={{ ..._icon, flexShrink: 0 }} />
+                  <TextOverflow
+                    type="ellipsis"
+                    value={displayName || name}
+                    style={{
+                      ...font,
+                      fontStyle: italic ? "italic" : "normal",
+                      fontWeight: bold ? "bold" : "normal",
+                      minWidth: 0,
+                      flex: "1 1 0%",
+                      maxWidth: "100%",
+                    }}
+                    speed={speed}
+                  />
+                </li>
+              );
+            })}
+          </ul>
         )}
       </div>
     );

package/src/components/PieChart.js

@@ -622,6 +622,20 @@ const Component = memo(
             )}
           </g>
         </ChartContainer>
+
+        <Legend
+          {...legend}
+          height={chartHeight}
+          columnsSeries={columnsSeries}
+          data={data}
+          series={_arcs.map((arc) => ({
+            ...arc,
+            percent: arc.percent.toFixed(legendPrecision),
+          }))}
+          pieClick={onClick}
+          formatter={formatter}
+          judge={judgeData}
+        />
         {tooltip &&
           mousePos &&
           mousePos.x != 0 &&
@@ -630,7 +644,6 @@ const Component = memo(
             <div
               style={{
                 position: "absolute",
-                zIndex: 9999,
                 pointerEvents: "none",
               }}
             >
@@ -647,19 +660,6 @@ const Component = memo(
               />
             </div>
           )}
-        <Legend
-          {...legend}
-          height={chartHeight}
-          columnsSeries={columnsSeries}
-          data={data}
-          series={_arcs.map((arc) => ({
-            ...arc,
-            percent: arc.percent.toFixed(legendPrecision),
-          }))}
-          pieClick={onClick}
-          formatter={formatter}
-          judge={judgeData}
-        />
       </div>
     ) : (
       <div ref={domRef}>
@@ -893,6 +893,20 @@ const Component = memo(
             radius={radius}
           />
         )}
+
+        <Legend
+          {...legend}
+          height={chartHeight}
+          data={data}
+          columnsSeries={columnsSeries}
+          series={_arcs.map((arc) => ({
+            ...arc,
+            percent: arc.percent.toFixed(legendPrecision),
+          }))}
+          pieClick={onClick}
+          formatter={formatter}
+          judge={judgeData}
+        />
         {tooltip &&
           mousePos &&
           mousePos.x != 0 &&
@@ -901,7 +915,6 @@ const Component = memo(
             <div
               style={{
                 position: "absolute",
-                zIndex: 9999,
                 pointerEvents: "none",
               }}
             >
@@ -918,19 +931,6 @@ const Component = memo(
               />
             </div>
           )}
-        <Legend
-          {...legend}
-          height={chartHeight}
-          data={data}
-          columnsSeries={columnsSeries}
-          series={_arcs.map((arc) => ({
-            ...arc,
-            percent: arc.percent.toFixed(legendPrecision),
-          }))}
-          pieClick={onClick}
-          formatter={formatter}
-          judge={judgeData}
-        />
       </div>
     );
   },

package/src/components/TextOverflow.tsx

@@ -11,7 +11,8 @@ interface flowText {
   speed: number;
   style: CSSProperties;
   config?: any;
-  ShowType: string;
+  /** 历史兼容字段，图例等调用方可能传入，已不再影响省略号换行行为 */
+  ShowType?: string;
 }
 
 export default memo(
@@ -22,7 +23,6 @@ export default memo(
       style, // 样式
       speed = 5, // 动画速度
       config = {},
-      ShowType,
     } = props;
     const { needTitle = true } = config;
 
@@ -64,7 +64,6 @@ export default memo(
       <div
         style={{
           ...styles,
-          whiteSpace: ShowType == "Adaptive" ? "normal" : styles.whiteSpace,
         }}
         ref={ref}
         title={needTitle && type == "ellipsis" ? text || undefined : undefined}

package/src/components/Tooltip.js

@@ -114,7 +114,6 @@ export default memo(
           width: "fit-content",
           maxWidth: "none",
           overflow: "visible",
-          zIndex: 9999,
         }}
       >
         {formatter ? (