@easyv/charts 1.3.28 → 1.3.29

package/lib/components/CartesianChart.js

@@ -15,6 +15,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _hooks = require("../hooks");
@@ -69,6 +71,11 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       filterData = _ref.filterData;
   var context = (0, _react.useContext)(_context.chartContext);
 
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isHover = _useState2[0],
+      setIsHover = _useState2[1];
+
   var _useContext = (0, _react.useContext)(_context.chartContext),
       chartWidth = _useContext.width,
       chartHeight = _useContext.height,
@@ -80,7 +87,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     axes: axesConfig,
     context: context
   });
-  var axisX = (0, _hooks.useCarouselAxisX)(axes.get('x'), animation);
+  var axisX = (0, _hooks.useCarouselAxisX)(axes.get('x'), animation, isHover);
 
   var _useTooltip = (0, _hooks.useTooltip)({
     svg: svg,
@@ -128,8 +135,14 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     height: height,
     marginLeft: marginLeft,
     marginTop: marginTop,
+    onMouseEnter: function onMouseEnter() {
+      setIsHover(true);
+    },
     onMouseMove: setIndex,
-    onMouseLeave: setIndex,
+    onMouseLeave: function onMouseLeave(e) {
+      setIsHover(false);
+      setIndex(e);
+    },
     ref: svg
   }, background && /*#__PURE__*/_react["default"].createElement(_.Background, {
     length: isVertical ? chartWidth : chartHeight,

package/lib/hooks/useCarouselAxisX.js

@@ -23,7 +23,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var initialState = {
   currentIndex: null,
-  flag: false
+  flag: false //表示是否为首次加载，true表示首次加载，不需要立刻执行动画，false表示可以执行轮播动画
+
 };
 /**
  * x轴滚动逻辑
@@ -32,10 +33,11 @@ var initialState = {
  * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
  */
 
-var _default = function _default(axis, config) {
+var _default = function _default(axis, config, isHover) {
   var show = config.show,
       interval = config.interval,
-      duration = config.duration;
+      duration = config.duration,
+      hover = config.hover;
   var time = duration + interval;
   var tickCount = axis.tickCount,
       allTicks = axis.allTicks,
@@ -62,13 +64,19 @@ var _default = function _default(axis, config) {
       setStatus = _useState4[1];
 
   (0, _react.useEffect)(function () {
-    var handler;
-
     if (show && time && tickLength > tickCount) {
       setStatus({
         currentIndex: 0,
         flag: true
       });
+    } else {
+      setStatus(initialState);
+    }
+  }, [show, time, tickCount, tickLength]);
+  (0, _react.useEffect)(function () {
+    var handler;
+
+    if (!(hover && isHover) && show && time && tickLength > tickCount) {
       handler = setInterval(function () {
         setStatus(function (_ref) {
           var currentIndex = _ref.currentIndex;
@@ -79,14 +87,12 @@ var _default = function _default(axis, config) {
           };
         });
       }, time * 1000);
-    } else {
-      setStatus(initialState);
     }
 
     return function () {
       handler && clearInterval(handler);
     };
-  }, [show, time, tickCount, tickLength]);
+  }, [show, time, tickCount, tickLength, hover, isHover]);
   (0, _react.useEffect)(function () {
     var animation;
     var currentIndex = status.currentIndex,

package/package.json

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

package/src/components/CartesianChart.js

@@ -4,6 +4,7 @@
 import React, {
   memo,
   useMemo,
+  useState,
   createRef,
   useContext,
   useCallback,
@@ -60,6 +61,7 @@ const Chart = memo(
     filterData,
   }) => {
     const context = useContext(chartContext);
+    const [isHover, setIsHover] = useState(false);
     const {
       width: chartWidth,
       height: chartHeight,
@@ -68,7 +70,7 @@ const Chart = memo(
     } = useContext(chartContext);
     const svg = createRef();
     const axes = useAxes({ axes: axesConfig, context });
-    const axisX = useCarouselAxisX(axes.get('x'), animation);
+    const axisX = useCarouselAxisX(axes.get('x'), animation, isHover);
 
     const {
       x: tooltipX,
@@ -125,8 +127,9 @@ const Chart = memo(
           height={height}
           marginLeft={marginLeft}
           marginTop={marginTop}
+          onMouseEnter={()=>{setIsHover(true)}}
           onMouseMove={setIndex}
-          onMouseLeave={setIndex}
+          onMouseLeave={(e)=>{setIsHover(false);setIndex(e)}}
           ref={svg}
         >
           {background && (

package/src/hooks/useCarouselAxisX.js

@@ -3,7 +3,7 @@ import { animate, linear } from 'popmotion';
 
 const initialState = {
   currentIndex: null,
-  flag: false,
+  flag: false,    //表示是否为首次加载，true表示首次加载，不需要立刻执行动画，false表示可以执行轮播动画
 };
 
 /**
@@ -13,8 +13,8 @@ const initialState = {
  * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
  */
 
-export default (axis, config) => {
-  const { show, interval, duration } = config;
+export default (axis, config, isHover) => {
+  const { show, interval, duration, hover } = config;
   const time = duration + interval;
 
   const {
@@ -37,12 +37,18 @@ export default (axis, config) => {
   const [status, setStatus] = useState(initialState);
 
   useEffect(() => {
-    let handler;
     if (show && time && tickLength > tickCount) {
       setStatus({
         currentIndex: 0,
         flag: true,
       });
+    } else {
+      setStatus(initialState);
+    }
+  }, [show, time, tickCount, tickLength]);
+  useEffect(()=>{
+    let handler;
+    if(!(hover && isHover) && show && time && tickLength > tickCount){
       handler = setInterval(() => {
         setStatus(({ currentIndex }) => {
           const tmp = +currentIndex + 1;
@@ -52,13 +58,11 @@ export default (axis, config) => {
           };
         });
       }, time * 1000);
-    } else {
-      setStatus(initialState);
     }
     return () => {
       handler && clearInterval(handler);
     };
-  }, [show, time, tickCount, tickLength]);
+  },[show, time, tickCount, tickLength, hover, isHover])
 
   useEffect(() => {
     let animation;