@easyv/charts 1.8.14 → 1.8.16

package/lib/components/Carousel.js

@@ -20,16 +20,16 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 initialState = {
   currentIndex: null,
-  trigger: ''
+  trigger: ""
 };
 var carouselState = {
   currentIndex: 0,
-  trigger: 'carousel'
+  trigger: "carousel"
 };
 var defaultAnimation = {
   on: false,
   interval: 0,
-  interactive: '',
+  interactive: "",
   canCancel: false,
   current: {
     heighten: 0,
@@ -62,11 +62,20 @@ var _default = exports["default"] = function _default(Component) {
     var timer = (0, _react.useRef)(null);
     var hoverState = (0, _react.useRef)(false);
     var animationOn = on && interval && dataLength;
+    // 封装计时器停止逻辑
+    var stopTimer = (0, _react.useCallback)(function () {
+      if (timer.current) {
+        timer.current.stop();
+        timer.current = null;
+      }
+    }, []);
     var carousel = (0, _react.useCallback)(function () {
+      // 先停止之前的计时器
+      stopTimer();
       if (animationOn) {
         setState({
           currentIndex: 0,
-          trigger: 'carousel'
+          trigger: "carousel"
         });
         timer.current = (0, _d3v.interval)(function () {
           setState(function (_ref2) {
@@ -74,7 +83,7 @@ var _default = exports["default"] = function _default(Component) {
             var tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
             return {
               currentIndex: tmp >= dataLength ? 0 : tmp,
-              trigger: 'carousel'
+              trigger: "carousel"
             };
           });
         }, interval * 1000);
@@ -82,24 +91,24 @@ var _default = exports["default"] = function _default(Component) {
         timer.current = null;
         setState({
           currentIndex: null,
-          trigger: ''
+          trigger: ""
         });
       }
     }, [animationOn, interval, dataLength]);
     (0, _react.useEffect)(function () {
       active && carousel && carousel();
       return function () {
-        timer.current && timer.current.stop();
+        stopTimer();
       };
-    }, [carousel, active]);
+    }, [carousel, active, stopTimer]);
     var onEvent = (0, _react.useCallback)(function (_ref3) {
       var currentIndex = _ref3.currentIndex,
         type = _ref3.type;
       switch (interactive) {
         case true:
-        case 'click':
-          if (type == 'onClick') {
-            timer.current && timer.current.stop();
+        case "click":
+          if (type == "onClick") {
+            stopTimer();
             !hoverState.current && animationOn && carousel();
             setState(function (pre) {
               return {
@@ -109,14 +118,14 @@ var _default = exports["default"] = function _default(Component) {
             });
           }
           break;
-        case 'hover':
-          if (type == 'onMouseEnter') {
+        case "hover":
+          if (type == "onMouseEnter") {
             setState({
               trigger: type,
               currentIndex: currentIndex
             });
-            timer.current && timer.current.stop();
-          } else if (type == 'onMouseLeave') {
+            stopTimer();
+          } else if (type == "onMouseLeave") {
             !hoverState.current && animationOn && carousel();
             canCancel && setState(function (pre) {
               return {
@@ -127,9 +136,9 @@ var _default = exports["default"] = function _default(Component) {
           }
           break;
         case false:
-        case '':
+        case "":
           break;
-        case 'carousel':
+        case "carousel":
         default:
           setState({
             trigger: type,
@@ -137,29 +146,30 @@ var _default = exports["default"] = function _default(Component) {
           });
           break;
       }
-    }, [interactive, canCancel, animationOn, carousel]);
+    }, [interactive, canCancel, animationOn, carousel, stopTimer]);
     var hoverEvent = (0, _react.useCallback)(function (isHover) {
       if (hoverStop) {
         if (isHover) {
           hoverState.current = true;
-          timer.current && timer.current.stop();
+          stopTimer();
         } else {
           hoverState.current = false;
           if (animationOn) {
+            stopTimer();
             timer.current = (0, _d3v.interval)(function () {
               setState(function (_ref4) {
                 var currentIndex = _ref4.currentIndex;
                 var tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
                 return {
                   currentIndex: tmp >= dataLength ? 0 : tmp,
-                  trigger: 'carousel'
+                  trigger: "carousel"
                 };
               });
             }, interval * 1000);
           }
         }
       }
-    }, [hoverStop, animationOn, carousel]);
+    }, [hoverStop, animationOn, interval, dataLength, stopTimer]);
     return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, rest, {
       state: state,
       onEvent: onEvent,

package/lib/components/PieChart.js

@@ -607,7 +607,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
   }))), tooltip && mousePos && mousePos.x != 0 && mousePos.y != 0 && tooltip.manual && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       position: "absolute",
-      zIndex: 9999
+      zIndex: 9999,
+      pointerEvents: "none"
     }
   }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
     series: series,
@@ -774,7 +775,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
   }), tooltip && mousePos && mousePos.x != 0 && mousePos.y != 0 && tooltip.manual && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       position: "absolute",
-      zIndex: 9999
+      zIndex: 9999,
+      pointerEvents: "none"
     }
   }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
     series: series,
@@ -1051,7 +1053,7 @@ var Label = function Label(_ref10) {
       })
     }), showValue && /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
-        "color": valueSameColor ? pure : valueFont.color
+        color: valueSameColor ? pure : valueFont.color
       })
     }, data.y, showSuffix && /*#__PURE__*/_react["default"].createElement("span", {
       style: {
@@ -1062,7 +1064,7 @@ var Label = function Label(_ref10) {
       }
     }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentFont)), {}, {
-        "color": percentSameColor ? pure : percentFont.color
+        color: percentSameColor ? pure : percentFont.color
       })
     }, (_showValue ? "（" : "") + percent + "%" + (_showValue ? "）" : "")))));
   }));
@@ -1210,7 +1212,7 @@ var RingLabel = function RingLabel(_ref12) {
     }), showValue && /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
         transform: getTranslate(valueTranslate, x3 >= 0),
-        "color": valueSameColor ? pure : valueFont.color
+        color: valueSameColor ? pure : valueFont.color
       })
     }, realData.y, showSuffix && /*#__PURE__*/_react["default"].createElement("span", {
       style: {
@@ -1222,7 +1224,7 @@ var RingLabel = function RingLabel(_ref12) {
     }, text)), showPercent && /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(percentFont)), {}, {
         transform: getTranslate(percentTranslate, x3 >= 0),
-        "color": percentSameColor ? pure : percentFont.color
+        color: percentSameColor ? pure : percentFont.color
       })
     }, (_showValue ? "（" : "") + percent + "%" + (_showValue ? "）" : "")))));
   }));

package/package.json

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

package/src/components/Carousel.tsx

@@ -5,8 +5,8 @@ import React, {
   useState,
   useCallback,
   useRef,
-} from 'react';
-import { interval as d3Interval, Timer } from 'd3v7';
+} from "react";
+import { interval as d3Interval, Timer } from "d3v7";
 type State = {
   currentIndex: number | null;
   trigger: string;
@@ -14,18 +14,18 @@ type State = {
 
 const initialState = {
   currentIndex: null,
-  trigger: '',
+  trigger: "",
 };
 
 const carouselState = {
   currentIndex: 0,
-  trigger: 'carousel',
+  trigger: "carousel",
 };
 
 const defaultAnimation = {
   on: false,
   interval: 0,
-  interactive: '',
+  interactive: "",
   canCancel: false,
   current: { heighten: 0, opacity: 100 },
 };
@@ -53,19 +53,28 @@ export default (Component: ComponentType<any>) =>
       const timer: { current: Timer | null } = useRef(null);
       const hoverState = useRef(false);
       const animationOn = on && interval && dataLength;
+      // 封装计时器停止逻辑
+      const stopTimer = useCallback(() => {
+        if (timer.current) {
+          timer.current.stop();
+          timer.current = null;
+        }
+      }, []);
 
       const carousel = useCallback(() => {
+        // 先停止之前的计时器
+        stopTimer();
         if (animationOn) {
           setState({
             currentIndex: 0,
-            trigger: 'carousel'
-          })
+            trigger: "carousel",
+          });
           timer.current = d3Interval(() => {
             setState(({ currentIndex }) => {
               const tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
               return {
                 currentIndex: tmp >= dataLength ? 0 : tmp,
-                trigger: 'carousel',
+                trigger: "carousel",
               };
             });
           }, interval * 1000);
@@ -73,7 +82,7 @@ export default (Component: ComponentType<any>) =>
           timer.current = null;
           setState({
             currentIndex: null,
-            trigger: '',
+            trigger: "",
           });
         }
       }, [animationOn, interval, dataLength]);
@@ -81,50 +90,54 @@ export default (Component: ComponentType<any>) =>
       useEffect(() => {
         active && carousel && carousel();
         return () => {
-          timer.current && timer.current.stop();
+          stopTimer();
         };
-      }, [carousel, active]);
-      interface Event{
-        currentIndex:number,
-        type:string
+      }, [carousel, active, stopTimer]);
+      interface Event {
+        currentIndex: number;
+        type: string;
       }
       const onEvent = useCallback(
-        ({ currentIndex, type }:Event) => {
+        ({ currentIndex, type }: Event) => {
           switch (interactive) {
             case true:
-            case 'click':
-              if (type == 'onClick') {
-                timer.current && timer.current.stop();
+            case "click":
+              if (type == "onClick") {
+                stopTimer();
                 !hoverState.current && animationOn && carousel();
-                setState(pre => {
+                setState((pre) => {
                   return {
                     trigger: type,
-                    currentIndex:pre.currentIndex==currentIndex && canCancel?-1:currentIndex,
-                  }
+                    currentIndex:
+                      pre.currentIndex == currentIndex && canCancel
+                        ? -1
+                        : currentIndex,
+                  };
                 });
               }
               break;
-            case 'hover':
-              if (type == 'onMouseEnter') {
+            case "hover":
+              if (type == "onMouseEnter") {
                 setState({
-                  trigger:type,
+                  trigger: type,
                   currentIndex,
                 });
-                timer.current && timer.current.stop();
-              } else if (type == 'onMouseLeave') {
+                stopTimer();
+              } else if (type == "onMouseLeave") {
                 !hoverState.current && animationOn && carousel();
-                canCancel && setState(pre => {
-                  return {
-                    trigger: "onMouseEnter",
-                    currentIndex:-1,
-                  }
-                });
+                canCancel &&
+                  setState((pre) => {
+                    return {
+                      trigger: "onMouseEnter",
+                      currentIndex: -1,
+                    };
+                  });
               }
               break;
             case false:
-            case '':
+            case "":
               break;
-            case 'carousel':
+            case "carousel":
             default:
               setState({
                 trigger: type,
@@ -133,30 +146,34 @@ export default (Component: ComponentType<any>) =>
               break;
           }
         },
-        [interactive, canCancel, animationOn, carousel]
+        [interactive, canCancel, animationOn, carousel, stopTimer]
       );
-      
-      const hoverEvent = useCallback((isHover:boolean)=>{
-        if(hoverStop){
-          if(isHover){
-            hoverState.current = true;
-            timer.current && timer.current.stop();
-          }else{
-            hoverState.current = false;
-            if(animationOn){
-              timer.current = d3Interval(() => {
-                setState(({ currentIndex }) => {
-                  const tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
-                  return {
-                    currentIndex: tmp >= dataLength ? 0 : tmp,
-                    trigger: 'carousel',
-                  };
-                });
-              }, interval * 1000);
+
+      const hoverEvent = useCallback(
+        (isHover: boolean) => {
+          if (hoverStop) {
+            if (isHover) {
+              hoverState.current = true;
+              stopTimer();
+            } else {
+              hoverState.current = false;
+              if (animationOn) {
+                stopTimer();
+                timer.current = d3Interval(() => {
+                  setState(({ currentIndex }) => {
+                    const tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
+                    return {
+                      currentIndex: tmp >= dataLength ? 0 : tmp,
+                      trigger: "carousel",
+                    };
+                  });
+                }, interval * 1000);
+              }
             }
           }
-        }
-      },[hoverStop, animationOn, carousel]);
+        },
+        [hoverStop, animationOn, interval, dataLength, stopTimer]
+      );
 
       return (
         <Component

package/src/components/PieChart.js

@@ -512,7 +512,7 @@ const Component = memo(
     const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
     const [hoverData, setHoverData] = useState(null);
     const pieWarpEl = useRef(null);
-    const domRef=useRef()
+    const domRef = useRef();
     return outerDecorate ? (
       <div ref={domRef}>
         <ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
@@ -626,7 +626,13 @@ const Component = memo(
           mousePos.x != 0 &&
           mousePos.y != 0 &&
           tooltip.manual && (
-            <div style={{ position: "absolute", zIndex: 9999 }}>
+            <div
+              style={{
+                position: "absolute",
+                zIndex: 9999,
+                pointerEvents: "none",
+              }}
+            >
               <PieTooltip
                 series={series}
                 domRef={domRef}
@@ -888,7 +894,13 @@ const Component = memo(
           mousePos.x != 0 &&
           mousePos.y != 0 &&
           tooltip.manual && (
-            <div style={{ position: "absolute", zIndex: 9999 }}>
+            <div
+              style={{
+                position: "absolute",
+                zIndex: 9999,
+                pointerEvents: "none",
+              }}
+            >
               <PieTooltip
                 series={series}
                 domRef={domRef}
@@ -1097,7 +1109,7 @@ const Label = ({
     value: {
       show: showValue,
       font: valueFont,
-      sameColor:valueSameColor,
+      sameColor: valueSameColor,
       suffix: {
         show: showSuffix,
         text,
@@ -1105,7 +1117,12 @@ const Label = ({
         translate: { x: suffixTranslateX, y: suffixTranslateY },
       },
     },
-    percent: { show: showPercent,sameColor:percentSameColor, font: percentFont, precision },
+    percent: {
+      show: showPercent,
+      sameColor: percentSameColor,
+      font: percentFont,
+      precision,
+    },
   },
   iosStyle: { isIOS, left, top },
   arcs,
@@ -1239,7 +1256,12 @@ const Label = ({
                       ></TextOverflow>
                     )}
                     {showValue && (
-                      <span style={{...getFontStyle(valueFont),"color":valueSameColor?pure:valueFont.color}}>
+                      <span
+                        style={{
+                          ...getFontStyle(valueFont),
+                          color: valueSameColor ? pure : valueFont.color,
+                        }}
+                      >
                         {data.y}
                         {showSuffix && (
                           <span
@@ -1256,7 +1278,12 @@ const Label = ({
                       </span>
                     )}
                     {showPercent && (
-                      <span style={{...getFontStyle(percentFont),"color":percentSameColor?pure:percentFont.color}}>
+                      <span
+                        style={{
+                          ...getFontStyle(percentFont),
+                          color: percentSameColor ? pure : percentFont.color,
+                        }}
+                      >
                         {(_showValue ? "（" : "") +
                           percent +
                           "%" +
@@ -1461,7 +1488,7 @@ const RingLabel = ({
                         style={{
                           ...getFontStyle(valueFont),
                           transform: getTranslate(valueTranslate, x3 >= 0),
-                          "color":valueSameColor?pure:valueFont.color
+                          color: valueSameColor ? pure : valueFont.color,
                         }}
                       >
                         {realData.y}
@@ -1484,7 +1511,7 @@ const RingLabel = ({
                         style={{
                           ...getFontStyle(percentFont),
                           transform: getTranslate(percentTranslate, x3 >= 0),
-                          "color":percentSameColor?pure:percentFont.color
+                          color: percentSameColor ? pure : percentFont.color,
                         }}
                       >
                         {(_showValue ? "（" : "") +