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

package/lib/esm/Donut.mjs

@@ -1,11 +1,4 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { sstyled, assignProps, Component } from "@semcore/core";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
@@ -19,45 +12,49 @@ import createElement from "./createElement.mjs";
 import { PatternFill } from "./Pattern.mjs";
 import Tooltip from "./Tooltip.mjs";
 import { getChartDefaultColorName } from "./utils.mjs";
-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 = (
+const style = (
   /*__reshadow_css_start__*/
   (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%)}",
+    ".___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__*/
-    "1yxlu_gg_"
+    "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 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 = interpolate(prevStartAngle, d.startAngle);
-    var iEndAngle = interpolate(prevEndAngle, d.endAngle);
+    const iStartAngle = interpolate(prevStartAngle, d.startAngle);
+    const iEndAngle = interpolate(prevEndAngle, d.endAngle);
     return function(t) {
       d.startAngle = iStartAngle(t);
       d.endAngle = iEndAngle(t);
@@ -66,55 +63,71 @@ 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 transition().selection().select(selector).interrupt().transition().duration(duration).attrTween("d", function() {
-    var _outerRadiusStartEnd = _slicedToArray(outerRadiusStartEnd, 2), start = _outerRadiusStartEnd[0], end = _outerRadiusStartEnd[1];
-    var iOuterRadius = interpolate(start, end);
+    const [start, end] = outerRadiusStartEnd;
+    const iOuterRadius = interpolate(start, end);
     return function(t) {
-      var outerRadiusPX = iOuterRadius(t);
+      const outerRadiusPX = iOuterRadius(t);
       element.dataset["currentRadius"] = outerRadiusPX;
-      var d3ArcOut = arc().innerRadius(innerRadius).outerRadius(outerRadiusPX).padAngle(paddingAngle);
+      const d3ArcOut = 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 = _slicedToArray(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 DonutRoot2() {
-    var _this;
-    _classCallCheck(this, DonutRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DonutRoot2, [].concat(args));
-    _defineProperty(_this, "virtualElement", canUseDOM() ? document.createElement("div") : {});
-    _defineProperty(_this, "activeIndexPie", void 0);
-    _defineProperty(_this, "canAnimatedHover", false);
-    _defineProperty(_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 Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(this, "activeIndexPie", void 0);
+    _defineProperty(this, "canAnimatedHover", false);
+    _defineProperty(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);
     });
-    _defineProperty(_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) {
+    _defineProperty(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,
-          selector: "#".concat(_this.id, " ").concat(selector),
+          selector: `#${this.id} ${selector}`,
           element,
           duration: duration === 0 ? 0 : 300,
           innerRadius,
@@ -123,211 +136,211 @@ var DonutRoot = /* @__PURE__ */ (function(_Component) {
         });
       }
     });
-    _defineProperty(_this, "animationTimeout", null);
-    _defineProperty(_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;
+    _defineProperty(this, "animationTimeout", null);
+    _defineProperty(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"]'),
+            selector: `#${this.id} [data-ui-name="Donut.Pie"]`,
             duration,
-            arcs: _this.arcs,
+            arcs: this.arcs,
             halfsize,
             d3Arc,
             d3ArcOut,
-            activeIndexPie: _this.activeIndexPie
-          }).on("end", function() {
-            _this.canAnimatedHover = true;
+            activeIndexPie: this.activeIndexPie
+          }).on("end", () => {
+            this.canAnimatedHover = true;
           });
         } else {
-          _this.canAnimatedHover = true;
+          this.canAnimatedHover = true;
         }
       }, 0);
     });
-    return _this;
   }
-  _inherits(DonutRoot2, _Component);
-  return _createClass(DonutRoot2, [{
-    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] !== void 0 ? arguments[0] : 0;
-      var y = arguments.length > 1 && arguments[1] !== void 0 ? 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.Children.toArray(getOriginChildren(Children)).reduce(function(acc, child) {
-          if (/* @__PURE__ */ React.isValidElement(child) && child.type === Donut.Pie) {
-            acc.push(child.props.dataKey);
-          }
-          return acc;
-        }, []);
-        pieData = Object.entries(data).filter(function(_ref1) {
-          var _ref10 = _slicedToArray(_ref1, 2), key = _ref10[0], value = _ref10[1];
-          return keys.includes(key) && value > 0;
-        }).sort(function(_ref11, _ref12) {
-          var _ref13 = _slicedToArray(_ref11, 1), a = _ref13[0];
-          var _ref14 = _slicedToArray(_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.Children.toArray(getOriginChildren(Children)).reduce((acc, child) => {
+        if (/* @__PURE__ */ React.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);
-      };
+      }, []);
+      pieData = Object.entries(data).filter(([key, value]) => keys.includes(key) && value > 0).sort(([a], [b]) => keys.indexOf(a) > keys.indexOf(b) ? 1 : -1);
     }
-  }, {
-    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(arc2) {
-        return arc2.data[0] === props.dataKey;
-      });
-      if (active) {
-        this.activeIndexPie = index;
-      }
-      var tooltipProps = {
-        dataKey: props.dataKey,
-        name: props.name,
-        resolveColor,
-        color: props.color || getChartDefaultColorName(index),
-        active: props.active,
-        transparent: props.transparent,
-        patterns
-      };
-      return {
-        data,
-        d3Arc,
-        d3ArcOut,
-        innerRadius,
-        outerRadius,
-        uid: "".concat(uid, "-").concat(index),
-        patterns,
-        halfsize,
-        color: props.color || getChartDefaultColorName(index),
-        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,
-              selector: '[d="'.concat(e.target.getAttribute("d"), '"]'),
-              element: e.target
-            });
-          }
-        },
-        onMouseOut: function onMouseOut(e) {
-          if (!active) {
-            _this3.animationActivePie({
-              active: false,
-              data,
-              selector: '[d="'.concat(e.target.getAttribute("d"), '"]'),
-              element: e.target
-            });
-          }
-        },
-        onClickPieRoot: this.handlerOnClick(props.dataKey)
-      };
-    }
-  }, {
-    key: "getEmptyDataProps",
-    value: function getEmptyDataProps() {
-      var d3Arc = this.asProps.d3Arc;
-      return {
-        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((arc2) => arc2.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 || getChartDefaultColorName(index),
+      active: props.active,
+      transparent: props.transparent,
+      patterns
+    };
+    return {
+      data,
+      d3Arc,
+      d3ArcOut,
+      innerRadius,
+      outerRadius,
+      uid: `${uid}-${index}`,
+      patterns,
+      halfsize,
+      color: props.color || 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 = _slicedToArray(size, 2), width = _size2[0], height = _size2[1];
-      var Element = this.Element;
-      var k = halfsize ? 1 : 2;
-      this.arcs = this.getArcs();
-      return /* @__PURE__ */ React.createElement(Element, {
-        "aria-hidden": true,
-        id: this.id,
-        render: "g",
-        childrenPosition: "inside",
-        transform: "translate(".concat(width / 2, ",").concat(height / k, ")")
-      });
-    }
-  }]);
-})(Component);
+  }
+  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.createElement(Element, {
+      "aria-hidden": true,
+      id: this.id,
+      render: "g",
+      childrenPosition: "inside",
+      transform: `translate(${width / 2},${height / k})`
+    });
+  }
+}
 _defineProperty(DonutRoot, "displayName", "Donut");
 _defineProperty(DonutRoot, "style", style);
 _defineProperty(DonutRoot, "enhance", [uniqueIDEnhancement()]);
-_defineProperty(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 = arc().outerRadius(outerRadius || getOuterRadius({
+_defineProperty(DonutRoot, "defaultProps", ({
+  innerRadius = 0,
+  paddingAngle = 0,
+  outerRadius,
+  halfsize = false,
+  $rootProps: {
+    size
+  }
+}) => {
+  const d3Arc = arc().outerRadius(outerRadius || getOuterRadius({
     size,
     halfsize
   })).innerRadius(innerRadius).padAngle(paddingAngle);
-  var d3ArcOut = arc().outerRadius((outerRadius || getOuterRadius({
+  const d3ArcOut = arc().outerRadius((outerRadius || getOuterRadius({
     size,
     halfsize
   })) + increaseFactor).innerRadius(innerRadius).padAngle(paddingAngle);
-  var d3Pie = pie().sort(null).value(function(_ref19) {
-    var _ref20 = _slicedToArray(_ref19, 2), value = _ref20[1];
-    return value;
-  });
+  let d3Pie = pie().sort(null).value(([, value]) => value);
   d3Pie[DEFAULT_INSTANCE] = true;
   if (halfsize) {
     d3Pie = d3Pie.startAngle(-Math.PI / 2).endAngle(Math.PI / 2);
@@ -341,12 +354,33 @@ _defineProperty(DonutRoot, "defaultProps", function(_ref18) {
     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 = _objectWithoutProperties(_ref15, _excluded);
-  var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), isMount = _React$useState2[0], setIsMount = _React$useState2[1];
-  var pieRef = React.useRef(null);
-  React.useEffect(function() {
+  const [isMount, setIsMount] = React.useState(false);
+  const pieRef = React.useRef(null);
+  React.useEffect(() => {
     if (!pieRef.current) return;
     pieRef.current.dataset["currentRadius"] = (active ? d3ArcOut : d3Arc).outerRadius()();
     if (!isMount) {
@@ -357,12 +391,12 @@ function Pie(_ref15) {
       $animationActivePie({
         active,
         data,
-        selector: '[name="'.concat(other.name, '"]'),
+        selector: `[name="${other.name}"]`,
         element: pieRef.current
       });
     }
   }, [active, Boolean(data)]);
-  React.useEffect(function() {
+  React.useEffect(() => {
     if (!pieRef.current) return;
     pieRef.current.dataset["currentRadius"] = (active ? d3ArcOut : d3Arc).outerRadius()();
   }, [active, innerRadius, outerRadius, halfsize, Boolean(data)]);
@@ -373,20 +407,25 @@ function Pie(_ref15) {
     "render": "path",
     "ref": pieRef,
     "color": resolveColor(color),
-    "pattern": patterns ? "url(#".concat(uid, "-pattern)") : void 0,
+    "pattern": patterns ? `url(#${uid}-pattern)` : void 0,
     "d": active ? d3ArcOut(data) : d3Arc(data),
     "transparent": transparent,
     "use:onClick": callAllEventHandlers(onClickPieRoot, onClick)
   }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref2.cn("PatternFill", {
-    "id": "".concat(uid, "-pattern"),
+    "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 = sstyled(styles), /* @__PURE__ */ React.createElement(SEmptyData, _ref3.cn("SEmptyData", {
     "render": "path",
     "color": resolveColor(color),
@@ -396,9 +435,17 @@ 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 = sstyled(styles), /* @__PURE__ */ React.createElement(SLabel, _ref4.cn("SLabel", {
     "render": "text",
@@ -409,12 +456,14 @@ function Label(_ref17) {
 }
 function DonutTooltip(props) {
   var _ref = arguments[0], _ref5;
-  var SDonutTooltip = Tooltip;
-  return _ref5 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDonutTooltip, _ref5.cn("SDonutTooltip", _objectSpread({}, assignProps({
-    "excludeAnchorProps": true
-  }, _ref))));
+  const SDonutTooltip = Tooltip;
+  return _ref5 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDonutTooltip, _ref5.cn("SDonutTooltip", {
+    ...assignProps({
+      "excludeAnchorProps": true
+    }, _ref)
+  }));
 }
-var Donut = createElement(DonutRoot, {
+const Donut = createElement(DonutRoot, {
   Pie,
   Label,
   EmptyData,