@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.8

package/lib/cjs/Donut.js

@@ -1,18 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _core = require("@semcore/core");
 var _assignProps2 = require("@semcore/core/lib/utils/assignProps");
 var _canUseDOM = _interopRequireDefault(require("@semcore/core/lib/utils/canUseDOM"));
@@ -26,44 +19,42 @@ var _createElement = _interopRequireDefault(require("./createElement"));
 var _Pattern = require("./Pattern");
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _utils = require("./utils");
-var _excluded = ["Element", "styles", "d3Arc", "data", "color", "$animationActivePie", "active", "d3ArcOut", "name", "dataKey", "dataHintsHandler", "transparent", "innerRadius", "outerRadius", "resolveColor", "halfsize", "uid", "patterns", "onClick", "onClickPieRoot"];
 /*!__reshadow-styles__:"./style/donut.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPie_1yxlu_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPie_1yxlu_gg_.__color_1yxlu_gg_{fill:var(--color_1yxlu)}.___SPie_1yxlu_gg_.__pattern_1yxlu_gg_.__color_1yxlu_gg_{fill:var(--pattern_1yxlu);stroke:var(--color_1yxlu);stroke-width:1px}.___SPie_1yxlu_gg_.__transparent_1yxlu_gg_{opacity:.3}.___SEmptyData_1yxlu_gg_{fill:var(--intergalactic-chart-palette-order-null, #e0e1e9)}.___SEmptyData_1yxlu_gg_.__color_1yxlu_gg_{fill:var(--color_1yxlu)}.___SLabel_1yxlu_gg_{text-anchor:middle;vertical-anchor:middle;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}", /*__inner_css_end__*/"1yxlu_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPie_1s4vb_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPie_1s4vb_gg_.__color_1s4vb_gg_{fill:var(--color_1s4vb)}.___SPie_1s4vb_gg_.__pattern_1s4vb_gg_.__color_1s4vb_gg_{fill:var(--pattern_1s4vb);stroke:var(--color_1s4vb);stroke-width:1px}.___SPie_1s4vb_gg_.__transparent_1s4vb_gg_{opacity:.3}.___SEmptyData_1s4vb_gg_{fill:var(--intergalactic-chart-palette-order-null, #e0e1e9)}.___SEmptyData_1s4vb_gg_.__color_1s4vb_gg_{fill:var(--color_1s4vb)}.___SLabel_1s4vb_gg_{text-anchor:middle;vertical-anchor:middle;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}", /*__inner_css_end__*/"1s4vb_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SPie": "___SPie_1yxlu_gg_",
-  "_color": "__color_1yxlu_gg_",
-  "--color": "--color_1yxlu",
-  "_pattern": "__pattern_1yxlu_gg_",
-  "--pattern": "--pattern_1yxlu",
-  "_transparent": "__transparent_1yxlu_gg_",
-  "__SEmptyData": "___SEmptyData_1yxlu_gg_",
-  "__SLabel": "___SLabel_1yxlu_gg_"
+  "__SPie": "___SPie_1s4vb_gg_",
+  "_color": "__color_1s4vb_gg_",
+  "--color": "--color_1s4vb",
+  "_pattern": "__pattern_1s4vb_gg_",
+  "--pattern": "--pattern_1s4vb",
+  "_transparent": "__transparent_1s4vb_gg_",
+  "__SEmptyData": "___SEmptyData_1s4vb_gg_",
+  "__SLabel": "___SLabel_1s4vb_gg_"
 });
-var DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
-function transitionAnglePie(_ref6) {
-  var selector = _ref6.selector,
-    duration = _ref6.duration,
-    halfsize = _ref6.halfsize,
-    d3Arc = _ref6.d3Arc,
-    d3ArcOut = _ref6.d3ArcOut,
-    arcs = _ref6.arcs,
-    activeIndexPie = _ref6.activeIndexPie;
+const DEFAULT_INSTANCE = Symbol('DEFAULT_INSTANCE');
+function transitionAnglePie({
+  selector,
+  duration,
+  halfsize,
+  d3Arc,
+  d3ArcOut,
+  arcs,
+  activeIndexPie
+}) {
   return (0, _d3Transition.transition)().selection().selectAll(selector).interrupt().transition().duration(duration).attrTween('d', function (_, ind) {
-    if (!arcs[ind]) return function () {
-      return '';
-    };
-    var d = Object.assign({}, arcs[ind]);
-    var self = this;
-    var initAngle = halfsize ? -Math.PI / 2 : 0;
-    var prevStartAngle = initAngle;
-    var prevEndAngle = initAngle;
+    if (!arcs[ind]) return () => '';
+    const d = Object.assign({}, arcs[ind]);
+    const self = this;
+    const initAngle = halfsize ? -Math.PI / 2 : 0;
+    let prevStartAngle = initAngle;
+    let 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);
+    const iStartAngle = (0, _d3Interpolate.interpolate)(prevStartAngle, d.startAngle);
+    const iEndAngle = (0, _d3Interpolate.interpolate)(prevEndAngle, d.endAngle);
     return function (t) {
       d.startAngle = iStartAngle(t);
       d.endAngle = iEndAngle(t);
@@ -72,365 +63,325 @@ function transitionAnglePie(_ref6) {
     };
   });
 }
-function transitionRadiusPie(_ref7) {
-  var data = _ref7.data,
-    selector = _ref7.selector,
-    element = _ref7.element,
-    duration = _ref7.duration,
-    innerRadius = _ref7.innerRadius,
-    outerRadiusStartEnd = _ref7.outerRadiusStartEnd,
-    paddingAngle = _ref7.paddingAngle;
+function transitionRadiusPie({
+  data,
+  selector,
+  element,
+  duration,
+  innerRadius,
+  outerRadiusStartEnd,
+  paddingAngle
+}) {
   return (0, _d3Transition.transition)().selection().select(selector).interrupt().transition().duration(duration).attrTween('d', function () {
-    var _outerRadiusStartEnd = (0, _slicedToArray2["default"])(outerRadiusStartEnd, 2),
-      start = _outerRadiusStartEnd[0],
-      end = _outerRadiusStartEnd[1];
-    var iOuterRadius = (0, _d3Interpolate.interpolate)(start, end);
+    const [start, end] = outerRadiusStartEnd;
+    const iOuterRadius = (0, _d3Interpolate.interpolate)(start, end);
     return function (t) {
-      var outerRadiusPX = iOuterRadius(t);
+      const outerRadiusPX = iOuterRadius(t);
       element.dataset['currentRadius'] = outerRadiusPX;
-      var d3ArcOut = (0, _d3Shape.arc)().innerRadius(innerRadius).outerRadius(outerRadiusPX).padAngle(paddingAngle);
+      const d3ArcOut = (0, _d3Shape.arc)().innerRadius(innerRadius).outerRadius(outerRadiusPX).padAngle(paddingAngle);
       return d3ArcOut(data);
     };
   });
 }
-var increaseFactor = 8;
-function getOuterRadius(_ref8) {
-  var size = _ref8.size,
-    halfsize = _ref8.halfsize;
-  var _size = (0, _slicedToArray2["default"])(size, 2),
-    width = _size[0],
-    height = _size[1];
-  var minORmax = halfsize ? Math.max : Math.min;
+const increaseFactor = 8;
+function getOuterRadius({
+  size,
+  halfsize
+}) {
+  const [width, height] = size;
+  const minORmax = halfsize ? Math.max : Math.min;
   return minORmax(width - increaseFactor * 2, height - increaseFactor * 2) / 2;
 }
-var DonutRoot = /*#__PURE__*/function (_Component) {
-  function DonutRoot() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, DonutRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, DonutRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "virtualElement", (0, _canUseDOM["default"])() ? document.createElement('div') : {});
-    (0, _defineProperty2["default"])(_this, "activeIndexPie", undefined);
-    (0, _defineProperty2["default"])(_this, "canAnimatedHover", false);
-    (0, _defineProperty2["default"])(_this, "bindHandlerTooltip", function (visible, props, tooltipProps) {
-      return function (_ref9) {
-        var clientX = _ref9.clientX,
-          clientY = _ref9.clientY;
-        var _this$asProps = _this.asProps,
-          eventEmitter = _this$asProps.eventEmitter,
-          plotId = _this$asProps.plotId;
-        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), props, tooltipProps);
-        eventEmitter.emit("setTooltipVisible_".concat(plotId), visible);
-      };
+class DonutRoot extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "virtualElement", (0, _canUseDOM.default)() ? document.createElement('div') : {});
+    (0, _defineProperty2.default)(this, "activeIndexPie", undefined);
+    (0, _defineProperty2.default)(this, "canAnimatedHover", false);
+    (0, _defineProperty2.default)(this, "bindHandlerTooltip", (visible, props, tooltipProps) => ({
+      clientX,
+      clientY
+    }) => {
+      const {
+        eventEmitter,
+        plotId
+      } = this.asProps;
+      eventEmitter.emit(`setTooltipPosition_${plotId}`, clientX, clientY);
+      eventEmitter.emit(`setTooltipRenderingProps_${plotId}`, props, tooltipProps);
+      eventEmitter.emit(`setTooltipVisible_${plotId}`, visible);
     });
-    (0, _defineProperty2["default"])(_this, "animationActivePie", function (_ref0) {
-      var data = _ref0.data,
-        active = _ref0.active,
-        selector = _ref0.selector,
-        element = _ref0.element;
-      var _this$asProps2 = _this.asProps,
-        duration = _this$asProps2.duration,
-        innerRadius = _this$asProps2.innerRadius,
-        d3Arc = _this$asProps2.d3Arc,
-        paddingAngle = _this$asProps2.paddingAngle;
-      var outerRadius = d3Arc.outerRadius()();
-      var outerRadiusStartEnd = active ? [+element.dataset['currentRadius'] || outerRadius, outerRadius + increaseFactor] : [+element.dataset['currentRadius'] || outerRadius, outerRadius];
-      if (_this.canAnimatedHover && duration > 0) {
+    (0, _defineProperty2.default)(this, "animationActivePie", ({
+      data,
+      active,
+      selector,
+      element
+    }) => {
+      const {
+        duration,
+        innerRadius,
+        d3Arc,
+        paddingAngle
+      } = this.asProps;
+      const outerRadius = d3Arc.outerRadius()();
+      const outerRadiusStartEnd = active ? [+element.dataset['currentRadius'] || outerRadius, outerRadius + increaseFactor] : [+element.dataset['currentRadius'] || outerRadius, outerRadius];
+      if (this.canAnimatedHover && duration > 0) {
         transitionRadiusPie({
-          data: data,
-          selector: "#".concat(_this.id, " ").concat(selector),
-          element: element,
+          data,
+          selector: `#${this.id} ${selector}`,
+          element,
           duration: duration === 0 ? 0 : 300,
-          innerRadius: innerRadius,
-          outerRadiusStartEnd: outerRadiusStartEnd,
-          paddingAngle: paddingAngle
+          innerRadius,
+          outerRadiusStartEnd,
+          paddingAngle
         });
       }
     });
-    (0, _defineProperty2["default"])(_this, "animationTimeout", null);
-    (0, _defineProperty2["default"])(_this, "animationUpdatePie", function () {
-      clearTimeout(_this.animationTimeout);
-      _this.animationTimeout = setTimeout(function () {
-        var _this$asProps3 = _this.asProps,
-          duration = _this$asProps3.duration,
-          d3Arc = _this$asProps3.d3Arc,
-          halfsize = _this$asProps3.halfsize,
-          d3ArcOut = _this$asProps3.d3ArcOut;
-        _this.canAnimatedHover = false;
+    (0, _defineProperty2.default)(this, "animationTimeout", null);
+    (0, _defineProperty2.default)(this, "animationUpdatePie", () => {
+      clearTimeout(this.animationTimeout);
+      this.animationTimeout = setTimeout(() => {
+        const {
+          duration,
+          d3Arc,
+          halfsize,
+          d3ArcOut
+        } = this.asProps;
+        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;
+            selector: `#${this.id} [data-ui-name="Donut.Pie"]`,
+            duration,
+            arcs: this.arcs,
+            halfsize,
+            d3Arc,
+            d3ArcOut,
+            activeIndexPie: this.activeIndexPie
+          }).on('end', () => {
+            this.canAnimatedHover = true;
           });
         } else {
-          _this.canAnimatedHover = true;
+          this.canAnimatedHover = true;
         }
       }, 0);
     });
-    return _this;
   }
-  (0, _inherits2["default"])(DonutRoot, _Component);
-  return (0, _createClass2["default"])(DonutRoot, [{
-    key: "id",
-    get: function get() {
-      var _this$asProps4 = this.asProps,
-        uid = _this$asProps4.uid,
-        id = _this$asProps4.id;
-      return id || uid;
-    }
-  }, {
-    key: "generateGetBoundingClientRect",
-    value: function generateGetBoundingClientRect() {
-      var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      return function () {
-        return {
-          width: 0,
-          height: 0,
-          top: y,
-          right: x,
-          bottom: y,
-          left: x
-        };
-      };
-    }
-  }, {
-    key: "getArcs",
-    value: function getArcs() {
-      var _this$asProps5 = this.asProps,
-        Children = _this$asProps5.Children,
-        data = _this$asProps5.data,
-        d3Pie = _this$asProps5.d3Pie;
-      var pieData = Object.entries(data);
-      if (d3Pie[DEFAULT_INSTANCE]) {
-        var keys = _react["default"].Children.toArray((0, _getOriginChildren["default"])(Children)).reduce(function (acc, child) {
-          if (/*#__PURE__*/_react["default"].isValidElement(child) && child.type === Donut.Pie) {
-            acc.push(child.props.dataKey);
-          }
-          return acc;
-        }, []);
-        pieData = Object.entries(data).filter(function (_ref1) {
-          var _ref10 = (0, _slicedToArray2["default"])(_ref1, 2),
-            key = _ref10[0],
-            value = _ref10[1];
-          return keys.includes(key) && value > 0;
-        }).sort(function (_ref11, _ref12) {
-          var _ref13 = (0, _slicedToArray2["default"])(_ref11, 1),
-            a = _ref13[0];
-          var _ref14 = (0, _slicedToArray2["default"])(_ref12, 1),
-            b = _ref14[0];
-          return keys.indexOf(a) > keys.indexOf(b) ? 1 : -1;
-        });
-      }
-      var minValue = pieData.reduce(function (acc, cur) {
-        if (cur[1]) acc += cur[1];
+  get id() {
+    const {
+      uid,
+      id
+    } = this.asProps;
+    return id || uid;
+  }
+  generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({
+      width: 0,
+      height: 0,
+      top: y,
+      right: x,
+      bottom: y,
+      left: x
+    });
+  }
+  getArcs() {
+    const {
+      Children,
+      data,
+      d3Pie
+    } = this.asProps;
+    let pieData = Object.entries(data);
+    if (d3Pie[DEFAULT_INSTANCE]) {
+      const keys = _react.default.Children.toArray((0, _getOriginChildren.default)(Children)).reduce((acc, child) => {
+        if (/*#__PURE__*/_react.default.isValidElement(child) && child.type === Donut.Pie) {
+          acc.push(child.props.dataKey);
+        }
         return acc;
-      }, 0) / 100;
-      pieData = pieData.map(function (d) {
-        if (d[1] && d[1] < minValue) d[1] = minValue;
-        return d;
-      });
-      return d3Pie(pieData);
-    }
-  }, {
-    key: "handlerOnClick",
-    value: function handlerOnClick(key) {
-      var _this2 = this;
-      return function (e) {
-        e.stopPropagation();
-        var onClick = _this2.asProps.onClick;
-        if (!onClick) return;
-        onClick(key, e);
-      };
-    }
-  }, {
-    key: "getPieProps",
-    value: function getPieProps(props, index) {
-      var _this3 = this;
-      var _this$asProps6 = this.asProps,
-        d3Arc = _this$asProps6.d3Arc,
-        d3ArcOut = _this$asProps6.d3ArcOut,
-        innerRadius = _this$asProps6.innerRadius,
-        outerRadius = _this$asProps6.outerRadius,
-        halfsize = _this$asProps6.halfsize,
-        resolveColor = _this$asProps6.resolveColor,
-        uid = _this$asProps6.uid,
-        patterns = _this$asProps6.patterns;
-      var active = props.active;
-      var data = this.arcs.find(function (arc) {
-        return arc.data[0] === props.dataKey;
-      });
-      if (active) {
-        this.activeIndexPie = index;
-      }
-      var tooltipProps = {
-        dataKey: props.dataKey,
-        name: props.name,
-        resolveColor: resolveColor,
-        color: props.color || (0, _utils.getChartDefaultColorName)(index),
-        active: props.active,
-        transparent: props.transparent,
-        patterns: patterns
-      };
-      return {
-        data: data,
-        d3Arc: d3Arc,
-        d3ArcOut: d3ArcOut,
-        innerRadius: innerRadius,
-        outerRadius: outerRadius,
-        uid: "".concat(uid, "-").concat(index),
-        patterns: patterns,
-        halfsize: halfsize,
-        color: props.color || (0, _utils.getChartDefaultColorName)(index),
-        resolveColor: resolveColor,
-        $animationActivePie: this.animationActivePie,
-        onMouseMove: this.bindHandlerTooltip(true, props, tooltipProps),
-        onMouseLeave: this.bindHandlerTooltip(false, props, tooltipProps),
-        onMouseOver: function onMouseOver(e) {
-          if (!active) {
-            _this3.animationActivePie({
-              active: true,
-              data: data,
-              selector: "[d=\"".concat(e.target.getAttribute('d'), "\"]"),
-              element: e.target
-            });
-          }
-        },
-        onMouseOut: function onMouseOut(e) {
-          if (!active) {
-            _this3.animationActivePie({
-              active: false,
-              data: data,
-              selector: "[d=\"".concat(e.target.getAttribute('d'), "\"]"),
-              element: e.target
-            });
-          }
-        },
-        onClickPieRoot: this.handlerOnClick(props.dataKey)
-      };
+      }, []);
+      pieData = Object.entries(data).filter(([key, value]) => keys.includes(key) && value > 0).sort(([a], [b]) => keys.indexOf(a) > keys.indexOf(b) ? 1 : -1);
     }
-  }, {
-    key: "getEmptyDataProps",
-    value: function getEmptyDataProps() {
-      var d3Arc = this.asProps.d3Arc;
-      return {
-        d3Arc: d3Arc
-      };
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var data = this.asProps.data;
-      if (prevProps.$rootProps.data !== data) {
-        this.animationUpdatePie();
-      }
+    const minValue = pieData.reduce((acc, cur) => {
+      if (cur[1]) acc += cur[1];
+      return acc;
+    }, 0) / 100;
+    pieData = pieData.map(d => {
+      if (d[1] && d[1] < minValue) d[1] = minValue;
+      return d;
+    });
+    return d3Pie(pieData);
+  }
+  handlerOnClick(key) {
+    return e => {
+      e.stopPropagation();
+      const {
+        onClick
+      } = this.asProps;
+      if (!onClick) return;
+      onClick(key, e);
+    };
+  }
+  getPieProps(props, index) {
+    const {
+      d3Arc,
+      d3ArcOut,
+      innerRadius,
+      outerRadius,
+      halfsize,
+      resolveColor,
+      uid,
+      patterns
+    } = this.asProps;
+    const {
+      active
+    } = props;
+    const data = this.arcs.find(arc => arc.data[0] === props.dataKey);
+    if (active) {
+      this.activeIndexPie = index;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
+    const tooltipProps = {
+      dataKey: props.dataKey,
+      name: props.name,
+      resolveColor,
+      color: props.color || (0, _utils.getChartDefaultColorName)(index),
+      active: props.active,
+      transparent: props.transparent,
+      patterns
+    };
+    return {
+      data,
+      d3Arc,
+      d3ArcOut,
+      innerRadius,
+      outerRadius,
+      uid: `${uid}-${index}`,
+      patterns,
+      halfsize,
+      color: props.color || (0, _utils.getChartDefaultColorName)(index),
+      resolveColor,
+      $animationActivePie: this.animationActivePie,
+      onMouseMove: this.bindHandlerTooltip(true, props, tooltipProps),
+      onMouseLeave: this.bindHandlerTooltip(false, props, tooltipProps),
+      onMouseOver: e => {
+        if (!active) {
+          this.animationActivePie({
+            active: true,
+            data,
+            selector: `[d="${e.target.getAttribute('d')}"]`,
+            element: e.target
+          });
+        }
+      },
+      onMouseOut: e => {
+        if (!active) {
+          this.animationActivePie({
+            active: false,
+            data,
+            selector: `[d="${e.target.getAttribute('d')}"]`,
+            element: e.target
+          });
+        }
+      },
+      onClickPieRoot: this.handlerOnClick(props.dataKey)
+    };
+  }
+  getEmptyDataProps() {
+    const {
+      d3Arc
+    } = this.asProps;
+    return {
+      d3Arc
+    };
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      data
+    } = this.asProps;
+    if (prevProps.$rootProps.data !== data) {
       this.animationUpdatePie();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$asProps7 = this.asProps,
-        halfsize = _this$asProps7.halfsize,
-        size = _this$asProps7.size;
-      this.asProps.dataHintsHandler.establishDataType('values-set');
-      var _size2 = (0, _slicedToArray2["default"])(size, 2),
-        width = _size2[0],
-        height = _size2[1];
-      var Element = this.Element;
-      var k = halfsize ? 1 : 2;
-      this.arcs = this.getArcs();
-      return /*#__PURE__*/_react["default"].createElement(Element, {
-        "aria-hidden": true,
-        id: this.id,
-        render: "g",
-        childrenPosition: "inside",
-        transform: "translate(".concat(width / 2, ",").concat(height / k, ")")
-      });
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(DonutRoot, "displayName", 'Donut');
-(0, _defineProperty2["default"])(DonutRoot, "style", style);
-(0, _defineProperty2["default"])(DonutRoot, "enhance", [(0, _uniqueID["default"])()]);
-(0, _defineProperty2["default"])(DonutRoot, "defaultProps", function (_ref18) {
-  var _ref18$innerRadius = _ref18.innerRadius,
-    innerRadius = _ref18$innerRadius === void 0 ? 0 : _ref18$innerRadius,
-    _ref18$paddingAngle = _ref18.paddingAngle,
-    paddingAngle = _ref18$paddingAngle === void 0 ? 0 : _ref18$paddingAngle,
-    outerRadius = _ref18.outerRadius,
-    _ref18$halfsize = _ref18.halfsize,
-    halfsize = _ref18$halfsize === void 0 ? false : _ref18$halfsize,
-    size = _ref18.$rootProps.size;
-  var d3Arc = (0, _d3Shape.arc)().outerRadius(outerRadius || getOuterRadius({
-    size: size,
-    halfsize: halfsize,
-    outerRadius: outerRadius
+  }
+  componentDidMount() {
+    this.animationUpdatePie();
+  }
+  render() {
+    const {
+      halfsize,
+      size
+    } = this.asProps;
+    this.asProps.dataHintsHandler.establishDataType('values-set');
+    const [width, height] = size;
+    const Element = this.Element;
+    const k = halfsize ? 1 : 2;
+    this.arcs = this.getArcs();
+    return /*#__PURE__*/_react.default.createElement(Element, {
+      "aria-hidden": true,
+      id: this.id,
+      render: "g",
+      childrenPosition: "inside",
+      transform: `translate(${width / 2},${height / k})`
+    });
+  }
+}
+(0, _defineProperty2.default)(DonutRoot, "displayName", 'Donut');
+(0, _defineProperty2.default)(DonutRoot, "style", style);
+(0, _defineProperty2.default)(DonutRoot, "enhance", [(0, _uniqueID.default)()]);
+(0, _defineProperty2.default)(DonutRoot, "defaultProps", ({
+  innerRadius = 0,
+  paddingAngle = 0,
+  outerRadius,
+  halfsize = false,
+  $rootProps: {
+    size
+  }
+}) => {
+  const d3Arc = (0, _d3Shape.arc)().outerRadius(outerRadius || getOuterRadius({
+    size,
+    halfsize,
+    outerRadius
   })).innerRadius(innerRadius).padAngle(paddingAngle);
-  var d3ArcOut = (0, _d3Shape.arc)().outerRadius((outerRadius || getOuterRadius({
-    size: size,
-    halfsize: halfsize
+  const d3ArcOut = (0, _d3Shape.arc)().outerRadius((outerRadius || getOuterRadius({
+    size,
+    halfsize
   })) + increaseFactor).innerRadius(innerRadius).padAngle(paddingAngle);
-  var d3Pie = (0, _d3Shape.pie)().sort(null).value(function (_ref19) {
-    var _ref20 = (0, _slicedToArray2["default"])(_ref19, 2),
-      value = _ref20[1];
-    return value;
-  });
+  let d3Pie = (0, _d3Shape.pie)().sort(null).value(([, value]) => value);
   d3Pie[DEFAULT_INSTANCE] = true;
   if (halfsize) {
     d3Pie = d3Pie.startAngle(-Math.PI / 2).endAngle(Math.PI / 2);
   }
   return {
-    d3Pie: d3Pie,
-    d3Arc: d3Arc,
-    d3ArcOut: d3ArcOut,
+    d3Pie,
+    d3Arc,
+    d3ArcOut,
     duration: 500,
-    paddingAngle: paddingAngle,
-    innerRadius: innerRadius
+    paddingAngle,
+    innerRadius
   };
 });
-function Pie(_ref15) {
+function Pie({
+  Element: SPie,
+  styles,
+  d3Arc,
+  data,
+  color,
+  $animationActivePie,
+  active,
+  d3ArcOut,
+  name,
+  dataKey,
+  dataHintsHandler,
+  transparent,
+  innerRadius,
+  outerRadius,
+  resolveColor,
+  halfsize,
+  uid,
+  patterns,
+  onClick,
+  onClickPieRoot,
+  ...other
+}) {
   var _ref2;
-  var SPie = _ref15.Element,
-    styles = _ref15.styles,
-    d3Arc = _ref15.d3Arc,
-    data = _ref15.data,
-    color = _ref15.color,
-    $animationActivePie = _ref15.$animationActivePie,
-    active = _ref15.active,
-    d3ArcOut = _ref15.d3ArcOut,
-    name = _ref15.name,
-    dataKey = _ref15.dataKey,
-    dataHintsHandler = _ref15.dataHintsHandler,
-    transparent = _ref15.transparent,
-    innerRadius = _ref15.innerRadius,
-    outerRadius = _ref15.outerRadius,
-    resolveColor = _ref15.resolveColor,
-    halfsize = _ref15.halfsize,
-    uid = _ref15.uid,
-    patterns = _ref15.patterns,
-    onClick = _ref15.onClick,
-    onClickPieRoot = _ref15.onClickPieRoot,
-    other = (0, _objectWithoutProperties2["default"])(_ref15, _excluded);
-  var _React$useState = _react["default"].useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isMount = _React$useState2[0],
-    setIsMount = _React$useState2[1];
-  var pieRef = _react["default"].useRef(null);
-  _react["default"].useEffect(function () {
+  const [isMount, setIsMount] = _react.default.useState(false);
+  const pieRef = _react.default.useRef(null);
+  _react.default.useEffect(() => {
     if (!pieRef.current) return;
     pieRef.current.dataset['currentRadius'] = (active ? d3ArcOut : d3Arc).outerRadius()();
 
@@ -441,43 +392,44 @@ function Pie(_ref15) {
     }
     if (active !== undefined && active !== null) {
       $animationActivePie({
-        active: active,
-        data: data,
-        selector: "[name=\"".concat(other.name, "\"]"),
+        active,
+        data,
+        selector: `[name="${other.name}"]`,
         element: pieRef.current
       });
     }
   }, [active, Boolean(data)]);
-  _react["default"].useEffect(function () {
+  _react.default.useEffect(() => {
     if (!pieRef.current) return;
     pieRef.current.dataset['currentRadius'] = (active ? d3ArcOut : d3Arc).outerRadius()();
   }, [active, innerRadius, outerRadius, halfsize, Boolean(data)]);
   if (!data) return null;
   dataHintsHandler.establishDataType('values-set');
   dataHintsHandler.describeValueEntity(dataKey, name);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (_ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPie, _ref2.cn("SPie", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPie, _ref2.cn("SPie", {
     "render": 'path',
     "ref": pieRef,
     "color": resolveColor(color),
-    "pattern": patterns ? "url(#".concat(uid, "-pattern)") : undefined,
+    "pattern": patterns ? `url(#${uid}-pattern)` : undefined,
     "d": active ? d3ArcOut(data) : d3Arc(data),
     "transparent": transparent,
     "use:onClick": (0, _assignProps2.callAllEventHandlers)(onClickPieRoot, onClick)
-  }))), patterns && /*#__PURE__*/_react["default"].createElement(_Pattern.PatternFill, _ref2.cn("PatternFill", {
-    "id": "".concat(uid, "-pattern"),
+  }))), patterns && /*#__PURE__*/_react.default.createElement(_Pattern.PatternFill, _ref2.cn("PatternFill", {
+    "id": `${uid}-pattern`,
     "patternKey": color,
     "color": resolveColor(color),
     "patterns": patterns
   })));
 }
-function EmptyData(_ref16) {
+function EmptyData({
+  Element: SEmptyData,
+  styles,
+  d3Arc,
+  color,
+  resolveColor
+}) {
   var _ref3;
-  var SEmptyData = _ref16.Element,
-    styles = _ref16.styles,
-    d3Arc = _ref16.d3Arc,
-    color = _ref16.color,
-    resolveColor = _ref16.resolveColor;
-  return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SEmptyData, _ref3.cn("SEmptyData", {
+  return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SEmptyData, _ref3.cn("SEmptyData", {
     "render": 'path',
     "color": resolveColor(color),
     "d": d3Arc({
@@ -486,40 +438,41 @@ function EmptyData(_ref16) {
     })
   }));
 }
-function Label(_ref17) {
+function Label({
+  Element: SLabel,
+  styles,
+  Children,
+  children,
+  label,
+  dataHintsHandler,
+  x = 0,
+  y = 0
+}) {
   var _ref4;
-  var SLabel = _ref17.Element,
-    styles = _ref17.styles,
-    Children = _ref17.Children,
-    children = _ref17.children,
-    label = _ref17.label,
-    dataHintsHandler = _ref17.dataHintsHandler,
-    _ref17$x = _ref17.x,
-    x = _ref17$x === void 0 ? 0 : _ref17$x,
-    _ref17$y = _ref17.y,
-    y = _ref17$y === void 0 ? 0 : _ref17$y;
   dataHintsHandler.setTitle('vertical', label || children);
-  return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLabel, _ref4.cn("SLabel", {
+  return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SLabel, _ref4.cn("SLabel", {
     "render": 'text',
     "x": x,
     "y": y,
     "aria-hidden": true
-  }), /*#__PURE__*/_react["default"].createElement(Children, _ref4.cn("Children", {})));
+  }), /*#__PURE__*/_react.default.createElement(Children, _ref4.cn("Children", {})));
 }
 function DonutTooltip(props) {
   var _ref = arguments[0],
     _ref5;
-  var SDonutTooltip = _Tooltip["default"];
-  return _ref5 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDonutTooltip, _ref5.cn("SDonutTooltip", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "excludeAnchorProps": true
-  }, _ref))));
+  const SDonutTooltip = _Tooltip.default;
+  return _ref5 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(SDonutTooltip, _ref5.cn("SDonutTooltip", {
+    ...(0, _core.assignProps)({
+      "excludeAnchorProps": true
+    }, _ref)
+  }));
 }
 ;
-var Donut = (0, _createElement["default"])(DonutRoot, {
-  Pie: Pie,
-  Label: Label,
-  EmptyData: EmptyData,
-  Tooltip: [DonutTooltip, _Tooltip["default"]._______childrenComponents]
+const Donut = (0, _createElement.default)(DonutRoot, {
+  Pie,
+  Label,
+  EmptyData,
+  Tooltip: [DonutTooltip, _Tooltip.default._______childrenComponents]
 });
-var _default = exports["default"] = Donut;
+var _default = exports.default = Donut;
 //# sourceMappingURL=Donut.js.map