@easyv/charts 1.4.22 → 1.4.25

package/lib/components/Axis.js

@@ -246,7 +246,7 @@ var Label = function Label(_ref5) {
   })));
 };
 
-var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
   var orientation = _ref6.orientation,
       scaler = _ref6.scaler,
       _ref6$tickSize = _ref6.tickSize,
@@ -265,10 +265,16 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       config = _ref6.config,
       positions = _ref6.positions,
       xLineRange = _ref6.xLineRange,
+      range = _ref6.range,
+      axisType = _ref6.axisType,
       _ref6$isClipAxis = _ref6.isClipAxis,
       isClipAxis = _ref6$isClipAxis === void 0 ? false : _ref6$isClipAxis,
       yLineRange = _ref6.yLineRange,
-      clipAxisRange = _ref6.clipAxisRange;
+      clipAxisRange = _ref6.clipAxisRange,
+      isControlChart = _ref6.isControlChart,
+      controlConfig = _ref6.controlConfig,
+      controlEnd = _ref6.controlEnd,
+      rawTicks = _ref6.rawTicks;
   if (!(on && ticks.length > 0)) return null;
 
   var _useContext = (0, _react.useContext)(_context.chartContext),
@@ -278,7 +284,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height : 0;
 
-  function drawYAxisTickLine() {
+  function drawAxisTickLine() {
     var draw = function draw(ticks, scaler) {
       return ticks.map(function (tick, index) {
         var coordinate = scaler(tick);
@@ -325,11 +331,11 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
         var gridCoord = (0, _utils.getGridCoord)({
           orientation: orientation,
           coordinate: coordinate,
-          end: orientation == 'left' || orientation == 'right' ? width : height
+          end: orientation == "left" || orientation == "right" ? width : height
         });
         var x1 = gridCoord.x1;
         var y1 = gridCoord.y1;
-        return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement("g", {
+        return (!(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) || isControlChart) && /*#__PURE__*/_react["default"].createElement("g", {
           key: index
         }, label && /*#__PURE__*/_react["default"].createElement(Label, {
           className: "__easyv-label",
@@ -352,13 +358,14 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ticks.map(function (ticks, index) {
         return draw(ticks, scaler[index]);
       }));
+    } else if (isControlChart && orientation == "bottom") {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(rawTicks, scaler));
     } else {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
     }
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, axisLine && tickLine && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, axisLine && ( // 依据positions来区分x轴y轴，有position为x轴
-  positions && positions.length ? positions.map(function (_ref7, index) {
+  return /*#__PURE__*/_react["default"].createElement("g", null, axisLine && tickLine && /*#__PURE__*/_react["default"].createElement("g", null, axisLine && (positions && positions.length ? positions.map(function (_ref7, index) {
     var x = _ref7.x,
         y = _ref7.y;
     return /*#__PURE__*/_react["default"].createElement("g", {
@@ -366,7 +373,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       transform: "translate(" + x + ", " + y + ")"
     }, /*#__PURE__*/_react["default"].createElement(AxisLine, {
       orientation: orientation,
-      config: axisLine
+      config: axisLine,
+      range: range
     }), tickLine && ticks.map(function (tick, index) {
       var coordinate = scaler(tick);
       if (isNaN(coordinate)) return null;
@@ -397,11 +405,18 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
     config: axisLine,
     isClipAxis: isClipAxis,
     clipAxisRange: clipAxisRange
-  }), tickLine && drawYAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("g", {
-    transform: 'translate(' + x + ', ' + y + ')'
+  }), tickLine && drawAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("svg", {
+    width: width,
+    style: {
+      overflow: axisType !== "x" && isControlChart ? "visible" : "hidden"
+    }
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(" + x + ", " + y + ")"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    ref: ref
   }, label && gridLine && drawLabel(), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
     config: unit
-  })));
-});
+  })))));
+}));
 
 exports["default"] = _default;

package/lib/components/Band.js

@@ -85,6 +85,13 @@ var getBorderRadius = function getBorderRadius(_ref2) {
 
 var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
   var triggerClick = _ref3.triggerClick,
+      indicatorWidth = _ref3.indicatorWidth,
+      setControlChartTooltipShow = _ref3.setControlChartTooltipShow,
+      setControlChartTooltipX = _ref3.setControlChartTooltipX,
+      setControlChartTooltipXName = _ref3.setControlChartTooltipXName,
+      _ref3$isControlChart = _ref3.isControlChart,
+      isControlChart = _ref3$isControlChart === void 0 ? false : _ref3$isControlChart,
+      setControlChartIndicatorList = _ref3.setControlChartIndicatorList,
       _ref3$config = _ref3.config,
       _ref3$config$pattern = _ref3$config.pattern,
       pattern = _ref3$config$pattern === void 0 ? {} : _ref3$config$pattern,
@@ -111,6 +118,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       xScaler = _ref3$xAxis.scaler,
       step = _ref3$xAxis.step,
       direction = _ref3$xAxis.direction,
+      xAxis = _ref3.xAxis,
       _ref3$yAxis = _ref3.yAxis,
       yScaler = _ref3$yAxis.scaler,
       isClipAxis = _ref3$yAxis.isClipAxis,
@@ -145,7 +153,6 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
         y = _ref4$data.y,
         s = _ref4$data.s;
 
-    //todo 柱状中空设置
     var y1, y2; //断轴图相关，断轴图的scaler是一个数组，内含上断轴下断轴的scaler
 
     if (isClipAxis) {
@@ -201,7 +208,40 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
         cursor: "pointer"
       }
     }, attr, {
-      onClick: triggerClick,
+      onClick: triggerClick //enter和leave事件，用于控制图的提示框
+      ,
+      onMouseEnter: function onMouseEnter() {
+        if (isControlChart) {
+          setControlChartIndicatorList(function (v) {
+            return v.map(function (item) {
+              if (item.tick === data.x) {
+                return _objectSpread(_objectSpread({}, item), {}, {
+                  isShow: true
+                });
+              } else {
+                return item;
+              }
+            });
+          });
+          setControlChartTooltipShow(true);
+          setControlChartTooltipX(xScaler(x) - indicatorWidth / 2);
+          setControlChartTooltipXName(data.x);
+        }
+      },
+      onMouseLeave: function onMouseLeave() {
+        if (isControlChart) {
+          setControlChartIndicatorList(function (v) {
+            return v.map(function (item) {
+              return _objectSpread(_objectSpread({}, item), {}, {
+                isShow: false
+              });
+            });
+          });
+          setControlChartTooltipShow(false);
+          setControlChartTooltipXName(undefined);
+          setControlChartTooltipX(undefined);
+        }
+      },
       "data-data": JSON.stringify(data)
     }), headUrl && showHead && /*#__PURE__*/_react["default"].createElement("div", {
       style: {

package/lib/components/CartesianChart.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 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"));
@@ -25,6 +25,8 @@ var _context = require("../context");
 
 var _ = require(".");
 
+var _utils = require("../utils");
+
 var _excluded = ["Component", "yOrZ"],
     _excluded2 = ["Component", "yOrZ"];
 
@@ -52,7 +54,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       tooltip = _ref$config.tooltip,
       _ref$config$baseLine = _ref$config.baseLine,
       _ref$config$baseLine$ = _ref$config$baseLine.orientation,
-      baseLineOri = _ref$config$baseLine$ === void 0 ? '' : _ref$config$baseLine$,
+      baseLineOri = _ref$config$baseLine$ === void 0 ? "" : _ref$config$baseLine$,
       _ref$config$baseLine$2 = _ref$config$baseLine.config,
       baseLineConfig = _ref$config$baseLine$2 === void 0 ? {} : _ref$config$baseLine$2,
       _ref$config$baseLine$3 = _ref$config$baseLine.data,
@@ -68,6 +70,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       _ref$config$tooltip$c3 = _ref$config$tooltip$c2.indicator,
       indicator = _ref$config$tooltip$c3 === void 0 ? {} : _ref$config$tooltip$c3,
       brush = _ref$config.brush,
+      _ref$config$isControl = _ref$config.isControlChart,
+      isControlChart = _ref$config$isControl === void 0 ? false : _ref$config$isControl,
+      _ref$config$control = _ref$config.control,
+      control = _ref$config$control === void 0 ? null : _ref$config$control,
       style = _ref.style,
       originData = _ref.originData,
       filterData = _ref.filterData,
@@ -89,10 +95,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var svg = (0, _react.useRef)();
   var axes = (0, _hooks.useAxes)({
     axes: axesConfig,
-    context: context
+    context: context,
+    isControlChart: isControlChart,
+    control: control
   });
-  var aiData = aiFormatter ? aiFormatter(originData, axes, series) : (0, _hooks.useAiData)(originData, axes, series);
-  var axisX = (0, _hooks.useCarouselAxisX)(axes.get('x'), animation, isHover);
+  var aiData = aiFormatter ? aiFormatter(originData, axes, series) : useAiData(originData, axes, series);
+  var axisX = (0, _hooks.useCarouselAxisX)(axes.get("x"), animation, isHover, isControlChart, control);
   var xLineRange = width - marginLeft - marginRight;
   var yLineRange = height - marginTop - marginBottom;
   (0, _react.useEffect)(function () {
@@ -133,7 +141,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     });
   }, [tickName, originData]);
   var showTooltip = !!(tooltipData && tooltipData.length && (auto || manual));
-  var isVertical = axisX.direction === 'vertical';
+  var isVertical = axisX.direction === "vertical";
   var indicatorWidth = indicator.width * axisX.step / 100;
   var position = axisX.scaler(tickName) - indicatorWidth / 2;
   var indicatorAttr = isVertical ? {
@@ -152,8 +160,178 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     var _data = JSON.parse(data);
 
     triggerOnRelative(_data);
-    onEmit('click', _data);
+    onEmit("click", _data);
   }, [triggerOnRelative, onEmit]);
+  /**
+   * 控制图相关
+   */
+
+  var controlEl = (0, _react.useRef)();
+  var seriesEl = (0, _react.useRef)(null);
+  var axisElList = (0, _react.useRef)([]);
+  var curControlPercent = (0, _react.useRef)(0);
+  (0, _react.useEffect)(function () {
+    if (controlEl.current && isControlChart) {
+      var isDragging = false;
+      var movementX = 0;
+      var rawTranslateX = 0;
+      var percent = 0;
+      var controlWidth = xLineRange * control.drag.width / 100;
+
+      var range = function range(num) {
+        var _num = num;
+        var min = 0;
+        var max = xLineRange - controlWidth;
+        _num = Math.max(_num, min);
+        _num = Math.min(_num, max);
+        return _num;
+      };
+
+      var setControlTranslate = function setControlTranslate(x) {
+        var moveLen = range(x);
+        controlEl.current.style.transform = "translateX(".concat(moveLen, "px)"); //计算出当前位移的百分比
+
+        percent = moveLen / (xLineRange - controlWidth);
+        curControlPercent.current = percent;
+        seriesEl.current.style.transform = "translate(".concat(-(axisX.controlEnd - axisX.end) * percent, "px,").concat(marginTop, "px)");
+        axisElList.current[2].style.transform = "translate(".concat(-(axisX.controlEnd - axisX.end) * percent, "px,", 0, "px)");
+      };
+
+      var mouseDownHandle = function mouseDownHandle(e) {
+        var mouseMoveHandle = function mouseMoveHandle(e) {
+          //当前位移的距离
+          if (isDragging) {
+            movementX += e.movementX;
+            setControlTranslate(movementX + rawTranslateX);
+          }
+        };
+
+        var mouseUpHandle = function mouseUpHandle(e) {
+          rawTranslateX = range(movementX + rawTranslateX);
+          movementX = 0;
+          isDragging = false;
+          document.removeEventListener("mousemove", mouseMoveHandle);
+          document.removeEventListener("mouseup", mouseUpHandle);
+        };
+
+        document.addEventListener("mousemove", mouseMoveHandle);
+        document.addEventListener("mouseup", mouseUpHandle);
+        isDragging = true;
+      };
+
+      var animationHoverStop;
+
+      var setAnimationHoverStopTrue = function setAnimationHoverStopTrue() {
+        animationHoverStop = true;
+      };
+
+      var setAnimationHoverStopFalse = function setAnimationHoverStopFalse() {
+        animationHoverStop = false;
+      };
+
+      svg.current.addEventListener("mouseenter", setAnimationHoverStopTrue);
+      svg.current.addEventListener("mouseleave", setAnimationHoverStopFalse); //控制图轮播动画逻辑
+
+      var show = animation.show,
+          duration = animation.duration,
+          interval = animation.interval,
+          hover = animation.hover;
+      var times = Math.floor(xLineRange / controlWidth);
+      var animatePos = [];
+
+      for (var i = 0; i <= times; i++) {
+        if (i * controlWidth <= xLineRange) {
+          animatePos.push(i * controlWidth);
+        } else {
+          animatePos.push(xLineRange - controlWidth);
+        }
+      }
+
+      var index = 0;
+      var animationId;
+
+      if (animation.show) {
+        var initTime, timeGap;
+
+        var _animation = function _animation(timestamp) {
+          if (!initTime) {
+            initTime = timestamp;
+          }
+
+          if (animationHoverStop && hover) {
+            initTime = timestamp - timeGap;
+          }
+
+          timeGap = timestamp - initTime;
+
+          if (timeGap < (interval + duration) * 1000) {
+            if (timeGap < duration * 1000) {
+              var p = timeGap / (duration * 1000);
+              var nextIndex = index + 1;
+              var v;
+
+              if (nextIndex < animatePos.length) {
+                v = p * (animatePos[nextIndex] - animatePos[index]) + animatePos[index];
+              } else {
+                nextIndex = 0;
+                v = (1 - p) * animatePos[index];
+              }
+
+              setControlTranslate(v);
+            }
+
+            animationId = window.requestAnimationFrame(_animation);
+          } else {
+            index = index < times ? index + 1 : 0;
+            initTime = 0;
+            animationId = window.requestAnimationFrame(_animation);
+          }
+        };
+
+        animationId = window.requestAnimationFrame(_animation);
+      }
+
+      controlEl.current.addEventListener("mousedown", mouseDownHandle);
+      return function () {
+        controlEl.current.removeEventListener("mousedown", mouseDownHandle);
+        svg.current.removeEventListener("mouseenter", setAnimationHoverStopTrue);
+        svg.current.removeEventListener("mouseleave", setAnimationHoverStopFalse);
+        window.cancelAnimationFrame(animationId);
+      };
+    }
+  }, [JSON.stringify(animation), control]);
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      controlChartTooltipShow = _useState4[0],
+      setControlChartTooltipShow = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(undefined),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      controlChartTooltipXName = _useState6[0],
+      setControlChartTooltipXName = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(undefined),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      controlChartTooltipX = _useState8[0],
+      setControlChartTooltipX = _useState8[1];
+
+  var controlChartTooltipData = (0, _react.useMemo)(function () {
+    return controlChartTooltipXName !== undefined && originData.filter(function (d) {
+      return d.x === controlChartTooltipXName;
+    });
+  }, [controlChartTooltipXName, originData]);
+
+  var _useState9 = (0, _react.useState)(axisX.ticks.map(function (tick) {
+    return {
+      tick: tick,
+      isShow: false
+    };
+  })),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      controlChartIndicatorList = _useState10[0],
+      setControlChartIndicatorList = _useState10[1];
+
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
     style: style,
     width: width,
@@ -163,7 +341,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onMouseEnter: function onMouseEnter() {
       setIsHover(true);
     },
-    onMouseMove: setIndex,
     onMouseLeave: function onMouseLeave(e) {
       setIsHover(false);
       setIndex(e);
@@ -182,7 +359,33 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     axis: axisX,
     config: background,
     bandLength: bandLength
-  }))), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
+  }))), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
+    var config = item.axisType == "x" ? axisX : item;
+    return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
+      ref: function ref(d) {
+        axisElList.current[index] = d;
+      },
+      triggerClick: onInteraction,
+      xLineRange: xLineRange,
+      yLineRange: yLineRange,
+      isControlChart: isControlChart,
+      controlConfig: control
+    }, config, {
+      key: index
+    }));
+  }), isControlChart && control && /*#__PURE__*/_react["default"].createElement(_.Control, {
+    ref: controlEl,
+    props: {
+      control: control,
+      axes: axes,
+      series: series,
+      xLineRange: xLineRange,
+      yLineRange: yLineRange,
+      marginTop: marginTop,
+      axisX: axisX,
+      bandLength: bandLength
+    }
+  }), showTooltip && !isControlChart && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
     style: isVertical ? {
       width: xLineRange + marginRight + marginLeft,
       height: yLineRange,
@@ -190,18 +393,33 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     } : {
       width: xLineRange,
       height: yLineRange + marginTop + marginBottom,
-      transform: "translateY(".concat(-marginTop, "px)") // overflow:'visible'
-      // paddingTop:marginTop
-
+      transform: "translateY(".concat(-marginTop, "px)")
     }
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "100%",
     height: "100%",
+    ref: seriesEl,
     style: {
       overflow: "visible",
       transform: isVertical ? "translateX(".concat(marginRight, "px)") : "translateY(".concat(marginTop, "px)")
     }
-  }, series.map(function (_ref2, index) {
+  }, /*#__PURE__*/_react["default"].createElement("g", null, isControlChart && controlChartIndicatorList.map(function (item, index) {
+    var x = axisX.scaler(item.tick);
+    return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
+      key: index
+    }, indicator, {
+      height: chartHeight,
+      width: indicatorWidth,
+      x: x - indicatorWidth / 2,
+      isControlChart: isControlChart,
+      xName: item.tick,
+      setControlChartTooltipXName: setControlChartTooltipXName,
+      setControlChartTooltipX: setControlChartTooltipX,
+      setControlChartTooltipShow: setControlChartTooltipShow,
+      controlChartIndicatorList: controlChartIndicatorList,
+      setControlChartIndicatorList: setControlChartIndicatorList
+    }));
+  })), series.map(function (_ref2, index) {
     var Component = _ref2.Component,
         yOrZ = _ref2.yOrZ,
         config = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
@@ -211,8 +429,15 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     }, config, {
       bandLength: bandLength,
       xAxis: axisX,
-      yAxis: yAxis,
-      triggerClick: onInteraction
+      yAxis: yAxis // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
+      ,
+      isControlChart: isControlChart,
+      setControlChartTooltipXName: setControlChartTooltipXName,
+      setControlChartTooltipX: setControlChartTooltipX,
+      setControlChartTooltipShow: setControlChartTooltipShow,
+      indicatorWidth: indicatorWidth,
+      triggerClick: onInteraction,
+      setControlChartIndicatorList: setControlChartIndicatorList
     }));
   }), series.map(function (_ref3, index) {
     var Component = _ref3.Component,
@@ -227,16 +452,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       yAxis: yAxis,
       triggerClick: onInteraction
     }));
-  }))), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
-    var config = item.axisType == 'x' ? axisX : item;
-    return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
-      triggerClick: onInteraction,
-      xLineRange: xLineRange,
-      yLineRange: yLineRange
-    }, config, {
-      key: index
-    }));
-  }), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
+  }))), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
     var yOrZ = baseLineConfig[index].line.yOrZ;
     var yAxis = axes.get(yOrZ);
     return yAxis && /*#__PURE__*/_react["default"].createElement(_.BaseLine, {
@@ -253,7 +469,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     filterData: filterData,
     series: series
-  })), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
+  })), showTooltip && !isControlChart && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
     isVertical: isVertical
   }, tooltip, {
     data: tooltipData,
@@ -264,6 +480,17 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     series: series,
     width: width,
     height: height
+  })), controlChartTooltipShow && isControlChart && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
+    isVertical: isVertical
+  }, tooltip, {
+    data: controlChartTooltipData,
+    x: controlChartTooltipX - (axisX.controlEnd - axisX.end) * curControlPercent.current,
+    marginLeft: marginLeft,
+    marginTop: marginTop,
+    tickName: controlChartTooltipXName,
+    series: series,
+    width: width,
+    height: height
   })), brush && /*#__PURE__*/_react["default"].createElement(_.Brush, {
     config: brush,
     width: width

package/lib/components/ChartContainer.js

@@ -51,12 +51,13 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     onMouseMove: onMouseMove,
     ref: ref,
     style: _objectSpread({
-      position: 'absolute',
+      overflow: "visible",
+      position: "absolute",
       width: width,
       height: height
     }, style)
   }, /*#__PURE__*/_react["default"].createElement("g", {
-    transform: 'translate(' + marginLeft + ', ' + marginTop + ')'
+    transform: "translate(" + marginLeft + ", " + marginTop + ")"
   }, children));
 }));
 

package/lib/components/Control.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _d3Scale = require("d3-scale");
+
+var _excluded = ["Component", "yOrZ"];
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$props = props.props,
+      control = _props$props.control,
+      axes = _props$props.axes,
+      series = _props$props.series,
+      xLineRange = _props$props.xLineRange,
+      yLineRange = _props$props.yLineRange,
+      marginTop = _props$props.marginTop,
+      axisX = _props$props.axisX,
+      bandLength = _props$props.bandLength;
+
+  var _axisX = _objectSpread(_objectSpread({}, axisX), {}, {
+    scaler: axisX.controlDragScaler
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    style: {
+      width: xLineRange,
+      height: control.height,
+      backgroundColor: control.color,
+      // padding: ` 0 ${control.margin.left}px 0  ${control.margin.right}px`,
+      transform: "translateY(".concat(yLineRange + marginTop, "px)")
+    }
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "100%",
+    height: "100%"
+  }, series.map(function (_ref, index) {
+    var Component = _ref.Component,
+        yOrZ = _ref.yOrZ,
+        config = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    var yAxis = axes.get(yOrZ);
+    var cloneYAxis = JSON.parse(JSON.stringify(yAxis)); //todo range
+
+    cloneYAxis.scaler = (0, _d3Scale.scaleLinear)().domain(yAxis.domain).range([control.height, 0]);
+    return yAxis && Component && /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
+      key: index
+    }, config, {
+      bandLength: bandLength,
+      xAxis: _axisX,
+      yAxis: cloneYAxis
+    }));
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    ref: ref,
+    height: control.height,
+    width: xLineRange * control.drag.width / 100,
+    fill: control.drag.color
+  }))));
+}));
+
+exports["default"] = _default;