@easyv/charts 1.8.1 → 1.8.3

package/lib/components/Carousel.js

@@ -30,6 +30,7 @@ var defaultAnimation = {
   on: false,
   interval: 0,
   interactive: '',
+  canCancel: false,
   current: {
     heighten: 0,
     opacity: 100
@@ -52,6 +53,7 @@ var _default = exports["default"] = function _default(Component) {
     var on = _animation.on,
       interval = _animation.interval,
       interactive = _animation.interactive,
+      canCancel = _animation.canCancel,
       hoverStop = _animation.hoverStop;
     var _useState = (0, _react.useState)(on ? carouselState : initialState),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -99,9 +101,11 @@ var _default = exports["default"] = function _default(Component) {
           if (type == 'onClick') {
             timer.current && timer.current.stop();
             !hoverState.current && animationOn && carousel();
-            setState({
-              trigger: type,
-              currentIndex: currentIndex
+            setState(function (pre) {
+              return {
+                trigger: type,
+                currentIndex: pre.currentIndex == currentIndex && canCancel ? -1 : currentIndex
+              };
             });
           }
           break;
@@ -114,6 +118,12 @@ var _default = exports["default"] = function _default(Component) {
             timer.current && timer.current.stop();
           } else if (type == 'onMouseLeave') {
             !hoverState.current && animationOn && carousel();
+            canCancel && setState(function (pre) {
+              return {
+                trigger: "onMouseEnter",
+                currentIndex: -1
+              };
+            });
           }
           break;
         case false:
@@ -127,7 +137,7 @@ var _default = exports["default"] = function _default(Component) {
           });
           break;
       }
-    }, [interactive, animationOn, carousel]);
+    }, [interactive, canCancel, animationOn, carousel]);
     var hoverEvent = (0, _react.useCallback)(function (isHover) {
       if (hoverStop) {
         if (isHover) {

package/lib/components/PieChart.js

@@ -425,8 +425,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
   }, [series, arcs, radius]);
   var onClick = (0, _react.useCallback)(function (e) {
     var _data = arcs[+e.currentTarget.dataset.index].data;
-    triggerOnRelative('onClick', _data);
-    onEmit('onClick', _data);
+    triggerOnRelative("onClick", _data);
+    onEmit("onClick", _data);
     onEvent({
       currentIndex: +e.currentTarget.dataset.index,
       type: "onClick"
@@ -434,7 +434,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
   }, [onEvent]);
   var onMouseEnter = (0, _react.useCallback)(function (e) {
     var _data = arcs[+e.currentTarget.dataset.index].data;
-    triggerOnRelative('mousehover', _data);
+    triggerOnRelative("mousehover", _data);
     onEmit("mousehover", _data);
     onEvent({
       currentIndex: +e.currentTarget.dataset.index,
@@ -464,16 +464,16 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
           setY(v);
         },
         onComplete: function onComplete() {
-          var _data = arcs[+currentIndex].data;
+          var _data = arcs[+currentIndex] ? arcs[+currentIndex].data : {};
           triggerOnRelative("carousel", _data);
           onEmit("carousel", _data);
         }
       });
     } else {
       if (currentIndex !== null && trigger === "onClick") {
-        var _data = arcs[+currentIndex].data;
-        triggerOnRelative('click', _data);
-        onEmit('click', _data);
+        var _data = arcs[+currentIndex] ? arcs[+currentIndex].data : {};
+        triggerOnRelative("click", _data);
+        onEmit("click", _data);
       }
     }
     return function () {
@@ -603,7 +603,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     judge: judgeData
   }))), tooltip && mousePos && mousePos.x != 0 && mousePos.y != 0 && tooltip.manual && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      position: 'absolute',
+      position: "absolute",
       zIndex: 9999
     }
   }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {
@@ -767,7 +767,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     radius: radius
   }), tooltip && mousePos && mousePos.x != 0 && mousePos.y != 0 && tooltip.manual && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      position: 'absolute',
+      position: "absolute",
       zIndex: 9999
     }
   }, /*#__PURE__*/_react["default"].createElement(_PieTooltip.PieTooltip, {

package/lib/utils/index.js

@@ -100,20 +100,22 @@ var getColorList = exports.getColorList = function getColorList(_ref3) {
   });
 };
 var getMultiColorStr = exports.getMultiColorStr = function getMultiColorStr(colors) {
-  var stops = colors.stops,
-    angle = colors.angle;
-  var result = 'linear-gradient(' + angle + 'deg, ';
-  var stops_ = JSON.parse(JSON.stringify(stops));
-  stops_.sort(function (a, b) {
-    return a.offset - b.offset;
-  });
-  for (var i = 0; i < stops_.length; i++) {
-    var _stops_$i = stops_[i],
-      color = _stops_$i.color,
-      offset = _stops_$i.offset;
-    result += "".concat(color, " ").concat(offset, "%,");
+  if (colors) {
+    var stops = colors.stops,
+      angle = colors.angle;
+    var result = 'linear-gradient(' + angle + 'deg, ';
+    var stops_ = JSON.parse(JSON.stringify(stops));
+    stops_.sort(function (a, b) {
+      return a.offset - b.offset;
+    });
+    for (var i = 0; i < stops_.length; i++) {
+      var _stops_$i = stops_[i],
+        color = _stops_$i.color,
+        offset = _stops_$i.offset;
+      result += "".concat(color, " ").concat(offset, "%,");
+    }
+    return result.slice(0, -1) + ")";
   }
-  return result.slice(0, -1) + ")";
 };
 var getIcon = exports.getIcon = function getIcon(type, icon) {
   var lineType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "solid";

package/package.json

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

package/src/components/Carousel.tsx

@@ -26,6 +26,7 @@ const defaultAnimation = {
   on: false,
   interval: 0,
   interactive: '',
+  canCancel: false,
   current: { heighten: 0, opacity: 100 },
 };
 /**
@@ -45,7 +46,7 @@ export default (Component: ComponentType<any>) =>
     }) => {
       const dataLength = data.length;
       const _animation = Object.assign({}, defaultAnimation, animation);
-      const { on, interval, interactive, hoverStop } = _animation;
+      const { on, interval, interactive, canCancel, hoverStop } = _animation;
       const [state, setState] = useState<State>(
         on ? carouselState : initialState
       );
@@ -95,9 +96,11 @@ export default (Component: ComponentType<any>) =>
               if (type == 'onClick') {
                 timer.current && timer.current.stop();
                 !hoverState.current && animationOn && carousel();
-                setState({
-                  trigger: type,
-                  currentIndex,
+                setState(pre => {
+                  return {
+                    trigger: type,
+                    currentIndex:pre.currentIndex==currentIndex && canCancel?-1:currentIndex,
+                  }
                 });
               }
               break;
@@ -110,6 +113,12 @@ export default (Component: ComponentType<any>) =>
                 timer.current && timer.current.stop();
               } else if (type == 'onMouseLeave') {
                 !hoverState.current && animationOn && carousel();
+                canCancel && setState(pre => {
+                  return {
+                    trigger: "onMouseEnter",
+                    currentIndex:-1,
+                  }
+                });
               }
               break;
             case false:
@@ -124,7 +133,7 @@ export default (Component: ComponentType<any>) =>
               break;
           }
         },
-        [interactive, animationOn, carousel]
+        [interactive, canCancel, animationOn, carousel]
       );
       
       const hoverEvent = useCallback((isHover:boolean)=>{

package/src/components/PieChart.js

@@ -247,7 +247,8 @@ const getCircleScale = ({ count, color, width, length } = tick, radius) => {
 
 const Component = memo(
   ({
-    width, height,
+    width,
+    height,
     config: {
       chart: {
         label,
@@ -402,8 +403,8 @@ const Component = memo(
     const onClick = useCallback(
       (e) => {
         const _data = arcs[+e.currentTarget.dataset.index].data;
-        triggerOnRelative('onClick',_data);
-        onEmit('onClick', _data);
+        triggerOnRelative("onClick", _data);
+        onEmit("onClick", _data);
         onEvent({
           currentIndex: +e.currentTarget.dataset.index,
           type: "onClick",
@@ -415,7 +416,7 @@ const Component = memo(
     const onMouseEnter = useCallback(
       (e) => {
         const _data = arcs[+e.currentTarget.dataset.index].data;
-        triggerOnRelative('mousehover',_data);
+        triggerOnRelative("mousehover", _data);
         onEmit("mousehover", _data);
         onEvent({
           currentIndex: +e.currentTarget.dataset.index,
@@ -452,16 +453,16 @@ const Component = memo(
             setY(v);
           },
           onComplete: () => {
-            const _data = arcs[+currentIndex].data;
-            triggerOnRelative("carousel",_data);
+            const _data = arcs[+currentIndex] ? arcs[+currentIndex].data : {};
+            triggerOnRelative("carousel", _data);
             onEmit("carousel", _data);
           },
         });
       } else {
         if (currentIndex !== null && trigger === "onClick") {
-          const _data = arcs[+currentIndex].data;
-          triggerOnRelative('click',_data);
-          onEmit('click', _data);
+          const _data = arcs[+currentIndex] ? arcs[+currentIndex].data : {};
+          triggerOnRelative("click", _data);
+          onEmit("click", _data);
         }
       }
       return () => {
@@ -522,8 +523,8 @@ const Component = memo(
         >
           <g
             style={{
-              "--labelDuration":labelDuration+"ms",
-              "--ringDuration":ringDuration+"ms",
+              "--labelDuration": labelDuration + "ms",
+              "--ringDuration": ringDuration + "ms",
               transition: "transform ease-in-out 0.3s",
               transform:
                 "translate(" +
@@ -602,8 +603,17 @@ const Component = memo(
             )}
             {label && (
               <RingLabel
-                config={{ ...label, maxRadius: maxRadius + 2, ringDuration, labelDuration }}
-                iosStyle={{isIOS, left:halfChartWidth+marginLeft, top:halfChartHeight+marginTop}}
+                config={{
+                  ...label,
+                  maxRadius: maxRadius + 2,
+                  ringDuration,
+                  labelDuration,
+                }}
+                iosStyle={{
+                  isIOS,
+                  left: halfChartWidth + marginLeft,
+                  top: halfChartHeight + marginTop,
+                }}
                 arcs={_arcs}
                 judge={judgeData}
               />
@@ -615,17 +625,17 @@ const Component = memo(
           mousePos.x != 0 &&
           mousePos.y != 0 &&
           tooltip.manual && (
-            <div style={{ position: 'absolute', zIndex: 9999 }}>
-            <PieTooltip
-              series={series}
-              data={hoverData}
-              config={tooltip}
-              pieCenter={{
-                x: halfChartWidth,
-                y: maxRadius + marginTop,
-              }}
-              mousePos={mousePos}
-            />
+            <div style={{ position: "absolute", zIndex: 9999 }}>
+              <PieTooltip
+                series={series}
+                data={hoverData}
+                config={tooltip}
+                pieCenter={{
+                  x: halfChartWidth,
+                  y: maxRadius + marginTop,
+                }}
+                mousePos={mousePos}
+              />
             </div>
           )}
         <Legend
@@ -693,7 +703,9 @@ const Component = memo(
                 const deltaHeighten = offset * heighten;
                 const path = arc
                   .innerRadius(innerRadius + deltaWidthen)
-                  .outerRadius(outerRadius + deltaHeighten + deltaWidthen)(value);
+                  .outerRadius(outerRadius + deltaHeighten + deltaWidthen)(
+                  value
+                );
                 const pie = getColorList(series.color);
                 const currentPie = animateColor
                   ? getColorList(animateColor)
@@ -824,7 +836,18 @@ const Component = memo(
                 );
               }
             )}
-            {label && <Label config={label} iosStyle={{isIOS, left:halfChartWidth+marginLeft, top:halfChartHeight+marginTop}} arcs={_arcs} judge={judgeData} />}
+            {label && (
+              <Label
+                config={label}
+                iosStyle={{
+                  isIOS,
+                  left: halfChartWidth + marginLeft,
+                  top: halfChartHeight + marginTop,
+                }}
+                arcs={_arcs}
+                judge={judgeData}
+              />
+            )}
             {current && (
               <g
                 fillOpacity={y}
@@ -835,7 +858,9 @@ const Component = memo(
                   width={chartWidth}
                   height={chartHeight}
                   iosStyle={{
-                    marginLeft, marginTop, isIOS
+                    marginLeft,
+                    marginTop,
+                    isIOS,
                   }}
                   data={_arcs}
                   judge={judgeData}
@@ -857,23 +882,23 @@ const Component = memo(
           />
         )}
         {tooltip &&
-         mousePos &&
-         mousePos.x != 0 &&
-         mousePos.y != 0 &&
-         tooltip.manual && (
-   <div style={{ position: 'absolute', zIndex: 9999 }}>
-     <PieTooltip
-       series={series}
-       data={hoverData}
-       config={tooltip}
-       pieCenter={{
-         x: halfChartWidth,
-         y: maxRadius + marginTop,
-       }}
-       mousePos={mousePos}
-     />
-   </div>
- )}
+          mousePos &&
+          mousePos.x != 0 &&
+          mousePos.y != 0 &&
+          tooltip.manual && (
+            <div style={{ position: "absolute", zIndex: 9999 }}>
+              <PieTooltip
+                series={series}
+                data={hoverData}
+                config={tooltip}
+                pieCenter={{
+                  x: halfChartWidth,
+                  y: maxRadius + marginTop,
+                }}
+                mousePos={mousePos}
+              />
+            </div>
+          )}
         <Legend
           {...legend}
           height={chartHeight}
@@ -897,7 +922,7 @@ const Current = ({
       show: showName,
       sameColor: nameColor,
       font: nameFont,
-      translate = { x:0,y:0 },
+      translate = { x: 0, y: 0 },
       maxWidth,
       textOverflow,
       speed,
@@ -922,9 +947,7 @@ const Current = ({
       },
     },
   },
-  iosStyle:{
-    isIOS, marginLeft, marginTop
-  },
+  iosStyle: { isIOS, marginLeft, marginTop },
   width,
   height,
   data,
@@ -954,20 +977,22 @@ const Current = ({
       //foreignObject标签样式，
       width,
       height,
-      position:"relative",
-      overflow:"visible",
+      position: "relative",
+      overflow: "visible",
       pointerEvents: "none",
     },
     boxStyle = {
       //弹性盒子样式，用于当前值的上下居中对齐等
       width,
       height,
-      position:"absolute",
+      position: "absolute",
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
       alignItems: "center",
-      transform: isIOS?`translate(${marginLeft}px,${marginTop}px)`:`translate(-${width / 2}px,-${height / 2}px)`,
+      transform: isIOS
+        ? `translate(${marginLeft}px,${marginTop}px)`
+        : `translate(-${width / 2}px,-${height / 2}px)`,
     };
   let seriesColor = currentData.series.color;
   seriesColor =
@@ -990,7 +1015,7 @@ const Current = ({
                 ...getFontStyle(nameFont),
                 margin: gap / 2 + "px 0",
                 color: nameColor ? seriesColor : nameFont.color,
-                transform:`translate(${translate.x}px,${translate.y}px)`
+                transform: `translate(${translate.x}px,${translate.y}px)`,
               }}
             ></TextOverflow>
           )}
@@ -1078,9 +1103,7 @@ const Label = ({
     },
     percent: { show: showPercent, font: percentFont, precision },
   },
-  iosStyle:{
-    isIOS, left, top
-  },
+  iosStyle: { isIOS, left, top },
   arcs,
   judge,
   animation,
@@ -1144,7 +1167,9 @@ const Label = ({
                   className={animation ? ringCss["label-line"] : ""}
                   style={{
                     animationDelay: `${
-                      animation ? (actualIndex + 1) * ringDuration - labelDuration : 0
+                      animation
+                        ? (actualIndex + 1) * ringDuration - labelDuration
+                        : 0
                     }ms`,
                   }}
                   d={
@@ -1175,20 +1200,24 @@ const Label = ({
                   height="1"
                   x={_x}
                   y={y2 + translateY}
-                  style={{ overflow: "visible", position:"relative" }}
+                  style={{ overflow: "visible", position: "relative" }}
                 >
                   <div
                     className={animation ? ringCss["label-text"] : ""}
                     style={{
-                      position:isIOS?"absolute":"relative",
-                      transform: isIOS?`translate(calc(${x3<0?"-100%":"0px"} + ${left+_x}px),calc(-50% + ${top+y2+translateY}px))`:"translate(0,-50%)",
+                      position: isIOS ? "absolute" : "relative",
+                      transform: isIOS
+                        ? `translate(calc(${x3 < 0 ? "-100%" : "0px"} + ${
+                            left + _x
+                          }px),calc(-50% + ${top + y2 + translateY}px))`
+                        : "translate(0,-50%)",
                       whiteSpace: "nowrap",
                       float: x3 >= 0 ? "left" : "right",
                       width: "max-content",
-                      display:"flex",
-                      flexDirection: mode=="horizontal"?"row":"column",
-                      alignItems:"center",
-                      justifyContent:"center"
+                      display: "flex",
+                      flexDirection: mode == "horizontal" ? "row" : "column",
+                      alignItems: "center",
+                      justifyContent: "center",
                     }}
                   >
                     {_showName && (
@@ -1241,28 +1270,35 @@ const Label = ({
   );
 };
 
-function getAlign(align, reverse){
-  if(align=="center")return "center";
-  if(align=="left")return reverse?"flex-end":"flex-start";
-  return reverse?"flex-start":"flex-end"
+function getAlign(align, reverse) {
+  if (align == "center") return "center";
+  if (align == "left") return reverse ? "flex-end" : "flex-start";
+  return reverse ? "flex-start" : "flex-end";
 }
-function getTranslate(translate, reverse){
+function getTranslate(translate, reverse) {
   const { x, y } = translate;
-  return `translate(${reverse?-x:x}px, ${y}px)`
+  return `translate(${reverse ? -x : x}px, ${y}px)`;
 }
 const RingLabel = ({
   config: {
-    ringDuration, 
+    ringDuration,
     labelDuration,
     maxRadius = 0,
     lineLength,
     lineColor,
     distance,
     mode,
-    align="center",
+    align = "center",
     show,
     translate: { x: translateX, y: translateY },
-    name: { show: showName, font: nameFont, maxWidth, textOverflow, speed, translate:nameTranslate },
+    name: {
+      show: showName,
+      font: nameFont,
+      maxWidth,
+      textOverflow,
+      speed,
+      translate: nameTranslate,
+    },
     value: {
       show: showValue,
       font: valueFont,
@@ -1272,13 +1308,16 @@ const RingLabel = ({
         fontSize: suffixFontSize,
         translate: { x: suffixTranslateX, y: suffixTranslateY },
       },
-      translate:valueTranslate
+      translate: valueTranslate,
+    },
+    percent: {
+      show: showPercent,
+      font: percentFont,
+      precision,
+      translate: percentTranslate,
     },
-    percent: { show: showPercent, font: percentFont, precision, translate:percentTranslate },
-  },
-  iosStyle:{
-    isIOS, left, top
   },
+  iosStyle: { isIOS, left, top },
   judge,
   arcs,
 }) => {
@@ -1343,7 +1382,9 @@ const RingLabel = ({
                 <path
                   className={ringCss["label-line"]}
                   style={{
-                    animationDelay: `${(actualIndex + 1) * ringDuration - labelDuration}ms`,
+                    animationDelay: `${
+                      (actualIndex + 1) * ringDuration - labelDuration
+                    }ms`,
                   }}
                   d={
                     "M" +
@@ -1373,21 +1414,27 @@ const RingLabel = ({
                   height="1"
                   x={_x}
                   y={y2 + translateY}
-                  style={{ overflow: "visible", position:"relative" }}
+                  style={{ overflow: "visible", position: "relative" }}
                 >
                   <div
                     className={ringCss["label-text"]}
                     style={{
-                      position:isIOS?"absolute":"relative",
-                      transform: isIOS?`translate(calc(${x3<0?"-100%":"0px"} + ${left+_x}px),calc(-50% + ${top+y2+translateY}px))`:"translate(0,-50%)",
+                      position: isIOS ? "absolute" : "relative",
+                      transform: isIOS
+                        ? `translate(calc(${x3 < 0 ? "-100%" : "0px"} + ${
+                            left + _x
+                          }px),calc(-50% + ${top + y2 + translateY}px))`
+                        : "translate(0,-50%)",
                       whiteSpace: "nowrap",
                       float: x3 >= 0 ? "left" : "right",
                       width: "max-content",
-                      animationDelay: `${(actualIndex + 1) * ringDuration - labelDuration}ms`,
-                      display:"flex",
-                      flexDirection:mode=="horizontal"?"row":"column",
-                      alignItems:getAlign(align, x3>=0),
-                      justifyContent:"center"
+                      animationDelay: `${
+                        (actualIndex + 1) * ringDuration - labelDuration
+                      }ms`,
+                      display: "flex",
+                      flexDirection: mode == "horizontal" ? "row" : "column",
+                      alignItems: getAlign(align, x3 >= 0),
+                      justifyContent: "center",
                     }}
                   >
                     {_showName && (
@@ -1401,12 +1448,17 @@ const RingLabel = ({
                           maxWidth,
                           ...getFontStyle(nameFont),
                           float: mode == "horizontal" ? "left" : "none",
-                          transform:getTranslate(nameTranslate, x3>=0)
+                          transform: getTranslate(nameTranslate, x3 >= 0),
                         }}
                       ></TextOverflow>
                     )}
                     {showValue && (
-                      <span style={{...getFontStyle(valueFont), transform:getTranslate(valueTranslate, x3>=0)}}>
+                      <span
+                        style={{
+                          ...getFontStyle(valueFont),
+                          transform: getTranslate(valueTranslate, x3 >= 0),
+                        }}
+                      >
                         {realData.y}
                         {showSuffix && (
                           <span
@@ -1423,7 +1475,12 @@ const RingLabel = ({
                       </span>
                     )}
                     {showPercent && (
-                      <span style={{...getFontStyle(percentFont), transform:getTranslate(percentTranslate, x3>=0)}}>
+                      <span
+                        style={{
+                          ...getFontStyle(percentFont),
+                          transform: getTranslate(percentTranslate, x3 >= 0),
+                        }}
+                      >
                         {(_showValue ? "（" : "") +
                           percent +
                           "%" +

package/src/utils/index.js

@@ -77,15 +77,17 @@ const getColorList = ({ type, pure, linear: { stops, angle, opacity } }) => {
   return stops.map(({ color, offset }) => ({ color, offset: offset / 100 }));
 };
 const getMultiColorStr = (colors)=>{
-  const { stops, angle } = colors;
-  let result = 'linear-gradient(' + angle + 'deg, ';
-  const stops_ = JSON.parse(JSON.stringify(stops));
-  stops_.sort((a,b)=>a.offset-b.offset);
-  for(let i=0;i<stops_.length;i++){
-    const { color, offset } = stops_[i];
-    result += `${color} ${offset}%,`;
+  if(colors){
+    const { stops, angle } = colors;
+    let result = 'linear-gradient(' + angle + 'deg, ';
+    const stops_ = JSON.parse(JSON.stringify(stops));
+    stops_.sort((a,b)=>a.offset-b.offset);
+    for(let i=0;i<stops_.length;i++){
+      const { color, offset } = stops_[i];
+      result += `${color} ${offset}%,`;
+    }
+    return result.slice(0,-1)+")";
   }
-  return result.slice(0,-1)+")";
 }
 const getIcon = (type, icon, lineType="solid") => {
   switch (type) {