@easyv/charts 1.5.2 → 1.5.4

package/lib/components/Carousel.js

@@ -22,7 +22,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _d3v = require("d3v7");
 
 var _excluded = ["animation"],
-    _excluded2 = ["config", "data"];
+    _excluded2 = ["config", "data", "active"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -60,6 +60,7 @@ var _default = function _default(Component) {
         config = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
         _ref$data = _ref.data,
         data = _ref$data === void 0 ? [] : _ref$data,
+        active = _ref.active,
         rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
     var dataLength = data.length;
 
@@ -103,11 +104,11 @@ var _default = function _default(Component) {
       }
     }, [animationOn, interval, dataLength]);
     (0, _react.useEffect)(function () {
-      carousel && carousel();
+      active && carousel && carousel();
       return function () {
         timer.current && timer.current.stop();
       };
-    }, [carousel]);
+    }, [carousel, active]);
     var onEvent = (0, _react.useCallback)(function (_ref3) {
       var currentIndex = _ref3.currentIndex,
           type = _ref3.type;

package/lib/components/Chart.js

@@ -159,7 +159,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
     id: id,
     config: config,
-    data: data
+    data: data,
+    active: active
   }, props)) : /*#__PURE__*/_react["default"].createElement(_.CartesianChart, (0, _extends2["default"])({
     id: id,
     config: config,

package/lib/components/PieChart.js

@@ -316,18 +316,20 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       _ref5$config$animatio = _ref5$config.animation,
       on = _ref5$config$animatio.on,
       _ref5$config$animatio2 = _ref5$config$animatio.current,
-      _ref5$config$animatio3 = _ref5$config$animatio2.heighten,
-      heighten = _ref5$config$animatio3 === void 0 ? 0 : _ref5$config$animatio3,
-      _ref5$config$animatio4 = _ref5$config$animatio2.opacity,
-      opacity = _ref5$config$animatio4 === void 0 ? 0 : _ref5$config$animatio4,
-      _ref5$config$animatio5 = _ref5$config$animatio2.width,
-      radiusWidthAdd = _ref5$config$animatio5 === void 0 ? 0 : _ref5$config$animatio5,
+      _ref5$config$animatio3 = _ref5$config$animatio2.widthen,
+      widthen = _ref5$config$animatio3 === void 0 ? 0 : _ref5$config$animatio3,
+      _ref5$config$animatio4 = _ref5$config$animatio2.heighten,
+      heighten = _ref5$config$animatio4 === void 0 ? 0 : _ref5$config$animatio4,
+      _ref5$config$animatio5 = _ref5$config$animatio2.opacity,
+      opacity = _ref5$config$animatio5 === void 0 ? 0 : _ref5$config$animatio5,
+      _ref5$config$animatio6 = _ref5$config$animatio2.width,
+      radiusWidthAdd = _ref5$config$animatio6 === void 0 ? 0 : _ref5$config$animatio6,
       animateColor = _ref5$config$animatio2.color,
       animateCTS = _ref5$config$animatio2.textStyle,
-      _ref5$config$animatio6 = _ref5$config$animatio2.gap,
-      gap = _ref5$config$animatio6 === void 0 ? 0 : _ref5$config$animatio6,
-      _ref5$config$animatio7 = _ref5$config$animatio.rotate,
-      rotate = _ref5$config$animatio7 === void 0 ? 0 : _ref5$config$animatio7,
+      _ref5$config$animatio7 = _ref5$config$animatio2.gap,
+      gap = _ref5$config$animatio7 === void 0 ? 0 : _ref5$config$animatio7,
+      _ref5$config$animatio8 = _ref5$config$animatio.rotate,
+      rotate = _ref5$config$animatio8 === void 0 ? 0 : _ref5$config$animatio8,
       _ref5$config$tooltip = _ref5$config.tooltip,
       tooltip = _ref5$config$tooltip === void 0 ? {} : _ref5$config$tooltip,
       config = _ref5.config,
@@ -701,8 +703,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     var prev = index == prevIndex.current;
     var offset = current ? y : prev ? 1 - y : 0;
     var fillOpacity = animateColor ? 1 : current ? opacity / 100 : 1;
+    var deltaWidthen = offset * widthen;
     var deltaHeighten = offset * heighten;
-    var path = arc.innerRadius(innerRadius + deltaHeighten).outerRadius(outerRadius + deltaHeighten)(value);
+    var path = arc.innerRadius(innerRadius + deltaWidthen).outerRadius(outerRadius + deltaHeighten + deltaWidthen)(value);
     var pie = (0, _utils.getColorList)(series.color);
     var currentPie = animateColor ? (0, _utils.getColorList)(animateColor) : (0, _utils.getColorList)(series.color);
     var textPath = "",

package/package.json

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

package/src/components/Carousel.tsx

@@ -36,6 +36,7 @@ export default (Component: ComponentType<any>) =>
     ({
       config: { animation, ...config },
       data = [],
+      active,
       ...rest
     }: {
       data: DataType[];
@@ -77,11 +78,11 @@ export default (Component: ComponentType<any>) =>
       }, [animationOn, interval, dataLength]);
 
       useEffect(() => {
-        carousel && carousel();
+        active && carousel && carousel();
         return () => {
           timer.current && timer.current.stop();
         };
-      }, [carousel]);
+      }, [carousel, active]);
       interface Event{
         currentIndex:number,
         type:string

package/src/components/Chart.js

@@ -90,6 +90,8 @@ const Chart = memo(
       [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
     );
 
+    
+
     useEffect(()=>{
       const activeHandler=(e)=>{
         const { dynamicData = true } = e;
@@ -121,7 +123,7 @@ const Chart = memo(
     return (
       <chartContext.Provider value={context}>
         {type == 'pie' ? (
-          <PieChart id={id} config={config} data={data} {...props} />
+          <PieChart id={id} config={config} data={data} active={active} {...props} />
         ) : (
           <CartesianChart id={id} config={config} data={data} active={active} {...props} />
         )}

package/src/components/PieChart.js

@@ -272,6 +272,7 @@ const Component = memo(
       animation: {
         on,
         current: {
+          widthen = 0,
           heighten = 0,
           opacity = 0,
           width: radiusWidthAdd = 0,
@@ -679,10 +680,11 @@ const Component = memo(
                   : current
                   ? opacity / 100
                   : 1;
+                const deltaWidthen = offset * widthen;
                 const deltaHeighten = offset * heighten;
                 const path = arc
-                  .innerRadius(innerRadius + deltaHeighten)
-                  .outerRadius(outerRadius + deltaHeighten)(value);
+                  .innerRadius(innerRadius + deltaWidthen)
+                  .outerRadius(outerRadius + deltaHeighten + deltaWidthen)(value);
                 const pie = getColorList(series.color);
                 const currentPie = animateColor
                   ? getColorList(animateColor)