@easyv/charts 1.3.30 → 1.3.31

package/lib/components/Carousel.js

@@ -67,7 +67,8 @@ var _default = function _default(Component) {
 
     var on = _animation.on,
         interval = _animation.interval,
-        interactive = _animation.interactive;
+        interactive = _animation.interactive,
+        hoverStop = _animation.hoverStop;
 
     var _useState = (0, _react.useState)(on ? carouselState : initialState),
         _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -75,6 +76,7 @@ var _default = function _default(Component) {
         setState = _useState2[1];
 
     var timer = (0, _react.useRef)(null);
+    var hoverState = (0, _react.useRef)(false);
     var animationOn = on && interval && dataLength;
     var carousel = (0, _react.useCallback)(function () {
       if (animationOn) {
@@ -115,7 +117,7 @@ var _default = function _default(Component) {
         case 'click':
           if (type == 'onClick') {
             timer.current && timer.current.stop();
-            animationOn && carousel();
+            !hoverState.current && animationOn && carousel();
             setState({
               trigger: type,
               currentIndex: currentIndex
@@ -132,7 +134,7 @@ var _default = function _default(Component) {
             });
             timer.current && timer.current.stop();
           } else if (type == 'onMouseLeave') {
-            animationOn && carousel();
+            !hoverState.current && animationOn && carousel();
           }
 
           break;
@@ -150,21 +152,33 @@ var _default = function _default(Component) {
           break;
       }
     }, [interactive, animationOn, carousel]);
-
-    if (!animationOn) {
-      return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, rest, {
-        state: state,
-        onEvent: onEvent,
-        config: _objectSpread(_objectSpread({}, config), {}, {
-          animation: _animation
-        }),
-        data: data
-      }));
-    }
-
+    var hoverEvent = (0, _react.useCallback)(function (isHover) {
+      if (hoverStop) {
+        if (isHover) {
+          hoverState.current = true;
+          timer.current && timer.current.stop();
+        } else {
+          hoverState.current = false;
+
+          if (animationOn) {
+            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'
+                };
+              });
+            }, interval * 1000);
+          }
+        }
+      }
+    }, [hoverStop, animationOn, carousel]);
     return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, rest, {
       state: state,
       onEvent: onEvent,
+      hoverEvent: hoverEvent,
       config: _objectSpread(_objectSpread({}, config), {}, {
         animation: _animation
       }),

package/lib/components/PieChart.js

@@ -323,6 +323,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       currentIndex = _ref5$state.currentIndex,
       trigger = _ref5$state.trigger,
       onEvent = _ref5.onEvent,
+      hoverEvent = _ref5.hoverEvent,
       _ref5$data = _ref5.data,
       originData = _ref5$data === void 0 ? [] : _ref5$data;
   var data = originData.map(function (d) {
@@ -597,7 +598,13 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     width: width,
     height: height,
     marginLeft: marginLeft,
-    marginTop: marginTop
+    marginTop: marginTop,
+    onMouseEnter: function onMouseEnter() {
+      hoverEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      hoverEvent(false);
+    }
   }, /*#__PURE__*/_react["default"].createElement("g", {
     style: {
       transition: 'transform ease-in-out 0.3s',

package/package.json

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

package/src/components/Carousel.tsx

@@ -44,13 +44,12 @@ export default (Component: ComponentType<any>) =>
     }) => {
       const dataLength = data.length;
       const _animation = Object.assign({}, defaultAnimation, animation);
-      const { on, interval, interactive } = _animation;
-
+      const { on, interval, interactive, hoverStop } = _animation;
       const [state, setState] = useState<State>(
         on ? carouselState : initialState
       );
       const timer: { current: Timer | null } = useRef(null);
-
+      const hoverState = useRef(false);
       const animationOn = on && interval && dataLength;
 
       const carousel = useCallback(() => {
@@ -83,15 +82,18 @@ export default (Component: ComponentType<any>) =>
           timer.current && timer.current.stop();
         };
       }, [carousel]);
-
+      interface Event{
+        currentIndex:number,
+        type:string
+      }
       const onEvent = useCallback(
-        ({ currentIndex, type }) => {
+        ({ currentIndex, type }:Event) => {
           switch (interactive) {
             case true:
             case 'click':
               if (type == 'onClick') {
                 timer.current && timer.current.stop();
-                animationOn && carousel();
+                !hoverState.current && animationOn && carousel();
                 setState({
                   trigger: type,
                   currentIndex,
@@ -101,12 +103,12 @@ export default (Component: ComponentType<any>) =>
             case 'hover':
               if (type == 'onMouseEnter') {
                 setState({
-                  trigger: type,
+                  trigger:type,
                   currentIndex,
                 });
                 timer.current && timer.current.stop();
               } else if (type == 'onMouseLeave') {
-                animationOn && carousel();
+                !hoverState.current && animationOn && carousel();
               }
               break;
             case false:
@@ -123,23 +125,35 @@ export default (Component: ComponentType<any>) =>
         },
         [interactive, animationOn, carousel]
       );
+      
+      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);
+            }
+          }
+        }
+      },[hoverStop, animationOn, carousel]);
 
-      if (!animationOn) {
-        return (
-          <Component
-            {...rest}
-            state={state}
-            onEvent={onEvent}
-            config={{ ...config, animation: _animation }}
-            data={data}
-          />
-        );
-      }
       return (
         <Component
           {...rest}
           state={state}
           onEvent={onEvent}
+          hoverEvent={hoverEvent}
           config={{ ...config, animation: _animation }}
           data={data}
         />

package/src/components/ChartContainer.tsx

@@ -41,23 +41,24 @@ export default memo(
         onMouseOut = event,
       }: Props,
       ref: LegacyRef<SVGSVGElement>
-    ) => (
-      <svg
-        className='__easyv-svg'
-        width={width}
-        height={height}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onMouseOut={onMouseOut}
-        onClick={onClick}
-        onMouseMove={onMouseMove}
-        ref={ref}
-        style={{ position: 'absolute', width, height, ...style }}
-      >
-        <g transform={'translate(' + marginLeft + ', ' + marginTop + ')'}>
-          {children}
-        </g>
-      </svg>
-    )
+    ) => 
+      {
+        return <svg
+          className='__easyv-svg'
+          width={width}
+          height={height}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onMouseOut={onMouseOut}
+          onClick={onClick}
+          onMouseMove={onMouseMove}
+          ref={ref}
+          style={{ position: 'absolute', width, height, ...style }}
+        >
+          <g transform={'translate(' + marginLeft + ', ' + marginTop + ')'}>
+            {children}
+          </g>
+        </svg>
+      }
   )
 );

package/src/components/PieChart.js

@@ -269,9 +269,9 @@ const Component = memo(
     },
     state: { currentIndex, trigger },
     onEvent,
+    hoverEvent,
     data:originData = [],
   }) => {
-    
     const data =originData.map(d=>({...d,y:d.y<0?0:d.y}));
     const prevIndex = useRef(null);
     const { precision: legendPrecision } = legend.config.percent;
@@ -553,6 +553,8 @@ const Component = memo(
           height={height}
           marginLeft={marginLeft}
           marginTop={marginTop}
+          onMouseEnter={()=>{hoverEvent(true)}}
+          onMouseLeave={()=>{hoverEvent(false)}}
         >
           <g
             style={{