@easyv/charts 1.10.37 → 1.10.38

package/lib/components/Label.js

@@ -43,6 +43,13 @@ var getHighlightData = function getHighlightData(data, extent) {
       return data;
   }
 };
+var formatWithComma = function formatWithComma(value) {
+  if (value === null || value === undefined || value === "") return value;
+  return String(value).replace(/^(-?\d+)(\.\d+)?$/, function (_, _int) {
+    var dec = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+    return _int.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + dec;
+  });
+};
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var isXRepeat = _ref.isXRepeat,
     _ref$config = _ref.config,
@@ -228,11 +235,14 @@ var Label = function Label(_ref5) {
     _ref5$config$suffix$t = _ref5$config$suffix.translate,
     suffixX = _ref5$config$suffix$t.x,
     suffixY = _ref5$config$suffix$t.y,
+    _ref5$config$commaFor = _ref5$config.commaFormatting,
+    commaFormatting = _ref5$config$commaFor === void 0 ? true : _ref5$config$commaFor,
     _ref5$textAnchor = _ref5.textAnchor,
     textAnchor = _ref5$textAnchor === void 0 ? "middle" : _ref5$textAnchor,
     _ref5$dominantBaselin = _ref5.dominantBaseline,
     dominantBaseline = _ref5$dominantBaselin === void 0 ? "middle" : _ref5$dominantBaselin,
     reverse = _ref5.reverse;
+  var displayValue = commaFormatting ? formatWithComma(value) : value;
   return /*#__PURE__*/React.createElement("text", {
     x: x,
     y: y,
@@ -243,7 +253,7 @@ var Label = function Label(_ref5) {
     textAnchor: textAnchor,
     dominantBaseline: dominantBaseline,
     style: _objectSpread({}, (0, _utils.formatFont)(font, "svg"))
-  }, /*#__PURE__*/React.createElement("tspan", null, value), /*#__PURE__*/React.createElement("tspan", {
+  }, /*#__PURE__*/React.createElement("tspan", null, displayValue), /*#__PURE__*/React.createElement("tspan", {
     dx: suffixX,
     dy: suffixY,
     style: _objectSpread({}, (0, _utils.getFontStyle)(suffixFont, "svg"))

package/package.json

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

package/src/components/Label.js

@@ -30,6 +30,13 @@ const getHighlightData = (data, extent) => {
   }
 };
 
+const formatWithComma = (value) => {
+  if (value === null || value === undefined || value === "") return value;
+  return String(value).replace(/^(-?\d+)(\.\d+)?$/, (_, int, dec = "") => {
+    return int.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + dec;
+  });
+};
+
 export default memo(
   ({
     isXRepeat,
@@ -98,15 +105,18 @@ export default memo(
               data,
               data: { x, y, showY, s },
             },
-            i
+            i,
           ) => {
             let y1, y2;
             const { icon, label } =
               x == curXLabel ? selectConfig : flag ? highlightConfig : other;
             const showIcon = icon && icon.show;
             const showLabel = label && label.show;
-            const { position: _position = "outerStart", reverse = true } =
-              label || {};
+            const {
+              position: _position = "outerStart",
+              reverse = true,
+            } = label || {};
+
             if (isClipAxis) {
               if (end > +clipValue) {
                 y1 = yScaler[1](start);
@@ -183,11 +193,11 @@ export default memo(
                 )}
               </g>
             );
-          }
+          },
         )}
       </g>
     );
-  }
+  },
 );
 
 const Label = ({
@@ -202,11 +212,13 @@ const Label = ({
       font: suffixFont,
       translate: { x: suffixX, y: suffixY },
     },
+    commaFormatting = true,
   },
   textAnchor = "middle",
   dominantBaseline = "middle",
   reverse,
 }) => {
+  const displayValue = commaFormatting ? formatWithComma(value) : value;
   return (
     <text
       x={x}
@@ -219,7 +231,7 @@ const Label = ({
       dominantBaseline={dominantBaseline}
       style={{ ...formatFont(font, "svg") }}
     >
-      <tspan>{value}</tspan>
+      <tspan>{displayValue}</tspan>
       <tspan
         dx={suffixX}
         dy={suffixY}