@easyv/charts 1.4.10 → 1.4.12

package/lib/components/Band.js

@@ -162,7 +162,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       key: i,
       style: {
         overflow: "visible",
-        position: "relative"
+        position: "relative",
+        cursor: "pointer"
       }
     }, attr, {
       onClick: triggerClick,

package/lib/components/CartesianChart.js

@@ -84,7 +84,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       triggerOnRelative = _useContext.triggerOnRelative,
       onEmit = _useContext.onEmit;
 
-  var svg = /*#__PURE__*/(0, _react.createRef)();
+  var svg = (0, _react.useRef)();
   var axes = (0, _hooks.useAxes)({
     axes: axesConfig,
     context: context
@@ -100,6 +100,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     width: chartWidth,
     height: chartHeight,
     axisX: axisX,
+    isHover: isHover,
     config: tooltipConfig
   }),
       tooltipX = _useTooltip.x,
@@ -172,14 +173,14 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     }));
   }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
     style: isVertical ? {
-      width: xLineRange + marginRight,
+      width: xLineRange + marginRight + marginLeft,
       height: yLineRange,
       transform: "translateX(".concat(-marginRight, "px)")
     } : {
       width: xLineRange,
-      height: yLineRange + marginTop,
-      transform: "translateY(".concat(-marginTop, "px)"),
-      overflow: 'visible' // paddingTop:marginTop
+      height: yLineRange + marginTop + marginBottom,
+      transform: "translateY(".concat(-marginTop, "px)") // overflow:'visible'
+      // paddingTop:marginTop
 
     }
   }, /*#__PURE__*/_react["default"].createElement("svg", {

package/lib/components/Label.js

@@ -107,6 +107,9 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     return /*#__PURE__*/React.createElement("g", {
       key: i,
       onClick: triggerClick,
+      style: {
+        cursor: "pointer"
+      },
       "data-data": JSON.stringify(data)
     }, showIcon && !isNaN(attr.y) && /*#__PURE__*/React.createElement(Icon, {
       cx: attr.x,

package/lib/components/Tooltip.js

@@ -147,6 +147,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       style: (0, _utils.getFontStyle)(value)
     }, showY, showSuffix && /*#__PURE__*/React.createElement("span", {
       style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(suffiixFont)), {}, {
+        display: "inline-block",
         transform: (0, _utils.getTranslate3d)(suffixTranslate)
       })
     }, tmp.get(s))));

package/lib/hooks/useTooltip.js

@@ -34,6 +34,7 @@ var _default = function _default(_ref) {
       width = _ref.width,
       height = _ref.height,
       axisX = _ref.axisX,
+      isHover = _ref.isHover,
       _ref$config = _ref.config;
   _ref$config = _ref$config === void 0 ? {} : _ref$config;
   var auto = _ref$config.auto,
@@ -81,13 +82,16 @@ var _default = function _default(_ref) {
           return tick == _name;
         }));
       } else {
-        setCurrentIndex(null);
+        // 鼠标划出后,如果开启了自动轮播，就不需要让提示框消失了
+        if (!auto) {
+          setCurrentIndex(null);
+        }
       }
     }
-  }, [svg, marginLeft, axisX]);
+  }, [svg, marginLeft, axisX, auto]);
   (0, _react.useEffect)(function () {
-    var on = auto && tickLength;
-    if (!!on) setCurrentIndex(0);
+    var on = auto && tickLength && !isHover; // if (!!on) setCurrentIndex(0);
+
     var intervalHandler = on ? setInterval(function () {
       setCurrentIndex(function (index) {
         var tmp = index == null ? 0 : index;
@@ -103,7 +107,7 @@ var _default = function _default(_ref) {
     return function () {
       intervalHandler && clearInterval(intervalHandler);
     };
-  }, [auto, tickLength, interval]);
+  }, [auto, tickLength, interval, isHover]);
   var name = currentIndex === null ? null : axisX.allTicks[currentIndex];
   return {
     name: name,

package/package.json

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

package/src/components/Band.tsx

@@ -139,7 +139,8 @@ export default memo(
                 key={i}
                 style={{
                   overflow:"visible",
-                  position:"relative"
+                  position:"relative",
+                  cursor:"pointer"
                 }}
                 {...attr}
                 onClick={triggerClick}

package/src/components/CartesianChart.js

@@ -5,7 +5,7 @@ import React, {
   memo,
   useMemo,
   useState,
-  createRef,
+  useRef,
   useContext,
   useCallback,
 } from 'react';
@@ -68,7 +68,7 @@ const Chart = memo(
       triggerOnRelative,
       onEmit,
     } = useContext(chartContext);
-    const svg = createRef();
+    const svg = useRef();
     const axes = useAxes({ axes: axesConfig, context });
     const axisX = useCarouselAxisX(axes.get('x'), animation, isHover);
     const xLineRange = width-marginLeft-marginRight;
@@ -85,6 +85,7 @@ const Chart = memo(
       width: chartWidth,
       height: chartHeight,
       axisX,
+      isHover,
       config: tooltipConfig,
     });
     const tooltipData = useMemo(
@@ -157,14 +158,14 @@ const Chart = memo(
           })}
           {showTooltip && <Indicator {...indicator} {...indicatorAttr} />}
           <foreignObject style={isVertical?{
-               width:xLineRange+marginRight,
+               width:xLineRange+marginRight+marginLeft,
                height:yLineRange,
                transform:`translateX(${-marginRight}px)`,
             }:{
             width:xLineRange,
-            height:yLineRange+marginTop,
+            height:yLineRange+marginTop+marginBottom,
             transform:`translateY(${-marginTop}px)`,
-            overflow:'visible'
+            // overflow:'visible'
             // paddingTop:marginTop
           }}>
             <svg width="100%" height="100%" style={{overflow:"visible",transform:isVertical?`translateX(${marginRight}px)`:`translateY(${marginTop}px)`}}>

package/src/components/Label.js

@@ -87,6 +87,7 @@ export default memo(
               <g
                 key={i}
                 onClick={triggerClick}
+                style={{cursor:"pointer"}}
                 data-data={JSON.stringify(data)}
               >
                 {showIcon && !isNaN(attr.y) && (

package/src/components/Tooltip.js

@@ -61,7 +61,6 @@ export default memo(
       tipHeight,
       translateTip,
     ]);
-
     return (
       <div
         className='__easyv-tooltip'
@@ -151,6 +150,7 @@ export default memo(
                       <span
                         style={{
                           ...getFontStyle(suffiixFont),
+                          display:"inline-block",
                           transform: getTranslate3d(suffixTranslate),
                         }}
                       >

package/src/hooks/useTooltip.ts

@@ -20,6 +20,7 @@ type Props = {
   width: number;
   height: number;
   axisX: AxisX;
+  isHover:boolean,
   config: { auto?: boolean; interval?: number; manual?: boolean };
 };
 
@@ -30,10 +31,10 @@ export default ({
   width,
   height,
   axisX,
+  isHover,
   config: { auto, interval = 0, manual } = {},
 }: Props) => {
   const [currentIndex, setCurrentIndex] = useState<number | null>(null);
-
   const tickLength = axisX.allTicks.length;
   const setIndex = useCallback(
     (e) => {
@@ -62,15 +63,18 @@ export default ({
           );
           setCurrentIndex(allTicks.findIndex((tick: string) => tick == name));
         } else {
-          setCurrentIndex(null);
+          // 鼠标划出后,如果开启了自动轮播，就不需要让提示框消失了
+          if(!auto){
+            setCurrentIndex(null);
+          }
         }
       }
     },
-    [svg, marginLeft, axisX]
+    [svg, marginLeft, axisX, auto]
   );
   useEffect(() => {
-    const on = auto && tickLength;
-    if (!!on) setCurrentIndex(0);
+    const on = auto && tickLength && !isHover;
+    // if (!!on) setCurrentIndex(0);
     const intervalHandler = on
       ? setInterval(() => {
         setCurrentIndex((index) => {
@@ -86,7 +90,7 @@ export default ({
     return () => {
       intervalHandler && clearInterval(intervalHandler);
     };
-  }, [auto, tickLength, interval]);
+  }, [auto, tickLength, interval, isHover]);
   const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
   return {
     name,