@easyv/charts 1.9.9 → 1.9.11

package/lib/components/Band.js

@@ -13,6 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _d3v = require("d3v7");
 var _utils = require("../utils");
+var _lodash = require("lodash");
 var _excluded = ["show", "extent"],
   _excluded2 = ["pattern", "seriesIntervalWidth", "paddingInner", "highlight"],
   _excluded3 = ["bgAttr"];
@@ -154,6 +155,13 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     seriesStart = _getSeriesInfo.seriesStart;
   var _data = showHighlight ? getHighlightData(data, extent) : data;
   var isVertical = direction === "vertical";
+  var handleMouseMove = (0, _react.useCallback)((0, _lodash.throttle)(function (e) {
+    if (triggerEvents) {
+      triggerEvents(e, "setCurrent");
+    }
+  }, 100),
+  // 每 100ms 最多执行一次
+  [triggerEvents]);
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-band"
   }, _data.map(function (_ref4, i) {
@@ -243,10 +251,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       }
     }, bgAttr, {
       onClick: function onClick(e) {
-        return triggerEvents ? triggerEvents(e, "setCurrent") : "";
+        triggerEvents ? triggerEvents(e, "setCurrent") : "";
       },
       onMouseMove: function onMouseMove(e) {
-        return triggerEvents ? triggerEvents(e, "mouseenter") : "";
+        triggerEvents ? handleMouseMove : "";
       },
       onMouseEnter: function onMouseEnter() {
         if (isControlChart) {

package/lib/components/CartesianChart.js

@@ -522,10 +522,14 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onMouseEnter: function onMouseEnter() {
       setIsHover(true);
     },
-    onMouseMove: !control ? setIndex : null,
+    onMouseMove: function onMouseMove(e) {
+      setIndex(e);
+      setIndex;
+    },
     onMouseLeave: function onMouseLeave(e) {
       setIsHover(false);
       setIndex(e);
+      // setIndex
     },
     ref: svg
   }, background && /*#__PURE__*/_react["default"].createElement("foreignObject", {
@@ -569,7 +573,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       key: index
     }));
   }), showTooltip && !control && zIndex == "bottom" && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, {
-    manual: manual,
+    manual: true,
     auto: auto
   }, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
     style: {
@@ -598,7 +602,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       xName: item.tick,
       setCtlTip: setCtlTip,
       ctlIndicatorList: ctlIndicatorList,
-      manual: manual
+      manual: true
     }));
   })), series.map(function (_ref2, index) {
     var Component = _ref2.Component,
@@ -666,6 +670,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     series: series,
     width: width,
     height: height,
+    auto: auto,
     manual: manual
   }))), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
     var yOrZ = baseLineConfig[index].line.yOrZ;
@@ -713,6 +718,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     series: series,
     width: width,
     height: height,
+    auto: auto,
     manual: manual
   })), brush && /*#__PURE__*/_react["default"].createElement(_.Brush, {
     config: brush,

package/lib/components/Tooltip.js

@@ -49,6 +49,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     isVertical = _ref.isVertical,
     width = _ref.width,
     height = _ref.height,
+    auto = _ref.auto,
     manual = _ref.manual;
   var tipPosition = (0, _react.useMemo)(function () {
     var translate3d = isVertical ? _objectSpread(_objectSpread({}, translateTip), {}, {
@@ -66,15 +67,15 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }
     return (0, _utils.getTranslate3d)(translate3d);
   }, [width, height, marginLeft, marginTop, position, tipWidth, tipHeight, translateTip]);
-  return manual ? /*#__PURE__*/React.createElement("div", {
+  return manual || auto ? /*#__PURE__*/React.createElement("div", {
     className: "__easyv-tooltip",
     style: _objectSpread({
-      pointerEvents: 'none',
+      pointerEvents: "none",
       transform: tipPosition,
       width: tipWidth,
       minHeight: tipHeight,
       padding: (0, _utils.getMargin)(margin),
-      background: bgType == "image" ? image ? '50% 50% / 100% 100% no-repeat url(' + window.appConfig.ASSETS_URL + image + ')' : "transparent" : bgColor
+      background: bgType == "image" ? image ? "50% 50% / 100% 100% no-repeat url(" + window.appConfig.ASSETS_URL + image + ")" : "transparent" : bgColor
     }, (0, _utils.getFontStyle)(font))
   }, formatter ? formatter({
     series: series,
@@ -88,11 +89,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }
   }) : /*#__PURE__*/React.createElement("div", {
     style: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
       gap: gap,
-      height: '100%'
+      height: "100%"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: _objectSpread({
@@ -122,27 +123,27 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       suffixTranslate = suffix.translate;
     var tmp = new Map();
     Object.values(content).forEach(function (item) {
-      tmp.set(item['suffix'].name, item['suffix'].suffix);
+      tmp.set(item["suffix"].name, item["suffix"].suffix);
     });
     var _icon = (0, _utils.getIcon)(type, icon);
     return /*#__PURE__*/React.createElement("dd", {
       style: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        lineHeight: lineHeight + 'px'
+        display: "flex",
+        justifyContent: "space-between",
+        lineHeight: lineHeight + "px"
       },
       key: index
     }, /*#__PURE__*/React.createElement("span", {
       style: {
-        border: '1px solid red',
-        display: 'flex',
-        alignItems: 'center',
+        border: "1px solid red",
+        display: "flex",
+        alignItems: "center",
         gap: icon.iconGap
       }
     }, /*#__PURE__*/React.createElement("span", {
       style: _objectSpread(_objectSpread({}, _icon), {}, {
-        width: iconSize + 'px',
-        height: iconSize + 'px'
+        width: iconSize + "px",
+        height: iconSize + "px"
       })
     }), /*#__PURE__*/React.createElement("span", {
       style: (0, _utils.getFontStyle)(name)

package/lib/hooks/useTooltip.js

@@ -79,6 +79,7 @@ var _default = exports["default"] = function _default(_ref) {
   }, [svg, marginLeft, axisX, auto]);
   (0, _react.useEffect)(function () {
     var on = auto && tickLength && !isHover && active;
+    if (!auto) setIndex(-1); //不开启自动轮播，提示框等隐藏
     // if (!!on) setCurrentIndex(0);
     var intervalHandler = on ? setInterval(function () {
       setCurrentIndex(function (index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.9",
+  "version": "1.9.11",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -22,6 +22,7 @@
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^16.2.4",
     "@types/d3": "^7.0.0",
+    "@types/lodash": "^4.17.21",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "babel-plugin-transform-import-styles": "^0.0.11",
@@ -35,6 +36,7 @@
     "@easyv/utils": "^0.0.50",
     "d3v7": "npm:d3@^7.0.0",
     "gitignore": "^0.7.0",
+    "lodash": "^4.17.21",
     "mrm": "^4.0.0",
     "popmotion": "^9.3.6",
     "react": "^17.0.2",
@@ -52,4 +54,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/Band.tsx

@@ -1,10 +1,10 @@
 /**
  * （柱状/条形）图柱子
  */
-import React, { memo, Fragment } from "react";
+import React, { memo, Fragment, useCallback } from "react";
 import { min, max } from "d3v7";
 import { getBandBackground, getMultiColorStr, getSeriesInfo } from "../utils";
-
+import { throttle } from "lodash";
 const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
   switch (extent) {
     case "min":
@@ -40,15 +40,15 @@ const getAttr = ({
   const len = length ? length : 0.1; //柱子长度
   if (isVertical) {
     return {
-      width: Math.max(0,len),
-      height: Math.max(0,seriesWidth),
+      width: Math.max(0, len),
+      height: Math.max(0, seriesWidth),
       x: y,
       y: x,
       bgAttr: {
         x: 0,
         y: x,
-        width: Math.max(0,len + x),
-        height: Math.max(0,seriesWidth),
+        width: Math.max(0, len + x),
+        height: Math.max(0, seriesWidth),
       },
     };
   } else {
@@ -60,8 +60,8 @@ const getAttr = ({
       bgAttr: {
         x,
         y: 0,
-        width: Math.max(0,seriesWidth),
-        height: Math.max(0,y + len),
+        width: Math.max(0, seriesWidth),
+        height: Math.max(0, y + len),
       },
     };
   }
@@ -136,7 +136,14 @@ export default memo(
     });
     const _data = showHighlight ? getHighlightData(data, extent) : data;
     const isVertical = direction === "vertical";
-
+    const handleMouseMove = useCallback(
+      throttle((e) => {
+        if (triggerEvents) {
+          triggerEvents(e, "setCurrent");
+        }
+      }, 100), // 每 100ms 最多执行一次
+      [triggerEvents]
+    );
     return (
       <g className="__easyv-band">
         {_data.map(
@@ -232,8 +239,12 @@ export default memo(
                     cursor: "pointer",
                   }}
                   {...bgAttr}
-                  onClick={(e) => triggerEvents?triggerEvents(e, "setCurrent"):""}
-                  onMouseMove={(e) => triggerEvents?triggerEvents(e, "mouseenter"):""}
+                  onClick={(e) => {
+                    triggerEvents ? triggerEvents(e, "setCurrent") : "";
+                  }}
+                  onMouseMove={(e) => {
+                    triggerEvents ? handleMouseMove : "";
+                  }}
                   onMouseEnter={() => {
                     if (isControlChart) {
                       setCtlTip((pre: any) => ({
@@ -251,7 +262,7 @@ export default memo(
                     }
                   }}
                   onMouseLeave={(e) => {
-                    triggerEvents?triggerEvents(e, "mouseleave"):"";
+                    triggerEvents ? triggerEvents(e, "mouseleave") : "";
                     if (isControlChart && !auto) {
                       setCtlTip((pre: any) => ({
                         show: false,

package/src/components/CartesianChart.js

@@ -508,10 +508,14 @@ const Chart = memo(
           onMouseEnter={() => {
             setIsHover(true);
           }}
-          onMouseMove={!control ? setIndex : null}
+          onMouseMove={(e) => {
+            setIndex(e);
+            setIndex;
+          }}
           onMouseLeave={(e) => {
             setIsHover(false);
             setIndex(e);
+            // setIndex
           }}
           ref={svg}
         >
@@ -562,7 +566,7 @@ const Chart = memo(
           {showTooltip && !control && zIndex == "bottom" && (
             <Indicator
               {...indicator}
-              manual={manual}
+              manual={true}
               auto={auto}
               {...indicatorAttr}
             />
@@ -607,7 +611,7 @@ const Chart = memo(
                         xName={item.tick}
                         setCtlTip={setCtlTip}
                         ctlIndicatorList={ctlIndicatorList}
-                        manual={manual}
+                        manual={true}
                       />
                     );
                   })}
@@ -701,6 +705,7 @@ const Chart = memo(
                 series={series}
                 width={width}
                 height={height}
+                auto={auto}
                 manual={manual}
               />
             )}
@@ -771,6 +776,7 @@ const Chart = memo(
             series={series}
             width={width}
             height={height}
+            auto={auto}
             manual={manual}
           />
         )}

package/src/components/Legend.js

@@ -91,7 +91,7 @@ export default memo(
       (fieldName) => (e) => {
         const { dataset } = e.currentTarget;
         const { name } = dataset;
-        filterData && interactive && filterData(fieldName||name);
+        filterData && interactive && filterData(fieldName || name);
         pieClick && pieClick(e);
       },
       [interactive, filterData, pieClick]
@@ -168,7 +168,7 @@ export default memo(
           overflowY: loop.show ? "scroll" : "auto",
         }
       : {
-        width:"100%",
+          width: "100%",
           display: "flex",
           flexWrap: "wrap",
           alignContent:
@@ -211,7 +211,15 @@ export default memo(
           }}
         >
           {_series.map((series, i) => {
-            const { type, name, displayName,fieldName, icon, selected, index } = series;
+            const {
+              type,
+              name,
+              displayName,
+              fieldName,
+              icon,
+              selected,
+              index,
+            } = series;
             const _icon = getIcon(type, icon, series?.config?.line?.type);
             return (
               <li
@@ -281,8 +289,15 @@ export default memo(
             >
               {_series.map((series, i) => {
                 if (Math.floor(i / gridTemplateColumns) == indexs) {
-                  const { type, name, displayName,fieldName, icon, selected, index } =
-                    series;
+                  const {
+                    type,
+                    name,
+                    displayName,
+                    fieldName,
+                    icon,
+                    selected,
+                    index,
+                  } = series;
                   const _icon = getIcon(type, icon, series?.config?.line?.type);
                   return (
                     <li

package/src/components/Tooltip.js

@@ -1,9 +1,9 @@
 /**
  * 提示框
  */
-import { memo, useMemo } from 'react';
-import { getFontStyle, getMargin, getTranslate3d } from '../utils';
-import { getIcon } from '../utils';
+import { memo, useMemo } from "react";
+import { getFontStyle, getMargin, getTranslate3d } from "../utils";
+import { getIcon } from "../utils";
 export default memo(
   ({
     x: position,
@@ -18,7 +18,15 @@ export default memo(
           xAxis,
           xAxis: { background, gap, align, font, translate: translateXAxis },
           data: dataConfig,
-          data: { lineHeight, gap:dataGap, iconSize, background:dataBg, name, value, suffix },
+          data: {
+            lineHeight,
+            gap: dataGap,
+            iconSize,
+            background: dataBg,
+            name,
+            value,
+            suffix,
+          },
         },
         bgType,
         bgColor,
@@ -32,18 +40,19 @@ export default memo(
     isVertical,
     width,
     height,
-    manual
+    auto,
+    manual,
   }) => {
     const tipPosition = useMemo(() => {
       const translate3d = isVertical
         ? {
-          ...translateTip,
-          y: translateTip.y + position + marginTop,
-        }
+            ...translateTip,
+            y: translateTip.y + position + marginTop,
+          }
         : {
-          ...translateTip,
-          x: translateTip.x + position + marginLeft,
-        };
+            ...translateTip,
+            x: translateTip.x + position + marginLeft,
+          };
       if (!isVertical && translate3d.x + tipWidth > width) {
         const newPositon = position + marginLeft - tipWidth - translateTip.x;
         translate3d.x = newPositon >= 0 ? newPositon : 0;
@@ -63,21 +72,24 @@ export default memo(
       tipHeight,
       translateTip,
     ]);
-    return (
-      manual?<div
-        className='__easyv-tooltip'
+    return manual || auto ? (
+      <div
+        className="__easyv-tooltip"
         style={{
-          pointerEvents: 'none',
+          pointerEvents: "none",
           transform: tipPosition,
           width: tipWidth,
           minHeight: tipHeight,
           padding: getMargin(margin),
-          background: bgType=="image"?image
-            ? '50% 50% / 100% 100% no-repeat url(' +
-            window.appConfig.ASSETS_URL +
-            image +
-            ')'
-            : "transparent":bgColor,
+          background:
+            bgType == "image"
+              ? image
+                ? "50% 50% / 100% 100% no-repeat url(" +
+                  window.appConfig.ASSETS_URL +
+                  image +
+                  ")"
+                : "transparent"
+              : bgColor,
           ...getFontStyle(font),
         }}
       >
@@ -90,29 +102,37 @@ export default memo(
         ) : (
           <div
             style={{
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'space-between',
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
               gap,
-              height: '100%',
+              height: "100%",
             }}
           >
             <div
               style={{
                 textAlign: align,
                 transform: getTranslate3d(translateXAxis),
-                background:background?`url(${window.appConfig.ASSETS_URL+background}) 0 0/100% 100%`:"transparent",
+                background: background
+                  ? `url(${
+                      window.appConfig.ASSETS_URL + background
+                    }) 0 0/100% 100%`
+                  : "transparent",
                 ...font,
               }}
             >
               {x}
             </div>
-            <div style={{
-              display:"flex", 
-              flexFlow:"column nowrap",
-              gap:dataGap, 
-              background:dataBg?`url(${window.appConfig.ASSETS_URL+dataBg}) 0 0/100% 100%`:"transparent"
-            }}>
+            <div
+              style={{
+                display: "flex",
+                flexFlow: "column nowrap",
+                gap: dataGap,
+                background: dataBg
+                  ? `url(${window.appConfig.ASSETS_URL + dataBg}) 0 0/100% 100%`
+                  : "transparent",
+              }}
+            >
               {data.map(({ showY, s }, index) => {
                 const { type, icon, displayName } = series.find(
                   (series) => series.name == s
@@ -125,31 +145,31 @@ export default memo(
                 } = suffix;
                 const tmp = new Map();
                 Object.values(content).forEach((item) => {
-                  tmp.set(item['suffix'].name, item['suffix'].suffix);
+                  tmp.set(item["suffix"].name, item["suffix"].suffix);
                 });
                 const _icon = getIcon(type, icon);
                 return (
                   <dd
                     style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      lineHeight: lineHeight + 'px',
+                      display: "flex",
+                      justifyContent: "space-between",
+                      lineHeight: lineHeight + "px",
                     }}
                     key={index}
                   >
                     <span
                       style={{
-                        border: '1px solid red',
-                        display: 'flex',
-                        alignItems: 'center',
+                        border: "1px solid red",
+                        display: "flex",
+                        alignItems: "center",
                         gap: icon.iconGap,
                       }}
                     >
                       <span
                         style={{
                           ..._icon,
-                          width: iconSize + 'px',
-                          height: iconSize + 'px',
+                          width: iconSize + "px",
+                          height: iconSize + "px",
                         }}
                       />
                       <span style={getFontStyle(name)}>{displayName || s}</span>
@@ -160,7 +180,7 @@ export default memo(
                         <span
                           style={{
                             ...getFontStyle(suffiixFont),
-                            display:"inline-block",
+                            display: "inline-block",
                             transform: getTranslate3d(suffixTranslate),
                           }}
                         >
@@ -172,10 +192,11 @@ export default memo(
                 );
               })}
             </div>
-            
           </div>
         )}
-      </div>:""
+      </div>
+    ) : (
+      ""
     );
   }
 );

package/src/hooks/useCarouselAxisX.js

@@ -13,19 +13,13 @@ const initialState = {
  * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
  */
 
-export default (
-  axis,
-  config,
-  isHover,
-  controlInfo,
-  active
-) => {
+export default (axis, config, isHover, controlInfo, active) => {
   const { show, interval, duration, hover } = config;
   const { isC, cPercent } = controlInfo;
   const time = duration + interval;
 
   const {
-    tickCount:count,
+    tickCount: count,
     allTicks,
     scaler,
     start,
@@ -35,11 +29,11 @@ export default (
     lengthWithoutPaddingOuter,
   } = axis;
   const tickLength = ticks.length;
-  const tickCount = isC?allTicks.length:count;
+  const tickCount = isC ? allTicks.length : count;
 
-  const scale = isC?cPercent:1;
-  const _start = start/scale;
-  const _end = end/scale;
+  const scale = isC ? cPercent : 1;
+  const _start = start / scale;
+  const _end = end / scale;
 
   const [state, setState] = useState({
     scaler,
@@ -60,7 +54,13 @@ export default (
   }, [show, time, tickCount, tickLength]);
   useEffect(() => {
     let handler;
-    if (!(hover && isHover) && show && time && tickLength > tickCount && active) {
+    if (
+      !(hover && isHover) &&
+      show &&
+      time &&
+      tickLength > tickCount &&
+      active
+    ) {
       handler = setInterval(() => {
         setStatus(({ currentIndex }) => {
           const tmp = +currentIndex + 1;
@@ -163,7 +163,7 @@ export default (
   return {
     ...axis,
     ...state,
-    controlEnd: _end
+    controlEnd: _end,
   };
 };
 

package/src/hooks/useTooltip.ts

@@ -23,7 +23,7 @@ type Props = {
   axisX: any;
   isHover: boolean;
   config: { auto?: boolean; interval?: number; manual?: boolean };
-  active:boolean
+  active: boolean;
 };
 
 export default ({
@@ -35,7 +35,7 @@ export default ({
   axisX,
   isHover,
   config: { auto, interval = 0, manual } = {},
-  active
+  active,
 }: Props) => {
   const [currentIndex, setCurrentIndex] = useState<number>(-1);
   const tickLength = axisX.allTicks.length;
@@ -77,6 +77,7 @@ export default ({
   );
   useEffect(() => {
     const on = auto && tickLength && !isHover && active;
+    if (!auto) setIndex(-1); //不开启自动轮播，提示框等隐藏
     // if (!!on) setCurrentIndex(0);
     const intervalHandler = on
       ? setInterval(() => {