@easyv/charts 1.5.22 → 1.5.24

package/lib/components/CartesianChart.js

@@ -275,6 +275,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       controlEl.current.style.transform = "translate(".concat(cBarX, "px,0)"); //计算出当前位移的百分比
 
       var percent = cBarX / (cWidth - cBarWidth);
+      percent = isNaN(percent) ? 1 : percent;
       var translateX = -(controlEnd + start / cPercent - chartWidth) * percent;
       curControlPercent.current = percent;
       seriesEl.current.style.transform = "translate(".concat(translateX, "px,").concat(marginTop, "px)");

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.22",
+  "version": "1.5.24",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/CartesianChart.js

@@ -236,7 +236,8 @@ const Chart = memo(
       if(controlEl.current){
         controlEl.current.style.transform = `translate(${cBarX}px,0)`;
         //计算出当前位移的百分比
-        const percent = cBarX / (cWidth - cBarWidth);
+        let percent = cBarX / (cWidth - cBarWidth);
+        percent = isNaN(percent)?1:percent;
         const translateX = -(controlEnd + start/cPercent - chartWidth) * percent;
         curControlPercent.current = percent;
         seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
@@ -539,7 +540,6 @@ const Chart = memo(
             height={height}
           />
         )}
-
         {showCtl && !!control && (
           <Tooltip
             isVertical={isVertical}

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;
-    }
-  }
+}

package/src/hooks/useTooltip.ts

@@ -95,6 +95,7 @@ export default ({
     };
   }, [auto, tickLength, interval, isHover, active]);
   const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
+
   return {
     name,
     x: axisX.scaler(name),