@easyv/charts 1.9.22 → 1.9.24

package/lib/components/Axis.js

@@ -227,7 +227,7 @@ var Label = function Label(_ref5) {
     events = _ref5$events === void 0 ? defaultEvent : _ref5$events,
     _ref5$config = _ref5.config,
     show = _ref5$config.show,
-    labelNum = _ref5$config.labelNum,
+    adaptive = _ref5$config.adaptive,
     style = _ref5$config.style,
     _ref5$config$translat = _ref5$config.translate,
     translateX = _ref5$config$translat.x,
@@ -280,7 +280,7 @@ var Label = function Label(_ref5) {
       cursor: "pointer",
       transform: "translate(".concat(x + (isIOS ? iosX : 0), "px, ").concat(y + (isIOS ? iosY : 0), "px)") // 用 transform 定位
     })
-  }, labelNum == "Fixed" ? /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+  }, !adaptive ? /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
     ShowType: "normal",
     type: textOverflow,
     speed: speed,
@@ -334,23 +334,18 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     clipAxisRange = _ref6.clipAxisRange,
     controlInfo = _ref6.controlInfo,
     rawTicks = _ref6.rawTicks,
-    paddingOuter = _ref6.paddingOuter,
-    controlEnd = _ref6.controlEnd,
-    start = _ref6.start;
+    paddingOuter = _ref6.paddingOuter;
   var _useContext = (0, _react.useContext)(_context.chartContext),
     width = _useContext.width,
     height = _useContext.height,
     isIOS = _useContext.isIOS;
   var cHeight = controlInfo.cHeight,
     isC = controlInfo.isC,
-    cPercent = controlInfo.cPercent,
-    cBarX = controlInfo.cBarX,
-    cWidth = controlInfo.cWidth,
-    cBarWidth = controlInfo.cBarWidth;
+    cPercent = controlInfo.cPercent;
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
   var LabelWidth = 1;
-  if (label.labelNum == "Fixed") {
+  if (!label.adaptive && label.appearance) {
     LabelWidth = label.appearance.width;
   } else {
     if (allTicks.length && typeof allTicks[0] == "string") {
@@ -358,7 +353,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     }
   }
   var LabelNum = Math.floor(width / (isC ? cPercent : 1) * (1 - paddingOuter) / LabelWidth);
-  var ticks = label.labelNum == "Fixed" ? tickss : getEvenlySpacedElements(allTicks, LabelNum < allTicks.length ? LabelNum > allTicks.length / 2 ? Math.ceil(allTicks.length / 2) : LabelNum : allTicks.length, label.showLast);
+  var ticks = !label.adaptive ? tickss : getEvenlySpacedElements(allTicks, LabelNum < allTicks.length ? LabelNum > allTicks.length / 2 ? Math.ceil(allTicks.length / 2) : LabelNum : allTicks.length, label.showLast);
   if (!(on && ticks.length > 0)) return null;
 
   //数据抽取逻辑
@@ -449,13 +444,6 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     }
   }
   function drawLabel() {
-    // 在 drawLabel 内部重新计算 translateX，确保使用最新的 controlInfo
-    var labelTranslateX = 0;
-    if (isC && isIOS && axisType === "x" && controlEnd !== undefined && start !== undefined) {
-      var percent = cBarX / (cWidth - cBarWidth);
-      var validPercent = isNaN(percent) ? 1 : percent;
-      labelTranslateX = -(controlEnd + start / cPercent - width) * validPercent;
-    }
     var draw = function draw(ticks, scaler) {
       return ticks.map(function (tick, index) {
         var coordinate = scaler(tick);
@@ -476,7 +464,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
           coordinate: coordinate,
           iosTrans: {
             isIOS: isIOS,
-            x: marginLeft + x + (isIOS && isC && axisType === "x" ? labelTranslateX : 0),
+            x: marginLeft + x,
             y: marginTop + y
           },
           config: label,

package/lib/components/CartesianChart.js

@@ -579,7 +579,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       },
       dataUnit: dataUnit
     }, config, {
-      key: index
+      key: index,
+      clipX: clipX
     }));
   }), showTooltip && !control && zIndex == "bottom" && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, {
     manual: true,
@@ -596,7 +597,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     ref: seriesEl,
     style: {
       overflow: "visible",
-      // 保留原有样式，clipPath会接管裁剪
       position: "absolute",
       transform: isVertical ? "translate(".concat(marginRight, "px,").concat(isIOS ? marginTop : 0, "px)") : "translate(".concat(isIOS ? marginLeft : 0, "px,").concat(marginTop, "px)")
     }

package/lib/components/Control.js

@@ -29,7 +29,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     height = _props$props$control.height,
     color = _props$props$control.color,
     gap = _props$props$control.gap,
-    dragColor = _props$props$control.drag.color,
+    _props$props$control$ = _props$props$control.drag,
+    dragColor = _props$props$control$.color,
+    enableStretch = _props$props$control$.enableStretch,
     left = _props$props$control.margin.left,
     _props$props$controlI = _props$props.controlInfo,
     cWidth = _props$props$controlI.cWidth,
@@ -60,13 +62,14 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     width: 12,
     height: height,
     padding: "0 5px",
-    cursor: "col-resize",
+    cursor: enableStretch ? "col-resize" : "auto",
     background: "rgb(2, 176, 249)",
     WebkitBackgroundClip: "content-box"
   };
 
   //左手柄的鼠标按下逻辑
   var leftDown = function leftDown() {
+    if (!enableStretch) return;
     var transform = ref.current.style.transform;
     var initX = 0;
     var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
@@ -95,6 +98,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   };
   //左手手柄的移动端适配
   var leftTouchStart = function leftTouchStart(e) {
+    if (!enableStretch) return;
     var transform = ref.current.style.transform;
     var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
     var initX = 0;
@@ -174,6 +178,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   };
   //右手柄的鼠标按下逻辑
   var rightDown = function rightDown() {
+    if (!enableStretch) return;
     var transform = ref.current.style.transform;
     var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
     var move = function move(e) {
@@ -199,6 +204,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   };
   //右手手柄的移动端适配
   var rightTouchStart = function rightTouchStart(e) {
+    if (!enableStretch) return;
     var transform = ref.current.style.transform;
     var startX = e.touches[0].clientX;
     var currentX = 0;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.22",
+  "version": "1.9.24",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
     "make": "babel src -d lib --extensions .ts,.tsx,.js,.jsx && cp -r src/css lib",
+    "watch": "cp -r src/css lib && babel --watch src -d lib --extensions .ts,.tsx,.js,.jsx",
     "prepare": "husky install"
   },
   "keywords": [],
@@ -54,4 +55,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/Axis.tsx

@@ -226,7 +226,7 @@ type LabelType = {
   events?: Function;
   config: {
     show: boolean;
-    labelNum: string;
+    adaptive:boolean;
     translate: Translate;
     font: Font;
     textAlign: TextAlign;
@@ -277,7 +277,7 @@ const Label: (
   events = defaultEvent,
   config: {
     show,
-    labelNum,
+    adaptive,
     style,
     translate: { x: translateX, y: translateY },
     font,
@@ -323,7 +323,7 @@ const Label: (
           }px)`, // 用 transform 定位
         }}
       >
-        {labelNum == "Fixed" ? (
+        {!adaptive ? (
           <TextOverflow
             ShowType="normal"
             type={textOverflow}
@@ -388,19 +388,15 @@ export default memo(
         controlInfo,
         rawTicks,
         paddingOuter,
-        // 从展开的 config 中获取控制图相关属性
-        controlEnd,
-        start,
       }: any,
       ref
     ) => {
       const { width, height, isIOS } = useContext(chartContext);
-      const { cHeight, isC, cPercent, cBarX, cWidth, cBarWidth } = controlInfo;
+      const { cHeight, isC, cPercent } = controlInfo;
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height - cHeight : 0;
-
       let LabelWidth = 1;
-      if (label.labelNum == "Fixed") {
+      if (!label.adaptive&&label.appearance) {
         LabelWidth = label.appearance.width;
       } else {
         if (allTicks.length && typeof allTicks[0] == "string") {
@@ -411,7 +407,7 @@ export default memo(
         ((width / (isC ? cPercent : 1)) * (1 - paddingOuter)) / LabelWidth
       );
       const ticks: any =
-        label.labelNum == "Fixed"
+        !label.adaptive
           ? tickss
           : getEvenlySpacedElements(
               allTicks,
@@ -547,21 +543,6 @@ export default memo(
         }
       }
       function drawLabel() {
-        // 在 drawLabel 内部重新计算 translateX，确保使用最新的 controlInfo
-        let labelTranslateX = 0;
-        if (
-          isC &&
-          isIOS &&
-          axisType === "x" &&
-          controlEnd !== undefined &&
-          start !== undefined
-        ) {
-          const percent = cBarX / (cWidth - cBarWidth);
-          const validPercent = isNaN(percent) ? 1 : percent;
-          labelTranslateX =
-            -(controlEnd + start / cPercent - width) * validPercent;
-        }
-
         const draw = (ticks: any, scaler: any) => {
           return ticks.map((tick: string, index: number) => {
             const coordinate = scaler(tick);
@@ -590,16 +571,7 @@ export default memo(
                       className="__easyv-label"
                       orientation={orientation}
                       coordinate={coordinate}
-                      iosTrans={{
-                        isIOS,
-                        x:
-                          marginLeft +
-                          x +
-                          (isIOS && isC && axisType === "x"
-                            ? labelTranslateX
-                            : 0),
-                        y: marginTop + y,
-                      }}
+                      iosTrans={{ isIOS, x: marginLeft + x, y: marginTop + y }}
                       config={label}
                       label={tick}
                       tickSize={_tickSize}

package/src/components/CartesianChart.js

@@ -348,9 +348,8 @@ const Chart = memo(
         setClipX(-translateX);
         const isVertical = axisX.direction === "vertical";
         const coreOffset = isVertical ? marginRight : isIOS ? marginLeft : 0;
-        seriesEl.current.style.transform = `translate(${
-          translateX + coreOffset
-        }px,${marginTop}px)`;
+        seriesEl.current.style.transform = `translate(${translateX + coreOffset
+          }px,${marginTop}px)`;
         axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
       }
     }, [controlInfo]);
@@ -459,8 +458,8 @@ const Chart = memo(
     const controlChartTooltipData =
       ctlXName && originData.filter((d) => d.x === ctlXName);
     const bodyWidth = isVertical
-        ? xLineRange + 100 + marginRight + marginLeft
-        : xLineRange,
+      ? xLineRange + 100 + marginRight + marginLeft
+      : xLineRange,
       bodyHeight = isVertical
         ? yLineRange
         : yLineRange + marginTop + marginBottom;
@@ -512,7 +511,6 @@ const Chart = memo(
           style={{ ...style, position: "absolute" }}
           width={width}
           height={height}
-          
           marginLeft={marginLeft}
           marginTop={marginTop}
           onMouseEnter={() => {
@@ -569,6 +567,7 @@ const Chart = memo(
                 dataUnit={dataUnit}
                 {...config}
                 key={index}
+                clipX={clipX}
               />
             );
           })}
@@ -595,7 +594,7 @@ const Chart = memo(
               height="100%"
               ref={seriesEl}
               style={{
-                overflow: "visible", // 保留原有样式，clipPath会接管裁剪
+                overflow: "visible",
                 position: "absolute",
                 transform: isVertical
                   ? `translate(${marginRight}px,${isIOS ? marginTop : 0}px)`
@@ -725,7 +724,7 @@ const Chart = memo(
                   ctlX -
                   marginLeft -
                   (axisX.controlEnd + axisX.start / cPercent - chartWidth) *
-                    curControlPercent.current
+                  curControlPercent.current
                 }
                 marginLeft={marginLeft}
                 marginTop={marginTop}

package/src/components/Control.jsx

@@ -13,7 +13,7 @@ export default memo(
           height,
           color,
           gap,
-          drag: { color: dragColor },
+          drag: { color: dragColor, enableStretch },
           margin: { left },
         },
         controlInfo: { cWidth, cBarWidth },
@@ -46,17 +46,19 @@ export default memo(
       width: 12,
       height,
       padding: "0 5px",
-      cursor: "col-resize",
+      cursor: enableStretch ? "col-resize" : "auto",
       background: "rgb(2, 176, 249)",
-      WebkitBackgroundClip: "content-box",
+      WebkitBackgroundClip: "content-box"
     };
 
     //左手柄的鼠标按下逻辑
     const leftDown = () => {
+      if (!enableStretch) return;
+
       const transform = ref.current.style.transform;
       let initX = 0;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const rightX = rawTranslateX + cBarWidth;
       const move = (e) => {
@@ -86,9 +88,11 @@ export default memo(
     };
     //左手手柄的移动端适配
     const leftTouchStart = (e) => {
+      if (!enableStretch) return;
+
       const transform = ref.current.style.transform;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       let initX = 0;
       const rightX = rawTranslateX + cBarWidth;
@@ -127,7 +131,7 @@ export default memo(
       const transform = ref.current.style.transform;
       let movementX = 0;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const mouseMoveHandle = (e) => {
         //当前位移的距离
@@ -150,7 +154,7 @@ export default memo(
       let currentX = 0;
       let movementX = 0;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const mouseMoveHandle = (e) => {
         e.preventDefault();
@@ -172,9 +176,11 @@ export default memo(
     };
     //右手柄的鼠标按下逻辑
     const rightDown = () => {
+      if (!enableStretch) return;
+
       const transform = ref.current.style.transform;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const move = (e) => {
         const { movementX: ex } = e;
@@ -199,12 +205,14 @@ export default memo(
     };
     //右手手柄的移动端适配
     const rightTouchStart = (e) => {
+      if (!enableStretch) return;
+
       const transform = ref.current.style.transform;
       let startX = e.touches[0].clientX;
       let currentX = 0;
       let movementX = 0;
       let rawTranslateX = parseFloat(
-        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0,
       );
       const move = (e) => {
         e.preventDefault();
@@ -229,6 +237,7 @@ export default memo(
       document.addEventListener("touchmove", move, { passive: false });
       document.addEventListener("touchend", up);
     };
+
     return (
       <div
         style={{
@@ -265,6 +274,7 @@ export default memo(
             );
           })}
         </svg>
+
         {/* 控制条 */}
         <div ref={ref} style={barStyle}>
           <div
@@ -286,5 +296,5 @@ export default memo(
         </div>
       </div>
     );
-  })
+  }),
 );