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

package/lib/es6/RadialTree.js

@@ -1,14 +1,5 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
-var _excluded = ["data"];
 import { Component, sstyled } from '@semcore/core';
 import assignProps from '@semcore/core/lib/utils/assignProps';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
@@ -19,257 +10,199 @@ import React from 'react';
 import createElement from './createElement';
 import { PatternSymbol, getPatternSymbolSize } from './Pattern';
 /*!__reshadow-styles__:"./style/radial-tree.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SRadian_1sbqs_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1sbqs_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1sbqs_gg_.__stroke_1sbqs_gg_{stroke:var(--stroke_1sbqs)}.___SLine_1sbqs_gg_.__transparent_1sbqs_gg_{opacity:.3}.___SCap_1sbqs_gg_{transition:r .1s}.___SCap_1sbqs_gg_.__pattern_1sbqs_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:1px}.___SCap_1sbqs_gg_.__transparent_1sbqs_gg_,.___SIcon_1sbqs_gg_.__transparent_1sbqs_gg_,.___SLabel_1sbqs_gg_.__transparent_1sbqs_gg_{opacity:.3}.___SLabel_1sbqs_gg_{fill:var(--color_1sbqs)}@media (hover:hover){.___SRadian_1sbqs_gg_:hover .___SLabel_1sbqs_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_1sbqs_gg_{transition:none}}", /*__inner_css_end__*/"1sbqs_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SRadian_56jyw_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_56jyw_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_56jyw_gg_.__stroke_56jyw_gg_{stroke:var(--stroke_56jyw)}.___SLine_56jyw_gg_.__transparent_56jyw_gg_{opacity:.3}.___SCap_56jyw_gg_{transition:r .1s}.___SCap_56jyw_gg_.__pattern_56jyw_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:1px}.___SCap_56jyw_gg_.__transparent_56jyw_gg_,.___SIcon_56jyw_gg_.__transparent_56jyw_gg_,.___SLabel_56jyw_gg_.__transparent_56jyw_gg_{opacity:.3}.___SLabel_56jyw_gg_{fill:var(--color_56jyw)}@media (hover:hover){.___SRadian_56jyw_gg_:hover .___SLabel_56jyw_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_56jyw_gg_{transition:none}}", /*__inner_css_end__*/"56jyw_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SRadian": "___SRadian_1sbqs_gg_",
-  "__SLine": "___SLine_1sbqs_gg_",
-  "_stroke": "__stroke_1sbqs_gg_",
-  "--stroke": "--stroke_1sbqs",
-  "_transparent": "__transparent_1sbqs_gg_",
-  "__SCap": "___SCap_1sbqs_gg_",
-  "_pattern": "__pattern_1sbqs_gg_",
-  "__SIcon": "___SIcon_1sbqs_gg_",
-  "__SLabel": "___SLabel_1sbqs_gg_",
-  "--color": "--color_1sbqs",
-  "__SLineCap": "___SLineCap_1sbqs_gg_"
+  "__SRadian": "___SRadian_56jyw_gg_",
+  "__SLine": "___SLine_56jyw_gg_",
+  "_stroke": "__stroke_56jyw_gg_",
+  "--stroke": "--stroke_56jyw",
+  "_transparent": "__transparent_56jyw_gg_",
+  "__SCap": "___SCap_56jyw_gg_",
+  "_pattern": "__pattern_56jyw_gg_",
+  "__SIcon": "___SIcon_56jyw_gg_",
+  "__SLabel": "___SLabel_56jyw_gg_",
+  "--color": "--color_56jyw",
+  "__SLineCap": "___SLineCap_56jyw_gg_"
 });
 import { getChartDefaultColorName, measureText } from './utils';
-var baseAngle = -Math.PI / 2; // The top vertical line
+const baseAngle = -Math.PI / 2; // The top vertical line
 
 /** @deprecated */
-var RadialTreeBase = /*#__PURE__*/function (_Component) {
-  function RadialTreeBase(props) {
-    var _this;
-    _classCallCheck(this, RadialTreeBase);
-    _this = _callSuper(this, RadialTreeBase, [props]);
-    _defineProperty(_this, "Element", void 0);
-    _this.handleRadianClick = _this.handleRadianClick.bind(_this);
-    return _this;
+
+class RadialTreeBase extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "Element", void 0);
+    this.handleRadianClick = this.handleRadianClick.bind(this);
   }
-  _inherits(RadialTreeBase, _Component);
-  return _createClass(RadialTreeBase, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        activeKey: null
-      };
-    }
-  }, {
-    key: "runAppearAnimation",
-    value: function runAppearAnimation() {
-      var _window$matchMedia;
-      var _this$asProps = this.asProps,
-        duration = _this$asProps.duration,
-        uid = _this$asProps.uid;
-      if (!canUseDOM()) return;
-      var preferReduceMotion = (_window$matchMedia = window.matchMedia('(prefers-reduced-motion: reduce)')) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.matches;
+  uncontrolledProps() {
+    return {
+      activeKey: null
+    };
+  }
+  runAppearAnimation() {
+    const {
+      duration,
+      uid
+    } = this.asProps;
+    if (!canUseDOM()) return;
+    const preferReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)')?.matches;
 
-      /** using `!(>)` instead of `<=` to get true on Number.NaN and non numbers stuff  */
-      if (!(duration > 0)) return;
-      if (preferReduceMotion) return;
-      var circlesAnimation = transition().selection().selectAll("[data-radial-animation=".concat(uid, "-cap-circle]")).interrupt();
-      var iconsAnimation = transition().selection().selectAll("[data-radial-animation=".concat(uid, "-cap-icon]")).interrupt();
-      var linesAnimation = transition().selection().selectAll("[data-radial-animation=".concat(uid, "-line]")).interrupt();
-      var labelsAnimation = transition().selection().selectAll("[data-radial-animation=".concat(uid, "-label]")).interrupt();
-      var circlesNodes = circlesAnimation.nodes();
-      var iconsNodes = iconsAnimation.nodes();
-      var linesNodes = linesAnimation.nodes();
-      var labelsNodes = linesAnimation.nodes();
-      if (circlesNodes.length > 0) {
-        var attrs = circlesNodes.map(function (node) {
-          var _lineNode$x, _lineNode$y;
-          var radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
-          var lineNode = linesNodes[radianIndex];
-          return {
-            from: {
-              cx: (_lineNode$x = lineNode.x1) === null || _lineNode$x === void 0 || (_lineNode$x = _lineNode$x.baseVal) === null || _lineNode$x === void 0 ? void 0 : _lineNode$x.value,
-              cy: (_lineNode$y = lineNode.y1) === null || _lineNode$y === void 0 || (_lineNode$y = _lineNode$y.baseVal) === null || _lineNode$y === void 0 ? void 0 : _lineNode$y.value
-            },
-            to: {
-              cx: node.dataset['cx'],
-              cy: node.dataset['cy']
-            }
-          };
-        });
-        circlesAnimation.attr('opacity', 0).attr('cx', function (_, index) {
-          var _attrs$index$from;
-          return (_attrs$index$from = attrs[index].from) === null || _attrs$index$from === void 0 ? void 0 : _attrs$index$from.cx;
-        }).attr('cy', function (_, index) {
-          var _attrs$index$from2;
-          return (_attrs$index$from2 = attrs[index].from) === null || _attrs$index$from2 === void 0 ? void 0 : _attrs$index$from2.cy;
-        }).transition().duration(duration).attr('opacity', 1)
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('cx', function (_, index) {
-          var _attrs$index$to;
-          return (_attrs$index$to = attrs[index].to) === null || _attrs$index$to === void 0 ? void 0 : _attrs$index$to.cx;
-        })
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('cy', function (_, index) {
-          var _attrs$index$to2;
-          return (_attrs$index$to2 = attrs[index].to) === null || _attrs$index$to2 === void 0 ? void 0 : _attrs$index$to2.cy;
-        });
-      }
-      if (iconsNodes.length > 0) {
-        var _attrs = iconsNodes.map(function (node) {
-          var _node$width, _node$height, _lineNode$x2, _lineNode$y2;
-          var width = (_node$width = node.width) === null || _node$width === void 0 || (_node$width = _node$width.baseVal) === null || _node$width === void 0 ? void 0 : _node$width.value;
-          var height = (_node$height = node.height) === null || _node$height === void 0 || (_node$height = _node$height.baseVal) === null || _node$height === void 0 ? void 0 : _node$height.value;
-          var radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
-          var lineNode = linesNodes[radianIndex];
-          return {
-            from: {
-              x: ((_lineNode$x2 = lineNode.x1) === null || _lineNode$x2 === void 0 || (_lineNode$x2 = _lineNode$x2.baseVal) === null || _lineNode$x2 === void 0 ? void 0 : _lineNode$x2.value) - width / 2,
-              y: ((_lineNode$y2 = lineNode.y1) === null || _lineNode$y2 === void 0 || (_lineNode$y2 = _lineNode$y2.baseVal) === null || _lineNode$y2 === void 0 ? void 0 : _lineNode$y2.value) - height / 2
-            },
-            to: {
-              x: node.dataset['x'],
-              y: node.dataset['y']
-            }
-          };
-        });
-        iconsAnimation.attr('opacity', 0)
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('x', function (_, index) {
-          var _attrs$index$from3;
-          return (_attrs$index$from3 = _attrs[index].from) === null || _attrs$index$from3 === void 0 ? void 0 : _attrs$index$from3.x;
-        })
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('y', function (_, index) {
-          var _attrs$index$from4;
-          return (_attrs$index$from4 = _attrs[index].from) === null || _attrs$index$from4 === void 0 ? void 0 : _attrs$index$from4.y;
-        }).transition().duration(duration).attr('opacity', 1)
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('x', function (_, index) {
-          var _attrs$index$to3;
-          return (_attrs$index$to3 = _attrs[index].to) === null || _attrs$index$to3 === void 0 ? void 0 : _attrs$index$to3.x;
-        })
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('y', function (_, index) {
-          var _attrs$index$to4;
-          return (_attrs$index$to4 = _attrs[index].to) === null || _attrs$index$to4 === void 0 ? void 0 : _attrs$index$to4.y;
-        });
-      }
-      if (linesNodes.length > 0) {
-        var _attrs2 = linesNodes.map(function (node) {
-          var _node$x, _node$y;
-          return {
-            from: {
-              x2: (_node$x = node.x1) === null || _node$x === void 0 || (_node$x = _node$x.baseVal) === null || _node$x === void 0 ? void 0 : _node$x.value,
-              y2: (_node$y = node.y1) === null || _node$y === void 0 || (_node$y = _node$y.baseVal) === null || _node$y === void 0 ? void 0 : _node$y.value
-            },
-            to: {
-              x2: node.dataset['x2'],
-              y2: node.dataset['y2']
-            }
-          };
-        });
-        linesAnimation.attr('opacity', 0)
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('x2', function (_, index) {
-          var _attrs2$index$from;
-          return (_attrs2$index$from = _attrs2[index].from) === null || _attrs2$index$from === void 0 ? void 0 : _attrs2$index$from.x2;
-        })
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('y2', function (_, index) {
-          var _attrs2$index$from2;
-          return (_attrs2$index$from2 = _attrs2[index].from) === null || _attrs2$index$from2 === void 0 ? void 0 : _attrs2$index$from2.y2;
-        }).transition().duration(duration).attr('opacity', 1)
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('x2', function (_, index) {
-          var _attrs2$index$to;
-          return (_attrs2$index$to = _attrs2[index].to) === null || _attrs2$index$to === void 0 ? void 0 : _attrs2$index$to.x2;
-        })
-        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-        .attr('y2', function (_, index) {
-          var _attrs2$index$to2;
-          return (_attrs2$index$to2 = _attrs2[index].to) === null || _attrs2$index$to2 === void 0 ? void 0 : _attrs2$index$to2.y2;
-        });
-      }
-      if (labelsNodes.length > 0) {
-        labelsAnimation.attr('opacity', 0);
-        labelsAnimation.transition().duration(duration).attr('opacity', 1);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.$rootProps.data !== this.asProps.data) {
-        this.runAppearAnimation();
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.runAppearAnimation();
-    }
-  }, {
-    key: "handleRadianClick",
-    value: function handleRadianClick(key) {
-      var _this2 = this;
-      return function (event) {
-        var newKey = key !== _this2.asProps.activeKey ? key : null;
-        _this2.handlers.activeKey(newKey, event);
-      };
-    }
-  }, {
-    key: "computeTextWidth",
-    value: function computeTextWidth() {
-      var _this$asProps2 = this.asProps,
-        data = _this$asProps2.data,
-        textSize = _this$asProps2.textSize;
-      var widths = data.map(function (_ref0) {
-        var label = _ref0.label;
-        return measureText(label, textSize);
+    /** using `!(>)` instead of `<=` to get true on Number.NaN and non numbers stuff  */
+    if (!(duration > 0)) return;
+    if (preferReduceMotion) return;
+    const circlesAnimation = transition().selection().selectAll(`[data-radial-animation=${uid}-cap-circle]`).interrupt();
+    const iconsAnimation = transition().selection().selectAll(`[data-radial-animation=${uid}-cap-icon]`).interrupt();
+    const linesAnimation = transition().selection().selectAll(`[data-radial-animation=${uid}-line]`).interrupt();
+    const labelsAnimation = transition().selection().selectAll(`[data-radial-animation=${uid}-label]`).interrupt();
+    const circlesNodes = circlesAnimation.nodes();
+    const iconsNodes = iconsAnimation.nodes();
+    const linesNodes = linesAnimation.nodes();
+    const labelsNodes = linesAnimation.nodes();
+    if (circlesNodes.length > 0) {
+      const attrs = circlesNodes.map(node => {
+        const radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
+        const lineNode = linesNodes[radianIndex];
+        return {
+          from: {
+            cx: lineNode.x1?.baseVal?.value,
+            cy: lineNode.y1?.baseVal?.value
+          },
+          to: {
+            cx: node.dataset['cx'],
+            cy: node.dataset['cy']
+          }
+        };
       });
-      return Math.max.apply(Math, _toConsumableArray(widths));
+      circlesAnimation.attr('opacity', 0).attr('cx', (_, index) => attrs[index].from?.cx).attr('cy', (_, index) => attrs[index].from?.cy).transition().duration(duration).attr('opacity', 1)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('cx', (_, index) => attrs[index].to?.cx)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('cy', (_, index) => attrs[index].to?.cy);
     }
-  }, {
-    key: "getTitleProps",
-    value: function getTitleProps() {
-      var _this$asProps3 = this.asProps,
-        uid = _this$asProps3.uid,
-        size = _this$asProps3.size,
-        textSize = _this$asProps3.textSize;
-      var _size = _slicedToArray(size, 2),
-        width = _size[0],
-        height = _size[1];
-      var center = [width / 2, height / 2];
-      var x = center[0],
-        y = center[1];
-      return _defineProperty({
-        x: x,
-        y: y,
-        textSize: textSize * 1.5
-      }, 'data-radial-animation', "".concat(uid, "-label"));
+    if (iconsNodes.length > 0) {
+      const attrs = iconsNodes.map(node => {
+        const width = node.width?.baseVal?.value;
+        const height = node.height?.baseVal?.value;
+        const radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
+        const lineNode = linesNodes[radianIndex];
+        return {
+          from: {
+            x: lineNode.x1?.baseVal?.value - width / 2,
+            y: lineNode.y1?.baseVal?.value - height / 2
+          },
+          to: {
+            x: node.dataset['x'],
+            y: node.dataset['y']
+          }
+        };
+      });
+      iconsAnimation.attr('opacity', 0)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('x', (_, index) => attrs[index].from?.x)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('y', (_, index) => attrs[index].from?.y).transition().duration(duration).attr('opacity', 1)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('x', (_, index) => attrs[index].to?.x)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('y', (_, index) => attrs[index].to?.y);
     }
-  }, {
-    key: "getRadianProps",
-    value: function getRadianProps() {
-      var _this$asProps4 = this.asProps,
-        data = _this$asProps4.data,
-        restRootProps = _objectWithoutProperties(_this$asProps4, _excluded);
-      var textWidth = this.computeTextWidth();
-      return _objectSpread(_objectSpread({}, restRootProps), {}, {
-        radiansCount: data.length,
-        data: data,
-        textWidth: textWidth,
-        onRadianClick: this.handleRadianClick
+    if (linesNodes.length > 0) {
+      const attrs = linesNodes.map(node => {
+        return {
+          from: {
+            x2: node.x1?.baseVal?.value,
+            y2: node.y1?.baseVal?.value
+          },
+          to: {
+            x2: node.dataset['x2'],
+            y2: node.dataset['y2']
+          }
+        };
       });
+      linesAnimation.attr('opacity', 0)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('x2', (_, index) => attrs[index].from?.x2)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('y2', (_, index) => attrs[index].from?.y2).transition().duration(duration).attr('opacity', 1)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('x2', (_, index) => attrs[index].to?.x2)
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+      .attr('y2', (_, index) => attrs[index].to?.y2);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref;
-      var SRadialTree = this.Element;
-      var Children = this.asProps.Children;
-      this.asProps.dataHintsHandler.establishDataType('values-set');
-      return _ref = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SRadialTree, _ref.cn("SRadialTree", {
-        "render": 'g'
-      }), /*#__PURE__*/React.createElement(Children, _ref.cn("Children", {})));
+    if (labelsNodes.length > 0) {
+      labelsAnimation.attr('opacity', 0);
+      labelsAnimation.transition().duration(duration).attr('opacity', 1);
     }
-  }]);
-}(Component);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.$rootProps.data !== this.asProps.data) {
+      this.runAppearAnimation();
+    }
+  }
+  componentDidMount() {
+    this.runAppearAnimation();
+  }
+  handleRadianClick(key) {
+    return event => {
+      const newKey = key !== this.asProps.activeKey ? key : null;
+      this.handlers.activeKey(newKey, event);
+    };
+  }
+  computeTextWidth() {
+    const {
+      data,
+      textSize
+    } = this.asProps;
+    const widths = data.map(({
+      label
+    }) => measureText(label, textSize));
+    return Math.max(...widths);
+  }
+  getTitleProps() {
+    const {
+      uid,
+      size,
+      textSize
+    } = this.asProps;
+    const [width, height] = size;
+    const center = [width / 2, height / 2];
+    const [x, y] = center;
+    return {
+      x,
+      y,
+      textSize: textSize * 1.5,
+      ['data-radial-animation']: `${uid}-label`
+    };
+  }
+  getRadianProps() {
+    const {
+      data,
+      ...restRootProps
+    } = this.asProps;
+    const textWidth = this.computeTextWidth();
+    return {
+      ...restRootProps,
+      radiansCount: data.length,
+      data,
+      textWidth,
+      onRadianClick: this.handleRadianClick
+    };
+  }
+  render() {
+    var _ref;
+    const SRadialTree = this.Element;
+    const {
+      Children
+    } = this.asProps;
+    this.asProps.dataHintsHandler.establishDataType('values-set');
+    return _ref = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SRadialTree, _ref.cn("SRadialTree", {
+      "render": 'g'
+    }), /*#__PURE__*/React.createElement(Children, _ref.cn("Children", {})));
+  }
+}
+
 /** @deprecated */
 _defineProperty(RadialTreeBase, "displayName", 'RadialTree');
 _defineProperty(RadialTreeBase, "style", style);
@@ -285,227 +218,242 @@ _defineProperty(RadialTreeBase, "defaultProps", {
   textSize: 14,
   defaultActiveKey: null
 });
-var RadialTreeRadian = /*#__PURE__*/function (_Component2) {
-  function RadialTreeRadian(props) {
-    var _this3;
-    _classCallCheck(this, RadialTreeRadian);
-    _this3 = _callSuper(this, RadialTreeRadian, [props]);
-    _defineProperty(_this3, "Element", void 0);
-    _this3.renderRadian = _this3.renderRadian.bind(_this3);
-    return _this3;
+class RadialTreeRadian extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "Element", void 0);
+    this.renderRadian = this.renderRadian.bind(this);
   }
-  _inherits(RadialTreeRadian, _Component2);
-  return _createClass(RadialTreeRadian, [{
-    key: "getInteractiveAreaProps",
-    value: function getInteractiveAreaProps(_ref10, index) {
-      var _$rootProps$data;
-      var $rootProps = _ref10.$rootProps;
-      var data = (_$rootProps$data = $rootProps.data) === null || _$rootProps$data === void 0 ? void 0 : _$rootProps$data[index];
-      var _this$computeRadianPo = this.computeRadianPosition(data, index),
-        xStart = _this$computeRadianPo.xStart,
-        yStart = _this$computeRadianPo.yStart,
-        xLabelCenter = _this$computeRadianPo.xLabelCenter,
-        yLabelCenter = _this$computeRadianPo.yLabelCenter,
-        capSize = _this$computeRadianPo.capSize;
-      return {
-        x1: xStart,
-        y1: yStart,
-        x2: xLabelCenter,
-        y2: yLabelCenter,
-        strokeWidth: capSize * 3
-      };
-    }
-  }, {
-    key: "getLineProps",
-    value: function getLineProps(_ref11, index) {
-      var _$rootProps$data2, _color;
-      var $rootProps = _ref11.$rootProps;
-      var data = (_$rootProps$data2 = $rootProps.data) === null || _$rootProps$data2 === void 0 ? void 0 : _$rootProps$data2[index];
-      var _this$computeRadianPo2 = this.computeRadianPosition(data, index),
-        xStart = _this$computeRadianPo2.xStart,
-        yStart = _this$computeRadianPo2.yStart,
-        xEnd = _this$computeRadianPo2.xEnd,
-        yEnd = _this$computeRadianPo2.yEnd;
-      var _this$asProps5 = this.asProps,
-        uid = _this$asProps5.uid,
-        transparent = _this$asProps5.transparent,
-        resolveColor = _this$asProps5.resolveColor;
-      var color = (_color = data.color) !== null && _color !== void 0 ? _color : this.asProps.color;
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-        x1: xStart,
-        y1: yStart,
-        x2: xEnd,
-        y2: yEnd,
-        stroke: color,
-        resolveColor: resolveColor,
-        transparent: transparent
-      }, 'data-x1', xStart), 'data-y1', yStart), 'data-x2', xEnd), 'data-y2', yEnd), 'data-radial-animation', "".concat(uid, "-line")), 'data-radian-index', index);
-    }
-  }, {
-    key: "getCapProps",
-    value: function getCapProps(_ref13, index) {
-      var _$rootProps$data3, _color2;
-      var $rootProps = _ref13.$rootProps;
-      var data = (_$rootProps$data3 = $rootProps.data) === null || _$rootProps$data3 === void 0 ? void 0 : _$rootProps$data3[index];
-      var _this$computeRadianPo3 = this.computeRadianPosition(data, index),
-        xEnd = _this$computeRadianPo3.xEnd,
-        yEnd = _this$computeRadianPo3.yEnd,
-        capSize = _this$computeRadianPo3.capSize;
-      var _this$asProps6 = this.asProps,
-        uid = _this$asProps6.uid,
-        transparent = _this$asProps6.transparent,
-        resolveColor = _this$asProps6.resolveColor,
-        patterns = _this$asProps6.patterns;
-      var color = (_color2 = data.color) !== null && _color2 !== void 0 ? _color2 : this.asProps.color;
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-        x: xEnd,
-        y: yEnd
-      }, 'data-cx', xEnd), 'data-cy', yEnd), "radius", capSize), "color", color), "resolveColor", resolveColor), "transparent", transparent), "patterns", patterns), "uid", "".concat(uid, "-cap-").concat(index)), 'data-radial-animation', "".concat(uid, "-cap-circle")), 'data-radian-index', index);
-    }
-  }, {
-    key: "getIconProps",
-    value: function getIconProps(_ref15, index) {
-      var _$rootProps$data4, _iconColor, _iconSize, _icon;
-      var $rootProps = _ref15.$rootProps;
-      var data = (_$rootProps$data4 = $rootProps.data) === null || _$rootProps$data4 === void 0 ? void 0 : _$rootProps$data4[index];
-      var _this$computeRadianPo4 = this.computeRadianPosition(data, index),
-        xEnd = _this$computeRadianPo4.xEnd,
-        yEnd = _this$computeRadianPo4.yEnd,
-        isActive = _this$computeRadianPo4.isActive;
-      var _this$asProps7 = this.asProps,
-        uid = _this$asProps7.uid,
-        resolveColor = _this$asProps7.resolveColor;
-      var iconColor = (_iconColor = data.iconColor) !== null && _iconColor !== void 0 ? _iconColor : this.asProps.iconColor;
-      var iconSize = (_iconSize = data.iconSize) !== null && _iconSize !== void 0 ? _iconSize : this.asProps.iconSize;
-      var icon = (_icon = data.icon) !== null && _icon !== void 0 ? _icon : this.asProps.icon;
-      var x = xEnd - iconSize / 2;
-      var y = yEnd - iconSize / 2;
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-        x: x,
-        y: y
-      }, 'data-x', x), 'data-y', y), "iconSize", iconSize), "color", iconColor !== null && iconColor !== void 0 ? iconColor : '#fff'), "resolveColor", resolveColor), 'data-radial-animation', "".concat(uid, "-cap-icon")), 'data-radian-index', index), "icon", icon), "tag", icon), "isActive", isActive);
-    }
-  }, {
-    key: "getLabelProps",
-    value: function getLabelProps(_ref17, index) {
-      var _$rootProps$data5, _color3;
-      var $rootProps = _ref17.$rootProps;
-      var data = (_$rootProps$data5 = $rootProps.data) === null || _$rootProps$data5 === void 0 ? void 0 : _$rootProps$data5[index];
-      var _this$computeRadianPo5 = this.computeRadianPosition(data, index),
-        xLabelCenter = _this$computeRadianPo5.xLabelCenter,
-        yLabelCenter = _this$computeRadianPo5.yLabelCenter,
-        labelAngle = _this$computeRadianPo5.labelAngle,
-        isHorizontal = _this$computeRadianPo5.isHorizontal;
-      var _this$asProps8 = this.asProps,
-        uid = _this$asProps8.uid,
-        textSize = _this$asProps8.textSize,
-        transparent = _this$asProps8.transparent,
-        resolveColor = _this$asProps8.resolveColor;
-      var _ref18 = data,
-        label = _ref18.label;
-      var color = (_color3 = data.color) !== null && _color3 !== void 0 ? _color3 : this.asProps.color;
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-        x: xLabelCenter,
-        y: yLabelCenter,
-        angle: labelAngle
-      }, 'data-radial-animation', "".concat(uid, "-label")), 'data-radian-index', index), "label", label), "color", color), "resolveColor", resolveColor), "isHorizontal", isHorizontal), "textSize", textSize), "transparent", transparent);
-    }
-  }, {
-    key: "getRadianKey",
-    value: function getRadianKey(data, index) {
-      var _data$key;
-      return (_data$key = data.key) !== null && _data$key !== void 0 ? _data$key : "radian-".concat(index);
-    }
-  }, {
-    key: "computeRadianPosition",
-    value: function computeRadianPosition(data, index) {
-      var _data$capSize;
-      var _this$asProps9 = this.asProps,
-        centralMargin = _this$asProps9.centralMargin,
-        labelMargin = _this$asProps9.labelMargin,
-        angleOffset = _this$asProps9.angleOffset,
-        activeKey = _this$asProps9.activeKey,
-        size = _this$asProps9.size,
-        radiansCount = _this$asProps9.radiansCount,
-        textWidth = _this$asProps9.textWidth;
-      var _size2 = _slicedToArray(size, 2),
-        width = _size2[0],
-        height = _size2[1];
-      var key = this.getRadianKey(data, index);
-      var isActive = activeKey === key;
-      var baseCapSize = (_data$capSize = data.capSize) !== null && _data$capSize !== void 0 ? _data$capSize : this.asProps.capSize;
-      var capSize = baseCapSize * (isActive ? 1 : 0.5);
-      var minDemSize = Math.min(width, height) / 2;
-      var length = Math.max(minDemSize - textWidth - baseCapSize - centralMargin - labelMargin * 2, 10);
-      var angle = baseAngle + angleOffset + index / radiansCount * (Math.PI * 2);
-      var isHorizontal = angle - baseAngle > 1 / 6 * Math.PI && angle - baseAngle < 5 / 6 * Math.PI || angle - baseAngle > 7 / 6 * Math.PI && angle - baseAngle < 11 / 6 * Math.PI;
-      var topAngle = -Math.PI / 2;
-      var labelAngle = (angle - topAngle) % Math.PI + topAngle;
-      var center = [width / 2, height / 2];
-      var xCenter = center[0],
-        yCenter = center[1];
-      var start = [xCenter + Math.cos(angle) * centralMargin, yCenter + Math.sin(angle) * centralMargin];
-      var end = [xCenter + Math.cos(angle) * (centralMargin + length), yCenter + Math.sin(angle) * (centralMargin + length)];
-      var xStart = start[0],
-        yStart = start[1];
-      var xEnd = end[0],
-        yEnd = end[1];
-      var labelCenter = [xCenter + Math.cos(angle) * (centralMargin + length + baseCapSize + textWidth / 2 + labelMargin), yCenter + Math.sin(angle) * (centralMargin + length + baseCapSize + textWidth / 2 + labelMargin)];
-      var xLabelCenter = labelCenter[0],
-        yLabelCenter = labelCenter[1];
-      return {
-        xStart: xStart,
-        yStart: yStart,
-        xEnd: xEnd,
-        yEnd: yEnd,
-        xLabelCenter: xLabelCenter,
-        yLabelCenter: yLabelCenter,
-        labelAngle: labelAngle,
-        isHorizontal: isHorizontal,
-        capSize: capSize,
-        isActive: isActive
-      };
+  getInteractiveAreaProps({
+    $rootProps
+  }, index) {
+    const data = $rootProps.data?.[index];
+    const {
+      xStart,
+      yStart,
+      xLabelCenter,
+      yLabelCenter,
+      capSize
+    } = this.computeRadianPosition(data, index);
+    return {
+      x1: xStart,
+      y1: yStart,
+      x2: xLabelCenter,
+      y2: yLabelCenter,
+      strokeWidth: capSize * 3
+    };
+  }
+  getLineProps({
+    $rootProps
+  }, index) {
+    const data = $rootProps.data?.[index];
+    const {
+      xStart,
+      yStart,
+      xEnd,
+      yEnd
+    } = this.computeRadianPosition(data, index);
+    const {
+      uid,
+      transparent,
+      resolveColor
+    } = this.asProps;
+    const color = data.color ?? this.asProps.color;
+    return {
+      x1: xStart,
+      y1: yStart,
+      x2: xEnd,
+      y2: yEnd,
+      stroke: color,
+      resolveColor,
+      transparent,
+      ['data-x1']: xStart,
+      ['data-y1']: yStart,
+      ['data-x2']: xEnd,
+      ['data-y2']: yEnd,
+      ['data-radial-animation']: `${uid}-line`,
+      ['data-radian-index']: index
+    };
+  }
+  getCapProps({
+    $rootProps
+  }, index) {
+    const data = $rootProps.data?.[index];
+    const {
+      xEnd,
+      yEnd,
+      capSize
+    } = this.computeRadianPosition(data, index);
+    const {
+      uid,
+      transparent,
+      resolveColor,
+      patterns
+    } = this.asProps;
+    const color = data.color ?? this.asProps.color;
+    return {
+      x: xEnd,
+      y: yEnd,
+      ['data-cx']: xEnd,
+      ['data-cy']: yEnd,
+      radius: capSize,
+      color,
+      resolveColor,
+      transparent,
+      patterns,
+      uid: `${uid}-cap-${index}`,
+      ['data-radial-animation']: `${uid}-cap-circle`,
+      ['data-radian-index']: index
+    };
+  }
+  getIconProps({
+    $rootProps
+  }, index) {
+    const data = $rootProps.data?.[index];
+    const {
+      xEnd,
+      yEnd,
+      isActive
+    } = this.computeRadianPosition(data, index);
+    const {
+      uid,
+      resolveColor
+    } = this.asProps;
+    const iconColor = data.iconColor ?? this.asProps.iconColor;
+    const iconSize = data.iconSize ?? this.asProps.iconSize;
+    const icon = data.icon ?? this.asProps.icon;
+    const x = xEnd - iconSize / 2;
+    const y = yEnd - iconSize / 2;
+    return {
+      x,
+      y,
+      ['data-x']: x,
+      ['data-y']: y,
+      iconSize,
+      color: iconColor ?? '#fff',
+      resolveColor,
+      ['data-radial-animation']: `${uid}-cap-icon`,
+      ['data-radian-index']: index,
+      icon,
+      tag: icon,
+      isActive
+    };
+  }
+  getLabelProps({
+    $rootProps
+  }, index) {
+    const data = $rootProps.data?.[index];
+    const {
+      xLabelCenter,
+      yLabelCenter,
+      labelAngle,
+      isHorizontal
+    } = this.computeRadianPosition(data, index);
+    const {
+      uid,
+      textSize,
+      transparent,
+      resolveColor
+    } = this.asProps;
+    const {
+      label
+    } = data;
+    const color = data.color ?? this.asProps.color;
+    return {
+      x: xLabelCenter,
+      y: yLabelCenter,
+      angle: labelAngle,
+      ['data-radial-animation']: `${uid}-label`,
+      ['data-radian-index']: index,
+      label,
+      color,
+      resolveColor,
+      isHorizontal,
+      textSize,
+      transparent
+    };
+  }
+  getRadianKey(data, index) {
+    return data.key ?? `radian-${index}`;
+  }
+  computeRadianPosition(data, index) {
+    const {
+      centralMargin,
+      labelMargin,
+      angleOffset,
+      activeKey,
+      size,
+      radiansCount,
+      textWidth
+    } = this.asProps;
+    const [width, height] = size;
+    const key = this.getRadianKey(data, index);
+    const isActive = activeKey === key;
+    const baseCapSize = data.capSize ?? this.asProps.capSize;
+    const capSize = baseCapSize * (isActive ? 1 : 0.5);
+    const minDemSize = Math.min(width, height) / 2;
+    const length = Math.max(minDemSize - textWidth - baseCapSize - centralMargin - labelMargin * 2, 10);
+    const angle = baseAngle + angleOffset + index / radiansCount * (Math.PI * 2);
+    const isHorizontal = angle - baseAngle > 1 / 6 * Math.PI && angle - baseAngle < 5 / 6 * Math.PI || angle - baseAngle > 7 / 6 * Math.PI && angle - baseAngle < 11 / 6 * Math.PI;
+    const topAngle = -Math.PI / 2;
+    const labelAngle = (angle - topAngle) % Math.PI + topAngle;
+    const center = [width / 2, height / 2];
+    const [xCenter, yCenter] = center;
+    const start = [xCenter + Math.cos(angle) * centralMargin, yCenter + Math.sin(angle) * centralMargin];
+    const end = [xCenter + Math.cos(angle) * (centralMargin + length), yCenter + Math.sin(angle) * (centralMargin + length)];
+    const [xStart, yStart] = start;
+    const [xEnd, yEnd] = end;
+    const labelCenter = [xCenter + Math.cos(angle) * (centralMargin + length + baseCapSize + textWidth / 2 + labelMargin), yCenter + Math.sin(angle) * (centralMargin + length + baseCapSize + textWidth / 2 + labelMargin)];
+    const [xLabelCenter, yLabelCenter] = labelCenter;
+    return {
+      xStart,
+      yStart,
+      xEnd,
+      yEnd,
+      xLabelCenter,
+      yLabelCenter,
+      labelAngle,
+      isHorizontal,
+      capSize,
+      isActive
+    };
+  }
+  renderRadian(data, index) {
+    var _ref2;
+    const {
+      styles,
+      Children,
+      onRadianClick
+    } = this.asProps;
+    const key = this.getRadianKey(data, index);
+    const SRadian = 'g';
+    let children = getOriginChildren(Children);
+    if (typeof children === 'function') {
+      const _child = this.asProps.children;
+      const mergedProps = assignProps(children(this.asProps), this.asProps);
+      children = mergedProps.children;
+      mergedProps.children = _child;
     }
-  }, {
-    key: "renderRadian",
-    value: function renderRadian(data, index) {
-      var _ref2;
-      var _this$asProps0 = this.asProps,
-        styles = _this$asProps0.styles,
-        Children = _this$asProps0.Children,
-        onRadianClick = _this$asProps0.onRadianClick;
-      var key = this.getRadianKey(data, index);
-      var SRadian = 'g';
-      var children = getOriginChildren(Children);
-      if (typeof children === 'function') {
-        var _child = this.asProps.children;
-        var mergedProps = assignProps(children(this.asProps), this.asProps);
-        children = mergedProps.children;
-        mergedProps.children = _child;
-      }
-      this.asProps.dataHintsHandler.describeValueEntity("".concat(index, ".").concat(data.label), data.label);
+    this.asProps.dataHintsHandler.describeValueEntity(`${index}.${data.label}`, data.label);
+
+    // hidden from publicly typed export
+    const InteractiveArea = RadialTree.Radian.InteractiveArea;
+    return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SRadian, _ref2.cn("SRadian", {
+      "aria-hidden": true,
+      "key": key,
+      "onClick": onRadianClick(key)
+    }), /*#__PURE__*/React.createElement(InteractiveArea, _ref2.cn("InteractiveArea", {})), children);
+  }
+  render() {
+    var _ref3;
+    const {
+      data
+    } = this.asProps;
+    const SRadianList = 'g';
+    return _ref3 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SRadianList, _ref3.cn("SRadianList", {}), data.map((data, index) => this.renderRadian(data, index)));
+  }
+}
 
-      // hidden from publicly typed export
-      var InteractiveArea = RadialTree.Radian.InteractiveArea;
-      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SRadian, _ref2.cn("SRadian", {
-        "aria-hidden": true,
-        "key": key,
-        "onClick": onRadianClick(key)
-      }), /*#__PURE__*/React.createElement(InteractiveArea, _ref2.cn("InteractiveArea", {})), children);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref3,
-        _this4 = this;
-      var data = this.asProps.data;
-      var SRadianList = 'g';
-      return _ref3 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SRadianList, _ref3.cn("SRadianList", {}), data.map(function (data, index) {
-        return _this4.renderRadian(data, index);
-      }));
-    }
-  }]);
-}(Component);
 /** @deprecated */
 _defineProperty(RadialTreeRadian, "displayName", 'RadialTreeRadian');
 _defineProperty(RadialTreeRadian, "style", style);
@@ -517,10 +465,11 @@ _defineProperty(RadialTreeRadian, "defaultProps", {
   iconSize: 16,
   textSize: 14
 });
-function InteractiveArea(_ref20) {
+function InteractiveArea({
+  Element: SInteractiveArea,
+  styles
+}) {
   var _ref4;
-  var SInteractiveArea = _ref20.Element,
-    styles = _ref20.styles;
   return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SInteractiveArea, _ref4.cn("SInteractiveArea", {
     "stroke": 'transparent',
     "render": 'line'
@@ -529,13 +478,14 @@ function InteractiveArea(_ref20) {
 
 /** @deprecated */
 
-function Line(_ref21) {
+function Line({
+  Element: SLine,
+  styles,
+  stroke,
+  resolveColor,
+  transparent
+}) {
   var _ref5;
-  var SLine = _ref21.Element,
-    styles = _ref21.styles,
-    stroke = _ref21.stroke,
-    resolveColor = _ref21.resolveColor,
-    transparent = _ref21.transparent;
   return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SLine, _ref5.cn("SLine", {
     "render": 'line',
     "stroke": resolveColor(stroke),
@@ -545,19 +495,18 @@ function Line(_ref21) {
 
 /** @deprecated */
 
-function Cap(_ref22) {
+function Cap({
+  Element: SCap,
+  styles,
+  x = 0,
+  y = 0,
+  radius,
+  color,
+  resolveColor,
+  transparent,
+  patterns
+}) {
   var _ref7;
-  var SCap = _ref22.Element,
-    styles = _ref22.styles,
-    _ref22$x = _ref22.x,
-    x = _ref22$x === void 0 ? 0 : _ref22$x,
-    _ref22$y = _ref22.y,
-    y = _ref22$y === void 0 ? 0 : _ref22$y,
-    radius = _ref22.radius,
-    color = _ref22.color,
-    resolveColor = _ref22.resolveColor,
-    transparent = _ref22.transparent,
-    patterns = _ref22.patterns;
   if (!patterns) {
     var _ref6;
     return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SCap, _ref6.cn("SCap", {
@@ -569,14 +518,11 @@ function Cap(_ref22) {
       "transparent": transparent
     }));
   }
-  var patternKey = color || getChartDefaultColorName(0);
-  var _getPatternSymbolSize = getPatternSymbolSize({
-      patternKey: patternKey,
-      patterns: patterns
-    }),
-    _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2),
-    width = _getPatternSymbolSize2[0],
-    height = _getPatternSymbolSize2[1];
+  const patternKey = color || getChartDefaultColorName(0);
+  const [width, height] = getPatternSymbolSize({
+    patternKey,
+    patterns
+  });
   return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SCap, _ref7.cn("SCap", {
     "render": PatternSymbol,
     "patternKey": color,
@@ -590,19 +536,20 @@ function Cap(_ref22) {
 
 /** @deprecated */
 
-function Icon(_ref23) {
+function Icon({
+  Element: SIcon,
+  styles,
+  isActive,
+  tag,
+  x,
+  y,
+  iconSize,
+  transparent
+}) {
   var _ref8;
-  var SIcon = _ref23.Element,
-    styles = _ref23.styles,
-    isActive = _ref23.isActive,
-    tag = _ref23.tag,
-    x = _ref23.x,
-    y = _ref23.y,
-    iconSize = _ref23.iconSize,
-    transparent = _ref23.transparent;
   if (!(isActive && tag)) return null;
-  var width = iconSize;
-  var height = iconSize;
+  const width = iconSize;
+  const height = iconSize;
   return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SIcon, _ref8.cn("SIcon", {
     "x": x,
     "y": y,
@@ -615,30 +562,31 @@ function Icon(_ref23) {
 
 /** @deprecated */
 
-function Label(_ref24) {
-  var SLabel = _ref24.Element,
-    Children = _ref24.Children,
-    styles = _ref24.styles,
-    label = _ref24.label,
-    color = _ref24.color,
-    resolveColor = _ref24.resolveColor,
-    isHorizontal = _ref24.isHorizontal,
-    x = _ref24.x,
-    y = _ref24.y,
-    textSize = _ref24.textSize,
-    angle = _ref24.angle,
-    transparent = _ref24.transparent;
-  var lines = String(label).split('\n');
-  var linesCount = lines.length;
-  var SLabelLine = 'tspan';
-  var angleDegs = (angle / Math.PI * 180).toFixed(2);
-  var transformOrigin = [x.toFixed(2), y.toFixed(2)];
-  var transform = "rotate(".concat([angleDegs].concat(transformOrigin).join(', '), ")");
-  var sstyles = sstyled(styles);
-  var sLabelStyles = sstyles.cn('SLabel', {
+function Label({
+  Element: SLabel,
+  Children,
+  styles,
+  label,
+  color,
+  resolveColor,
+  isHorizontal,
+  x,
+  y,
+  textSize,
+  angle,
+  transparent
+}) {
+  const lines = String(label).split('\n');
+  const linesCount = lines.length;
+  const SLabelLine = 'tspan';
+  const angleDegs = (angle / Math.PI * 180).toFixed(2);
+  const transformOrigin = [x.toFixed(2), y.toFixed(2)];
+  const transform = `rotate(${[angleDegs, ...transformOrigin].join(', ')})`;
+  const sstyles = sstyled(styles);
+  const sLabelStyles = sstyles.cn('SLabel', {
     'color': resolveColor(color),
     'text-cursor': isHorizontal ? 'text' : 'vertical-text',
-    transparent: transparent
+    transparent
   });
   return /*#__PURE__*/React.createElement(SLabel, {
     "aria-hidden": true,
@@ -650,36 +598,35 @@ function Label(_ref24) {
     x: x.toFixed(2),
     y: y.toFixed(2),
     transform: transform
-  }, lines.map(function (lineText, lineIndex) {
-    return /*#__PURE__*/React.createElement(SLabelLine, {
-      x: x,
-      y: y + (lineIndex - (linesCount - 1) / 2) * textSize,
-      key: "#".concat(lineIndex, "-").concat(lineText)
-    }, lineText);
-  }), /*#__PURE__*/React.createElement(Children, null));
+  }, lines.map((lineText, lineIndex) => /*#__PURE__*/React.createElement(SLabelLine, {
+    x: x,
+    y: y + (lineIndex - (linesCount - 1) / 2) * textSize,
+    key: `#${lineIndex}-${lineText}`
+  }, lineText)), /*#__PURE__*/React.createElement(Children, null));
 }
-var Radian = createElement(RadialTreeRadian, {
-  InteractiveArea: InteractiveArea,
-  Line: Line,
-  Cap: Cap,
-  Icon: Icon,
-  Label: Label
+const Radian = createElement(RadialTreeRadian, {
+  InteractiveArea,
+  Line,
+  Cap,
+  Icon,
+  Label
 });
 
 /** @deprecated */
 
-function Title(_ref25) {
+function Title({
+  Element: STitle,
+  Children,
+  children,
+  styles,
+  textSize,
+  color,
+  resolveColor,
+  x,
+  y,
+  dataHintsHandler
+}) {
   var _ref9;
-  var STitle = _ref25.Element,
-    Children = _ref25.Children,
-    children = _ref25.children,
-    styles = _ref25.styles,
-    textSize = _ref25.textSize,
-    color = _ref25.color,
-    resolveColor = _ref25.resolveColor,
-    x = _ref25.x,
-    y = _ref25.y,
-    dataHintsHandler = _ref25.dataHintsHandler;
   if (typeof children === 'string') {
     dataHintsHandler.setTitle('vertical', children);
   }
@@ -694,9 +641,9 @@ function Title(_ref25) {
     "y": y
   }), /*#__PURE__*/React.createElement(Children, _ref9.cn("Children", {})));
 }
-var RadialTree = createElement(RadialTreeBase, {
-  Title: Title,
-  Radian: Radian
+const RadialTree = createElement(RadialTreeBase, {
+  Title,
+  Radian
 });
 export default RadialTree;
 //# sourceMappingURL=RadialTree.js.map