@easyv/charts 1.4.22 → 1.4.25

package/lib/components/Indicator.js

@@ -1,13 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-/**
- * 轴类图表移上去的指示框背景
- */
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+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 = function _default(_ref) {
   var color = _ref.color,
       height = _ref.height,
@@ -15,13 +22,67 @@ var _default = function _default(_ref) {
       _ref$x = _ref.x,
       x = _ref$x === void 0 ? 0 : _ref$x,
       _ref$y = _ref.y,
-      y = _ref$y === void 0 ? 0 : _ref$y;
+      y = _ref$y === void 0 ? 0 : _ref$y,
+      _ref$isControlChart = _ref.isControlChart,
+      isControlChart = _ref$isControlChart === void 0 ? false : _ref$isControlChart,
+      _ref$xName = _ref.xName,
+      xName = _ref$xName === void 0 ? null : _ref$xName,
+      _ref$setControlChartT = _ref.setControlChartTooltipShow,
+      setControlChartTooltipShow = _ref$setControlChartT === void 0 ? null : _ref$setControlChartT,
+      _ref$setControlChartT2 = _ref.setControlChartTooltipXName,
+      setControlChartTooltipXName = _ref$setControlChartT2 === void 0 ? null : _ref$setControlChartT2,
+      _ref$setControlChartT3 = _ref.setControlChartTooltipX,
+      setControlChartTooltipX = _ref$setControlChartT3 === void 0 ? null : _ref$setControlChartT3,
+      _ref$setControlChartI = _ref.setControlChartIndicatorList,
+      setControlChartIndicatorList = _ref$setControlChartI === void 0 ? null : _ref$setControlChartI,
+      _ref$controlChartIndi = _ref.controlChartIndicatorList,
+      controlChartIndicatorList = _ref$controlChartIndi === void 0 ? null : _ref$controlChartIndi;
+  var isShow = true;
+
+  if (isControlChart && controlChartIndicatorList) {
+    isShow = controlChartIndicatorList.find(function (item) {
+      return item.tick === xName;
+    }).isShow;
+  }
+
   return /*#__PURE__*/React.createElement("rect", {
     width: width,
     height: height,
     x: x,
+    onMouseEnter: function onMouseEnter() {
+      if (isControlChart) {
+        setControlChartIndicatorList(function (v) {
+          return v.map(function (item) {
+            if (item.tick === xName) {
+              return _objectSpread(_objectSpread({}, item), {}, {
+                isShow: true
+              });
+            } else {
+              return item;
+            }
+          });
+        });
+        setControlChartTooltipShow(true);
+        setControlChartTooltipXName(xName);
+        setControlChartTooltipX(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);
+      }
+    },
+    fill: isShow ? color : "transparent",
     y: y,
-    fill: color,
     stroke: "none"
   });
 };

package/lib/components/Label.js

@@ -43,7 +43,15 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       yScaler = _ref$yAxis.scaler,
       isClipAxis = _ref$yAxis.isClipAxis,
       clipValue = _ref$yAxis.clipValue,
-      triggerClick = _ref.triggerClick;
+      triggerClick = _ref.triggerClick,
+      indicatorWidth = _ref.indicatorWidth,
+      setControlChartTooltipShow = _ref.setControlChartTooltipShow,
+      setControlChartTooltipX = _ref.setControlChartTooltipX,
+      setControlChartTooltipXName = _ref.setControlChartTooltipXName,
+      _ref$isControlChart = _ref.isControlChart,
+      isControlChart = _ref$isControlChart === void 0 ? false : _ref$isControlChart,
+      _ref$setControlChartI = _ref.setControlChartIndicatorList,
+      setControlChartIndicatorList = _ref$setControlChartI === void 0 ? null : _ref$setControlChartI;
   var lineType = config.hasOwnProperty("line"); //  堆叠处理
 
   var showIcon = icon && icon.show;
@@ -123,6 +131,38 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     return /*#__PURE__*/React.createElement("g", {
       key: i,
       onClick: triggerClick,
+      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);
+        }
+      },
       style: {
         cursor: "pointer"
       },

package/lib/components/Marquee.js

@@ -58,7 +58,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     observe.current = new IntersectionObserver(function (entries) {
       var entrie = entries[0];
 
-      if (entrie.boundingClientRect.width < entrie.rootBounds.width) {
+      if (entrie.boundingClientRect.width <= entrie.rootBounds.width) {
         //表示文字全部可视
         cancelAnimationFrame(timer.current || 0);
         target.current.style.transform = "translate(0px,0px)"; //重置偏移

package/lib/components/index.js

@@ -72,6 +72,12 @@ Object.defineProperty(exports, "ConicalGradient", {
     return _ConicalGradient["default"];
   }
 });
+Object.defineProperty(exports, "Control", {
+  enumerable: true,
+  get: function get() {
+    return _Control["default"];
+  }
+});
 Object.defineProperty(exports, "ExtentData", {
   enumerable: true,
   get: function get() {
@@ -207,5 +213,7 @@ var _TextOverflow = _interopRequireDefault(require("./TextOverflow"));
 
 var _BaseLine = _interopRequireDefault(require("./BaseLine"));
 
+var _Control = _interopRequireDefault(require("./Control"));
+
 var Area = _Line["default"];
 exports.Area = Area;

package/lib/hooks/useAxes.js

@@ -88,7 +88,9 @@ var _default = function _default(_ref) {
   var axes = _ref.axes,
       _ref$context = _ref.context,
       width = _ref$context.width,
-      height = _ref$context.height;
+      height = _ref$context.height,
+      isControlChart = _ref.isControlChart,
+      controlConfig = _ref.control;
 
   var _axes = (0, _react.useMemo)(function () {
     var tmp = new Map();
@@ -364,7 +366,9 @@ var _default = function _default(_ref) {
         tmp.set(axisType, _objectSpread(_objectSpread({}, item), {}, {
           count: _count,
           isClipAxis: _isClipAxis,
+          range: range,
           scaler: scaler,
+          domain: domain,
           length: _length,
           direction: _direction,
           start: _start,

package/lib/hooks/useCarouselAxisX.js

@@ -34,6 +34,8 @@ var initialState = {
  */
 
 var _default = function _default(axis, config, isHover) {
+  var isControlChart = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var controlConfig = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
   var show = config.show,
       interval = config.interval,
       duration = config.duration,
@@ -49,6 +51,10 @@ var _default = function _default(axis, config, isHover) {
       lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter;
   var tickLength = ticks.length;
 
+  var _end = isControlChart && controlConfig ? end * (1 / (controlConfig.drag.width / 100)) : end;
+
+  var controlDragScaler = scaler.copy().range([start, end]);
+
   var _useState = (0, _react.useState)({
     scaler: scaler,
     step: step,
@@ -107,7 +113,7 @@ var _default = function _default(axis, config, isHover) {
         setState({
           step: _step,
           ticks: _ticks,
-          scaler: scaler.copy().domain(_ticks).range([start, end])
+          scaler: scaler.copy().domain(_ticks).range([start, _end])
         });
       } else {
         animation = (0, _popmotion.animate)({
@@ -127,7 +133,7 @@ var _default = function _default(axis, config, isHover) {
 
               return _objectSpread(_objectSpread({}, axis), {}, {
                 ticks: _ticks,
-                scaler: scaler.copy().range([start, end + _step]).domain(_ticks)
+                scaler: scaler.copy().range([start, _end + _step]).domain(_ticks)
               });
             });
           },
@@ -136,7 +142,7 @@ var _default = function _default(axis, config, isHover) {
               var scaler = axis.scaler,
                   step = axis.step;
               return _objectSpread(_objectSpread({}, axis), {}, {
-                scaler: scaler.copy().range([start + step * v, end + step + step * v])
+                scaler: scaler.copy().range([start + step * v, _end + step + step * v])
               });
             });
           },
@@ -149,18 +155,18 @@ var _default = function _default(axis, config, isHover) {
 
               return _objectSpread(_objectSpread({}, axis), {}, {
                 ticks: _ticks,
-                scaler: scaler.copy().range([start, end]).domain(_ticks)
+                scaler: scaler.copy().range([start, _end]).domain(_ticks)
               });
             });
           }
         });
       }
     } else {
-      var _ticks3 = scaler.type == 'linear' ? scaler.domain() : allTicks;
+      var _ticks3 = scaler.type == "linear" ? scaler.domain() : allTicks;
 
       setState({
         step: step,
-        scaler: scaler.copy().domain(_ticks3).range([start, end]),
+        scaler: scaler.copy().domain(_ticks3).range([start, _end]),
         ticks: ticks
       });
     }
@@ -168,8 +174,13 @@ var _default = function _default(axis, config, isHover) {
     return function () {
       animation && animation.stop();
     };
-  }, [tickCount, allTicks, scaler, start, end, step, ticks, lengthWithoutPaddingOuter, status, duration]);
-  return _objectSpread(_objectSpread({}, axis), state);
+  }, [tickCount, allTicks, scaler, start, _end, step, ticks, lengthWithoutPaddingOuter, status, duration]);
+  return _objectSpread(_objectSpread(_objectSpread({}, axis), state), {}, {
+    rawTicks: axis.ticks,
+    controlDragScaler: controlDragScaler,
+    controlEnd: _end,
+    isControlChart: isControlChart
+  });
 };
 
 exports["default"] = _default;
@@ -179,13 +190,14 @@ var getTicks = function getTicks(ticks, currentIndex, length) {
 
   var ticksLength = ticks.length;
   if (ticksLength <= length) return ticks;
-  var end = _currentIndex + length;
 
-  if (ticksLength < end) {
+  var _end = _currentIndex + length;
+
+  if (ticksLength < _end) {
     var prev = ticks.slice(_currentIndex, ticksLength);
-    var next = ticks.slice(0, end - ticksLength);
+    var next = ticks.slice(0, _end - ticksLength);
     return [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(next));
   }
 
-  return ticks.slice(_currentIndex, end);
+  return ticks.slice(_currentIndex, _end);
 };

package/lib/hooks/useTooltip.js

@@ -72,7 +72,7 @@ var _default = function _default(_ref) {
       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;
 
         var _name = _ticks.reduce(function (prev, current) {
           return Math.abs(scaler(prev) - position) > Math.abs(scaler(current) - position) ? current : prev;

package/package.json

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