@easyv/charts 1.10.36 → 1.10.38

package/lib/components/Chart.js

@@ -56,8 +56,9 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     height = props.height;
   var isIOS = (0, _react.useRef)(/iPad|iPhone|iPod|iOS/i.test(navigator.userAgent) || /Mac OS X/i.test(navigator.userAgent) && !/Chrome/i.test(navigator.userAgent));
   var svg = /*#__PURE__*/(0, _react.createRef)();
-  var chartWidth = width - marginLeft - marginRight;
-  var chartHeight = height - marginTop - marginBottom;
+  // 组件尺寸小于边距之和时，绘图区可能为负；钳制为 >= 0，避免饼/环图半径为负导致崩溃
+  var chartWidth = Math.max(0, width - marginLeft - marginRight);
+  var chartHeight = Math.max(0, height - marginTop - marginBottom);
   var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     active = _useState2[0],

package/lib/components/ConicalGradient.js

@@ -30,20 +30,22 @@ var _default = exports["default"] = function _default(_ref) {
     speed = _ref$config.speed,
     direction = _ref$config.direction,
     arcs = _ref.arcs;
-  if (!show) return null;
+  if (!show || !(radius > 0)) return null;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     canvas = _useState2[0],
     setCanvas = _useState2[1];
   (0, _react.useEffect)(function () {
+    if (!(radius > 0)) return;
     if (arcs && arcs.length > 0 && canvas && canvas.getContext('2d')) {
       var _radius = radius * devicePixelRatio;
+      if (!(_radius > 0)) return;
       var context = canvas.getContext('2d');
       context.clearRect(0, 0, width * devicePixelRatio, height * devicePixelRatio);
       context.save();
       context.translate(centerX * devicePixelRatio, centerY * devicePixelRatio);
       context.beginPath();
-      var _arc = (0, _d3v.arc)().innerRadius(innerRadius * _radius).outerRadius(outerRadius * _radius)
+      var _arc = (0, _d3v.arc)().innerRadius(Math.max(0, innerRadius * _radius)).outerRadius(Math.max(0, outerRadius * _radius))
       // .padAngle(axis.pole.padAngle)
       // .cornerRadius(axis.pole.cornerRadius)
       .context(context);
@@ -145,6 +147,8 @@ ConicalGradient.prototype = {
    * @param {Boolean} anticlockwise
    */
   fill: function fill(context, x, y, radius, startAngle, endAngle, anticlockwise) {
+    // CanvasRenderingContext2D.arc 不允许负半径
+    if (!(radius > 0)) return this;
     var offsets = this._offsets;
     var colors = this._colors;
     var PI = Math.PI;

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/lib/components/PieChart.js

@@ -27,8 +27,8 @@ var _excluded = ["startAngle", "endAngle", "antiClockwise"],
   _excluded2 = ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"],
   _excluded3 = ["formatter"],
   _excluded4 = ["startAngle", "endAngle"];
-/**
- * 饼环图
+/**
+ * 饼环图
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -518,7 +518,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref14) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     y = _useState2[0],
     setY = _useState2[1];
-  var radius = Math.min(chartWidth, chartHeight) / 2 * outerRadius;
+  var radius = Math.max(0, Math.min(chartWidth, chartHeight) / 2 * outerRadius);
   var arcsFunc = (0, _react.useMemo)(function () {
     var _getAngle = getAngle(angle),
       _getAngle$startAngle = _getAngle.startAngle,

package/package.json

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

package/src/components/Chart.js

@@ -50,8 +50,9 @@ const Chart = memo(
           !/Chrome/i.test(navigator.userAgent)),
     );
     const svg = createRef();
-    const chartWidth = width - marginLeft - marginRight;
-    const chartHeight = height - marginTop - marginBottom;
+    // 组件尺寸小于边距之和时，绘图区可能为负；钳制为 >= 0，避免饼/环图半径为负导致崩溃
+    const chartWidth = Math.max(0, width - marginLeft - marginRight);
+    const chartHeight = Math.max(0, height - marginTop - marginBottom);
     const [active, setActive] = useState(true);
     const scaleRef = useRef([1, 1]);
     const screenPosRef = useRef({ left: 0, top: 0 });

package/src/components/ConicalGradient.js

@@ -15,12 +15,14 @@ export default ({
   config: { show, innerRadius, outerRadius, opacity, speed, direction },
   arcs,
 }) => {
-  if (!show) return null;
+  if (!show || !(radius > 0)) return null;
   const [canvas, setCanvas] = useState(null);
 
   useEffect(() => {
+    if (!(radius > 0)) return;
     if (arcs && arcs.length > 0 && canvas && canvas.getContext('2d')) {
       const _radius = radius * devicePixelRatio;
+      if (!(_radius > 0)) return;
       const context = canvas.getContext('2d');
       context.clearRect(
         0,
@@ -34,8 +36,8 @@ export default ({
       context.beginPath();
 
       const _arc = arc()
-        .innerRadius(innerRadius * _radius)
-        .outerRadius(outerRadius * _radius)
+        .innerRadius(Math.max(0, innerRadius * _radius))
+        .outerRadius(Math.max(0, outerRadius * _radius))
         // .padAngle(axis.pole.padAngle)
         // .cornerRadius(axis.pole.cornerRadius)
         .context(context);
@@ -147,6 +149,9 @@ ConicalGradient.prototype = {
    * @param {Boolean} anticlockwise
    */
   fill: function (context, x, y, radius, startAngle, endAngle, anticlockwise) {
+    // CanvasRenderingContext2D.arc 不允许负半径
+    if (!(radius > 0)) return this;
+
     var offsets = this._offsets;
     var colors = this._colors;
 

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}