@easyv/charts 1.10.9 → 1.10.10

package/lib/components/Legend.js

@@ -29,7 +29,9 @@ 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,
+    data = _ref.data,
     config = _ref.config,
+    columnsSeries = _ref.columnsSeries,
     _ref$config = _ref.config,
     show = _ref$config.show,
     _ref$config$order = _ref$config.order,
@@ -110,7 +112,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       behavior: "smooth"
     });
   };
-  var _series = (0, _utils.sortPie)(series, order);
+  var _series = (0, _utils.sortPie)(series, order, columnsSeries);
   var _alignment$split = alignment.split(" "),
     _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
     _alignment = _alignment$split2[0],
@@ -152,6 +154,40 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     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 fieldColumnKeys = [];
+  if (columnsSeries !== null && columnsSeries !== void 0 && columnsSeries.columns) {
+    Object.values(columnsSeries.columns).forEach(function (col) {
+      if (col.field && !fieldColumnKeys.includes(col.field)) {
+        fieldColumnKeys.push(col.field);
+      }
+    });
+  }
+  var fieldsColumnWidths = fieldColumnKeys.map(function (fieldName) {
+    var maxMeasured = 0;
+    var maxCfg = 0;
+    _series.forEach(function (s) {
+      var _s$fields, _s$data$fieldName, _cfg$translate, _suf$translate;
+      var cfg = (_s$fields = s.fields) === null || _s$fields === void 0 ? void 0 : _s$fields[fieldName];
+      if (!cfg || !s.data || !Object.prototype.hasOwnProperty.call(s.data, fieldName)) {
+        return;
+      }
+      var f = cfg.font || {};
+      var fontStack = "".concat(f.fontSize || 12, "px ").concat(f.fontFamily || "Arial");
+      var letter = f.letterSpacing || 0;
+      var w = parseFloat(getCanvasTextWidth(String((_s$data$fieldName = s.data[fieldName]) !== null && _s$data$fieldName !== void 0 ? _s$data$fieldName : ""), letter, fontStack));
+      var suf = cfg.suffix;
+      if (suf !== null && suf !== void 0 && suf.show && suf.text != null && String(suf.text) !== "") {
+        var sufFont = "".concat(suf.fontSize || f.fontSize || 12, "px ").concat(f.fontFamily || "Arial");
+        w += parseFloat(getCanvasTextWidth(String(suf.text), letter, sufFont));
+      }
+      var tx = Number((_cfg$translate = cfg.translate) === null || _cfg$translate === void 0 ? void 0 : _cfg$translate.x) || 0;
+      var stx = suf !== null && suf !== void 0 && suf.show && suf.text != null && String(suf.text) !== "" ? Number((_suf$translate = suf.translate) === null || _suf$translate === void 0 ? void 0 : _suf$translate.x) || 0 : 0;
+      w += Math.max(0, tx) + Math.max(0, stx);
+      maxMeasured = Math.max(maxMeasured, w);
+      maxCfg = Math.max(maxCfg, Number(cfg.maxWidth) || 0);
+    });
+    return Math.max(maxMeasured, maxCfg);
+  });
   var stylePieOrAxis = formatter ? _objectSpread(_objectSpread({
     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",
@@ -207,12 +243,17 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         opacity: selected === false ? opacity / 100 : 1,
         alignItems: "center",
         cursor: "pointer",
-        gap: _icon.gap
+        gap: _icon.gap,
+        overflow: formatter ? "visible" : undefined
       }
     }, formatter ? formatter(series, _objectSpread(_objectSpread({}, config), {}, {
       valueMaxWidth: valueMaxWidth,
       percentMaxWidth: percentMaxWidth,
-      nameMaxWidth: nameMaxWidth
+      nameMaxWidth: nameMaxWidth,
+      otherData: data,
+      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"], {
@@ -260,12 +301,17 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
             opacity: selected === false ? opacity / 100 : 1,
             alignItems: "center",
             cursor: "pointer",
-            gap: _icon.gap
+            gap: _icon.gap,
+            overflow: formatter ? "visible" : undefined
           }
         }, formatter ? formatter(series, _objectSpread(_objectSpread({}, config), {}, {
           valueMaxWidth: valueMaxWidth,
           percentMaxWidth: percentMaxWidth,
-          nameMaxWidth: nameMaxWidth
+          nameMaxWidth: nameMaxWidth,
+          otherData: data,
+          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"], {

package/lib/components/PieChart.js

@@ -271,6 +271,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     outerDecorate = _ref5$config$fan2.outerDecorate,
     current = _ref5$config$fan2.current,
     order = _ref5$config.order,
+    columnsSeries = _ref5$config.columnsSeries,
     series = _ref5$config.series,
     _ref5$config$animatio = _ref5$config.animation,
     on = _ref5$config$animatio.on,
@@ -622,6 +623,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     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)
@@ -791,6 +794,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     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)

package/lib/formatter/legend.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pieLegendFormatter = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _indexModule = _interopRequireDefault(require("../css/index.module.css"));
 var _utils = require("../utils");
@@ -12,6 +13,7 @@ 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(series, props) {
+  var _props$fieldColumnKey, _props$fieldsColumnWi, _series$fieldsData;
   var displayName = series.displayName,
     data = series.data,
     percent = series.percent,
@@ -54,6 +56,48 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     _props$percent$transl = _props$percent.translate,
     percentX = _props$percent$transl.x,
     percentY = _props$percent$transl.y;
+  var fieldColumnKeys = (_props$fieldColumnKey = props.fieldColumnKeys) !== null && _props$fieldColumnKey !== void 0 ? _props$fieldColumnKey : [];
+  var fieldsColumnWidths = (_props$fieldsColumnWi = props.fieldsColumnWidths) !== null && _props$fieldsColumnWi !== void 0 ? _props$fieldsColumnWi : [];
+  //获取文本所占宽度
+  function getStringWidth(text) {
+    var fontStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "14px sans-serif";
+    var canvas = document.createElement("canvas");
+    var ctx = canvas.getContext("2d");
+    ctx.font = fontStyle;
+    return ctx.measureText(text).width;
+  }
+  var alignToJustify = function alignToJustify(align) {
+    return align == "left" ? "flex-start" : align == "right" ? "flex-end" : "center";
+  };
+  var alignToTextAlign = function alignToTextAlign(align) {
+    return align === "left" ? "left" : align === "right" ? "right" : "center";
+  };
+  if (fieldColumnKeys.length > 0) {
+    //处理除name、value、percent外的列
+    series.fieldsData = fieldColumnKeys.map(function (key, fieldsColumnIndex) {
+      var _series$fields, _series$data;
+      if (!((_series$fields = series.fields) !== null && _series$fields !== void 0 && _series$fields[key]) || !((_series$data = series.data) !== null && _series$data !== void 0 && _series$data.hasOwnProperty(key))) {
+        return null;
+      }
+      return _objectSpread(_objectSpread({}, series.fields[key]), {}, {
+        value: series.data[key],
+        fieldsColumnIndex: fieldsColumnIndex
+      });
+    }).filter(Boolean);
+  } else {
+    series.fieldsData = Object.entries(series.fields || {}).reduce(function (arr, _ref) {
+      var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        key = _ref2[0],
+        config = _ref2[1];
+      if (series.data.hasOwnProperty(key)) {
+        arr.push(_objectSpread(_objectSpread({}, config), {}, {
+          value: series.data[key],
+          fieldsColumnIndex: arr.length
+        }));
+      }
+      return arr;
+    }, []);
+  }
   var seriesColorType = seriesColor.type,
     pure = seriesColor.pure,
     stops = seriesColor.linear.stops;
@@ -65,6 +109,27 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
   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"));
+  if (series.fieldsData.length > 0) {
+    //网格布局新增的各列宽度
+    series.fieldsData.forEach(function (item) {
+      var _item$fieldsColumnInd, _suf$fontSize, _item$font, _item$translate, _suf$translate;
+      var idx = (_item$fieldsColumnInd = item.fieldsColumnIndex) !== null && _item$fieldsColumnInd !== void 0 ? _item$fieldsColumnInd : 0;
+      var measured = getStringWidth(item.value, "".concat(item.font.fontSize, "px ").concat(item.font.fontFamily));
+      var suf = item.suffix;
+      var suffixWidth = suf !== null && suf !== void 0 && suf.show && (suf === null || suf === void 0 ? void 0 : suf.text) != null && String(suf.text) !== "" ? getStringWidth(String(suf.text), "".concat((_suf$fontSize = suf.fontSize) !== null && _suf$fontSize !== void 0 ? _suf$fontSize : (_item$font = item.font) === null || _item$font === void 0 ? void 0 : _item$font.fontSize, "px ").concat(item.font.fontFamily)) : 0;
+      var tx = Math.max(0, Number((_item$translate = item.translate) === null || _item$translate === void 0 ? void 0 : _item$translate.x) || 0);
+      var stx = suf !== null && suf !== void 0 && suf.show && (suf === null || suf === void 0 ? void 0 : suf.text) != null && String(suf.text) !== "" ? Math.max(0, Number((_suf$translate = suf.translate) === null || _suf$translate === void 0 ? void 0 : _suf$translate.x) || 0) : 0;
+      var flowW = measured + suffixWidth + tx + stx;
+      var colW;
+      if (fieldsColumnWidths.length > idx && fieldsColumnWidths[idx] > 0) {
+        colW = Math.max(Number(fieldsColumnWidths[idx]) || 0, Number(item.maxWidth) || 0, flowW);
+      } else {
+        var fromConfig = Number(item.maxWidth) || 0;
+        colW = Math.max(flowW, fromConfig);
+      }
+      columns.push("".concat(colW, "px"));
+    });
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, icon), {}, {
       marginRight: icon.marginRight,
@@ -74,7 +139,8 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle,
     style: {
       width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )"),
-      gridTemplateColumns: columns.join(" ")
+      gridTemplateColumns: columns.join(" "),
+      overflowX: "visible"
     }
   }, showName && /*#__PURE__*/React.createElement(_components.TextOverflow, {
     value: displayName,
@@ -95,8 +161,8 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
       transform: "translate(".concat(valueX, "px,").concat(valueY, "px)"),
       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"
+      justifyContent: alignToJustify(valueAlign !== null && valueAlign !== void 0 ? valueAlign : "center"),
+      textAlign: alignToTextAlign(valueAlign)
     })
   }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_components.SplitText, {
     value: data.y,
@@ -109,14 +175,53 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     }
   }, text)), showPercent && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({
+      display: "flex",
       whiteSpace: "nowrap"
     }, (0, _utils.getFontStyle)(percentFont)), {}, {
       marginLeft: percentGap,
       transform: "translate(".concat(percentX, "px,").concat(percentY, "px)"),
       color: percentSameColor ? _color : percentFont.color,
       alignItems: "center",
-      justifyContent: percentAlign == "left" ? "flex-start" : percentAlign == "right" ? "flex-end" : "center",
-      textAlign: percentAlign === "left" ? "left" : percentAlign === "right" ? "right" : "center"
+      justifyContent: alignToJustify(percentAlign),
+      textAlign: alignToTextAlign(percentAlign)
     })
-  }, percent + "%")));
+  }, percent + "%"), (_series$fieldsData = series.fieldsData) === null || _series$fieldsData === void 0 ? void 0 : _series$fieldsData.map(function (item, index //渲染网格布局新增的各列
+  ) {
+    var _fieldColumnKeys, _item$fieldsColumnInd2, _item$align, _item$align2, _item$translate$x, _item$translate2, _item$translate$y, _item$translate3, _item$suffix, _item$suffix2, _item$suffix$translat, _item$suffix$translat2, _item$suffix$translat3, _item$suffix$translat4;
+    return /*#__PURE__*/React.createElement("span", {
+      key: (_fieldColumnKeys = fieldColumnKeys[(_item$fieldsColumnInd2 = item.fieldsColumnIndex) !== null && _item$fieldsColumnInd2 !== void 0 ? _item$fieldsColumnInd2 : index]) !== null && _fieldColumnKeys !== void 0 ? _fieldColumnKeys : index,
+      style: _objectSpread(_objectSpread({
+        display: "flex",
+        boxSizing: "border-box",
+        width: "100%",
+        minWidth: 0,
+        alignItems: "center",
+        justifyContent: alignToJustify((_item$align = item.align) !== null && _item$align !== void 0 ? _item$align : "center"),
+        textAlign: alignToTextAlign((_item$align2 = item.align) !== null && _item$align2 !== void 0 ? _item$align2 : "center"),
+        overflow: "visible"
+      }, (0, _utils.getFontStyle)(item.font)), {}, {
+        color: item.sameColor ? _color : item.font.color
+      })
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        whiteSpace: "nowrap",
+        marginLeft: (_item$translate$x = (_item$translate2 = item.translate) === null || _item$translate2 === void 0 ? void 0 : _item$translate2.x) !== null && _item$translate$x !== void 0 ? _item$translate$x : 0,
+        marginTop: (_item$translate$y = (_item$translate3 = item.translate) === null || _item$translate3 === void 0 ? void 0 : _item$translate3.y) !== null && _item$translate$y !== void 0 ? _item$translate$y : 0
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        whiteSpace: "nowrap"
+      }
+    }, item.value), ((_item$suffix = item.suffix) === null || _item$suffix === void 0 ? void 0 : _item$suffix.show) && ((_item$suffix2 = item.suffix) === null || _item$suffix2 === void 0 ? void 0 : _item$suffix2.text) != null && String(item.suffix.text) !== "" && /*#__PURE__*/React.createElement("span", {
+      style: {
+        whiteSpace: "nowrap",
+        fontSize: item.suffix.fontSize,
+        marginLeft: (_item$suffix$translat = (_item$suffix$translat2 = item.suffix.translate) === null || _item$suffix$translat2 === void 0 ? void 0 : _item$suffix$translat2.x) !== null && _item$suffix$translat !== void 0 ? _item$suffix$translat : 0,
+        marginTop: (_item$suffix$translat3 = (_item$suffix$translat4 = item.suffix.translate) === null || _item$suffix$translat4 === void 0 ? void 0 : _item$suffix$translat4.y) !== null && _item$suffix$translat3 !== void 0 ? _item$suffix$translat3 : 0
+      }
+    }, item.suffix.text)));
+  })));
 };