@easyv/charts 1.3.30 → 1.3.32

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/Lighter.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,6 +21,10 @@ var _utils = require("../utils");
 
 var _svgPathProperties = require("svg-path-properties");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * 区域图发光跟踪路径
  */

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/lib/element/ConicGradient.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,6 +9,10 @@ exports["default"] = ConicGradient;
 
 var d3 = _interopRequireWildcard(require("d3"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 //只支持在svg中使用
 //在<clipPath>标签中绘制圆环路径，在<foreignObject>中使用conic-gradient来制作角向渐变
 //然后在foreignObject中调用clipPath来剪切dom元素，实现环形渐变效果

package/lib/hooks/useExtentData.js

@@ -61,7 +61,7 @@ var stackData = function stackData(data, series) {
     max = Math.max.apply(Math, arr.concat([max]));
   });
   dataMap.clear();
-  return [min, max];
+  return [min || 0, max || (min || 0) + 100];
 };
 /**
  * 计算轴的domain

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@easyv/charts",
-  "version": "1.3.30",
+  "version": "1.3.32",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
-    "make": "babel src -d lib --extensions .ts,.tsx,.js && cp -r src/css lib",
+    "make": "babel src -d lib --extensions .ts,.tsx,.js,.jsx && cp -r src/css lib",
     "prepare": "husky install"
   },
   "keywords": [],

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={{

package/src/hooks/useExtentData.js

@@ -40,7 +40,7 @@ const stackData = (data, series) => {
     max = Math.max(...arr, max);
   });
   dataMap.clear();
-  return [min, max];
+  return [min || 0, max || ((min||0)+100)];
 };
 
 /**