@easyv/charts 1.7.36 → 1.7.38

package/lib/components/Legend.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -26,6 +26,7 @@ var defaultFont = {
   fontWeight: 'normal'
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var _config$value, _config$percent, _config$value2, _config$value3, _config$name;
   var series = _ref.series,
     height = _ref.height,
     config = _ref.config,
@@ -124,6 +125,29 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       d.percent = 0;
     });
   }
+
+  // 计算最大宽度
+  var valueFont = ((_config$value = config.value) === null || _config$value === void 0 ? void 0 : _config$value.font) || {};
+  var percentFont = ((_config$percent = config.percent) === null || _config$percent === void 0 ? void 0 : _config$percent.font) || {};
+  var valueSuffix = ((_config$value2 = config.value) === null || _config$value2 === void 0 || (_config$value2 = _config$value2.suffix) === null || _config$value2 === void 0 ? void 0 : _config$value2.text) || '';
+  var valueSplitConfig = ((_config$value3 = config.value) === null || _config$value3 === void 0 ? void 0 : _config$value3.splitConfig) || {};
+  var getValueStr = function getValueStr(item) {
+    var _ref2, _item$data$y, _item$data;
+    var valueStr = ((_ref2 = (_item$data$y = (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.y) !== null && _item$data$y !== void 0 ? _item$data$y : item.value) !== null && _ref2 !== void 0 ? _ref2 : '') + (valueSuffix || '');
+    if (valueSplitConfig.show && valueSplitConfig.separator) {
+      valueStr = valueStr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, valueSplitConfig.separator);
+    }
+    return valueStr;
+  };
+  var valueMaxWidth = Math.max.apply(Math, (0, _toConsumableArray2["default"])(_series.map(function (item) {
+    return parseFloat(getCanvasTextWidth(getValueStr(item), valueFont.letterSpacing || 0, "".concat(valueFont.fontSize || 12, "px ").concat(valueFont.fontFamily || 'Arial')));
+  })));
+  var percentMaxWidth = Math.max.apply(Math, (0, _toConsumableArray2["default"])(_series.map(function (item) {
+    var _item$data2;
+    var percentStr = (item.percent !== undefined ? item.percent : (_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2.percent) + '%';
+    return parseFloat(getCanvasTextWidth(percentStr, percentFont.letterSpacing || 0, "".concat(percentFont.fontSize || 12, "px ").concat(percentFont.fontFamily || 'Arial')));
+  })));
+  var nameMaxWidth = ((_config$name = config.name) === null || _config$name === void 0 ? void 0 : _config$name.maxWidth) || 80;
   return LegendType == "FixedWidth" ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
     style: _objectSpread(_objectSpread({
@@ -131,15 +155,14 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       display: 'flex'
     }, getPosition(position, _alignment, x, y)), {}, {
       height: loop.show ? height : 'auto',
-      overflowY: loop.show ? 'scroll' : 'auto',
-      pointerEvents: "none" //鼠标穿透
+      overflowY: loop.show ? 'scroll' : 'auto'
     }),
     ref: ref_container
   }, /*#__PURE__*/_react["default"].createElement("ul", {
     style: {
       display: 'grid',
       gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
-      gridTemplateColumns: 'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)'
+      gridTemplateColumns: "".concat(nameMaxWidth, "px ").concat(valueMaxWidth, "px ").concat(percentMaxWidth, "px")
     }
   }, _series.map(function (series, index) {
     var _series$config;
@@ -160,7 +183,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         cursor: "pointer",
         gap: _icon.gap
       }
-    }, formatter ? formatter(series, config) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    }, formatter ? formatter(series, _objectSpread(_objectSpread({}, config), {}, {
+      valueMaxWidth: valueMaxWidth,
+      percentMaxWidth: percentMaxWidth,
+      nameMaxWidth: nameMaxWidth
+    })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
       style: _icon
     }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
       type: textOverflow,
@@ -182,9 +209,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       position: 'absolute'
     }, getPosition(position, _alignment, x, y)), {}, {
       height: loop.show ? height : 'auto',
-      overflowY: loop.show ? 'scroll' : 'auto',
-      width: "100%",
-      pointerEvents: "none"
+      overflowY: loop.show ? 'scroll' : 'auto'
     }),
     ref: ref_container
   }, (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
@@ -217,7 +242,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
             cursor: "pointer",
             gap: _icon.gap
           }
-        }, formatter ? formatter(series, config) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+        }, formatter ? formatter(series, _objectSpread(_objectSpread({}, config), {}, {
+          valueMaxWidth: valueMaxWidth,
+          percentMaxWidth: percentMaxWidth,
+          nameMaxWidth: nameMaxWidth
+        })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
           style: _icon
         }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
           ShowType: LegendType,
@@ -226,7 +255,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           style: _objectSpread(_objectSpread({}, font), {}, {
             fontStyle: italic ? 'italic' : 'normal',
             fontWeight: bold ? 'bold' : 'normal',
-            minWidth: getCanvasTextWidth(displayName.substring(0, 5) || name.substring(0, 5), font.letterSpacing, "".concat(font.fontSize, "px ").concat(font.fontFamily))
+            minWidth: getCanvasTextWidth(displayName ? displayName.substring(0, 5) || name.substring(0, 5) : "", font.letterSpacing, "".concat(font.fontSize, "px ").concat(font.fontFamily))
           }),
           speed: speed
         })));

package/lib/css/index.module.css

@@ -27,17 +27,14 @@
 .showAllStyle {
   display: grid;
   width: 100%;
-  grid-template-columns: 40% 30% 30%;
+  grid-template-columns: 100px 80px 60px;
   align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
+  column-gap: 12px;
 }
 
 .notShowAllStyle {
-  display: flex;
+  display: grid;
   width: 100%;
-  /* flex:1; */
   align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
+  column-gap: 12px;
 }

package/lib/formatter/legend.js

@@ -11,54 +11,60 @@ var _utils = require("../utils");
 var _components = require("../components");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
-  var displayName = _ref.displayName,
-    data = _ref.data,
-    percent = _ref.percent,
-    _ref$series = _ref.series,
-    seriesColor = _ref$series.color,
-    _ref$series$icon = _ref$series.icon,
-    icon = _ref$series$icon === void 0 ? "" : _ref$series$icon;
-  var _ref2$name = _ref2.name,
-    showName = _ref2$name.show,
-    nameFont = _ref2$name.font,
-    textOverflow = _ref2$name.textOverflow,
-    speed = _ref2$name.speed,
-    maxWidth = _ref2$name.maxWidth,
-    _ref2$name$translate = _ref2$name.translate,
-    nameX = _ref2$name$translate.x,
-    nameY = _ref2$name$translate.y,
-    _ref2$value = _ref2.value,
-    showValue = _ref2$value.show,
-    valueFont = _ref2$value.font,
-    valueSameColor = _ref2$value.sameColor,
-    valueGap = _ref2$value.gap,
-    valueAlign = _ref2$value.align,
-    _ref2$value$translate = _ref2$value.translate,
-    valueX = _ref2$value$translate.x,
-    valueY = _ref2$value$translate.y,
-    splitConfig = _ref2$value.splitConfig,
-    _ref2$value$suffix = _ref2$value.suffix,
-    showSuffix = _ref2$value$suffix.show,
-    text = _ref2$value$suffix.text,
-    fontSize = _ref2$value$suffix.fontSize,
-    _ref2$value$suffix$tr = _ref2$value$suffix.translate,
-    x = _ref2$value$suffix$tr.x,
-    y = _ref2$value$suffix$tr.y,
-    _ref2$percent = _ref2.percent,
-    showPercent = _ref2$percent.show,
-    percentFont = _ref2$percent.font,
-    percentSameColor = _ref2$percent.sameColor,
-    percentGap = _ref2$percent.gap,
-    percentAlign = _ref2$percent.align,
-    _ref2$percent$transla = _ref2$percent.translate,
-    percentX = _ref2$percent$transla.x,
-    percentY = _ref2$percent$transla.y;
+var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatter(series, props) {
+  var displayName = series.displayName,
+    data = series.data,
+    percent = series.percent,
+    _series$series = series.series,
+    seriesColor = _series$series.color,
+    _series$series$icon = _series$series.icon,
+    icon = _series$series$icon === void 0 ? "" : _series$series$icon,
+    _props$name = props.name,
+    showName = _props$name.show,
+    nameFont = _props$name.font,
+    textOverflow = _props$name.textOverflow,
+    speed = _props$name.speed,
+    maxWidth = _props$name.maxWidth,
+    _props$name$translate = _props$name.translate,
+    nameX = _props$name$translate.x,
+    nameY = _props$name$translate.y,
+    _props$value = props.value,
+    showValue = _props$value.show,
+    valueFont = _props$value.font,
+    valueSameColor = _props$value.sameColor,
+    valueGap = _props$value.gap,
+    valueAlign = _props$value.align,
+    _props$value$translat = _props$value.translate,
+    valueX = _props$value$translat.x,
+    valueY = _props$value$translat.y,
+    splitConfig = _props$value.splitConfig,
+    _props$value$suffix = _props$value.suffix,
+    showSuffix = _props$value$suffix.show,
+    text = _props$value$suffix.text,
+    fontSize = _props$value$suffix.fontSize,
+    _props$value$suffix$t = _props$value$suffix.translate,
+    x = _props$value$suffix$t.x,
+    y = _props$value$suffix$t.y,
+    _props$percent = props.percent,
+    showPercent = _props$percent.show,
+    percentFont = _props$percent.font,
+    percentSameColor = _props$percent.sameColor,
+    percentGap = _props$percent.gap,
+    percentAlign = _props$percent.align,
+    _props$percent$transl = _props$percent.translate,
+    percentX = _props$percent$transl.x,
+    percentY = _props$percent$transl.y;
   var seriesColorType = seriesColor.type,
     pure = seriesColor.pure,
     stops = seriesColor.linear.stops;
   var _color = seriesColorType == 'pure' ? pure : stops[0].color;
   var textMarginLeft = 5;
+
+  // 1. 计算每列宽度（加上间距）
+  var columns = [];
+  if (showName) columns.push("".concat(props.nameMaxWidth, "px"));
+  if (showValue) columns.push("".concat(props.valueMaxWidth + valueGap, "px"));
+  if (showPercent) columns.push("".concat(props.percentMaxWidth + percentGap, "px"));
   return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, icon), {}, {
       marginRight: icon.marginRight,
@@ -67,7 +73,8 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
   }), /*#__PURE__*/React.createElement("div", {
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle,
     style: {
-      width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )")
+      width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )"),
+      gridTemplateColumns: columns.join(' ')
     }
   }, showName && /*#__PURE__*/React.createElement(_components.TextOverflow, {
     value: displayName,
@@ -85,11 +92,10 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     }, (0, _utils.getFontStyle)(valueFont)), {}, {
       marginLeft: valueGap,
       transform: "translate(".concat(valueX, "px,").concat(valueY, "px)"),
-      display: 'flex',
-      flex: 1,
       color: valueSameColor ? _color : valueFont.color,
       alignItems: 'center',
-      justifyContent: valueAlign == "left" ? "flex-start" : valueAlign == "right" ? "flex-end" : 'center'
+      justifyContent: valueAlign == "left" ? "flex-start" : valueAlign == "right" ? "flex-end" : 'center',
+      textAlign: valueAlign === "left" ? "left" : valueAlign === "right" ? "right" : "center"
     })
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_components.SplitText, {
     value: data.y,
@@ -106,11 +112,10 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     }, (0, _utils.getFontStyle)(percentFont)), {}, {
       marginLeft: percentGap,
       transform: "translate(".concat(percentX, "px,").concat(percentY, "px)"),
-      display: "flex",
-      flex: 1,
+      color: percentSameColor ? _color : percentFont.color,
       alignItems: 'center',
       justifyContent: percentAlign == "left" ? "flex-start" : percentAlign == "right" ? "flex-end" : 'center',
-      color: percentSameColor ? _color : percentFont.color
+      textAlign: percentAlign === "left" ? "left" : percentAlign === "right" ? "right" : "center"
     })
   }, percent + '%')));
 };

package/package.json

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

package/src/components/Legend.js

@@ -100,6 +100,29 @@ export default memo(
       })
     }
 
+    // 计算最大宽度
+    const valueFont = config.value?.font || {};
+    const percentFont = config.percent?.font || {};
+    const valueSuffix = config.value?.suffix?.text || '';
+    const valueSplitConfig = config.value?.splitConfig || {};
+    const getValueStr = (item) => {
+      let valueStr = (item.data?.y ?? item.value ?? '') + (valueSuffix || '');
+      if (valueSplitConfig.show && valueSplitConfig.separator) {
+        valueStr = valueStr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, valueSplitConfig.separator);
+      }
+      return valueStr;
+    };
+    const valueMaxWidth = Math.max(
+      ..._series.map(item => parseFloat(getCanvasTextWidth(getValueStr(item), valueFont.letterSpacing || 0, `${valueFont.fontSize || 12}px ${valueFont.fontFamily || 'Arial'}`)))
+    );
+    const percentMaxWidth = Math.max(
+      ..._series.map(item => {
+        const percentStr = (item.percent !== undefined ? item.percent : item.data?.percent) + '%';
+        return parseFloat(getCanvasTextWidth(percentStr, percentFont.letterSpacing || 0, `${percentFont.fontSize || 12}px ${percentFont.fontFamily || 'Arial'}`));
+      })
+    );
+    const nameMaxWidth = config.name?.maxWidth || 80;
+
     return (
       LegendType=="FixedWidth"?
       <div
@@ -109,8 +132,7 @@ export default memo(
           display: 'flex',
           ...getPosition(position, _alignment, x, y),
           height: loop.show ? height : 'auto',
-          overflowY: loop.show ? 'scroll' : 'auto',
-          pointerEvents:"none"//鼠标穿透
+          overflowY: loop.show ? 'scroll' : 'auto'
         }}
         ref={ref_container}
       >
@@ -118,8 +140,7 @@ export default memo(
           style={{
             display: 'grid',
             gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
-            gridTemplateColumns:
-              'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)',
+            gridTemplateColumns: `${nameMaxWidth}px ${valueMaxWidth}px ${percentMaxWidth}px`,
           }}
         >
           {_series.map((series, index) => {
@@ -139,7 +160,7 @@ export default memo(
                 }}
               >
                 {formatter ? (
-                  formatter(series, config)
+                  formatter(series, { ...config, valueMaxWidth, percentMaxWidth, nameMaxWidth })
                 ) : (
                   <>
                     <span style={_icon} />
@@ -166,9 +187,7 @@ export default memo(
           position: 'absolute',
           ...getPosition(position, _alignment, x, y),
           height: loop.show ? height : 'auto',
-          overflowY: loop.show ? 'scroll' : 'auto',
-          width:"100%",
-          pointerEvents:"none"
+          overflowY: loop.show ? 'scroll' : 'auto'
         }}
         ref={ref_container}
       >
@@ -203,7 +222,7 @@ export default memo(
               }}
             >
               {formatter ? (
-                formatter(series, config)
+                formatter(series, { ...config, valueMaxWidth, percentMaxWidth, nameMaxWidth })
               ) : (
                 <>
                   <span style={_icon} />
@@ -211,7 +230,7 @@ export default memo(
                       ...font,
                       fontStyle: italic ? 'italic' : 'normal',
                       fontWeight: bold ? 'bold' : 'normal',
-                      minWidth:getCanvasTextWidth(displayName.substring(0,5) || name.substring(0,5),font.letterSpacing,`${font.fontSize}px ${font.fontFamily}` )
+                      minWidth:getCanvasTextWidth(displayName?(displayName.substring(0,5) || name.substring(0,5)):"",font.letterSpacing,`${font.fontSize}px ${font.fontFamily}` )
                     }} speed={speed}></TextOverflow>
                   
                 </>

package/src/css/index.module.css

@@ -27,17 +27,14 @@
 .showAllStyle {
   display: grid;
   width: 100%;
-  grid-template-columns: 40% 30% 30%;
+  grid-template-columns: 100px 80px 60px;
   align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
+  column-gap: 12px;
 }
 
 .notShowAllStyle {
-  display: flex;
+  display: grid;
   width: 100%;
-  /* flex:1; */
   align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
+  column-gap: 12px;
 }

package/src/formatter/legend.js

@@ -3,7 +3,10 @@ import { getFontStyle } from '../utils';
 import { TextOverflow, SplitText } from '../components';
 
 export const pieLegendFormatter = (
-  { displayName, data, percent, series: { color: seriesColor, icon="" } },
+  series,
+  props
+) => {
+  const { displayName, data, percent, series: { color: seriesColor, icon="" } } = series,
   {
     name: { show: showName, font: nameFont, textOverflow, speed, maxWidth, translate: { x:nameX, y:nameY } },
     value: {
@@ -35,8 +38,7 @@ export const pieLegendFormatter = (
         y:percentY
       }
     },
-  }
-) => {
+  } = props;
   const {
     type: seriesColorType,
     pure,
@@ -46,6 +48,12 @@ export const pieLegendFormatter = (
   const _color = seriesColorType == 'pure' ? pure : stops[0].color;
   const textMarginLeft = 5;
 
+  // 1. 计算每列宽度（加上间距）
+  const columns = [];
+  if (showName) columns.push(`${props.nameMaxWidth}px`);
+  if (showValue) columns.push(`${props.valueMaxWidth + valueGap}px`);
+  if (showPercent) columns.push(`${props.percentMaxWidth + percentGap}px`);
+
   return (
     <>
       {icon &&<span style={{ ...icon, marginRight: icon.marginRight, transform:`translate(${nameX}px, ${nameY}px)` }} />}
@@ -56,7 +64,8 @@ export const pieLegendFormatter = (
             : css.notShowAllStyle
         }
         style={{
-          width:`calc( 100% + ${textMarginLeft+valueGap+percentGap}px )`
+          width:`calc( 100% + ${textMarginLeft+valueGap+percentGap}px )`,
+          gridTemplateColumns: columns.join(' ')
         }}
       >
         {showName && (
@@ -71,11 +80,10 @@ export const pieLegendFormatter = (
               ...getFontStyle(valueFont),
               marginLeft: valueGap,
               transform:`translate(${valueX}px,${valueY}px)`,
-              display: 'flex',
-              flex:1,
               color: valueSameColor ? _color : valueFont.color,
               alignItems: 'center',
               justifyContent: valueAlign=="left"?"flex-start":valueAlign=="right"?"flex-end":'center',
+              textAlign: valueAlign === "left" ? "left" : valueAlign === "right" ? "right" : "center",
             }}
           >
             <span><SplitText value={data.y} config={splitConfig} /></span>
@@ -99,11 +107,10 @@ export const pieLegendFormatter = (
               ...getFontStyle(percentFont),
               marginLeft: percentGap,
               transform:`translate(${percentX}px,${percentY}px)`,
-              display:"flex",
-              flex:1,
+              color: percentSameColor ? _color : percentFont.color,
               alignItems: 'center',
               justifyContent: percentAlign=="left"?"flex-start":percentAlign=="right"?"flex-end":'center',
-              color: percentSameColor ? _color : percentFont.color,
+              textAlign: percentAlign === "left" ? "left" : percentAlign === "right" ? "right" : "center",
             }}
           >
             {percent + '%'}