@easyv/charts 1.10.4 → 1.10.6

package/lib/components/CartesianChart.js

@@ -213,6 +213,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       width: chartWidth,
       height: yLineRange,
       axisX: axisX,
+      offsetX: clipX,
       isHover: isHover,
       config: tooltipConfig,
       active: active
@@ -690,8 +691,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     marginTop: marginTop,
     tickName: ctlXName,
     series: series,
-    width: width,
-    height: height,
+    width: bodyWidth,
+    height: bodyHeight,
     auto: auto,
     manual: manual
   }))), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {

package/lib/hooks/useTooltip.js

@@ -29,6 +29,8 @@ var _default = exports["default"] = function _default(_ref) {
     width = _ref.width,
     height = _ref.height,
     axisX = _ref.axisX,
+    _ref$offsetX = _ref.offsetX,
+    offsetX = _ref$offsetX === void 0 ? 0 : _ref$offsetX,
     isHover = _ref.isHover,
     _ref$config = _ref.config,
     _ref$config2 = _ref$config === void 0 ? {} : _ref$config,
@@ -62,7 +64,7 @@ var _default = exports["default"] = function _default(_ref) {
       var x = resetX - marginLeft;
       var y = resetY - marginTop;
       if (x > 0 && x < width && y > 0 && y < height && _ticks.length) {
-        var position = direction === "vertical" ? y : x;
+        var position = direction === "vertical" ? y : x + offsetX;
         var _name = _ticks.reduce(function (prev, current) {
           return Math.abs(scaler(prev) - position) > Math.abs(scaler(current) - position) ? current : prev;
         });
@@ -76,7 +78,7 @@ var _default = exports["default"] = function _default(_ref) {
         }
       }
     }
-  }, [svg, marginLeft, axisX, auto]);
+  }, [svg, marginLeft, axisX, auto, offsetX]);
   (0, _react.useEffect)(function () {
     var on = auto && tickLength && !isHover && active;
     if (!auto) setIndex(-1); //不开启自动轮播，提示框等隐藏

package/package.json

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

package/src/components/CartesianChart.js

@@ -144,7 +144,7 @@ const Chart = memo(
       animation,
       isHover,
       controlInfo,
-      active
+      active,
     );
 
     //初始化控制图提示框状态的函数
@@ -206,6 +206,7 @@ const Chart = memo(
       width: chartWidth,
       height: yLineRange,
       axisX,
+      offsetX: clipX,
       isHover,
       config: tooltipConfig,
       active,
@@ -240,7 +241,7 @@ const Chart = memo(
     const tooltipData = useMemo(
       () =>
         tickName !== undefined && originData.filter((d) => d.x === tickName),
-      [tickName, JSON.stringify(originData)]
+      [tickName, JSON.stringify(originData)],
     );
 
     const showTooltip = !!(
@@ -286,7 +287,7 @@ const Chart = memo(
           onEmit(type, eventData);
         }
       },
-      [triggerOnRelative, onEmit, scale]
+      [triggerOnRelative, onEmit, scale],
     );
 
     /**
@@ -371,7 +372,7 @@ const Chart = memo(
               if (timeStamp - loopTime < tranDuration) {
                 const percent = Math.min(
                   1,
-                  (timeStamp - loopTime) / tranDuration
+                  (timeStamp - loopTime) / tranDuration,
                 );
                 if (toRight) {
                   setControlTranslate(cBarWidth * percent + ctlBarX.current);
@@ -731,8 +732,8 @@ const Chart = memo(
                 marginTop={marginTop}
                 tickName={ctlXName}
                 series={series}
-                width={width}
-                height={height}
+                width={bodyWidth}
+                height={bodyHeight}
                 auto={auto}
                 manual={manual}
               />
@@ -811,6 +812,6 @@ const Chart = memo(
         {brush && <Brush config={brush} width={width} />}
       </>
     );
-  }
+  },
 );
 export default Mapping(FilterData(ExtentData(AnimateData(StackData(Chart)))));

package/src/components/Chart.js

@@ -48,7 +48,7 @@ const Chart = memo(
     const isIOS = useRef(
       /iPad|iPhone|iPod|iOS/i.test(navigator.userAgent) ||
         (/Mac OS X/i.test(navigator.userAgent) &&
-          !/Chrome/i.test(navigator.userAgent))
+          !/Chrome/i.test(navigator.userAgent)),
     );
     const svg = createRef();
     const chartWidth = width - marginLeft - marginRight;
@@ -81,12 +81,12 @@ const Chart = memo(
             });
         }
       },
-      [JSON.stringify(interaction)]
+      [JSON.stringify(interaction)],
     );
 
     const onEmit = useCallback(
       (type = "click", data) => emit && emit(type, data),
-      [emit]
+      [emit],
     );
 
     const context = useMemo(
@@ -101,7 +101,7 @@ const Chart = memo(
         svg,
         onEmit,
       }),
-      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
+      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit],
     );
 
     useEffect(() => {
@@ -185,7 +185,7 @@ const Chart = memo(
       } catch (e) {}
       return [];
     }
-  }
+  },
 );
 
 export default Chart;

package/src/components/Tooltip.js

@@ -161,7 +161,7 @@ export default memo(
             >
               {data.map(({ showY, s }, index) => {
                 const { type, icon, displayName } = series.find(
-                  (series) => series.name == s
+                  (series) => series.name == s,
                 );
                 const {
                   show: showSuffix,
@@ -232,5 +232,5 @@ export default memo(
     ) : (
       ""
     );
-  }
+  },
 );

package/src/hooks/useTooltip.ts

@@ -21,6 +21,7 @@ type Props = {
   width: number;
   height: number;
   axisX: any;
+  offsetX?: number;
   isHover: boolean;
   config: { auto?: boolean; interval?: number; manual?: boolean };
   active: boolean;
@@ -33,6 +34,7 @@ export default ({
   width,
   height,
   axisX,
+  offsetX = 0,
   isHover,
   config: { auto, interval = 0, manual } = {},
   active,
@@ -57,12 +59,12 @@ export default ({
         const x = resetX - marginLeft;
         const y = resetY - marginTop;
         if (x > 0 && x < width && y > 0 && y < height && _ticks.length) {
-          const position = direction === "vertical" ? y : x;
+          const position = direction === "vertical" ? y : x + offsetX;
           const name = _ticks.reduce((prev: string, current: string) =>
             Math.abs(scaler(prev) - position) >
             Math.abs(scaler(current) - position)
               ? current
-              : prev
+              : prev,
           );
           setCurrentIndex(allTicks.findIndex((tick: string) => tick == name));
         } else {
@@ -73,7 +75,7 @@ export default ({
         }
       }
     },
-    [svg, marginLeft, axisX, auto]
+    [svg, marginLeft, axisX, auto, offsetX],
   );
   useEffect(() => {
     const on = auto && tickLength && !isHover && active;