@easyv/charts 1.4.37 → 1.4.39

package/lib/components/Axis.js

@@ -54,7 +54,7 @@ var defaultFormatter = function defaultFormatter(d, _ref) {
   return d + suffix;
 };
 
-var getAxesPath = function getAxesPath(orientation, _ref2) {
+var getAxesPath = function getAxesPath(orientation, _ref2, cHeight) {
   var width = _ref2.width,
       height = _ref2.height;
 
@@ -65,7 +65,7 @@ var getAxesPath = function getAxesPath(orientation, _ref2) {
 
     case "left":
     case "right":
-      return "M0, -0.5V" + (height + 0.5);
+      return "M0, -0.5V" + (height + 0.5 - cHeight);
   }
 };
 /**
@@ -119,14 +119,13 @@ var AxisLine = function AxisLine(_ref3) {
       show = _ref3$config.show,
       color = _ref3$config.color,
       lineWidth = _ref3$config.lineWidth,
+      cHeight = _ref3$config.cHeight,
       _ref3$isClipAxis = _ref3.isClipAxis,
       isClipAxis = _ref3$isClipAxis === void 0 ? false : _ref3$isClipAxis,
       _ref3$clipAxisRange = _ref3.clipAxisRange,
       clipAxisRange = _ref3$clipAxisRange === void 0 ? [] : _ref3$clipAxisRange;
   if (!show) return null;
   var context = (0, _react.useContext)(_context.chartContext);
-  var width = context.width,
-      height = context.height;
 
   if (isClipAxis) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, clipAxisRange.map(function (range, index) {
@@ -139,7 +138,7 @@ var AxisLine = function AxisLine(_ref3) {
     }));
   } else {
     return /*#__PURE__*/_react["default"].createElement("path", {
-      d: getAxesPath(orientation, context),
+      d: getAxesPath(orientation, context, cHeight),
       stroke: color,
       strokeWidth: lineWidth
     });
@@ -262,7 +261,6 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       tickLine = _ref6$config.tickLine,
       gridLine = _ref6$config.gridLine,
       unit = _ref6$config.unit,
-      config = _ref6.config,
       positions = _ref6.positions,
       xLineRange = _ref6.xLineRange,
       range = _ref6.range,
@@ -373,7 +371,9 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       transform: "translate(" + x + ", " + y + ")"
     }, /*#__PURE__*/_react["default"].createElement(AxisLine, {
       orientation: orientation,
-      config: axisLine,
+      config: _objectSpread(_objectSpread({}, axisLine), {}, {
+        cHeight: cHeight
+      }),
       range: range
     }), tickLine && ticks.map(function (tick, index) {
       var coordinate = scaler(tick);
@@ -402,7 +402,9 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     transform: "translate(" + x + ", " + y + ")"
   }, /*#__PURE__*/_react["default"].createElement(AxisLine, {
     orientation: orientation,
-    config: axisLine,
+    config: _objectSpread(_objectSpread({}, axisLine), {}, {
+      cHeight: cHeight
+    }),
     isClipAxis: isClipAxis,
     clipAxisRange: clipAxisRange
   }), tickLine && drawAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("svg", {

package/lib/components/Band.js

@@ -205,43 +205,46 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       style: {
         overflow: "visible",
         position: "relative",
-        pointerEvents: isControlChart ? "auto" : "none",
         cursor: "pointer"
       }
     }, attr, {
       onClick: triggerClick //enter和leave事件，用于控制图的提示框
       ,
       onMouseEnter: function onMouseEnter() {
-        setCtlTip(function (pre) {
-          return {
-            show: true,
-            x: xScaler(x),
-            xName: data.x,
-            indicatorList: pre.indicatorList.map(function (item) {
-              if (item.tick === data.x) {
-                return _objectSpread(_objectSpread({}, item), {}, {
-                  isShow: true
-                });
-              } else {
-                return item;
-              }
-            })
-          };
-        });
+        if (isControlChart) {
+          setCtlTip(function (pre) {
+            return {
+              show: true,
+              x: xScaler(x),
+              xName: data.x,
+              indicatorList: pre.indicatorList.map(function (item) {
+                if (item.tick === data.x) {
+                  return _objectSpread(_objectSpread({}, item), {}, {
+                    isShow: true
+                  });
+                } else {
+                  return item;
+                }
+              })
+            };
+          });
+        }
       },
       onMouseLeave: function onMouseLeave() {
-        setCtlTip(function (pre) {
-          return {
-            show: false,
-            x: undefined,
-            xName: undefined,
-            indicatorList: pre.indicatorList.map(function (item) {
-              return _objectSpread(_objectSpread({}, item), {}, {
-                isShow: false
-              });
-            })
-          };
-        });
+        if (isControlChart) {
+          setCtlTip(function (pre) {
+            return {
+              show: false,
+              x: undefined,
+              xName: undefined,
+              indicatorList: pre.indicatorList.map(function (item) {
+                return _objectSpread(_objectSpread({}, item), {}, {
+                  isShow: false
+                });
+              })
+            };
+          });
+        }
       },
       "data-data": JSON.stringify(data)
     }), headUrl && showHead && /*#__PURE__*/_react["default"].createElement("div", {

package/lib/components/Control.js

@@ -67,7 +67,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     cursor: "col-resize",
     background: "rgb(2, 176, 249)",
     WebkitBackgroundClip: "content-box"
-  };
+  }; //滑块的鼠标按下操作
 
   var down = function down() {
     var transform = ref.current.style.transform;
@@ -89,7 +89,15 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     document.addEventListener("mousemove", mouseMoveHandle);
     document.addEventListener("mouseup", mouseUpHandle);
     setWorking(true);
-  };
+  }; // //右手柄的鼠标按下逻辑
+  // const rightDown=()=>{
+  //   const move=(e)=>{
+  //   }
+  //   const up=()=>{
+  //   }
+  //   document.addEventListener()
+  // }
+
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {

package/lib/hooks/useAxes.js

@@ -35,7 +35,13 @@ var getCount = function getCount(num) {
 };
 
 var getNewDomain = function getNewDomain(domain, mode, step) {
-  var newDomain = [];
+  var extent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var _extent$min = extent.min,
+      bottom = _extent$min === void 0 ? "" : _extent$min,
+      _extent$max = extent.max,
+      top = _extent$max === void 0 ? "" : _extent$max;
+  var newDomain = []; //能进入这个函数，说明extent中min和max至少有一个是缺失的，如果max存在，意味着纵轴上限被固定
+
   var min = domain[0],
       max = domain[1];
   var minCount = Math.pow(10, getCount(min)),
@@ -43,17 +49,26 @@ var getNewDomain = function getNewDomain(domain, mode, step) {
 
   switch (mode) {
     case "count":
-      newDomain[0] = Math.floor(domain[0] / minCount) * minCount;
-      newDomain[1] = Math.ceil(domain[1] / maxCount) * maxCount;
+      newDomain[0] = bottom != "" ? bottom : Math.floor(domain[0] / minCount) * minCount;
+      newDomain[1] = top != "" ? top : Math.ceil(domain[1] / maxCount) * maxCount;
       break;
 
     case "step":
-      newDomain = [domain[0], domain[0]];
+      if (top != "") {
+        newDomain = [domain[1], domain[1]];
+
+        while (newDomain[0] > domain[0]) {
+          newDomain[0] -= step;
+        }
+      } else {
+        newDomain = [domain[0], domain[0]];
 
-      while (newDomain[1] < domain[1]) {
-        newDomain[1] += step;
+        while (newDomain[1] < domain[1]) {
+          newDomain[1] += step;
+        }
       }
 
+      break;
   }
 
   return newDomain;
@@ -320,7 +335,7 @@ var _default = function _default(_ref) {
         var fixedDomain = extent && extent.min != "" && extent.max != ""; //判断配置项中是否强制了最大最小值，如果已经被强制了，就不计算newDomain
 
         if (type !== "ordinal" && !isNaN(domain[1]) && !auto && !fixedDomain) {
-          newDomain = getNewDomain(domain, mode, _step);
+          newDomain = getNewDomain(domain, mode, _step, extent);
         }
 
         var scaler = scales[type]().domain(newDomain).range(range);

package/package.json

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

package/src/components/Axis.tsx

@@ -36,15 +36,16 @@ const defaultFormatter: (
 
 const getAxesPath: (
   orientation: Orientation,
-  { width, height }: Context
-) => string = (orientation, { width, height }) => {
+  { width, height }: Context,
+  cHeight:number
+) => string = (orientation, { width, height }, cHeight) => {
   switch (orientation) {
     case "top":
     case "bottom":
       return "M-0.5, 0H" + width;
     case "left":
     case "right":
-      return "M0, -0.5V" + (height + 0.5);
+      return "M0, -0.5V" + (height + 0.5 - cHeight);
   }
 };
 /**
@@ -99,13 +100,12 @@ const AxisLine: ({
   clipAxisRange,
 }: any) => ReactComponentElement<ComponentType> | null = ({
   orientation = defaultOrientation,
-  config: { show, color, lineWidth },
+  config: { show, color, lineWidth, cHeight },
   isClipAxis = false,
   clipAxisRange = [],
 }) => {
   if (!show) return null;
   const context: Context = useContext(chartContext);
-  const { width, height } = context;
   if (isClipAxis) {
     return (
       <>
@@ -124,7 +124,7 @@ const AxisLine: ({
   } else {
     return (
       <path
-        d={getAxesPath(orientation, context)}
+        d={getAxesPath(orientation, context, cHeight)}
         stroke={color}
         strokeWidth={lineWidth}
       />
@@ -263,7 +263,6 @@ export default memo(
         rotate,
         triggerClick,
         config: { on, label, axisLine, tickLine, gridLine, unit },
-        config,
         positions,
         xLineRange,
         range,
@@ -398,7 +397,6 @@ export default memo(
           return <>{draw(ticks, scaler)}</>;
         }
       }
-
       return (
         <g>
           {/* 绘制轴线和刻度 */}
@@ -413,7 +411,7 @@ export default memo(
                     >
                       <AxisLine
                         orientation={orientation}
-                        config={axisLine}
+                        config={{...axisLine,cHeight}}
                         range={range}
                       />
                       {tickLine &&
@@ -457,7 +455,7 @@ export default memo(
                   <g transform={"translate(" + x + ", " + y + ")"}>
                     <AxisLine
                       orientation={orientation}
-                      config={axisLine}
+                      config={{...axisLine,cHeight}}
                       isClipAxis={isClipAxis}
                       clipAxisRange={clipAxisRange}
                     />

package/src/components/Band.tsx

@@ -169,35 +169,38 @@ export default memo(
                 style={{
                   overflow: "visible",
                   position: "relative",
-                  pointerEvents:isControlChart?"auto":"none",
                   cursor: "pointer",
                 }}
                 {...attr}
                 onClick={triggerClick}
                 //enter和leave事件，用于控制图的提示框
                 onMouseEnter={() => {
-                  setCtlTip((pre:any)=>({
-                    show:true,
-                    x:xScaler(x),
-                    xName:data.x,
-                    indicatorList:pre.indicatorList.map((item:any)=>{
-                      if (item.tick === data.x) {
-                        return { ...item, isShow: true };
-                      } else {
-                        return item;
-                      }
-                    })
-                  }))
+                  if(isControlChart){
+                    setCtlTip((pre:any)=>({
+                      show:true,
+                      x:xScaler(x),
+                      xName:data.x,
+                      indicatorList:pre.indicatorList.map((item:any)=>{
+                        if (item.tick === data.x) {
+                          return { ...item, isShow: true };
+                        } else {
+                          return item;
+                        }
+                      })
+                    }))
+                  }
                 }}
                 onMouseLeave={() => {
-                  setCtlTip((pre:any)=>({
-                    show:false,
-                    x:undefined,
-                    xName:undefined,
-                    indicatorList:pre.indicatorList.map((item:any)=>{
-                      return { ...item, isShow:false }
-                    })
-                  }))
+                  if(isControlChart){
+                    setCtlTip((pre:any)=>({
+                      show:false,
+                      x:undefined,
+                      xName:undefined,
+                      indicatorList:pre.indicatorList.map((item:any)=>{
+                        return { ...item, isShow:false }
+                      })
+                    }))
+                  }
                 }}
                 data-data={JSON.stringify(data)}
               >

package/src/components/Control.jsx

@@ -34,6 +34,7 @@ export default memo(forwardRef((props, ref) => {
     background:"rgb(2, 176, 249)",
     WebkitBackgroundClip:"content-box",
   }
+  //滑块的鼠标按下操作
   const down=()=>{
     const transform = ref.current.style.transform;
     let movementX = 0;
@@ -52,6 +53,17 @@ export default memo(forwardRef((props, ref) => {
     document.addEventListener("mouseup", mouseUpHandle);
     setWorking(true);
   }
+  // //右手柄的鼠标按下逻辑
+  // const rightDown=()=>{
+
+  //   const move=(e)=>{
+
+  //   }
+  //   const up=()=>{
+
+  //   }
+  //   document.addEventListener()
+  // }
   return (
     <div
       style={{
@@ -87,7 +99,7 @@ export default memo(forwardRef((props, ref) => {
       <div ref={ref} style={barStyle}>
         {/* <div style={{...controllerStyle,transform:"translateX(-6px)"}}></div> */}
         <div style={dragStyle} onMouseDown={down} ref={barRef}></div>
-        {/* <div style={{...controllerStyle,transform:`translateX(6px)`}}></div> */}
+        {/* <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown}></div> */}
       </div>
     </div>
   );

package/src/hooks/useAxes.js

@@ -14,22 +14,32 @@ const getCount = (num) => {
   return i;
 };
 
-const getNewDomain = (domain, mode, step) => {
+const getNewDomain = (domain, mode, step, extent={}) => {
+  const { min:bottom="", max:top="" } = extent;
   let newDomain = [];
+  //能进入这个函数，说明extent中min和max至少有一个是缺失的，如果max存在，意味着纵轴上限被固定
   let min = domain[0],
     max = domain[1];
   let minCount = Math.pow(10, getCount(min)),
     maxCount = Math.pow(10, getCount(max));
   switch (mode) {
     case "count":
-      newDomain[0] = Math.floor(domain[0] / minCount) * minCount;
-      newDomain[1] = Math.ceil(domain[1] / maxCount) * maxCount;
+      newDomain[0] = bottom!=""?bottom:Math.floor(domain[0] / minCount) * minCount;
+      newDomain[1] = top!=""?top:Math.ceil(domain[1] / maxCount) * maxCount;
       break;
     case "step":
-      newDomain = [domain[0], domain[0]];
-      while (newDomain[1] < domain[1]) {
-        newDomain[1] += step;
+      if(top!=""){
+        newDomain = [domain[1], domain[1]];
+        while (newDomain[0] > domain[0]) {
+          newDomain[0] -= step;
+        }
+      }else{
+        newDomain = [domain[0], domain[0]];
+        while (newDomain[1] < domain[1]) {
+          newDomain[1] += step;
+        }
       }
+      break;
   }
   return newDomain;
 };
@@ -332,7 +342,7 @@ export default ({
         let newDomain = domain;
         const fixedDomain = extent && extent.min!="" && extent.max!="";   //判断配置项中是否强制了最大最小值，如果已经被强制了，就不计算newDomain
         if (type !== "ordinal" && !isNaN(domain[1]) && !auto && !fixedDomain) {
-          newDomain = getNewDomain(domain, mode, _step);
+          newDomain = getNewDomain(domain, mode, _step, extent);
         }
         let scaler = scales[type]().domain(newDomain).range(range);