@easyv/charts 1.5.21 → 1.5.23

package/lib/components/Control.js

@@ -103,6 +103,45 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
 
     document.addEventListener("mousemove", move);
     document.addEventListener("mouseup", up);
+  }; //左手手柄的移动端适配
+
+
+  var leftTouchStart = function leftTouchStart(e) {
+    var transform = ref.current.style.transform;
+    var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
+    var initX = 0;
+    var rightX = rawTranslateX + cBarWidth;
+    var startX = e.touches[0].clientX;
+    var currentX = 0;
+    var movementX = 0;
+
+    var move = function move(e) {
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      initX = (0, _utils.mathR)(initX + movementX, [-rawTranslateX, rightX - rawTranslateX]);
+      setControlWidth(function (pre) {
+        var cWidth = pre.cWidth,
+            cBarWidth = pre.cBarWidth;
+        var nextBarWidth = (0, _utils.mathR)(cBarWidth - movementX, [1, rightX]);
+        return _objectSpread(_objectSpread({}, pre), {}, {
+          cBarWidth: nextBarWidth,
+          cPercent: nextBarWidth / cWidth,
+          cBarX: initX + rawTranslateX
+        });
+      });
+    };
+
+    var up = function up(e) {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+
+    document.addEventListener("touchmove", move, {
+      passive: false
+    });
+    document.addEventListener("touchend", up);
   }; //滑块的鼠标按下操作
 
 
@@ -126,7 +165,36 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     document.addEventListener("mousemove", mouseMoveHandle);
     document.addEventListener("mouseup", mouseUpHandle);
     setWorking(true);
-  }; // //右手柄的鼠标按下逻辑
+  }; //移动端适配
+
+
+  var touchStart = function touchStart(e) {
+    var transform = ref.current.style.transform;
+    var startX = e.touches[0].clientX;
+    var currentX = 0;
+    var movementX = 0;
+    var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
+
+    var mouseMoveHandle = function mouseMoveHandle(e) {
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX += currentX - startX;
+      startX = currentX;
+      setX(movementX + rawTranslateX, true);
+    };
+
+    var mouseUpHandle = function mouseUpHandle(e) {
+      setWorking(false);
+      document.removeEventListener("touchmove", mouseMoveHandle);
+      document.removeEventListener("touchend", mouseUpHandle);
+    };
+
+    document.addEventListener("touchmove", mouseMoveHandle, {
+      passive: false
+    });
+    document.addEventListener("touchend", mouseUpHandle);
+    setWorking(true);
+  }; //右手柄的鼠标按下逻辑
 
 
   var rightDown = function rightDown() {
@@ -154,6 +222,42 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
 
     document.addEventListener("mousemove", move);
     document.addEventListener("mouseup", up);
+  }; //右手手柄的移动端适配
+
+
+  var rightTouchStart = function rightTouchStart(e) {
+    var transform = ref.current.style.transform;
+    var startX = e.touches[0].clientX;
+    var currentX = 0;
+    var movementX = 0;
+    var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
+
+    var move = function move(e) {
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      setControlWidth(function (pre) {
+        var cWidth = pre.cWidth,
+            cBarWidth = pre.cBarWidth;
+        var maxWidth = cWidth - rawTranslateX;
+        var nextBarWidth = (0, _utils.mathR)(cBarWidth + movementX, [1, maxWidth]);
+        return _objectSpread(_objectSpread({}, pre), {}, {
+          cBarWidth: nextBarWidth,
+          cPercent: nextBarWidth / cWidth
+        });
+      });
+    };
+
+    var up = function up(e) {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+
+    document.addEventListener("touchmove", move, {
+      passive: false
+    });
+    document.addEventListener("touchend", up);
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -188,16 +292,19 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     style: _objectSpread(_objectSpread({}, controllerStyle), {}, {
       transform: "translateX(-6px)"
     }),
-    onMouseDown: leftDown
+    onMouseDown: leftDown,
+    onTouchStart: leftTouchStart
   }), /*#__PURE__*/_react["default"].createElement("div", {
     style: dragStyle,
     onMouseDown: down,
+    onTouchStart: touchStart,
     ref: barRef
   }), /*#__PURE__*/_react["default"].createElement("div", {
     style: _objectSpread(_objectSpread({}, controllerStyle), {}, {
       transform: "translateX(6px)"
     }),
-    onMouseDown: rightDown
+    onMouseDown: rightDown,
+    onTouchStart: rightTouchStart
   })));
 }));
 

package/lib/components/PieChart.js

@@ -286,6 +286,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       _ref5$config$chart$le2 = _ref5$config$chart$le.formatter,
       formatter = _ref5$config$chart$le2 === void 0 ? _formatter.pieLegendFormatter : _ref5$config$chart$le2,
       legend = (0, _objectWithoutProperties2["default"])(_ref5$config$chart$le, _excluded3),
+      _ref5$config$chart$an = _ref5$config$chart.animation,
+      ringDuration = _ref5$config$chart$an.ringDuration,
+      labelDuration = _ref5$config$chart$an.labelDuration,
       _ref5$config$chart$ma = _ref5$config$chart.margin,
       marginLeft = _ref5$config$chart$ma.marginLeft,
       marginTop = _ref5$config$chart$ma.marginTop,
@@ -597,6 +600,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     ref: pieWarpEl
   }, /*#__PURE__*/_react["default"].createElement("g", {
     style: {
+      "--labelDuration": labelDuration + "ms",
+      "--ringDuration": ringDuration + "ms",
       transition: "transform ease-in-out 0.3s",
       transform: "translate(" + halfChartWidth + "px, " + halfChartHeight + "px) rotate(" + rotate_ + "deg)"
     }
@@ -627,7 +632,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       style: {
         strokeDasharray: "".concat(dashLength, ",").concat(2 * dashLength),
         strokeDashoffset: dashLength,
-        animationDelay: "".concat(index * 2000, "ms")
+        animationDelay: "".concat(index * ringDuration, "ms")
       },
       "data-index": index,
       onClick: onClick,
@@ -657,7 +662,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     })));
   }), label && /*#__PURE__*/_react["default"].createElement(RingLabel, {
     config: _objectSpread(_objectSpread({}, label), {}, {
-      maxRadius: maxRadius + 2
+      maxRadius: maxRadius + 2,
+      ringDuration: ringDuration,
+      labelDuration: labelDuration
     }),
     iosStyle: {
       isIOS: isIOS,
@@ -1073,7 +1080,7 @@ var Label = function Label(_ref10) {
     }, /*#__PURE__*/_react["default"].createElement("path", {
       className: animation ? _piechartModule["default"]["label-line"] : "",
       style: {
-        animationDelay: "".concat(animation ? (actualIndex + 1) * 2000 - 800 : 0, "ms")
+        animationDelay: "".concat(animation ? (actualIndex + 1) * ringDuration - labelDuration : 0, "ms")
       },
       d: "M" + x1 + ", " + y1 + "L" + x2 + ", " + y2 + "L" + x3 + ", " + y2,
       stroke: lineColor ? lineColor : type == "pure" ? pure : stops[0].color,
@@ -1124,6 +1131,8 @@ var Label = function Label(_ref10) {
 
 var RingLabel = function RingLabel(_ref12) {
   var _ref12$config = _ref12.config,
+      ringDuration = _ref12$config.ringDuration,
+      labelDuration = _ref12$config.labelDuration,
       _ref12$config$maxRadi = _ref12$config.maxRadius,
       maxRadius = _ref12$config$maxRadi === void 0 ? 0 : _ref12$config$maxRadi,
       lineLength = _ref12$config.lineLength,
@@ -1219,7 +1228,7 @@ var RingLabel = function RingLabel(_ref12) {
     }, /*#__PURE__*/_react["default"].createElement("path", {
       className: _piechartModule["default"]["label-line"],
       style: {
-        animationDelay: "".concat((actualIndex + 1) * 2000 - 800, "ms")
+        animationDelay: "".concat((actualIndex + 1) * ringDuration - labelDuration, "ms")
       },
       d: "M" + x1 + ", " + y1 + "L" + x2 + ", " + y2 + "L" + x3 + ", " + y2,
       stroke: lineColor ? lineColor : type == "pure" ? pure : stops[0].color,
@@ -1241,7 +1250,7 @@ var RingLabel = function RingLabel(_ref12) {
         whiteSpace: "nowrap",
         "float": x3 >= 0 ? "left" : "right",
         width: "max-content",
-        animationDelay: "".concat((actualIndex + 1) * 2000 - 800, "ms"),
+        animationDelay: "".concat((actualIndex + 1) * ringDuration - labelDuration, "ms"),
         display: "flex",
         alignItems: "center"
       }

package/lib/css/piechart.module.css

@@ -1,27 +1,27 @@
 /*甜甜圈图专用css*/
 .label-line {
-    stroke-dasharray: 100;
-    stroke-dashoffset: 100;
-    animation: dash 800ms ease forwards;
-  }
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: dash var(--labelDuration) ease forwards;
+}
   
-  .label-text {
-    opacity: 0;
-    animation: show 800ms ease forwards;
+.label-text {
+  opacity: 0;
+  animation: show var(--labelDuration) ease forwards;
+}
+
+.inner-arc {
+  animation: dash var(--ringDuration) ease forwards;
+}
+
+@keyframes dash {
+  100% {
+    stroke-dashoffset: 0%;
   }
-  
-  .inner-arc {
-    animation: dash 2s ease forwards;
+}
+
+@keyframes show {
+  100% {
+    opacity: 1;
   }
-  
-  @keyframes dash {
-    100% {
-      stroke-dashoffset: 0%;
-    }
-  }
-  
-  @keyframes show {
-    100% {
-      opacity: 1;
-    }
-  }
+}

package/package.json

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

package/src/components/Control.jsx

@@ -64,6 +64,39 @@ export default memo(forwardRef((props, ref) => {
     document.addEventListener("mousemove",move);
     document.addEventListener("mouseup",up);
   }
+  //左手手柄的移动端适配
+  const leftTouchStart = (e)=>{
+    const transform = ref.current.style.transform;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    let initX = 0;
+    const rightX = rawTranslateX+cBarWidth;
+    let startX = e.touches[0].clientX;
+    let currentX = 0;
+    let movementX = 0;
+    const move = (e)=>{
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const nextBarWidth = mathR(cBarWidth-movementX,[1,rightX]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth,
+          cBarX:initX+rawTranslateX
+        }
+      });
+    }
+    const up = (e) => {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+    document.addEventListener("touchmove", move, {passive:false});
+    document.addEventListener("touchend", up);
+  }
   //滑块的鼠标按下操作
   const down=()=>{
     const transform = ref.current.style.transform;
@@ -83,7 +116,30 @@ export default memo(forwardRef((props, ref) => {
     document.addEventListener("mouseup", mouseUpHandle);
     setWorking(true);
   }
-  // //右手柄的鼠标按下逻辑
+  //移动端适配
+  const touchStart=(e)=>{
+    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);
+    const mouseMoveHandle = (e)=>{
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX += currentX - startX;
+      startX = currentX;
+      setX(movementX + rawTranslateX, true);
+    }
+    const mouseUpHandle = (e) => {
+      setWorking(false);
+      document.removeEventListener("touchmove", mouseMoveHandle);
+      document.removeEventListener("touchend", mouseUpHandle);
+    };
+    document.addEventListener("touchmove", mouseMoveHandle, {passive:false});
+    document.addEventListener("touchend", mouseUpHandle);
+    setWorking(true);
+  }
+  //右手柄的鼠标按下逻辑
   const rightDown=()=>{
     const transform = ref.current.style.transform;
     let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
@@ -107,6 +163,36 @@ export default memo(forwardRef((props, ref) => {
     document.addEventListener("mousemove",move);
     document.addEventListener("mouseup",up);
   }
+  //右手手柄的移动端适配
+  const rightTouchStart = (e)=>{
+    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);
+    const move = (e)=>{
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const maxWidth = cWidth-rawTranslateX;
+        const nextBarWidth = mathR(cBarWidth+movementX,[1,maxWidth]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth
+        }
+      });
+    }
+    const up = (e) => {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+    document.addEventListener("touchmove", move, {passive:false});
+    document.addEventListener("touchend", up);
+  }
   return (
     <div
       style={{
@@ -140,9 +226,9 @@ export default memo(forwardRef((props, ref) => {
       </svg>
       {/* 控制条 */}
       <div ref={ref} style={barStyle}>
-        <div style={{...controllerStyle,transform:"translateX(-6px)"}} onMouseDown={leftDown}></div>
-        <div style={dragStyle} onMouseDown={down} ref={barRef}></div>
-        <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown}></div>
+        <div style={{...controllerStyle,transform:"translateX(-6px)"}} onMouseDown={leftDown} onTouchStart={leftTouchStart}></div>
+        <div style={dragStyle} onMouseDown={down} onTouchStart={touchStart} ref={barRef}></div>
+        <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown} onTouchStart={rightTouchStart}></div>
       </div>
     </div>
   );

package/src/components/PieChart.js

@@ -254,6 +254,7 @@ const Component = memo(
         },
         label,
         legend: { formatter = legendFormatter, ...legend },
+        animation: { ringDuration, labelDuration },
         margin: { marginLeft, marginTop },
       },
       fan: {
@@ -523,6 +524,8 @@ const Component = memo(
         >
           <g
             style={{
+              "--labelDuration":labelDuration+"ms",
+              "--ringDuration":ringDuration+"ms",
               transition: "transform ease-in-out 0.3s",
               transform:
                 "translate(" +
@@ -564,7 +567,7 @@ const Component = memo(
                       style={{
                         strokeDasharray: `${dashLength},${2 * dashLength}`,
                         strokeDashoffset: dashLength,
-                        animationDelay: `${index * 2000}ms`,
+                        animationDelay: `${index * ringDuration}ms`,
                       }}
                       data-index={index}
                       onClick={onClick}
@@ -601,7 +604,7 @@ const Component = memo(
             )}
             {label && (
               <RingLabel
-                config={{ ...label, maxRadius: maxRadius + 2 }}
+                config={{ ...label, maxRadius: maxRadius + 2, ringDuration, labelDuration }}
                 iosStyle={{isIOS, left:halfChartWidth+marginLeft, top:halfChartHeight+marginTop}}
                 arcs={_arcs}
                 judge={judgeData}
@@ -1137,7 +1140,7 @@ const Label = ({
                   className={animation ? ringCss["label-line"] : ""}
                   style={{
                     animationDelay: `${
-                      animation ? (actualIndex + 1) * 2000 - 800 : 0
+                      animation ? (actualIndex + 1) * ringDuration - labelDuration : 0
                     }ms`,
                   }}
                   d={
@@ -1234,6 +1237,8 @@ const Label = ({
 
 const RingLabel = ({
   config: {
+    ringDuration, 
+    labelDuration,
     maxRadius = 0,
     lineLength,
     lineColor,
@@ -1321,7 +1326,7 @@ const RingLabel = ({
                 <path
                   className={ringCss["label-line"]}
                   style={{
-                    animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
+                    animationDelay: `${(actualIndex + 1) * ringDuration - labelDuration}ms`,
                   }}
                   d={
                     "M" +
@@ -1361,7 +1366,7 @@ const RingLabel = ({
                       whiteSpace: "nowrap",
                       float: x3 >= 0 ? "left" : "right",
                       width: "max-content",
-                      animationDelay: `${(actualIndex + 1) * 2000 - 800}ms`,
+                      animationDelay: `${(actualIndex + 1) * ringDuration - labelDuration}ms`,
                       display:"flex",
                       alignItems:"center"
                     }}

package/src/css/piechart.module.css

@@ -1,27 +1,27 @@
 /*甜甜圈图专用css*/
 .label-line {
-    stroke-dasharray: 100;
-    stroke-dashoffset: 100;
-    animation: dash 800ms ease forwards;
-  }
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: dash var(--labelDuration) ease forwards;
+}
   
-  .label-text {
-    opacity: 0;
-    animation: show 800ms ease forwards;
+.label-text {
+  opacity: 0;
+  animation: show var(--labelDuration) ease forwards;
+}
+
+.inner-arc {
+  animation: dash var(--ringDuration) ease forwards;
+}
+
+@keyframes dash {
+  100% {
+    stroke-dashoffset: 0%;
   }
-  
-  .inner-arc {
-    animation: dash 2s ease forwards;
+}
+
+@keyframes show {
+  100% {
+    opacity: 1;
   }
-  
-  @keyframes dash {
-    100% {
-      stroke-dashoffset: 0%;
-    }
-  }
-  
-  @keyframes show {
-    100% {
-      opacity: 1;
-    }
-  }
+}