@easyv/charts 1.4.34 → 1.4.36

package/lib/components/Control.js

@@ -13,8 +13,6 @@ 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");
@@ -25,32 +23,80 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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,
+  var _props$actions = props.actions,
+      setX = _props$actions.setX,
+      setWorking = _props$actions.setWorking,
+      setControlInfo = _props$actions.setControlInfo,
+      _props$props = props.props,
+      _props$props$control = _props$props.control,
+      height = _props$props$control.height,
+      color = _props$props$control.color,
+      _props$props$control$ = _props$props$control.drag,
+      dragColor = _props$props$control$.color,
+      dragWidth = _props$props$control$.width,
+      _props$props$control$2 = _props$props$control.margin,
+      left = _props$props$control$2.left,
+      right = _props$props$control$2.right,
       axes = _props$props.axes,
       series = _props$props.series,
-      xLineRange = _props$props.xLineRange,
-      yLineRange = _props$props.yLineRange,
-      marginTop = _props$props.marginTop,
-      axisX = _props$props.axisX,
+      width = _props$props.width,
+      top = _props$props.top,
       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", {
+  var barWidth = width - left - right;
+  var xAxis = axes.get("x");
+  var barRef = (0, _react.useRef)();
+  var barStyle = {
+    position: "absolute",
+    top: 0,
+    width: barWidth * dragWidth / 100,
+    display: "flex",
+    justifyContent: "space-between",
+    background: dragColor
+  };
+  var dragStyle = {
+    height: height,
+    flex: 1,
+    cursor: "move"
+  };
+  var controllerStyle = {
+    position: "relative",
+    width: 12,
+    height: height,
+    padding: "0 5px",
+    cursor: "col-resize",
+    background: "rgb(2, 176, 249)",
+    WebkitBackgroundClip: "content-box"
+  };
+
+  var down = function down() {
+    var transform = ref.current.style.transform;
+    var movementX = 0;
+    var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
+
+    var mouseMoveHandle = function mouseMoveHandle(e) {
+      //当前位移的距离
+      movementX += e.movementX;
+      setX(movementX + rawTranslateX, true);
+    };
+
+    var mouseUpHandle = function mouseUpHandle(e) {
+      setWorking(false);
+      document.removeEventListener("mousemove", mouseMoveHandle);
+      document.removeEventListener("mouseup", mouseUpHandle);
+    };
+
+    document.addEventListener("mousemove", mouseMoveHandle);
+    document.addEventListener("mouseup", mouseUpHandle);
+    setWorking(true);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
     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)")
+      width: barWidth,
+      height: height,
+      backgroundColor: color,
+      transform: "translate(".concat(left, "px,").concat(top, "px)")
     }
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "100%",
@@ -62,20 +108,22 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     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]);
+    cloneYAxis.scaler = (0, _d3Scale.scaleLinear)().domain(yAxis.domain).range([height, 0]);
     return yAxis && Component && /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
       key: index
     }, config, {
       bandLength: bandLength,
-      xAxis: _axisX,
+      xAxis: xAxis,
       yAxis: cloneYAxis
     }));
-  }), /*#__PURE__*/_react["default"].createElement("rect", {
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     ref: ref,
-    height: control.height,
-    width: xLineRange * control.drag.width / 100,
-    fill: control.drag.color
-  }))));
+    style: barStyle
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: dragStyle,
+    onMouseDown: down,
+    ref: barRef
+  })));
 }));
 
 exports["default"] = _default;

package/lib/components/Indicator.js

@@ -27,20 +27,12 @@ var _default = function _default(_ref) {
       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;
+      ctlIndicatorList = _ref.ctlIndicatorList,
+      setCtlTip = _ref.setCtlTip;
   var isShow = true;
 
-  if (isControlChart && controlChartIndicatorList) {
-    isShow = controlChartIndicatorList.find(function (item) {
+  if (isControlChart && ctlIndicatorList) {
+    isShow = ctlIndicatorList.find(function (item) {
       return item.tick === xName;
     }).isShow;
   }
@@ -51,34 +43,38 @@ var _default = function _default(_ref) {
     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;
-            }
-          });
+        setCtlTip(function (pre) {
+          return {
+            show: true,
+            x: x + width / 2,
+            xName: xName,
+            indicatorList: pre.indicatorList.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
-            });
-          });
+        setCtlTip(function (pre) {
+          return {
+            show: false,
+            x: undefined,
+            xName: undefined,
+            indicatorList: pre.indicatorList.map(function (item) {
+              return _objectSpread(_objectSpread({}, item), {}, {
+                isShow: false
+              });
+            })
+          };
         });
-        setControlChartTooltipShow(false);
-        setControlChartTooltipXName(undefined);
-        setControlChartTooltipX(undefined);
       }
     },
     fill: isShow ? color : "transparent",

package/lib/components/Label.js

@@ -43,15 +43,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       yScaler = _ref$yAxis.scaler,
       isClipAxis = _ref$yAxis.isClipAxis,
       clipValue = _ref$yAxis.clipValue,
-      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;
+      triggerClick = _ref.triggerClick;
   var lineType = config.hasOwnProperty("line"); //  堆叠处理
 
   var showIcon = icon && icon.show;
@@ -131,38 +123,6 @@ 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/hooks/useAxes.js

@@ -87,10 +87,15 @@ var scales = {
 var _default = function _default(_ref) {
   var axes = _ref.axes,
       _ref$context = _ref.context,
-      width = _ref$context.width,
-      height = _ref$context.height,
-      isControlChart = _ref.isControlChart,
-      controlConfig = _ref.control;
+      chartWidth = _ref$context.width,
+      chartHeight = _ref$context.height,
+      controlInfo = _ref.controlInfo;
+  var isC = controlInfo.isC,
+      cHeight = controlInfo.cHeight,
+      cWidth = controlInfo.cWidth,
+      cPercent = controlInfo.cPercent;
+  var width = chartWidth;
+  var height = chartHeight - cHeight;
 
   var _axes = (0, _react.useMemo)(function () {
     var tmp = new Map();
@@ -122,9 +127,7 @@ var _default = function _default(_ref) {
           bottomClipAxisStep = item.bottomClipAxisStep,
           topClipAxisStep = item.topClipAxisStep,
           clipValue = item.clipValue,
-          clipPosition = item.clipPosition,
-          clipDifferenceValue = item.clipDifferenceValue,
-          clipAxisMode = item.clipAxisMode; //如果是断轴类型，输出一套完全不同的values
+          clipPosition = item.clipPosition; //如果是断轴类型，输出一套完全不同的values
 
       /**
        * 获取轴的：朝向direction，起点位置start，终点位置end
@@ -132,7 +135,7 @@ var _default = function _default(_ref) {
        * @param {*} width
        * @param {*} height
        * @param {*} paddingOuter
-       * @returns {start,end,direction}
+       * @returns { start, end, direction }
        */
 
       function getChartsConfig(orientation, width, height, paddingOuter) {
@@ -323,10 +326,10 @@ var _default = function _default(_ref) {
         if (type !== "ordinal") scaler.clamp(true); //scaler.nice().clamp(true)
 
         var allTicks = ticks ? ticks : scaler.ticks ? scaler.ticks(tickCount) : scaler.domain();
-        var _ticks = allTicks; //
+        var _ticks = allTicks;
 
         if (type === "ordinal") {
-          if (carousel === false) {
+          if (carousel === false || isC) {
             _ticks = (0, _utils.getTicksOfAxis)(_ticks, +tickCount, showLast);
           }
         } else {
@@ -363,7 +366,33 @@ var _default = function _default(_ref) {
           }
         }
 
-        tmp.set(axisType, _objectSpread(_objectSpread({}, item), {}, {
+        var _step2 = _lengthWithoutPaddingOuter / allTicks.length;
+
+        var controlCfg = {
+          controlStep: 0,
+          controlDragScaler: null
+        };
+
+        if (isC) {
+          controlCfg.controlStep = _step2 / cPercent;
+          controlCfg.controlDragScaler = scaler.copy().range([_start / cPercent, _end / cPercent]);
+
+          var _getChartsConfig3 = getChartsConfig(orientation, cWidth, height, paddingOuter),
+              start_ = _getChartsConfig3.start,
+              end_ = _getChartsConfig3.end,
+              direction_ = _getChartsConfig3.direction,
+              outer = _getChartsConfig3._paddingOuter,
+              len = _getChartsConfig3.length;
+
+          var _range = direction_ === "horizontal" ? [start_, end_] : direction_ === "vertical" ? [end_, start_] : [0, 0];
+
+          scaler = scales[type]().domain(newDomain).range(_range);
+          scaler.type = type;
+          var controlOuter = len - outer;
+          _step2 = controlOuter / allTicks.length;
+        }
+
+        tmp.set(axisType, _objectSpread(_objectSpread(_objectSpread({}, item), {}, {
           count: _count,
           isClipAxis: _isClipAxis,
           range: range,
@@ -374,8 +403,10 @@ var _default = function _default(_ref) {
           start: _start,
           end: _end,
           lengthWithoutPaddingOuter: _lengthWithoutPaddingOuter,
-          step: _lengthWithoutPaddingOuter / allTicks.length,
+          step: _step2
+        }, controlCfg), {}, {
           allTicks: allTicks,
+          rawTicks: _ticks,
           ticks: _ticks
         }));
       }

package/lib/hooks/useCarouselAxisX.js

@@ -33,15 +33,15 @@ var initialState = {
  * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
  */
 
-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 _default = function _default(axis, config, isHover, controlInfo) {
   var show = config.show,
       interval = config.interval,
       duration = config.duration,
       hover = config.hover;
+  var isC = controlInfo.isC,
+      cPercent = controlInfo.cPercent;
   var time = duration + interval;
-  var tickCount = axis.tickCount,
+  var count = axis.tickCount,
       allTicks = axis.allTicks,
       scaler = axis.scaler,
       start = axis.start,
@@ -50,10 +50,12 @@ var _default = function _default(axis, config, isHover) {
       ticks = axis.ticks,
       lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter;
   var tickLength = ticks.length;
+  var tickCount = isC ? allTicks.length : count;
+  var scale = isC ? cPercent : 1;
 
-  var _end = isControlChart && controlConfig ? end / (controlConfig.drag.width / 100) : end;
+  var _start = start / scale;
 
-  var controlDragScaler = scaler.copy().range([start, end]);
+  var _end = end / scale;
 
   var _useState = (0, _react.useState)({
     scaler: scaler,
@@ -113,7 +115,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)({
@@ -133,7 +135,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)
               });
             });
           },
@@ -142,7 +144,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])
               });
             });
           },
@@ -155,7 +157,7 @@ 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)
               });
             });
           }
@@ -166,7 +168,7 @@ var _default = function _default(axis, config, isHover) {
 
       setState({
         step: step,
-        scaler: scaler.copy().domain(_ticks3).range([start, _end]),
+        scaler: scaler.copy().domain(_ticks3).range([_start, _end]),
         ticks: ticks
       });
     }
@@ -174,12 +176,9 @@ var _default = function _default(axis, config, isHover) {
     return function () {
       animation && animation.stop();
     };
-  }, [tickCount, allTicks, scaler, start, _end, step, ticks, lengthWithoutPaddingOuter, status, duration]);
+  }, [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
+    controlEnd: _end
   });
 };
 

package/lib/hooks/useFilterData.js

@@ -97,7 +97,27 @@ var _default = function _default(_ref) {
     });
   }, []);
   (0, _react.useEffect)(function () {
-    setSelected(getInitialSelected(series));
+    var map = getInitialSelected(series);
+
+    var _iterator2 = _createForOfIteratorHelper(map.entries()),
+        _step2;
+
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _step2$value = (0, _slicedToArray2["default"])(_step2.value, 1),
+            key = _step2$value[0];
+
+        if (selected.has(key)) {
+          map.set(key, selected.get(key));
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+
+    setSelected(map);
   }, [series]);
   return [{
     series: _series,

package/package.json

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

package/src/components/Axis.tsx

@@ -273,17 +273,16 @@ export default memo(
         yLineRange,
         clipAxisRange,
         //控制图相关
-        isControlChart,
-        controlConfig,
-        controlEnd,
+        controlInfo,
         rawTicks,
       }: any,
       ref
     ) => {
       if (!(on && ticks.length > 0)) return null;
       const { width, height } = useContext(chartContext);
+      const { cHeight, isC } = controlInfo;
       const x = orientation == "right" ? width : 0;
-      const y = orientation == "bottom" ? height : 0;
+      const y = orientation == "bottom" ? height-cHeight : 0;
 
       function drawAxisTickLine() {
         const draw = (ticks: any, scaler: any) => {
@@ -358,7 +357,7 @@ export default memo(
                 y1 < 0 ||
                 y1 > yLineRange
               ) ||
-                isControlChart) && (
+                isC) && (
                 <g key={index}>
                   {label && (
                     <Label
@@ -393,7 +392,7 @@ export default memo(
               })}
             </>
           );
-        } else if (isControlChart && orientation == "bottom") {
+        } else if (isC && orientation == "bottom") {
           return <>{draw(rawTicks, scaler)}</>;
         } else {
           return <>{draw(ticks, scaler)}</>;
@@ -472,7 +471,7 @@ export default memo(
             width={width}
             style={{
               overflow:
-                axisType === "x" && isControlChart ? "hidden":"visible",
+                axisType === "x" && isC ? "hidden":"visible",
             }}
           >
             <g transform={"translate(" + x + ", " + y + ")"}>