@semcore/d3-chart 3.60.0 → 3.60.1

package/lib/esm/RadialTree.mjs

@@ -0,0 +1,565 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import React from "react";
+import { transition } from "d3-transition";
+import { sstyled as sstyled$1, Component } from "@semcore/core";
+import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import assignProps from "@semcore/utils/lib/assignProps";
+import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
+import canUseDOM from "@semcore/utils/lib/canUseDOM";
+import createElement from "./createElement.mjs";
+import { measureText, getChartDefaultColorName } from "./utils.mjs";
+import { getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
+var _excluded = ["data"];
+/*!__reshadow-styles__:"./style/radial-tree.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SRadian_o1tue_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_o1tue_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_o1tue_gg_.__stroke_o1tue_gg_{stroke:var(--stroke_o1tue)}.___SLine_o1tue_gg_.__transparent_o1tue_gg_{opacity:.3}.___SCap_o1tue_gg_{transition:r .1s}.___SCap_o1tue_gg_.__pattern_o1tue_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:1px}.___SCap_o1tue_gg_.__transparent_o1tue_gg_,.___SIcon_o1tue_gg_.__transparent_o1tue_gg_,.___SLabel_o1tue_gg_.__transparent_o1tue_gg_{opacity:.3}.___SLabel_o1tue_gg_{fill:var(--color_o1tue)}@media (hover:hover){.___SRadian_o1tue_gg_:hover .___SLabel_o1tue_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_o1tue_gg_{transition:none}}",
+    /*__inner_css_end__*/
+    "o1tue_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SRadian": "___SRadian_o1tue_gg_",
+    "__SLine": "___SLine_o1tue_gg_",
+    "_stroke": "__stroke_o1tue_gg_",
+    "--stroke": "--stroke_o1tue",
+    "_transparent": "__transparent_o1tue_gg_",
+    "__SCap": "___SCap_o1tue_gg_",
+    "_pattern": "__pattern_o1tue_gg_",
+    "__SIcon": "___SIcon_o1tue_gg_",
+    "__SLabel": "___SLabel_o1tue_gg_",
+    "--color": "--color_o1tue",
+    "__SLineCap": "___SLineCap_o1tue_gg_"
+  })
+);
+var baseAngle = -Math.PI / 2;
+var RadialTreeBase = /* @__PURE__ */ function(_Component) {
+  _inherits(RadialTreeBase2, _Component);
+  var _super = _createSuper(RadialTreeBase2);
+  function RadialTreeBase2(props) {
+    var _this;
+    _classCallCheck(this, RadialTreeBase2);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "Element", void 0);
+    _this.handleRadianClick = _this.handleRadianClick.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  _createClass(RadialTreeBase2, [{
+    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;
+      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$x$baseVal, _lineNode$y, _lineNode$y$baseVal;
+          var radianIndex = parseInt(node.dataset.radianIndex, 10);
+          var lineNode = linesNodes[radianIndex];
+          return {
+            from: {
+              cx: (_lineNode$x = lineNode.x1) === null || _lineNode$x === void 0 ? void 0 : (_lineNode$x$baseVal = _lineNode$x.baseVal) === null || _lineNode$x$baseVal === void 0 ? void 0 : _lineNode$x$baseVal.value,
+              cy: (_lineNode$y = lineNode.y1) === null || _lineNode$y === void 0 ? void 0 : (_lineNode$y$baseVal = _lineNode$y.baseVal) === null || _lineNode$y$baseVal === void 0 ? void 0 : _lineNode$y$baseVal.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).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;
+        }).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$width$baseVal, _node$height, _node$height$baseVal, _lineNode$x2, _lineNode$x2$baseVal, _lineNode$y2, _lineNode$y2$baseVal;
+          var width = (_node$width = node.width) === null || _node$width === void 0 ? void 0 : (_node$width$baseVal = _node$width.baseVal) === null || _node$width$baseVal === void 0 ? void 0 : _node$width$baseVal.value;
+          var height = (_node$height = node.height) === null || _node$height === void 0 ? void 0 : (_node$height$baseVal = _node$height.baseVal) === null || _node$height$baseVal === void 0 ? void 0 : _node$height$baseVal.value;
+          var radianIndex = parseInt(node.dataset.radianIndex, 10);
+          var lineNode = linesNodes[radianIndex];
+          return {
+            from: {
+              x: ((_lineNode$x2 = lineNode.x1) === null || _lineNode$x2 === void 0 ? void 0 : (_lineNode$x2$baseVal = _lineNode$x2.baseVal) === null || _lineNode$x2$baseVal === void 0 ? void 0 : _lineNode$x2$baseVal.value) - width / 2,
+              y: ((_lineNode$y2 = lineNode.y1) === null || _lineNode$y2 === void 0 ? void 0 : (_lineNode$y2$baseVal = _lineNode$y2.baseVal) === null || _lineNode$y2$baseVal === void 0 ? void 0 : _lineNode$y2$baseVal.value) - height / 2
+            },
+            to: {
+              x: node.dataset["x"],
+              y: node.dataset["y"]
+            }
+          };
+        });
+        iconsAnimation.attr("opacity", 0).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;
+        }).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).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;
+        }).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$x$baseVal, _node$y, _node$y$baseVal;
+          return {
+            from: {
+              x2: (_node$x = node.x1) === null || _node$x === void 0 ? void 0 : (_node$x$baseVal = _node$x.baseVal) === null || _node$x$baseVal === void 0 ? void 0 : _node$x$baseVal.value,
+              y2: (_node$y = node.y1) === null || _node$y === void 0 ? void 0 : (_node$y$baseVal = _node$y.baseVal) === null || _node$y$baseVal === void 0 ? void 0 : _node$y$baseVal.value
+            },
+            to: {
+              x2: node.dataset["x2"],
+              y2: node.dataset["y2"]
+            }
+          };
+        });
+        linesAnimation.attr("opacity", 0).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;
+        }).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).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;
+        }).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(_ref10) {
+        var label = _ref10.label;
+        return measureText(label, textSize);
+      });
+      return Math.max.apply(Math, _toConsumableArray(widths));
+    }
+  }, {
+    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,
+        y,
+        textSize: textSize * 1.5
+      }, "data-radial-animation", "".concat(uid, "-label"));
+    }
+  }, {
+    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,
+        textWidth,
+        onRadianClick: this.handleRadianClick
+      });
+    }
+  }, {
+    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$1(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadialTree, _ref.cn("SRadialTree", {
+        "render": "g"
+      }), /* @__PURE__ */ React.createElement(Children, _ref.cn("Children", {})));
+    }
+  }]);
+  return RadialTreeBase2;
+}(Component);
+_defineProperty(RadialTreeBase, "displayName", "RadialTree");
+_defineProperty(RadialTreeBase, "style", style);
+_defineProperty(RadialTreeBase, "enhance", [uniqueIDEnhancement()]);
+_defineProperty(RadialTreeBase, "defaultProps", {
+  angleOffset: 0,
+  duration: 300,
+  centralMargin: 50,
+  labelMargin: 5,
+  iconColor: "#fff",
+  capSize: 8,
+  iconSize: 8,
+  textSize: 14,
+  defaultActiveKey: null
+});
+var RadialTreeRadian = /* @__PURE__ */ function(_Component2) {
+  _inherits(RadialTreeRadian2, _Component2);
+  var _super2 = _createSuper(RadialTreeRadian2);
+  function RadialTreeRadian2(props) {
+    var _this3;
+    _classCallCheck(this, RadialTreeRadian2);
+    _this3 = _super2.call(this, props);
+    _defineProperty(_assertThisInitialized(_this3), "Element", void 0);
+    _this3.renderRadian = _this3.renderRadian.bind(_assertThisInitialized(_this3));
+    return _this3;
+  }
+  _createClass(RadialTreeRadian2, [{
+    key: "getInteractiveAreaProps",
+    value: function getInteractiveAreaProps(_ref12, index) {
+      var _$rootProps$data;
+      var $rootProps = _ref12.$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(_ref13, index) {
+      var _$rootProps$data2, _color, _ref14;
+      var $rootProps = _ref13.$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 _ref14 = {
+        x1: xStart,
+        y1: yStart,
+        x2: xEnd,
+        y2: yEnd,
+        stroke: color,
+        resolveColor,
+        transparent
+      }, _defineProperty(_ref14, "data-x1", xStart), _defineProperty(_ref14, "data-y1", yStart), _defineProperty(_ref14, "data-x2", xEnd), _defineProperty(_ref14, "data-y2", yEnd), _defineProperty(_ref14, "data-radial-animation", "".concat(uid, "-line")), _defineProperty(_ref14, "data-radian-index", index), _ref14;
+    }
+  }, {
+    key: "getCapProps",
+    value: function getCapProps(_ref15, index) {
+      var _$rootProps$data3, _color2, _ref16;
+      var $rootProps = _ref15.$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 _ref16 = {
+        x: xEnd,
+        y: yEnd
+      }, _defineProperty(_ref16, "data-cx", xEnd), _defineProperty(_ref16, "data-cy", yEnd), _defineProperty(_ref16, "radius", capSize), _defineProperty(_ref16, "color", color), _defineProperty(_ref16, "resolveColor", resolveColor), _defineProperty(_ref16, "transparent", transparent), _defineProperty(_ref16, "patterns", patterns), _defineProperty(_ref16, "uid", "".concat(uid, "-cap-").concat(index)), _defineProperty(_ref16, "data-radial-animation", "".concat(uid, "-cap-circle")), _defineProperty(_ref16, "data-radian-index", index), _ref16;
+    }
+  }, {
+    key: "getIconProps",
+    value: function getIconProps(_ref17, index) {
+      var _$rootProps$data4, _iconColor, _iconSize, _icon, _ref18;
+      var $rootProps = _ref17.$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 _ref18 = {
+        x,
+        y
+      }, _defineProperty(_ref18, "data-x", x), _defineProperty(_ref18, "data-y", y), _defineProperty(_ref18, "iconSize", iconSize), _defineProperty(_ref18, "color", iconColor !== null && iconColor !== void 0 ? iconColor : "#fff"), _defineProperty(_ref18, "resolveColor", resolveColor), _defineProperty(_ref18, "data-radial-animation", "".concat(uid, "-cap-icon")), _defineProperty(_ref18, "data-radian-index", index), _defineProperty(_ref18, "icon", icon), _defineProperty(_ref18, "tag", icon), _defineProperty(_ref18, "isActive", isActive), _ref18;
+    }
+  }, {
+    key: "getLabelProps",
+    value: function getLabelProps(_ref19, index) {
+      var _$rootProps$data5, _color3, _ref21;
+      var $rootProps = _ref19.$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 _ref20 = data, label = _ref20.label;
+      var color = (_color3 = data.color) !== null && _color3 !== void 0 ? _color3 : this.asProps.color;
+      return _ref21 = {
+        x: xLabelCenter,
+        y: yLabelCenter,
+        angle: labelAngle
+      }, _defineProperty(_ref21, "data-radial-animation", "".concat(uid, "-label")), _defineProperty(_ref21, "data-radian-index", index), _defineProperty(_ref21, "label", label), _defineProperty(_ref21, "color", color), _defineProperty(_ref21, "resolveColor", resolveColor), _defineProperty(_ref21, "isHorizontal", isHorizontal), _defineProperty(_ref21, "textSize", textSize), _defineProperty(_ref21, "transparent", transparent), _ref21;
+    }
+  }, {
+    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,
+        yStart,
+        xEnd,
+        yEnd,
+        xLabelCenter,
+        yLabelCenter,
+        labelAngle,
+        isHorizontal,
+        capSize,
+        isActive
+      };
+    }
+  }, {
+    key: "renderRadian",
+    value: function renderRadian(data, index) {
+      var _ref2;
+      var _this$asProps10 = this.asProps, styles = _this$asProps10.styles, Children = _this$asProps10.Children, onRadianClick = _this$asProps10.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);
+      var InteractiveArea3 = RadialTree.Radian.InteractiveArea;
+      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SRadian, _ref2.cn("SRadian", {
+        "aria-hidden": true,
+        "key": key,
+        "onClick": onRadianClick(key)
+      }), /* @__PURE__ */ React.createElement(InteractiveArea3, _ref2.cn("InteractiveArea", {})), children);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref3, _this4 = this;
+      var data = this.asProps.data;
+      var SRadianList = "g";
+      return _ref3 = sstyled$1(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadianList, _ref3.cn("SRadianList", {}), data.map(function(data2, index) {
+        return _this4.renderRadian(data2, index);
+      }));
+    }
+  }]);
+  return RadialTreeRadian2;
+}(Component);
+_defineProperty(RadialTreeRadian, "displayName", "RadialTreeRadian");
+_defineProperty(RadialTreeRadian, "style", style);
+_defineProperty(RadialTreeRadian, "defaultProps", {
+  centralMargin: 50,
+  labelMargin: 2,
+  iconColor: "#fff",
+  capSize: 16,
+  iconSize: 16,
+  textSize: 14
+});
+var InteractiveArea = function InteractiveArea2(_ref22) {
+  var _ref4;
+  var SInteractiveArea = _ref22.Element, styles = _ref22.styles;
+  return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SInteractiveArea, _ref4.cn("SInteractiveArea", {
+    "stroke": "transparent",
+    "render": "line"
+  }));
+};
+var Line = function Line2(_ref23) {
+  var _ref5;
+  var SLine = _ref23.Element, styles = _ref23.styles, stroke = _ref23.stroke, resolveColor = _ref23.resolveColor, transparent = _ref23.transparent;
+  return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLine, _ref5.cn("SLine", {
+    "render": "line",
+    "stroke": resolveColor(stroke),
+    "transparent": transparent
+  }));
+};
+var Cap = function Cap2(_ref24) {
+  var _ref7;
+  var SCap = _ref24.Element, styles = _ref24.styles, _ref24$x = _ref24.x, x = _ref24$x === void 0 ? 0 : _ref24$x, _ref24$y = _ref24.y, y = _ref24$y === void 0 ? 0 : _ref24$y, radius = _ref24.radius, color = _ref24.color, resolveColor = _ref24.resolveColor, transparent = _ref24.transparent, patterns = _ref24.patterns;
+  if (!patterns) {
+    var _ref6;
+    return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCap, _ref6.cn("SCap", {
+      "render": "circle",
+      "cx": x,
+      "cy": y,
+      "r": radius,
+      "fill": resolveColor(color),
+      "transparent": transparent
+    }));
+  }
+  var patternKey = color || getChartDefaultColorName(0);
+  var _getPatternSymbolSize = getPatternSymbolSize({
+    patternKey,
+    patterns
+  }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
+  return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCap, _ref7.cn("SCap", {
+    "render": PatternSymbol,
+    "patternKey": color,
+    "x": x - (width || 0) / 2,
+    "y": y - (height || 0) / 2,
+    "fill": resolveColor(color),
+    "transparent": transparent,
+    "pattern": true
+  }));
+};
+var Icon = function Icon2(_ref25) {
+  var _ref8;
+  var SIcon = _ref25.Element, styles = _ref25.styles, isActive = _ref25.isActive, tag = _ref25.tag, x = _ref25.x, y = _ref25.y, iconSize = _ref25.iconSize, transparent = _ref25.transparent;
+  if (!(isActive && tag)) return null;
+  var width = iconSize;
+  var height = iconSize;
+  return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIcon, _ref8.cn("SIcon", {
+    "x": x,
+    "y": y,
+    "width": width,
+    "height": height,
+    "render": tag,
+    "transparent": transparent
+  }));
+};
+var Label = function Label2(_ref26) {
+  var SLabel = _ref26.Element, Children = _ref26.Children, styles = _ref26.styles, label = _ref26.label, color = _ref26.color, resolveColor = _ref26.resolveColor, isHorizontal = _ref26.isHorizontal, x = _ref26.x, y = _ref26.y, textSize = _ref26.textSize, angle = _ref26.angle, transparent = _ref26.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$1(styles);
+  var sLabelStyles = sstyles.cn("SLabel", {
+    color: resolveColor(color),
+    "text-cursor": isHorizontal ? "text" : "vertical-text",
+    transparent
+  });
+  return /* @__PURE__ */ React.createElement(SLabel, {
+    "aria-hidden": true,
+    render: "text",
+    textAnchor: "middle",
+    dominantBaseline: "central",
+    className: sLabelStyles.className,
+    style: sLabelStyles.style,
+    x: x.toFixed(2),
+    y: y.toFixed(2),
+    transform
+  }, lines.map(function(lineText, lineIndex) {
+    return /* @__PURE__ */ React.createElement(SLabelLine, {
+      x,
+      y: y + (lineIndex - (linesCount - 1) / 2) * textSize,
+      key: "#".concat(lineIndex, "-").concat(lineText)
+    }, lineText);
+  }), /* @__PURE__ */ React.createElement(Children, null));
+};
+var Radian = createElement(RadialTreeRadian, {
+  InteractiveArea,
+  Line,
+  Cap,
+  Icon,
+  Label
+});
+var Title = function Title2(_ref27) {
+  var _ref9;
+  var STitle = _ref27.Element, Children = _ref27.Children, children = _ref27.children, styles = _ref27.styles, textSize = _ref27.textSize, color = _ref27.color, resolveColor = _ref27.resolveColor, x = _ref27.x, y = _ref27.y, dataHintsHandler = _ref27.dataHintsHandler;
+  if (typeof children === "string") {
+    dataHintsHandler.setTitle("vertical", children);
+  }
+  return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STitle, _ref9.cn("STitle", {
+    "aria-hidden": true,
+    "render": "text",
+    "textAnchor": "middle",
+    "dominantBaseline": "central",
+    "fontSize": textSize,
+    "fill": resolveColor(color),
+    "x": x,
+    "y": y
+  }), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
+};
+var RadialTree = createElement(RadialTreeBase, {
+  Title,
+  Radian
+});
+export {
+  RadialTree as default
+};