@easyv/charts 1.10.35 → 1.10.37

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/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; }
@@ -237,6 +237,17 @@ var getLabelColumnHeight = function getLabelColumnHeight(_ref2) {
   return height || 12;
 };
 
+// 大屏 transform:scale 后 getBoundingClientRect 会带缩放；offsetHeight 不受 transform 影响，与 SVG 坐标一致
+var getLabelDomHeight = function getLabelDomHeight(el) {
+  if (!el) return 0;
+  if (el.offsetHeight) return el.offsetHeight;
+  var rect = el.getBoundingClientRect();
+  if (!rect.height) return 0;
+  // offsetHeight 不可用时，用宽高比估算当前 scaleY 再还原
+  var scaleY = el.offsetWidth > 0 && rect.width > 0 ? rect.width / el.offsetWidth : 1;
+  return Math.round(rect.height / (scaleY || 1));
+};
+
 // 水平布局：同侧重叠时按半高之和推开
 var resolveLabelY = function resolveLabelY(y2, side, placedYBySide, labelHeight) {
   var placed = placedYBySide[side];
@@ -507,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,
@@ -1207,7 +1218,7 @@ var Label = function Label(_ref19) {
       Object.keys(labelElsRef.current).forEach(function (key) {
         var el = labelElsRef.current[key];
         if (!el) return;
-        var h = Math.round(el.getBoundingClientRect().height);
+        var h = getLabelDomHeight(el);
         if (!h) return;
         next[key] = h;
         if (prev[key] !== h) changed = true;
@@ -1422,7 +1433,7 @@ var RingLabel = function RingLabel(_ref21) {
       Object.keys(labelElsRef.current).forEach(function (key) {
         var el = labelElsRef.current[key];
         if (!el) return;
-        var h = Math.round(el.getBoundingClientRect().height);
+        var h = getLabelDomHeight(el);
         if (!h) return;
         next[key] = h;
         if (prev[key] !== h) changed = true;

package/package.json

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

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;