@semcore/d3-chart 2.8.5 → 2.8.7

package/CHANGELOG.md

@@ -2,11 +2,17 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [2.8.5] - 2023-01-16
+## [2.8.7] - 2023-01-19
+
+### Fixed
+
+- Fixed animation in React strict mode for `RadialTree` and `Donut`.
+
+## [2.8.6] - 2023-01-19
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/popper` [4.14.5 ~> 4.15.0]).
+- Version patch update due to children dependencies update (`@semcore/animation` [1.8.8 ~> 1.8.9], `@semcore/utils` [3.44.3 ~> 3.45.0]).
 
 ## [2.8.3] - 2022-01-10
 

package/lib/cjs/Area.js

@@ -48,19 +48,19 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SArea_ye9ry_gg_{fill:var(--intergalactic-chart-palette-order-blue,#2bb3ff);fill-opacity:.2}.___SArea_ye9ry_gg_.__color_ye9ry_gg_{fill:var(--color_ye9ry)}.___SArea_ye9ry_gg_.__transparent_ye9ry_gg_{opacity:.3}.___SAreaLine_ye9ry_gg_{stroke:var(--intergalactic-chart-palette-order-blue,#2bb3ff);stroke-width:3;fill:transparent}.___SAreaLine_ye9ry_gg_.__color_ye9ry_gg_{stroke:var(--color_ye9ry)}.___SAreaLine_ye9ry_gg_.__transparent_ye9ry_gg_{opacity:.3}.___SArea_ye9ry_gg_,.___SAreaLine_ye9ry_gg_{transition-property:d;transition-duration:var(--duration_ye9ry);transition-timing-function:ease-in-out}.___SNull_ye9ry_gg_{fill:transparent;stroke:var(--intergalactic-chart-grid-x-axis,#c4c7cf);stroke-dasharray:4}.___SNull_ye9ry_gg_.__hide_ye9ry_gg_{display:none}"
+".___SArea_1x0pg_gg_{fill:var(--intergalactic-chart-palette-order-1,#2bb3ff);fill-opacity:.2}.___SArea_1x0pg_gg_.__color_1x0pg_gg_{fill:var(--color_1x0pg)}.___SArea_1x0pg_gg_.__transparent_1x0pg_gg_{opacity:.3}.___SAreaLine_1x0pg_gg_{stroke:var(--intergalactic-chart-palette-order-1,#2bb3ff);stroke-width:3;fill:transparent}.___SAreaLine_1x0pg_gg_.__color_1x0pg_gg_{stroke:var(--color_1x0pg)}.___SAreaLine_1x0pg_gg_.__transparent_1x0pg_gg_{opacity:.3}.___SArea_1x0pg_gg_,.___SAreaLine_1x0pg_gg_{transition-property:d;transition-duration:var(--duration_1x0pg);transition-timing-function:ease-in-out}.___SNull_1x0pg_gg_{fill:transparent;stroke:var(--intergalactic-chart-grid-x-axis,#c4c7cf);stroke-dasharray:4}.___SNull_1x0pg_gg_.__hide_1x0pg_gg_{display:none}"
 /*__inner_css_end__*/
-, "ye9ry_gg_")
+, "1x0pg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SArea": "___SArea_ye9ry_gg_",
-  "_color": "__color_ye9ry_gg_",
-  "--color": "--color_ye9ry",
-  "_transparent": "__transparent_ye9ry_gg_",
-  "__SAreaLine": "___SAreaLine_ye9ry_gg_",
-  "--duration": "--duration_ye9ry",
-  "__SNull": "___SNull_ye9ry_gg_",
-  "_hide": "__hide_ye9ry_gg_"
+  "__SArea": "___SArea_1x0pg_gg_",
+  "_color": "__color_1x0pg_gg_",
+  "--color": "--color_1x0pg",
+  "_transparent": "__transparent_1x0pg_gg_",
+  "__SAreaLine": "___SAreaLine_1x0pg_gg_",
+  "--duration": "--duration_1x0pg",
+  "__SNull": "___SNull_1x0pg_gg_",
+  "_hide": "__hide_1x0pg_gg_"
 });
 
 var AreaRoot = /*#__PURE__*/function (_Component) {

package/lib/cjs/Axis.js

@@ -44,23 +44,23 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SAxis_ae5qk_gg_{stroke:var(--intergalactic-chart-grid-x-axis,#c4c7cf)}.___SAxis_ae5qk_gg_.__hide_ae5qk_gg_{display:none}.___STick_ae5qk_gg_{font-size:var(--intergalactic-fs-100,12px);fill:var(--intergalactic-chart-grid-text-label,#6c6e79)}.___STick_ae5qk_gg_.__hide_ae5qk_gg_{display:none}.___SGrid_ae5qk_gg_{fill:transparent;stroke:var(--intergalactic-border-secondary,#e0e1e9)}.___STitle_ae5qk_gg_{font-size:var(--intergalactic-fs-100,12px);fill:var(--intergalactic-text-hint,#6c6e79);transform-origin:var(--transform-origin_ae5qk)}.___STitle_ae5qk_gg_._position_top_ae5qk_gg_{text-anchor:middle}.___STitle_ae5qk_gg_._position_bottom_ae5qk_gg_{text-anchor:middle;alignment-baseline:hanging}.___STitle_ae5qk_gg_._position_right_ae5qk_gg_{transform:rotate(-90deg);alignment-baseline:middle;text-anchor:middle}.___STitle_ae5qk_gg_._position_left_ae5qk_gg_{transform:rotate(-90deg);text-anchor:middle;alignment-baseline:middle}.___STick_ae5qk_gg_._position_top_ae5qk_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_ae5qk_gg_._position_bottom_ae5qk_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_ae5qk_gg_._position_right_ae5qk_gg_{transform:translateX(16px);text-anchor:start;alignment-baseline:middle}.___STick_ae5qk_gg_._position_left_ae5qk_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}.___STick_ae5qk_gg_._position_custom_0_ae5qk_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_ae5qk_gg_._position_custom_1_ae5qk_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}"
+".___SAxis_86vbu_gg_{stroke:var(--intergalactic-chart-grid-x-axis,#c4c7cf)}.___SAxis_86vbu_gg_.__hide_86vbu_gg_{display:none}.___STick_86vbu_gg_{font-size:var(--intergalactic-fs-100,12px);fill:var(--intergalactic-chart-grid-text-label,#6c6e79)}.___STick_86vbu_gg_.__hide_86vbu_gg_{display:none}.___SGrid_86vbu_gg_{fill:transparent;stroke:var(--intergalactic-border-secondary,#e0e1e9)}.___STitle_86vbu_gg_{font-size:var(--intergalactic-fs-100,12px);fill:var(--intergalactic-text-hint,#6c6e79);transform-origin:var(--transform-origin_86vbu)}.___STitle_86vbu_gg_._position_top_86vbu_gg_{text-anchor:middle}.___STitle_86vbu_gg_._position_bottom_86vbu_gg_{text-anchor:middle;alignment-baseline:hanging}.___STitle_86vbu_gg_._position_right_86vbu_gg_{transform:rotate(-90deg);alignment-baseline:middle;text-anchor:middle}.___STitle_86vbu_gg_._position_left_86vbu_gg_{transform:rotate(-90deg);text-anchor:middle;alignment-baseline:middle}.___STick_86vbu_gg_._position_top_86vbu_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_86vbu_gg_._position_bottom_86vbu_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_86vbu_gg_._position_right_86vbu_gg_{transform:translateX(16px);text-anchor:start;alignment-baseline:middle}.___STick_86vbu_gg_._position_left_86vbu_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}.___STick_86vbu_gg_._position_custom_0_86vbu_gg_{transform:translateY(12px);text-anchor:middle;alignment-baseline:hanging}.___STick_86vbu_gg_._position_custom_1_86vbu_gg_{transform:translateX(-16px);text-anchor:end;alignment-baseline:middle}"
 /*__inner_css_end__*/
-, "ae5qk_gg_")
+, "86vbu_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAxis": "___SAxis_ae5qk_gg_",
-  "_hide": "__hide_ae5qk_gg_",
-  "__STick": "___STick_ae5qk_gg_",
-  "__SGrid": "___SGrid_ae5qk_gg_",
-  "__STitle": "___STitle_ae5qk_gg_",
-  "--transform-origin": "--transform-origin_ae5qk",
-  "_position_top": "_position_top_ae5qk_gg_",
-  "_position_bottom": "_position_bottom_ae5qk_gg_",
-  "_position_right": "_position_right_ae5qk_gg_",
-  "_position_left": "_position_left_ae5qk_gg_",
-  "_position_custom_0": "_position_custom_0_ae5qk_gg_",
-  "_position_custom_1": "_position_custom_1_ae5qk_gg_"
+  "__SAxis": "___SAxis_86vbu_gg_",
+  "_hide": "__hide_86vbu_gg_",
+  "__STick": "___STick_86vbu_gg_",
+  "__SGrid": "___SGrid_86vbu_gg_",
+  "__STitle": "___STitle_86vbu_gg_",
+  "--transform-origin": "--transform-origin_86vbu",
+  "_position_top": "_position_top_86vbu_gg_",
+  "_position_bottom": "_position_bottom_86vbu_gg_",
+  "_position_right": "_position_right_86vbu_gg_",
+  "_position_left": "_position_left_86vbu_gg_",
+  "_position_custom_0": "_position_custom_0_86vbu_gg_",
+  "_position_custom_1": "_position_custom_1_86vbu_gg_"
 });
 var CUSTOM_0 = Symbol('custom_0');
 var CUSTOM_1 = Symbol('custom_1');

package/lib/cjs/Bar.js

@@ -44,18 +44,18 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SBar_t7dwy_gg_{fill:var(--intergalactic-chart-palette-order-blue,#2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_t7dwy);transition-timing-function:ease-in-out}.___SBar_t7dwy_gg_.__color_t7dwy_gg_{fill:var(--color_t7dwy)}.___SBar_t7dwy_gg_.__hide_t7dwy_gg_{display:none}.___SBar_t7dwy_gg_.__transparent_t7dwy_gg_{opacity:.3}.___SBackground_t7dwy_gg_{fill:var(--intergalactic-chart-palette-order-other-data,#c4c7cf)}"
+".___SBar_342tx_gg_{fill:var(--intergalactic-chart-palette-order-1,#2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_342tx);transition-timing-function:ease-in-out}.___SBar_342tx_gg_.__color_342tx_gg_{fill:var(--color_342tx)}.___SBar_342tx_gg_.__hide_342tx_gg_{display:none}.___SBar_342tx_gg_.__transparent_342tx_gg_{opacity:.3}.___SBackground_342tx_gg_{fill:var(--intergalactic-chart-palette-order-other-data,#c4c7cf)}"
 /*__inner_css_end__*/
-, "t7dwy_gg_")
+, "342tx_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBar": "___SBar_t7dwy_gg_",
-  "--duration": "--duration_t7dwy",
-  "_color": "__color_t7dwy_gg_",
-  "--color": "--color_t7dwy",
-  "_hide": "__hide_t7dwy_gg_",
-  "_transparent": "__transparent_t7dwy_gg_",
-  "__SBackground": "___SBackground_t7dwy_gg_"
+  "__SBar": "___SBar_342tx_gg_",
+  "--duration": "--duration_342tx",
+  "_color": "__color_342tx_gg_",
+  "--color": "--color_342tx",
+  "_hide": "__hide_342tx_gg_",
+  "_transparent": "__transparent_342tx_gg_",
+  "__SBackground": "___SBackground_342tx_gg_"
 });
 
 var BarRoot = /*#__PURE__*/function (_Component) {

package/lib/cjs/Bubble.js

@@ -56,20 +56,20 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SBubble_1b55t_gg_{fill:var(--intergalactic-chart-palette-order-blue,#2bb3ff);stroke:var(--intergalactic-chart-grid-border,#fff);stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_1b55t);transition-timing-function:ease-in-out;opacity:.5}.___SBubble_1b55t_gg_:hover{opacity:.8}.___SBubble_1b55t_gg_.__color_1b55t_gg_{fill:var(--color_1b55t)}.___SBubble_1b55t_gg_.__transparent_1b55t_gg_{opacity:.3}.___SCenter_1b55t_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-blue,#2bb3ff)}.___SCenter_1b55t_gg_.__color_1b55t_gg_{stroke:var(--color_1b55t)}.___SCenter_1b55t_gg_.__transparent_1b55t_gg_{opacity:.3}.___SLabel_1b55t_gg_{fill:var(--intergalactic-chart-palette-order-blue,#2bb3ff)}.___SLabel_1b55t_gg_._position_right_1b55t_gg_{text-anchor:end}.___SLabel_1b55t_gg_._position_left_1b55t_gg_{text-anchor:start}.___SLabel_1b55t_gg_.__color_1b55t_gg_{fill:var(--color_1b55t)}.___SLabel_1b55t_gg_.__transparent_1b55t_gg_{opacity:.3}"
+".___SBubble_6qrbu_gg_{fill:var(--intergalactic-chart-palette-order-1,#2bb3ff);stroke:var(--intergalactic-chart-grid-border,#fff);stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_6qrbu);transition-timing-function:ease-in-out;opacity:.5}@media (hover: hover){.___SBubble_6qrbu_gg_:hover{opacity:.8}}.___SBubble_6qrbu_gg_.__color_6qrbu_gg_{fill:var(--color_6qrbu)}.___SBubble_6qrbu_gg_.__transparent_6qrbu_gg_{opacity:.3}.___SCenter_6qrbu_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-1,#2bb3ff)}.___SCenter_6qrbu_gg_.__color_6qrbu_gg_{stroke:var(--color_6qrbu)}.___SCenter_6qrbu_gg_.__transparent_6qrbu_gg_{opacity:.3}.___SLabel_6qrbu_gg_{fill:var(--intergalactic-chart-palette-order-1,#2bb3ff)}.___SLabel_6qrbu_gg_._position_right_6qrbu_gg_{text-anchor:end}.___SLabel_6qrbu_gg_._position_left_6qrbu_gg_{text-anchor:start}.___SLabel_6qrbu_gg_.__color_6qrbu_gg_{fill:var(--color_6qrbu)}.___SLabel_6qrbu_gg_.__transparent_6qrbu_gg_{opacity:.3}"
 /*__inner_css_end__*/
-, "1b55t_gg_")
+, "6qrbu_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SBubble": "___SBubble_1b55t_gg_",
-  "--duration": "--duration_1b55t",
-  "_color": "__color_1b55t_gg_",
-  "--color": "--color_1b55t",
-  "_transparent": "__transparent_1b55t_gg_",
-  "__SCenter": "___SCenter_1b55t_gg_",
-  "__SLabel": "___SLabel_1b55t_gg_",
-  "_position_right": "_position_right_1b55t_gg_",
-  "_position_left": "_position_left_1b55t_gg_"
+  "__SBubble": "___SBubble_6qrbu_gg_",
+  "--duration": "--duration_6qrbu",
+  "_color": "__color_6qrbu_gg_",
+  "--color": "--color_6qrbu",
+  "_transparent": "__transparent_6qrbu_gg_",
+  "__SCenter": "___SCenter_6qrbu_gg_",
+  "__SLabel": "___SLabel_6qrbu_gg_",
+  "_position_right": "_position_right_6qrbu_gg_",
+  "_position_left": "_position_left_6qrbu_gg_"
 });
 
 var BubbleRoot = /*#__PURE__*/function (_Component) {

package/lib/cjs/Donut.js

@@ -53,10 +53,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -66,97 +62,79 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SPie_17s15_gg_{stroke:var(--intergalactic-chart-grid-border,#fff);fill:var(--intergalactic-chart-palette-order-blue,#2bb3ff)}.___SPie_17s15_gg_.__color_17s15_gg_{fill:var(--color_17s15)}.___SPie_17s15_gg_.__transparent_17s15_gg_{opacity:.3}.___SEmptyData_17s15_gg_{fill:var(--intergalactic-chart-palette-order-null,#e0e1e9)}.___SEmptyData_17s15_gg_.__color_17s15_gg_{fill:var(--color_17s15)}.___SLabel_17s15_gg_{text-anchor:middle;vertical-anchor:middle}"
+".___SPie_1gk9a_gg_{stroke:var(--intergalactic-chart-grid-border,#fff);fill:var(--intergalactic-chart-palette-order-1,#2bb3ff)}.___SPie_1gk9a_gg_.__color_1gk9a_gg_{fill:var(--color_1gk9a)}.___SPie_1gk9a_gg_.__transparent_1gk9a_gg_{opacity:.3}.___SEmptyData_1gk9a_gg_{fill:var(--intergalactic-chart-palette-order-null,#e0e1e9)}.___SEmptyData_1gk9a_gg_.__color_1gk9a_gg_{fill:var(--color_1gk9a)}.___SLabel_1gk9a_gg_{text-anchor:middle;vertical-anchor:middle}"
 /*__inner_css_end__*/
-, "17s15_gg_")
+, "1gk9a_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SPie": "___SPie_17s15_gg_",
-  "_color": "__color_17s15_gg_",
-  "--color": "--color_17s15",
-  "_transparent": "__transparent_17s15_gg_",
-  "__SEmptyData": "___SEmptyData_17s15_gg_",
-  "__SLabel": "___SLabel_17s15_gg_"
+  "__SPie": "___SPie_1gk9a_gg_",
+  "_color": "__color_1gk9a_gg_",
+  "--color": "--color_1gk9a",
+  "_transparent": "__transparent_1gk9a_gg_",
+  "__SEmptyData": "___SEmptyData_1gk9a_gg_",
+  "__SLabel": "___SLabel_1gk9a_gg_"
 });
 var DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
 
-function animationInitialPie(_ref4) {
-  var halfsize = _ref4.halfsize,
+function transitionAnglePie(_ref4) {
+  var selector = _ref4.selector,
+      duration = _ref4.duration,
+      halfsize = _ref4.halfsize,
       d3Arc = _ref4.d3Arc,
       d3ArcOut = _ref4.d3ArcOut,
       arcs = _ref4.arcs,
       activeIndexPie = _ref4.activeIndexPie;
-  return function (_, ind) {
-    var d = arcs[ind];
-    if (!d) return function () {
+  return (0, _d3Transition.transition)().selection().selectAll(selector).interrupt().transition().duration(duration).attrTween('d', function (_, ind) {
+    if (!arcs[ind]) return function () {
       return '';
     };
-    var iStart = (0, _d3Interpolate.interpolate)(halfsize ? -Math.PI / 2 : 0, d.startAngle);
-    var iEnd = (0, _d3Interpolate.interpolate)(halfsize ? -Math.PI / 2 : 0, d.endAngle);
+    var d = Object.assign({}, arcs[ind]);
+    var self = this;
+    var initAngle = halfsize ? -Math.PI / 2 : 0;
+    var prevStartAngle = initAngle;
+    var prevEndAngle = initAngle;
+
+    if (self.arc) {
+      prevStartAngle = self.arc.startAngle;
+      prevEndAngle = self.arc.endAngle;
+    }
+
+    var iStartAngle = (0, _d3Interpolate.interpolate)(prevStartAngle, d.startAngle);
+    var iEndAngle = (0, _d3Interpolate.interpolate)(prevEndAngle, d.endAngle);
     return function (t) {
-      d.startAngle = iStart(t);
-      d.endAngle = iEnd(t);
-      return ind === activeIndexPie ? d3ArcOut(d) : d3Arc(d);
+      d.startAngle = iStartAngle(t);
+      d.endAngle = iEndAngle(t);
+      self.arc = d;
+      return ind === activeIndexPie ? d3ArcOut(self.arc) : d3Arc(self.arc);
     };
-  };
-}
-
-function animationUpdatePie(_ref5) {
-  var halfsize = _ref5.halfsize,
-      arcs = _ref5.arcs,
-      d3Arc = _ref5.d3Arc;
-  return function (_, ind) {
-    var d = arcs[ind];
-
-    if (this._current) {
-      var i = (0, _d3Interpolate.interpolate)(this._current, d);
-      this._current = i(0);
-      return function (t) {
-        return d3Arc(i(t));
-      };
-    } else {
-      this._current = d;
-      return animationInitialPie({
-        halfsize: halfsize,
-        arcs: arcs,
-        d3Arc: d3Arc
-      })(_, ind);
-    }
-  };
+  });
 }
 
-function animationHoverPie(_ref6) {
-  var d = _ref6.d,
-      selector = _ref6.selector,
-      duration = _ref6.duration,
-      innerRadius = _ref6.innerRadius,
-      outerRadius = _ref6.outerRadius;
-
-  if (duration > 0) {
-    (0, _d3Transition.transition)().selection().select(selector).transition(_d3Transition.transition).duration(duration).attrTween('d', function () {
-      if (!d) return function () {
-        return '';
-      };
-
-      var _outerRadius = (0, _slicedToArray2["default"])(outerRadius, 2),
-          min = _outerRadius[0],
-          max = _outerRadius[1];
-
-      var i = (0, _d3Interpolate.interpolate)(min, max);
-      return function (t) {
-        var d3ArcOut = (0, _d3Shape.arc)().innerRadius(innerRadius).outerRadius(i(t));
-        return d3ArcOut(d);
-      };
-    });
-  }
+function transitionRadiusPie(_ref5) {
+  var data = _ref5.data,
+      selector = _ref5.selector,
+      duration = _ref5.duration,
+      innerRadius = _ref5.innerRadius,
+      outerRadiusMinMax = _ref5.outerRadiusMinMax;
+  return (0, _d3Transition.transition)().selection().select(selector).interrupt().transition(t).duration(duration).attrTween('d', function () {
+    var _outerRadiusMinMax = (0, _slicedToArray2["default"])(outerRadiusMinMax, 2),
+        min = _outerRadiusMinMax[0],
+        max = _outerRadiusMinMax[1];
+
+    var iOuterRadius = (0, _d3Interpolate.interpolate)(min, max);
+    return function (t) {
+      var d3ArcOut = (0, _d3Shape.arc)().innerRadius(innerRadius).outerRadius(iOuterRadius(t));
+      return d3ArcOut(data);
+    };
+  });
 }
 
 var increaseFactor = 8;
 
-function getOuterRadius(_ref7) {
-  var size = _ref7.size,
-      halfsize = _ref7.halfsize,
-      outerRadius = _ref7.outerRadius;
+function getOuterRadius(_ref6) {
+  var size = _ref6.size,
+      halfsize = _ref6.halfsize,
+      outerRadius = _ref6.outerRadius;
 
   var _size = (0, _slicedToArray2["default"])(size, 2),
       width = _size[0],
@@ -183,37 +161,68 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "virtualElement", (0, _canUseDOM["default"])() ? document.createElement('div') : {});
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "activeIndexPie", undefined);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "canAnimatedHover", false);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerTooltip", function (visible, props) {
-      return function (_ref8) {
-        var x = _ref8.clientX,
-            y = _ref8.clientY;
+      return function (_ref7) {
+        var x = _ref7.clientX,
+            y = _ref7.clientY;
         var eventEmitter = _this.asProps.eventEmitter;
         _this.virtualElement.getBoundingClientRect = _this.generateGetBoundingClientRect(x, y);
         _this.virtualElement[_utils.CONSTANT.VIRTUAL_ELEMENT] = true;
         eventEmitter.emit('onTooltipVisible', visible, props, _this.virtualElement);
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "animationActivePie", function (props) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "animationActivePie", function (_ref8) {
+      var data = _ref8.data,
+          active = _ref8.active,
+          selector = _ref8.selector;
       var _this$asProps = _this.asProps,
           duration = _this$asProps.duration,
-          innerRadius = _this$asProps.innerRadius;
-      var active = props.active,
-          data = props.data,
-          selector = props.selector;
-      var outerRadius = getOuterRadius(_this.asProps);
-      active ? animationHoverPie({
-        d: data,
-        selector: "#".concat(_this.id, " ").concat(selector),
-        duration: duration === 0 ? 0 : 300,
-        innerRadius: innerRadius,
-        outerRadius: [outerRadius, outerRadius + increaseFactor]
-      }) : animationHoverPie({
-        d: data,
-        selector: "#".concat(_this.id, " ").concat(selector),
-        duration: duration === 0 ? 0 : 300,
-        innerRadius: innerRadius,
-        outerRadius: [outerRadius + increaseFactor, outerRadius]
+          innerRadius = _this$asProps.innerRadius,
+          _outerRadius = _this$asProps.outerRadius,
+          size = _this$asProps.size,
+          halfsize = _this$asProps.halfsize;
+      var outerRadius = getOuterRadius({
+        size: size,
+        halfsize: halfsize,
+        outerRadius: _outerRadius
       });
+
+      if (_this.canAnimatedHover) {
+        if (duration > 0) {
+          transitionRadiusPie({
+            data: data,
+            selector: "#".concat(_this.id, " ").concat(selector),
+            duration: duration === 0 ? 0 : 300,
+            innerRadius: innerRadius,
+            outerRadiusMinMax: active ? [outerRadius, outerRadius + increaseFactor] : [outerRadius + increaseFactor, outerRadius]
+          });
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "animationUpdatePie", function () {
+      var _this$asProps2 = _this.asProps,
+          duration = _this$asProps2.duration,
+          d3Arc = _this$asProps2.d3Arc,
+          halfsize = _this$asProps2.halfsize,
+          d3ArcOut = _this$asProps2.d3ArcOut;
+      _this.canAnimatedHover = false;
+
+      if (duration > 0) {
+        transitionAnglePie({
+          selector: "#".concat(_this.id, " [data-ui-name=\"Donut.Pie\"]"),
+          duration: duration,
+          arcs: _this.arcs,
+          halfsize: halfsize,
+          d3Arc: d3Arc,
+          d3ArcOut: d3ArcOut,
+          activeIndexPie: _this.activeIndexPie
+        }).on('end', function () {
+          _this.canAnimatedHover = true;
+        });
+      } else {
+        _this.canAnimatedHover = true;
+      }
     });
     return _this;
   }
@@ -221,9 +230,9 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
   (0, _createClass2["default"])(DonutRoot, [{
     key: "id",
     get: function get() {
-      var _this$asProps2 = this.asProps,
-          uid = _this$asProps2.uid,
-          id = _this$asProps2.id;
+      var _this$asProps3 = this.asProps,
+          uid = _this$asProps3.uid,
+          id = _this$asProps3.id;
       return id || uid;
     }
   }, {
@@ -245,10 +254,10 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getArcs",
     value: function getArcs() {
-      var _this$asProps3 = this.asProps,
-          Children = _this$asProps3.Children,
-          data = _this$asProps3.data,
-          d3Pie = _this$asProps3.d3Pie;
+      var _this$asProps4 = this.asProps,
+          Children = _this$asProps4.Children,
+          data = _this$asProps4.data,
+          d3Pie = _this$asProps4.d3Pie;
       var pieData = Object.entries(data);
 
       if (d3Pie[DEFAULT_INSTANCE]) {
@@ -291,9 +300,9 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
     value: function getPieProps(props, ind) {
       var _this2 = this;
 
-      var _this$asProps4 = this.asProps,
-          d3Arc = _this$asProps4.d3Arc,
-          d3ArcOut = _this$asProps4.d3ArcOut;
+      var _this$asProps5 = this.asProps,
+          d3Arc = _this$asProps5.d3Arc,
+          d3ArcOut = _this$asProps5.d3ArcOut;
       var active = props.active;
       var data = this.arcs.find(function (arc) {
         return arc.data[0] === props.dataKey;
@@ -311,18 +320,22 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
         onMouseMove: this.bindHandlerTooltip(true, props),
         onMouseLeave: this.bindHandlerTooltip(false, props),
         onMouseOver: function onMouseOver(e) {
-          !active && _this2.animationActivePie({
-            active: true,
-            data: data,
-            selector: "[d=\"".concat(e.target.getAttribute('d'), "\"]")
-          });
+          if (!active) {
+            _this2.animationActivePie({
+              active: true,
+              data: data,
+              selector: "[d=\"".concat(e.target.getAttribute('d'), "\"]")
+            });
+          }
         },
         onMouseOut: function onMouseOut(e) {
-          !active && _this2.animationActivePie({
-            active: false,
-            data: data,
-            selector: "[d=\"".concat(e.target.getAttribute('d'), "\"]")
-          });
+          if (!active) {
+            _this2.animationActivePie({
+              active: false,
+              data: data,
+              selector: "[d=\"".concat(e.target.getAttribute('d'), "\"]")
+            });
+          }
         }
       };
     }
@@ -337,49 +350,23 @@ var DonutRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$asProps5 = this.asProps,
-          data = _this$asProps5.data,
-          duration = _this$asProps5.duration,
-          d3Arc = _this$asProps5.d3Arc,
-          halfsize = _this$asProps5.halfsize;
-      var arcs = this.arcs;
+      var data = this.asProps.data;
 
-      if (prevProps.$rootProps.data !== data && duration > 0) {
-        (0, _d3Transition.transition)().selection().selectAll("#".concat(this.id, " [data-ui-name=\"Donut.Pie\"]")).transition().duration(duration).attrTween('d', animationUpdatePie({
-          d3Arc: d3Arc,
-          arcs: arcs,
-          halfsize: halfsize
-        }));
+      if (prevProps.$rootProps.data !== data) {
+        this.animationUpdatePie();
       }
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$asProps6 = this.asProps,
-          duration = _this$asProps6.duration,
-          d3Arc = _this$asProps6.d3Arc,
-          halfsize = _this$asProps6.halfsize,
-          d3ArcOut = _this$asProps6.d3ArcOut;
-      var arcs = this.arcs;
-
-      if (duration > 0) {
-        (0, _d3Transition.transition)().selection().selectAll("#".concat(this.id, " [data-ui-name=\"Donut.Pie\"]")).each(function (_, ind) {
-          this._current = arcs[ind];
-        }).transition().duration(duration).attrTween('d', animationInitialPie({
-          halfsize: halfsize,
-          d3Arc: d3Arc,
-          d3ArcOut: d3ArcOut,
-          arcs: arcs,
-          activeIndexPie: this.activeIndexPie
-        }));
-      }
+      this.animationUpdatePie();
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$asProps7 = this.asProps,
-          halfsize = _this$asProps7.halfsize,
-          size = _this$asProps7.size;
+      var _this$asProps6 = this.asProps,
+          halfsize = _this$asProps6.halfsize,
+          size = _this$asProps6.size;
       this.asProps.dataHintsHandler.establishDataType('values-set');
 
       var _size2 = (0, _slicedToArray2["default"])(size, 2),
@@ -471,17 +458,17 @@ function Pie(_ref15) {
     }
 
     if (active !== undefined && active !== null) {
-      $animationActivePie(_objectSpread(_objectSpread({}, other), {}, {
+      $animationActivePie({
         active: active,
         data: data,
         selector: "[name=\"".concat(other.name, "\"]")
-      }));
+      });
     }
   }, [active]);
   dataHintsHandler.establishDataType('values-set');
   dataHintsHandler.describeValueEntity(dataKey, name);
   return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPie, _ref.cn("SPie", {
-    "render": "path",
+    "render": 'path',
     "color": color,
     "d": active ? d3ArcOut(data) : d3Arc(data),
     "transparent": transparent
@@ -496,7 +483,7 @@ function EmptyData(_ref16) {
       d3Arc = _ref16.d3Arc,
       color = _ref16.color;
   return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SEmptyData, _ref2.cn("SEmptyData", {
-    "render": "path",
+    "render": 'path',
     "color": color,
     "d": d3Arc({
       endAngle: Math.PI * 2,
@@ -515,9 +502,9 @@ function Label(_ref17) {
       dataHintsHandler = _ref17.dataHintsHandler;
   dataHintsHandler.setTitle('vertical', children);
   return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLabel, _ref3.cn("SLabel", {
-    "render": "text",
-    "x": "0",
-    "y": "0",
+    "render": 'text',
+    "x": '0',
+    "y": '0',
     "aria-hidden": true
   }), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})));
 }