@easyv/charts 1.8.23 → 1.8.24

package/lib/components/Legend.js

@@ -22,8 +22,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 defaultFont = {
-  fontStyle: 'normal',
-  fontWeight: 'normal'
+  fontStyle: "normal",
+  fontWeight: "normal"
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _config$value, _config$percent, _config$value2, _config$value3, _config$name;
@@ -33,7 +33,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _ref$config = _ref.config,
     show = _ref$config.show,
     _ref$config$order = _ref$config.order,
-    order = _ref$config$order === void 0 ? '' : _ref$config$order,
+    order = _ref$config$order === void 0 ? "" : _ref$config$order,
     interactive = _ref$config.interactive,
     LegendType = _ref$config.LegendType,
     maxWidth = _ref$config.maxWidth,
@@ -41,7 +41,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     speed = _ref$config.speed,
     _ref$config$layout = _ref$config.layout,
     _ref$config$layout$al = _ref$config$layout.alignment,
-    alignment = _ref$config$layout$al === void 0 ? 'right center' : _ref$config$layout$al,
+    alignment = _ref$config$layout$al === void 0 ? "right center" : _ref$config$layout$al,
     gridTemplateColumns = _ref$config$layout.gridTemplateColumns,
     _ref$config$layout$gr = _ref$config$layout.gridGap,
     gridColumnGap = _ref$config$layout$gr.gridColumnGap,
@@ -62,7 +62,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     opacity = _ref$config$unselect3 === void 0 ? 1 : _ref$config$unselect3,
     filterData = _ref.filterData,
     formatter = _ref.formatter,
-    judge = _ref.judge;
+    judge = _ref.judge,
+    pieClick = _ref.pieClick;
   if (!show) return null;
   var ref_container = (0, _react.useRef)(null); // 滚动容器
   var ref_scrollTop = (0, _react.useRef)(0); // 当前滚动距离
@@ -75,7 +76,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   // 初始化行高
   (0, _react.useEffect)(function () {
     if (ref_container.current) {
-      var rowHeight = ref_container.current.querySelector('li').clientHeight + gridRowGap;
+      var rowHeight = ref_container.current.querySelector("li").clientHeight + gridRowGap;
       setScrollStep(rowHeight);
     }
   }, [gridRowGap]);
@@ -106,11 +107,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }
     table.scrollTo({
       top: ref_scrollTop.current,
-      behavior: 'smooth'
+      behavior: "smooth"
     });
   };
   var _series = (0, _utils.sortPie)(series, order);
-  var _alignment$split = alignment.split(' '),
+  var _alignment$split = alignment.split(" "),
     _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
     _alignment = _alignment$split2[0],
     position = _alignment$split2[1];
@@ -119,7 +120,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     var dataset = e.currentTarget.dataset;
     var name = dataset.name;
     filterData && interactive && filterData(name);
-  }, [interactive, filterData]);
+    pieClick && pieClick(e);
+  }, [interactive, filterData, pieClick]);
   if (judge == 0) {
     _series.forEach(function (d) {
       d.percent = 0;
@@ -129,75 +131,77 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   // 计算最大宽度
   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 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 || '');
+    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')));
+    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 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;
   var stylePieOrAxis = formatter ? _objectSpread(_objectSpread({
-    display: 'flex',
+    display: "flex",
     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",
-    position: 'absolute'
+    position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
-    height: loop.show ? height : 'auto',
-    overflowY: loop.show ? 'scroll' : 'auto'
+    height: loop.show ? height : "auto",
+    overflowY: loop.show ? "scroll" : "auto"
   }) : _objectSpread(_objectSpread({
-    display: 'flex',
+    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",
-    position: 'absolute'
+    position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
-    height: loop.show ? height : 'auto',
-    overflowY: loop.show ? 'scroll' : 'auto'
+    height: loop.show ? height : "auto",
+    overflowY: loop.show ? "scroll" : "auto"
   });
   return LegendType == "FixedWidth" ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
     style: _objectSpread(_objectSpread({
-      position: 'absolute',
-      display: 'flex'
+      position: "absolute",
+      display: "flex"
     }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : 'auto',
-      overflowY: loop.show ? 'scroll' : 'auto'
+      height: loop.show ? height : "auto",
+      overflowY: loop.show ? "scroll" : "auto"
     }),
     ref: ref_container
   }, /*#__PURE__*/_react["default"].createElement("ul", {
     style: {
-      display: 'grid',
-      gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
-      gridTemplateColumns: formatter ? "".concat(nameMaxWidth, "px ").concat(valueMaxWidth, "px ").concat(percentMaxWidth, "px") : 'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)' //饼图或者柱状图配合不同的图例显示格式
+      display: "grid",
+      gridGap: gridRowGap + "px " + gridColumnGap + "px",
+      gridTemplateColumns: formatter ? "".concat(nameMaxWidth, "px ").concat(valueMaxWidth, "px ").concat(percentMaxWidth, "px") : "repeat(" + Math.min(gridTemplateColumns, length) + ", 1fr)" //饼图或者柱状图配合不同的图例显示格式
     }
-  }, _series.map(function (series, index) {
+  }, _series.map(function (series, i) {
     var _series$config;
     var type = series.type,
       name = series.name,
       displayName = series.displayName,
       icon = series.icon,
-      selected = series.selected;
+      selected = series.selected,
+      index = series.index;
     var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config = series.config) === null || _series$config === void 0 || (_series$config = _series$config.line) === null || _series$config === void 0 ? void 0 : _series$config.type);
     return /*#__PURE__*/_react["default"].createElement("li", {
-      key: index,
+      key: i,
       onClick: onClick,
-      "data-name": name,
+      "data-name": displayName || name,
+      "data-index": index,
       style: {
-        display: 'flex',
+        display: "flex",
         opacity: selected === false ? opacity / 100 : 1,
-        alignItems: 'center',
+        alignItems: "center",
         cursor: "pointer",
         gap: _icon.gap
       }
@@ -212,8 +216,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       value: displayName || name,
       style: _objectSpread(_objectSpread({}, font), {}, {
         width: maxWidth,
-        fontStyle: italic ? 'italic' : 'normal',
-        fontWeight: bold ? 'bold' : 'normal'
+        fontStyle: italic ? "italic" : "normal",
+        fontWeight: bold ? "bold" : "normal"
       }),
       speed: speed
     })));
@@ -225,29 +229,31 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     return /*#__PURE__*/_react["default"].createElement("ul", {
       key: indexs,
       style: (0, _defineProperty2["default"])({
-        display: 'flex',
-        width: 'fit-content',
+        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")
-    }, _series.map(function (series, index) {
-      if (Math.floor(index / gridTemplateColumns) == indexs) {
+    }, _series.map(function (series, i) {
+      if (Math.floor(i / gridTemplateColumns) == indexs) {
         var _series$config2;
         var type = series.type,
           name = series.name,
           displayName = series.displayName,
           icon = series.icon,
-          selected = series.selected;
+          selected = series.selected,
+          index = series.index;
         var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config2 = series.config) === null || _series$config2 === void 0 || (_series$config2 = _series$config2.line) === null || _series$config2 === void 0 ? void 0 : _series$config2.type);
         return /*#__PURE__*/_react["default"].createElement("li", {
-          key: index,
+          key: i,
           onClick: onClick,
-          "data-name": name,
+          "data-name": displayName || name,
+          "data-index": index,
           style: {
-            display: 'flex',
+            display: "flex",
             opacity: selected === false ? opacity / 100 : 1,
-            alignItems: 'center',
+            alignItems: "center",
             cursor: "pointer",
             gap: _icon.gap
           }
@@ -262,8 +268,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           type: "ellipsis",
           value: displayName || name,
           style: _objectSpread(_objectSpread({}, font), {}, {
-            fontStyle: italic ? 'italic' : 'normal',
-            fontWeight: bold ? 'bold' : 'normal',
+            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
@@ -276,39 +282,39 @@ 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;
   switch (position) {
-    case 'top':
+    case "top":
       return {
-        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
-        right: alignment == 'right' ? 10 : '',
+        left: alignment == "left" ? 5 : alignment == "center" ? "50%" : "",
+        right: alignment == "right" ? 10 : "",
         top: 5,
-        transform: "translate3d(calc(".concat(alignment == 'center' ? '-50%' : '0px', " + ").concat(x, "px), ").concat(y, "px, 0px)")
+        transform: "translate3d(calc(".concat(alignment == "center" ? "-50%" : "0px", " + ").concat(x, "px), ").concat(y, "px, 0px)")
       };
-    case 'right':
+    case "right":
       return {
-        top: '50%',
+        top: "50%",
         right: 10,
         transform: "translate3d(".concat(x, "px, calc(-50% + ").concat(y, "px), 0px)")
       };
-    case 'left':
+    case "left":
       return {
-        top: '50%',
+        top: "50%",
         left: 5,
         transform: "translate3d(".concat(x, "px, calc(-50% + ").concat(y, "px), 0px)")
       };
     default:
       // bottom
       return {
-        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
-        right: alignment == 'right' ? 10 : '',
+        left: alignment == "left" ? 5 : alignment == "center" ? "50%" : "",
+        right: alignment == "right" ? 10 : "",
         bottom: 5,
-        transform: "translate3d(calc(".concat(alignment == 'center' ? '-50%' : '0px', " + ").concat(x, "px), ").concat(y, "px, 0px)")
+        transform: "translate3d(calc(".concat(alignment == "center" ? "-50%" : "0px", " + ").concat(x, "px), ").concat(y, "px, 0px)")
       };
   }
 };
 var getCanvasTextWidth = function getCanvasTextWidth(text, letterSpacing) {
-  var font = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '16px Arial';
-  var canvas = document.createElement('canvas');
-  var ctx = canvas.getContext('2d');
+  var font = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "16px Arial";
+  var canvas = document.createElement("canvas");
+  var ctx = canvas.getContext("2d");
   ctx.font = font;
   return ctx.measureText(text).width + text.length * letterSpacing + "px";
   // return ctx.measureText(text).width+(text.length-1)*letterSpacing+"px";//-1有bug

package/lib/components/PieChart.js

@@ -627,6 +627,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
         percent: arc.percent.toFixed(legendPrecision)
       });
     }),
+    pieClick: onClick,
     formatter: formatter,
     judge: judgeData
   }))) : /*#__PURE__*/_react["default"].createElement("div", {
@@ -795,6 +796,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
         percent: arc.percent.toFixed(legendPrecision)
       });
     }),
+    pieClick: onClick,
     formatter: formatter,
     judge: judgeData
   })));

package/lib/components/pieTooltip.js

@@ -69,21 +69,21 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     var _icon = (0, _utils.getIcon)(type, icon);
     return /*#__PURE__*/_react["default"].createElement("dd", {
       style: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        lineHeight: lineHeight + 'px'
+        display: "flex",
+        justifyContent: "space-between",
+        lineHeight: lineHeight + "px"
       }
     }, /*#__PURE__*/_react["default"].createElement("span", {
       style: {
         // border: '1px solid red',
-        display: 'flex',
-        alignItems: 'center',
+        display: "flex",
+        alignItems: "center",
         gap: icon.iconGap
       }
     }, /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, _icon), {}, {
-        width: iconSize + 'px',
-        height: iconSize + 'px'
+        width: iconSize + "px",
+        height: iconSize + "px"
       })
     }), /*#__PURE__*/_react["default"].createElement("span", {
       style: (0, _utils.getFontStyle)(name)
@@ -95,30 +95,28 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
   };
   var getBigScreenScale = function getBigScreenScale() {
     // 优先使用全局提供的方法
-    if (typeof window.getScreenScale === 'function') {
+    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);
+        console.error("调用全局 getScreenScale 出错:", e);
       }
     }
 
     // 获取容器元素
-    var bigscreenDom = document.getElementById('bigscreen-container');
+    var bigscreenDom = document.getElementById("bigscreen-container");
 
     // 元素不存在时的处理
     if (!bigscreenDom) {
-      console.warn('未找到 bigscreen-container 元素，使用视口尺寸');
       return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
     }
 
     // 确保元素可见（未被隐藏）
-    var isVisible = window.getComputedStyle(bigscreenDom).display !== 'none' && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
+    var isVisible = window.getComputedStyle(bigscreenDom).display !== "none" && window.getComputedStyle(bigscreenDom).visibility !== "hidden";
     if (!isVisible) {
-      console.warn('bigscreen-container 元素不可见，使用视口尺寸');
       return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
     }
 
@@ -137,14 +135,14 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     try {
       var computedStyle = window.getComputedStyle(bigscreenDom);
       var transform = computedStyle.transform;
-      if (transform && transform !== 'none') {
+      if (transform && transform !== "none") {
         // 解析 transform matrix
         var matrix = new DOMMatrix(transform);
         scaleX = matrix.a; // 缩放X因子
         scaleY = matrix.d; // 缩放Y因子
       }
     } catch (e) {
-      console.error('解析缩放样式出错:', e);
+      console.error("解析缩放样式出错:", e);
     }
 
     // 最终返回值（确保不会有undefined）
@@ -185,19 +183,19 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-tooltip",
     style: {
-      pointerEvents: 'none',
+      pointerEvents: "none",
       transform: getTipPos(mousePos, pieCenter),
       width: tipWidth,
       height: tipHeight,
       padding: (0, _utils.getMargin)(margin),
-      background: image ? '50% 50% / 100% 100% no-repeat url(' + window.appConfig.ASSETS_URL + image + ')' : 'rgba(48, 55, 66, 0.85)'
+      background: image ? "50% 50% / 100% 100% no-repeat url(" + window.appConfig.ASSETS_URL + image + ")" : "rgba(48, 55, 66, 0.85)"
     }
   }, /*#__PURE__*/_react["default"].createElement("dl", {
     style: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-      height: '100%'
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      height: "100%"
     }
   }, Item()));
 });

package/package.json

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