@semcore/d3-chart 1.7.1 → 2.0.0

package/lib/cjs/RadialTree.js

@@ -0,0 +1,694 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _core = require("@semcore/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _createElement = _interopRequireDefault(require("./createElement"));
+
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+
+var _d3Transition = require("d3-transition");
+
+var _color = require("@semcore/utils/lib/color");
+
+var _utils = require("./utils");
+
+var _assignProps = _interopRequireDefault(require("@semcore/utils/lib/assignProps"));
+
+var _getOriginChildren = _interopRequireDefault(require("@semcore/utils/lib/getOriginChildren"));
+
+var _excluded = ["data"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/*__reshadow-styles__:"./style/radial-tree.shadow.css"*/
+var style = (
+/*__reshadow_css_start__*/
+_core.sstyled.insert(
+/*__inner_css_start__*/
+".___SRadian_1lwpb_gg_{cursor:pointer;fill:#008ff8}.___SLine_1lwpb_gg_{stroke:#008ff8}.___SLine_1lwpb_gg_.__color_1lwpb_gg_{stroke:var(--color_1uem4n7)}.___SCap_1lwpb_gg_{transition:r .1s}.___SLabel_1lwpb_gg_{fill:var(--color_1uem4n7);cursor:var(--text-cursor_1uem4n7);transform-origin:var(--transform-origin_1uem4n7)}.___SRadian_1lwpb_gg_:hover .___SLabel_1lwpb_gg_{fill:var(--color-hovered_1uem4n7)}@media (prefers-reduced-motion){.___SLineCap_1lwpb_gg_{transition:none}}"
+/*__inner_css_end__*/
+, "1uem4n7_gg_")
+/*__reshadow_css_end__*/
+, {
+  "__SRadian": "___SRadian_1lwpb_gg_",
+  "__SLine": "___SLine_1lwpb_gg_",
+  "_color": "__color_1lwpb_gg_",
+  "--color": "--color_1uem4n7",
+  "__SCap": "___SCap_1lwpb_gg_",
+  "__SLabel": "___SLabel_1lwpb_gg_",
+  "--text-cursor": "--text-cursor_1uem4n7",
+  "--transform-origin": "--transform-origin_1uem4n7",
+  "--color-hovered": "--color-hovered_1uem4n7",
+  "__SLineCap": "___SLineCap_1lwpb_gg_"
+});
+var baseAngle = -Math.PI / 2; // The top vertical line
+
+var RadialTreeBase = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(RadialTreeBase, _Component);
+
+  var _super = _createSuper(RadialTreeBase);
+
+  function RadialTreeBase(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, RadialTreeBase);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "Element", void 0);
+    _this.handleRadianClick = _this.handleRadianClick.bind((0, _assertThisInitialized2["default"])(_this));
+    return _this;
+  }
+
+  (0, _createClass2["default"])(RadialTreeBase, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        activeKey: null
+      };
+    }
+  }, {
+    key: "runAppearAnimation",
+    value: function runAppearAnimation() {
+      var _this$asProps = this.asProps,
+          duration = _this$asProps.duration,
+          uid = _this$asProps.uid;
+      var preferReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)')?.matches;
+      /** using `!(>)` instead of `<=` to get true on NaN and non numbers stuff  */
+
+      if (!(duration > 0)) return;
+      if (preferReduceMotion) return;
+      var circlesAnimation = (0, _d3Transition.transition)().selection().selectAll("[data-radial-animation=".concat(uid, "-cap-circle]"));
+      var iconsAnimation = (0, _d3Transition.transition)().selection().selectAll("[data-radial-animation=".concat(uid, "-cap-icon]"));
+      var linesAnimation = (0, _d3Transition.transition)().selection().selectAll("[data-radial-animation=".concat(uid, "-line]"));
+      var labelsAnimation = (0, _d3Transition.transition)().selection().selectAll("[data-radial-animation=".concat(uid, "-label]"));
+      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 cx = node.cx?.baseVal?.value;
+          var cy = node.cy?.baseVal?.value;
+          var radianIndex = parseInt(node.dataset.radianIndex, 10);
+          var lineNode = linesNodes[radianIndex];
+          return {
+            from: {
+              cx: lineNode.x1?.baseVal?.value,
+              cy: lineNode.y1?.baseVal?.value
+            },
+            to: {
+              cx: cx,
+              cy: cy
+            }
+          };
+        });
+        circlesAnimation.attr('opacity', 0).attr('cx', function (_, index) {
+          return attrs[index].from?.cx;
+        }).attr('cy', function (_, index) {
+          return attrs[index].from?.cy;
+        });
+        circlesAnimation.transition().duration(duration).attr('opacity', 1).attr('cx', function (_, index) {
+          return attrs[index].to?.cx;
+        }).attr('cy', function (_, index) {
+          return attrs[index].to?.cy;
+        });
+      }
+
+      if (iconsNodes.length > 0) {
+        var _attrs = iconsNodes.map(function (node) {
+          var x = node.x?.baseVal?.value;
+          var y = node.y?.baseVal?.value;
+          var width = node.width?.baseVal?.value;
+          var height = node.height?.baseVal?.value;
+          var radianIndex = parseInt(node.dataset.radianIndex, 10);
+          var lineNode = linesNodes[radianIndex];
+          return {
+            from: {
+              x: lineNode.x1?.baseVal?.value - width / 2,
+              y: lineNode.y1?.baseVal?.value - height / 2
+            },
+            to: {
+              x: x,
+              y: y
+            }
+          };
+        });
+
+        iconsAnimation.attr('opacity', 0).attr('x', function (_, index) {
+          return _attrs[index].from?.x;
+        }).attr('y', function (_, index) {
+          return _attrs[index].from?.y;
+        });
+        iconsAnimation.transition().duration(duration).attr('opacity', 1).attr('x', function (_, index) {
+          return _attrs[index].to?.x;
+        }).attr('y', function (_, index) {
+          return _attrs[index].to?.y;
+        });
+      }
+
+      if (linesNodes.length > 0) {
+        var _attrs2 = linesNodes.map(function (node) {
+          var x2 = node.x2?.baseVal?.value;
+          var y2 = node.y2?.baseVal?.value;
+          return {
+            from: {
+              x2: node.x1?.baseVal?.value,
+              y2: node.y1?.baseVal?.value
+            },
+            to: {
+              x2: x2,
+              y2: y2
+            }
+          };
+        });
+
+        linesAnimation.attr('opacity', 0).attr('x2', function (_, index) {
+          return _attrs2[index].from?.x2;
+        }).attr('y2', function (_, index) {
+          return _attrs2[index].from?.y2;
+        });
+        linesAnimation.transition().duration(duration).attr('opacity', 1).attr('x2', function (_, index) {
+          return _attrs2[index].to?.x2;
+        }).attr('y2', function (_, index) {
+          return _attrs2[index].to?.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?.length !== this.asProps.data?.length) {
+        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 (_ref9) {
+        var label = _ref9.label;
+        return (0, _utils.measureText)(label, textSize);
+      });
+      return Math.max.apply(Math, (0, _toConsumableArray2["default"])(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 = (0, _slicedToArray2["default"])(size, 2),
+          width = _size[0],
+          height = _size[1];
+
+      var center = [width / 2, height / 2];
+      var x = center[0],
+          y = center[1];
+      return (0, _defineProperty2["default"])({
+        x: x,
+        y: 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 = (0, _objectWithoutProperties2["default"])(_this$asProps4, _excluded);
+      var textWidth = this.computeTextWidth();
+      return _objectSpread(_objectSpread({}, restRootProps), {}, {
+        radiansCount: data.length,
+        data: data,
+        textWidth: textWidth,
+        onRadianClick: this.handleRadianClick
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref;
+
+      var SRadialTree = this.Element;
+      var Children = this.asProps.Children;
+      return _ref = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react["default"].createElement(SRadialTree, _ref.cn("SRadialTree", {
+        "render": "g"
+      }), /*#__PURE__*/_react["default"].createElement(Children, _ref.cn("Children", {})));
+    }
+  }]);
+  return RadialTreeBase;
+}(_core.Component);
+
+(0, _defineProperty2["default"])(RadialTreeBase, "displayName", 'RadialTree');
+(0, _defineProperty2["default"])(RadialTreeBase, "style", style);
+(0, _defineProperty2["default"])(RadialTreeBase, "enhance", [(0, _uniqueID["default"])()]);
+(0, _defineProperty2["default"])(RadialTreeBase, "defaultProps", {
+  angleOffset: 0,
+  duration: 300,
+  centralMargin: 50,
+  labelMargin: 2,
+  iconColor: '#fff',
+  capSize: 8,
+  iconSize: 8,
+  textSize: 14,
+  defaultActiveKey: null
+});
+
+var RadialTreeRadian = /*#__PURE__*/function (_Component2) {
+  (0, _inherits2["default"])(RadialTreeRadian, _Component2);
+
+  var _super2 = _createSuper(RadialTreeRadian);
+
+  function RadialTreeRadian(props) {
+    var _this3;
+
+    (0, _classCallCheck2["default"])(this, RadialTreeRadian);
+    _this3 = _super2.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "Element", void 0);
+    _this3.renderRadian = _this3.renderRadian.bind((0, _assertThisInitialized2["default"])(_this3));
+    return _this3;
+  }
+
+  (0, _createClass2["default"])(RadialTreeRadian, [{
+    key: "getInteractiveAreaProps",
+    value: function getInteractiveAreaProps(_ref11, index) {
+      var $rootProps = _ref11.$rootProps;
+      var data = $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(_ref12, index) {
+      var _ref13;
+
+      var $rootProps = _ref12.$rootProps;
+      var data = $rootProps.data[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 uid = this.asProps.uid;
+      var color = data.color ?? this.asProps.color;
+      return _ref13 = {
+        x1: xStart,
+        y1: yStart,
+        x2: xEnd,
+        y2: yEnd,
+        stroke: color
+      }, (0, _defineProperty2["default"])(_ref13, 'data-radial-animation', "".concat(uid, "-line")), (0, _defineProperty2["default"])(_ref13, 'data-radian-index', index), _ref13;
+    }
+  }, {
+    key: "getCapProps",
+    value: function getCapProps(_ref14, index) {
+      var _ref15;
+
+      var $rootProps = _ref14.$rootProps;
+      var data = $rootProps.data[index];
+
+      var _this$computeRadianPo3 = this.computeRadianPosition(data, index),
+          xEnd = _this$computeRadianPo3.xEnd,
+          yEnd = _this$computeRadianPo3.yEnd,
+          capSize = _this$computeRadianPo3.capSize;
+
+      var uid = this.asProps.uid;
+      var color = data.color ?? this.asProps.color;
+      return _ref15 = {
+        x: xEnd,
+        y: yEnd,
+        radius: capSize,
+        color: color
+      }, (0, _defineProperty2["default"])(_ref15, 'data-radial-animation', "".concat(uid, "-cap-circle")), (0, _defineProperty2["default"])(_ref15, 'data-radian-index', index), _ref15;
+    }
+  }, {
+    key: "getIconProps",
+    value: function getIconProps(_ref16, index) {
+      var _ref17;
+
+      var $rootProps = _ref16.$rootProps;
+      var data = $rootProps.data[index];
+
+      var _this$computeRadianPo4 = this.computeRadianPosition(data, index),
+          xEnd = _this$computeRadianPo4.xEnd,
+          yEnd = _this$computeRadianPo4.yEnd,
+          isActive = _this$computeRadianPo4.isActive;
+
+      var uid = this.asProps.uid;
+      var iconColor = data.iconColor ?? this.asProps.iconColor;
+      var iconSize = data.iconSize ?? this.asProps.iconSize;
+      var icon = data.icon ?? this.asProps.icon;
+      return _ref17 = {
+        x: xEnd - iconSize / 2,
+        y: yEnd - iconSize / 2,
+        iconSize: iconSize,
+        color: iconColor ?? '#fff'
+      }, (0, _defineProperty2["default"])(_ref17, 'data-radial-animation', "".concat(uid, "-cap-icon")), (0, _defineProperty2["default"])(_ref17, 'data-radian-index', index), (0, _defineProperty2["default"])(_ref17, "icon", icon), (0, _defineProperty2["default"])(_ref17, "isActive", isActive), _ref17;
+    }
+  }, {
+    key: "getLabelProps",
+    value: function getLabelProps(_ref18, index) {
+      var _ref19;
+
+      var $rootProps = _ref18.$rootProps;
+      var data = $rootProps.data[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$asProps5 = this.asProps,
+          uid = _this$asProps5.uid,
+          textSize = _this$asProps5.textSize;
+      var label = data.label;
+      var color = data.color ?? this.asProps.color;
+      return _ref19 = {
+        x: xLabelCenter,
+        y: yLabelCenter,
+        angle: labelAngle
+      }, (0, _defineProperty2["default"])(_ref19, 'data-radial-animation', "".concat(uid, "-label")), (0, _defineProperty2["default"])(_ref19, 'data-radian-index', index), (0, _defineProperty2["default"])(_ref19, "label", label), (0, _defineProperty2["default"])(_ref19, "color", color), (0, _defineProperty2["default"])(_ref19, "isHorizontal", isHorizontal), (0, _defineProperty2["default"])(_ref19, "textSize", textSize), _ref19;
+    }
+  }, {
+    key: "getRadianKey",
+    value: function getRadianKey(data, index) {
+      return data.key ?? "radian-".concat(index);
+    }
+  }, {
+    key: "computeRadianPosition",
+    value: function computeRadianPosition(data, index) {
+      var _this$asProps6 = this.asProps,
+          centralMargin = _this$asProps6.centralMargin,
+          angleOffset = _this$asProps6.angleOffset,
+          activeKey = _this$asProps6.activeKey,
+          size = _this$asProps6.size,
+          radiansCount = _this$asProps6.radiansCount,
+          textWidth = _this$asProps6.textWidth;
+
+      var _size2 = (0, _slicedToArray2["default"])(size, 2),
+          width = _size2[0],
+          height = _size2[1];
+
+      var key = this.getRadianKey(data, index);
+      var isActive = activeKey === key;
+      var baseCapSize = 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, 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), yCenter + Math.sin(angle) * (centralMargin + length + baseCapSize + textWidth / 2)];
+      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
+      };
+    }
+  }, {
+    key: "renderRadian",
+    value: function renderRadian(data, index) {
+      var _ref2;
+
+      var _this$asProps7 = this.asProps,
+          styles = _this$asProps7.styles,
+          Children = _this$asProps7.Children,
+          onRadianClick = _this$asProps7.onRadianClick;
+      var key = this.getRadianKey(data, index);
+      var SRadian = 'g';
+      var children = (0, _getOriginChildren["default"])(Children);
+
+      if (typeof children === 'function') {
+        var _child = this.asProps.children;
+        var mergedProps = (0, _assignProps["default"])(children(this.asProps), this.asProps);
+        children = mergedProps.children;
+        mergedProps.children = _child;
+      } // hidden from publicly typed export
+
+
+      var InteractiveArea = RadialTree.Radian.InteractiveArea;
+      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SRadian, _ref2.cn("SRadian", {
+        "key": key,
+        "onClick": onRadianClick(key)
+      }), /*#__PURE__*/_react["default"].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 = (0, _core.sstyled)(this.asProps.styles), /*#__PURE__*/_react["default"].createElement(SRadianList, _ref3.cn("SRadianList", {}), data.map(function (data, index) {
+        return _this4.renderRadian(data, index);
+      }));
+    }
+  }]);
+  return RadialTreeRadian;
+}(_core.Component);
+
+(0, _defineProperty2["default"])(RadialTreeRadian, "displayName", 'RadialTreeRadian');
+(0, _defineProperty2["default"])(RadialTreeRadian, "style", style);
+(0, _defineProperty2["default"])(RadialTreeRadian, "defaultProps", {
+  centralMargin: 50,
+  labelMargin: 2,
+  iconColor: '#fff',
+  capSize: 16,
+  iconSize: 16,
+  textSize: 14
+});
+
+var InteractiveArea = function InteractiveArea(_ref20) {
+  var _ref4;
+
+  var SInteractiveArea = _ref20.Element,
+      styles = _ref20.styles;
+  return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SInteractiveArea, _ref4.cn("SInteractiveArea", {
+    "stroke": "transparent",
+    "render": "line"
+  }));
+};
+
+var Line = function Line(_ref21) {
+  var _ref5;
+
+  var SLine = _ref21.Element,
+      styles = _ref21.styles,
+      stroke = _ref21.stroke;
+  return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SLine, _ref5.cn("SLine", {
+    "render": "line",
+    "stroke": stroke
+  }));
+};
+
+var Cap = function Cap(_ref22) {
+  var _ref6;
+
+  var SCap = _ref22.Element,
+      styles = _ref22.styles,
+      x = _ref22.x,
+      y = _ref22.y,
+      radius = _ref22.radius,
+      color = _ref22.color;
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCap, _ref6.cn("SCap", {
+    "render": "circle",
+    "cx": x,
+    "cy": y,
+    "r": radius,
+    "fill": color
+  }));
+};
+
+var Icon = function Icon(_ref23) {
+  var _ref7;
+
+  var SIcon = _ref23.Element,
+      styles = _ref23.styles,
+      isActive = _ref23.isActive,
+      tag = _ref23.tag,
+      x = _ref23.x,
+      y = _ref23.y,
+      iconSize = _ref23.iconSize;
+  if (!(isActive && tag)) return null;
+  var width = iconSize;
+  var height = iconSize;
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SIcon, _ref7.cn("SIcon", {
+    "x": x,
+    "y": y,
+    "width": width,
+    "height": height,
+    "render": tag
+  }));
+};
+
+var Label = function Label(_ref24) {
+  var SLabel = _ref24.Element,
+      Children = _ref24.Children,
+      styles = _ref24.styles,
+      label = _ref24.label,
+      color = _ref24.color,
+      isHorizontal = _ref24.isHorizontal,
+      x = _ref24.x,
+      y = _ref24.y,
+      textSize = _ref24.textSize,
+      angle = _ref24.angle;
+  var lines = String(label).split('\n');
+  var linesCount = lines.length;
+  var SLabelLine = 'tspan';
+  var sstyles = (0, _core.sstyled)(styles);
+  var sLabelStyles = sstyles.cn('SLabel', {
+    color: color,
+    'color-hovered': (0, _color.shade)(color, -0.12),
+    'text-cursor': isHorizontal ? 'text' : 'vertical-text',
+    'transform-origin': "".concat(x.toFixed(2), "px ").concat(y.toFixed(2), "px")
+  });
+  return /*#__PURE__*/_react["default"].createElement(SLabel, {
+    render: "text",
+    textAnchor: "middle",
+    dominantBaseline: "central",
+    className: sLabelStyles.className,
+    style: sLabelStyles.style,
+    x: x.toFixed(2),
+    y: y.toFixed(2),
+    transform: "rotate(".concat((angle / Math.PI * 180).toFixed(2), ")")
+  }, lines.map(function (lineText, lineIndex) {
+    return /*#__PURE__*/_react["default"].createElement(SLabelLine, {
+      x: x,
+      y: y + (lineIndex - (linesCount - 1) / 2) * textSize,
+      key: "#".concat(lineIndex, "-").concat(lineText)
+    }, lineText);
+  }), /*#__PURE__*/_react["default"].createElement(Children, null));
+};
+
+var Radian = (0, _createElement["default"])(RadialTreeRadian, {
+  InteractiveArea: InteractiveArea,
+  Line: Line,
+  Cap: Cap,
+  Icon: Icon,
+  Label: Label
+});
+
+var Title = function Title(_ref25) {
+  var _ref8;
+
+  var STitle = _ref25.Element,
+      Children = _ref25.Children,
+      styles = _ref25.styles,
+      textSize = _ref25.textSize,
+      color = _ref25.color,
+      x = _ref25.x,
+      y = _ref25.y;
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STitle, _ref8.cn("STitle", {
+    "render": "text",
+    "textAnchor": "middle",
+    "dominantBaseline": "central",
+    "fontSize": textSize,
+    "fill": color,
+    "x": x,
+    "y": y
+  }), /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {})));
+};
+
+var RadialTree = (0, _createElement["default"])(RadialTreeBase, {
+  Title: Title,
+  Radian: Radian
+});
+var _default = RadialTree;
+exports["default"] = _default;
+//# sourceMappingURL=RadialTree.js.map