@easyv/charts 1.4.34 → 1.4.36

package/lib/components/CartesianChart.js

@@ -25,8 +25,6 @@ var _context = require("../context");
 
 var _ = require(".");
 
-var _utils = require("../utils");
-
 var _excluded = ["Component", "yOrZ"],
     _excluded2 = ["Component", "yOrZ"];
 
@@ -70,8 +68,6 @@ 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,
@@ -86,23 +82,65 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       isHover = _useState2[0],
       setIsHover = _useState2[1];
 
-  var _useContext = (0, _react.useContext)(_context.chartContext),
-      chartWidth = _useContext.width,
-      chartHeight = _useContext.height,
-      triggerOnRelative = _useContext.triggerOnRelative,
-      onEmit = _useContext.onEmit;
-
+  var chartWidth = context.width,
+      chartHeight = context.height,
+      triggerOnRelative = context.triggerOnRelative,
+      onEmit = context.onEmit;
+  var xLineRange = chartWidth;
+  var yLineRange = chartHeight; //获取控制条相关的参数
+
+  var isControl = false;
+  var controlWidth = 0;
+  var controlBarWidth = 0;
+  var dragPercent = 1;
+  var controlHeight = 0;
+
+  if (control) {
+    var _height = control.height,
+        _control$margin = control.margin,
+        left = _control$margin.left,
+        right = _control$margin.right,
+        dragWidth = control.drag.width;
+    isControl = true;
+    controlHeight = _height;
+    controlWidth = width - left - right;
+    dragPercent = dragWidth / 100;
+    controlBarWidth = controlWidth * dragPercent;
+  }
+
+  var _useState3 = (0, _react.useState)({
+    isC: isControl,
+    cWidth: controlWidth,
+    cHeight: controlHeight,
+    cBarWidth: controlBarWidth,
+    cPercent: dragPercent
+  }),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      controlInfo = _useState4[0],
+      setControlInfo = _useState4[1];
+
+  var cWidth = controlInfo.cWidth,
+      cHeight = controlInfo.cHeight,
+      cBarWidth = controlInfo.cBarWidth,
+      cPercent = controlInfo.cPercent;
+  yLineRange -= cHeight;
+  (0, _react.useEffect)(function () {
+    setControlInfo({
+      isC: isControl,
+      cWidth: controlWidth,
+      cHeight: controlHeight,
+      cBarWidth: controlBarWidth,
+      cPercent: dragPercent
+    });
+  }, [JSON.stringify(control)]);
   var svg = (0, _react.useRef)();
   var axes = (0, _hooks.useAxes)({
     axes: axesConfig,
     context: context,
-    isControlChart: isControlChart,
-    control: control
+    controlInfo: controlInfo
   });
   var aiData = aiFormatter ? aiFormatter(originData, axes, series) : (0, _hooks.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;
+  var axisX = (0, _hooks.useCarouselAxisX)(axes.get("x"), animation, isHover, controlInfo);
   (0, _react.useEffect)(function () {
     if (aiData.length) {
       if (!window.aiData) {
@@ -126,7 +164,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     marginLeft: marginLeft,
     marginTop: marginTop,
     width: chartWidth,
-    height: chartHeight,
+    height: yLineRange,
     axisX: axisX,
     isHover: isHover,
     config: tooltipConfig
@@ -142,14 +180,14 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }, [tickName, originData]);
   var showTooltip = !!(tooltipData && tooltipData.length && (auto || manual));
   var isVertical = axisX.direction === "vertical";
-  var indicatorWidth = indicator.width * axisX.step / 100;
+  var indicatorWidth = indicator.width * (control ? axisX.controlStep : axisX.step) / 100;
   var position = axisX.scaler(tickName) - indicatorWidth / 2;
   var indicatorAttr = isVertical ? {
     width: chartWidth,
     height: indicatorWidth,
     y: position
   } : {
-    height: chartHeight,
+    height: yLineRange,
     width: indicatorWidth,
     x: position
   };
@@ -170,168 +208,167 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   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 controlTimer = (0, _react.useRef)(); //控制条的动画计时器
 
-      var setControlTranslate = function setControlTranslate(x) {
-        var moveLen = range(x);
-        controlEl.current.style.transform = "translateX(".concat(moveLen, "px)"); //计算出当前位移的百分比
+  var ctlBarX = (0, _react.useRef)(0); //控制条的滑块偏移值
 
-        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 isWorking = (0, _react.useRef)(false); //控制条是否正在进行各种操作
 
-      var mouseDownHandle = function mouseDownHandle(e) {
-        var mouseMoveHandle = function mouseMoveHandle(e) {
-          //当前位移的距离
-          if (isDragging) {
-            movementX += e.movementX;
-            setControlTranslate(movementX + rawTranslateX);
-          }
-        };
+  var range = function range(num) {
+    var _num = num;
+    var min = 0;
+    var max = cWidth - cBarWidth;
+    _num = Math.max(_num, min);
+    _num = Math.min(_num, max);
+    return _num;
+  }; //设置滑块和图表主体的偏移值
 
-        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 setControlTranslate = function setControlTranslate(x, needSave) {
+    var controlEnd = axisX.controlEnd,
+        start = axisX.start;
+    var moveLen = range(x);
+    if (needSave) ctlBarX.current = moveLen;
+    controlEl.current.style.transform = "translate(".concat(moveLen, "px,0)"); //计算出当前位移的百分比
 
-      var animationHoverStop;
+    var percent = moveLen / (cWidth - cBarWidth);
+    var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
+    curControlPercent.current = percent;
+    seriesEl.current.style.transform = "translate(".concat(translateX, "px,").concat(marginTop, "px)");
+    axisElList.current[2].style.transform = "translate(".concat(translateX, "px,", 0, "px)");
+  }; //设置控制条是否正在进行拖拽/缩放操作
 
-      var setAnimationHoverStopTrue = function setAnimationHoverStopTrue() {
-        animationHoverStop = true;
-      };
 
-      var setAnimationHoverStopFalse = function setAnimationHoverStopFalse() {
-        animationHoverStop = false;
-      };
+  var setWorking = function setWorking(bool) {
+    isWorking.current = bool;
+  };
 
-      svg.current.addEventListener("mouseenter", setAnimationHoverStopTrue);
-      svg.current.addEventListener("mouseleave", setAnimationHoverStopFalse); //控制图轮播动画逻辑
+  (0, _react.useEffect)(function () {
+    if (controlEl.current && control) {
+      var isEnter = false; //控制条轮播动画是否处于暂停状态
 
       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;
+      var startAnimate = function startAnimate() {
+        var loopInterval = interval * 1000,
+            tranDuration = duration * 1000;
+        var loopTime,
+            timeGap,
+            toRight = true;
 
-      if (animation.show) {
-        var initTime, timeGap;
+        var transition = function transition(timeStamp) {
+          if (!loopTime) loopTime = timeStamp;
 
-        var _animation = function _animation(timestamp) {
-          if (!initTime) {
-            initTime = timestamp;
-          }
-
-          if (animationHoverStop && hover) {
-            initTime = timestamp - timeGap;
-          }
+          if (!isEnter && !isWorking.current) {
+            if (timeStamp - loopTime < tranDuration) {
+              var percent = Math.min(1, (timeStamp - loopTime) / tranDuration);
 
-          timeGap = timestamp - initTime;
+              if (toRight) {
+                setControlTranslate(cBarWidth * percent + ctlBarX.current);
+              } else {
+                setControlTranslate(ctlBarX.current * (1 - percent));
+              }
 
-          if (timeGap < (interval + duration) * 1000) {
-            if (timeGap < duration * 1000) {
-              var p = timeGap / (duration * 1000);
-              var nextIndex = index + 1;
-              var v;
+              controlTimer.current = requestAnimationFrame(transition);
+            } else {
+              loopTime = timeStamp;
 
-              if (nextIndex < animatePos.length) {
-                v = p * (animatePos[nextIndex] - animatePos[index]) + animatePos[index];
+              if (toRight) {
+                setControlTranslate(cBarWidth + ctlBarX.current, true);
               } else {
-                nextIndex = 0;
-                v = (1 - p) * animatePos[index];
+                setControlTranslate(0, true);
               }
 
-              setControlTranslate(v);
+              controlTimer.current = requestAnimationFrame(loop);
             }
+          } else {
+            loopTime = timeStamp - timeGap;
+            controlTimer.current = requestAnimationFrame(transition);
+          }
 
-            animationId = window.requestAnimationFrame(_animation);
+          timeGap = timeStamp - loopTime;
+        };
+
+        var loop = function loop(timeStamp) {
+          if (!loopTime) loopTime = timeStamp;
+
+          if (!isEnter && !isWorking.current) {
+            if (timeStamp - loopTime < loopInterval) {
+              controlTimer.current = requestAnimationFrame(loop);
+            } else {
+              loopTime = timeStamp;
+              if (ctlBarX.current == cWidth - cBarWidth) toRight = false;else toRight = true;
+              controlTimer.current = requestAnimationFrame(transition);
+            }
           } else {
-            index = index < times ? index + 1 : 0;
-            initTime = 0;
-            animationId = window.requestAnimationFrame(_animation);
+            loopTime = timeStamp - timeGap;
+            controlTimer.current = requestAnimationFrame(loop);
           }
+
+          timeGap = timeStamp - loopTime;
         };
 
-        animationId = window.requestAnimationFrame(_animation);
-      }
+        controlTimer.current = requestAnimationFrame(loop);
+      };
 
-      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);
+      var mouseenter = function mouseenter() {
+        isEnter = true;
       };
-    }
-  }, [JSON.stringify(animation), control]);
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      controlChartTooltipShow = _useState4[0],
-      setControlChartTooltipShow = _useState4[1];
+      var mouseleave = function mouseleave() {
+        isEnter = false;
+      };
 
-  var _useState5 = (0, _react.useState)(undefined),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      controlChartTooltipXName = _useState6[0],
-      setControlChartTooltipXName = _useState6[1];
+      if (hover) {
+        svg.current.addEventListener("mouseenter", mouseenter);
+        svg.current.addEventListener("mouseleave", mouseleave);
+        controlEl.current.addEventListener("mouseenter", mouseenter);
+        controlEl.current.addEventListener("mouseleave", mouseleave);
+      }
 
-  var _useState7 = (0, _react.useState)(undefined),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      controlChartTooltipX = _useState8[0],
-      setControlChartTooltipX = _useState8[1];
+      if (show) {
+        startAnimate();
+      }
 
-  var controlChartTooltipData = (0, _react.useMemo)(function () {
-    return controlChartTooltipXName !== undefined && originData.filter(function (d) {
-      return d.x === controlChartTooltipXName;
-    });
-  }, [controlChartTooltipXName, originData]);
+      return function () {
+        svg.current.removeEventListener("mouseenter", mouseenter);
+        svg.current.removeEventListener("mouseleave", mouseleave);
+        controlEl.current.removeEventListener("mouseenter", mouseenter);
+        controlEl.current.removeEventListener("mouseleave", mouseleave);
+        cancelAnimationFrame(controlTimer.current);
+      };
+    }
+  }, [JSON.stringify(animation), control]); //初始化控制图提示框状态的函数
 
-  var _useState9 = (0, _react.useState)(axisX.ticks.map(function (tick) {
+  var initCtlTip = function initCtlTip() {
     return {
-      tick: tick,
-      isShow: false
+      show: false,
+      xName: "",
+      x: undefined,
+      indicatorList: axisX.ticks.map(function (tick) {
+        return {
+          tick: tick,
+          isShow: false
+        };
+      })
     };
-  })),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      controlChartIndicatorList = _useState10[0],
-      setControlChartIndicatorList = _useState10[1];
+  };
 
+  var _useState5 = (0, _react.useState)(initCtlTip),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      ctlTip = _useState6[0],
+      setCtlTip = _useState6[1];
+
+  var showCtl = ctlTip.show,
+      ctlXName = ctlTip.xName,
+      ctlX = ctlTip.x,
+      ctlIndicatorList = ctlTip.indicatorList;
+  var controlChartTooltipData = ctlXName && originData.filter(function (d) {
+    return d.x === ctlXName;
+  });
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
     style: style,
     width: width,
@@ -356,7 +393,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     width: "100%",
     height: "100%"
   }, /*#__PURE__*/_react["default"].createElement(_.Background, {
-    length: isVertical ? chartWidth : chartHeight,
+    length: isVertical ? chartWidth : yLineRange,
     axis: axisX,
     config: background,
     bandLength: bandLength
@@ -369,24 +406,11 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       triggerClick: onInteraction,
       xLineRange: xLineRange,
       yLineRange: yLineRange,
-      isControlChart: isControlChart,
-      controlConfig: control
+      controlInfo: controlInfo
     }, 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", {
+  }), showTooltip && !control && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
     style: isVertical ? {
       width: xLineRange + marginRight + marginLeft,
       height: yLineRange,
@@ -404,21 +428,18 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       overflow: "visible",
       transform: isVertical ? "translateX(".concat(marginRight, "px)") : "translateY(".concat(marginTop, "px)")
     }
-  }, /*#__PURE__*/_react["default"].createElement("g", null, isControlChart && controlChartIndicatorList.map(function (item, index) {
+  }, /*#__PURE__*/_react["default"].createElement("g", null, control && ctlIndicatorList.map(function (item, index) {
     var x = axisX.scaler(item.tick);
     return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
       key: index
     }, indicator, {
-      height: chartHeight,
+      height: yLineRange,
       width: indicatorWidth,
       x: x - indicatorWidth / 2,
-      isControlChart: isControlChart,
+      isControlChart: !!control,
       xName: item.tick,
-      setControlChartTooltipXName: setControlChartTooltipXName,
-      setControlChartTooltipX: setControlChartTooltipX,
-      setControlChartTooltipShow: setControlChartTooltipShow,
-      controlChartIndicatorList: controlChartIndicatorList,
-      setControlChartIndicatorList: setControlChartIndicatorList
+      setCtlTip: setCtlTip,
+      ctlIndicatorList: ctlIndicatorList
     }));
   })), series.map(function (_ref2, index) {
     var Component = _ref2.Component,
@@ -432,13 +453,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       xAxis: axisX,
       yAxis: yAxis // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
       ,
-      isControlChart: isControlChart,
-      setControlChartTooltipXName: setControlChartTooltipXName,
-      setControlChartTooltipX: setControlChartTooltipX,
-      setControlChartTooltipShow: setControlChartTooltipShow,
+      isControlChart: !!control,
       indicatorWidth: indicatorWidth,
       triggerClick: onInteraction,
-      setControlChartIndicatorList: setControlChartIndicatorList
+      setCtlTip: setCtlTip
     }));
   }), series.map(function (_ref3, index) {
     var Component = _ref3.Component,
@@ -467,10 +485,25 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       axisX: axisX,
       data: item
     });
-  })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
+  })), control && /*#__PURE__*/_react["default"].createElement(_.Control, {
+    ref: controlEl,
+    actions: {
+      setX: setControlTranslate,
+      setWorking: setWorking,
+      setControlInfo: setControlInfo
+    },
+    props: {
+      control: control,
+      axes: axes,
+      series: series,
+      width: width,
+      top: chartHeight + marginTop,
+      bandLength: bandLength
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     filterData: filterData,
     series: series
-  })), showTooltip && !isControlChart && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
+  })), showTooltip && !control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
     isVertical: isVertical
   }, tooltip, {
     data: tooltipData,
@@ -481,14 +514,14 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     series: series,
     width: width,
     height: height
-  })), controlChartTooltipShow && isControlChart && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
+  })), showCtl && !!control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
     isVertical: isVertical
   }, tooltip, {
     data: controlChartTooltipData,
-    x: controlChartTooltipX - (axisX.controlEnd - axisX.end) * curControlPercent.current,
+    x: ctlX - (axisX.controlEnd + axisX.start / cPercent - chartWidth) * curControlPercent.current,
     marginLeft: marginLeft,
     marginTop: marginTop,
-    tickName: controlChartTooltipXName,
+    tickName: ctlXName,
     series: series,
     width: width,
     height: height