@semcore/d3-chart 2.8.19 → 2.9.1

package/lib/cjs/Radar.js

@@ -0,0 +1,887 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+exports.getLabelOffsetPosition = getLabelOffsetPosition;
+
+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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _core = require("@semcore/core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+
+var _getOriginChildren = _interopRequireDefault(require("@semcore/utils/lib/getOriginChildren"));
+
+var _rafTrottle = _interopRequireDefault(require("@semcore/utils/lib/rafTrottle"));
+
+var _canUseDOM = _interopRequireDefault(require("@semcore/utils/lib/canUseDOM"));
+
+var _d3Polygon = require("d3-polygon");
+
+var _d3Shape = require("d3-shape");
+
+var _createElement = _interopRequireDefault(require("./createElement"));
+
+var _utils = require("./utils");
+
+/*__reshadow-styles__:"./style/radar.shadow.css"*/
+var style = (
+/*__reshadow_css_start__*/
+_core.sstyled.insert(
+/*__inner_css_start__*/
+".___SAxisLine_jqen1_gg_,.___SAxisTick_jqen1_gg_,.___SAxis_jqen1_gg_{stroke:var(--intergalactic-chart-grid-line, #e0e1e9);stroke-width:1;fill:transparent}.___SAxisLine_jqen1_gg_,.___SAxisTick_jqen1_gg_{stroke-dasharray:2}.___SAxisLine_jqen1_gg_.__active_jqen1_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___SAxisLabel_jqen1_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_jqen1_gg_.__xDirection_jqen1_gg_{text-anchor:var(--xDirection_jqen1)}.___SAxisLabel_jqen1_gg_.__yDirection_jqen1_gg_{dominant-baseline:var(--yDirection_jqen1)}.___SPolygonDot_jqen1_gg_,.___SPolygon_jqen1_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPolygon_jqen1_gg_{opacity:.2}.___SPolygon_jqen1_gg_.__color_jqen1_gg_{fill:var(--color_jqen1)}.___SPolygonDot_jqen1_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #ffffff);r:6px}.___SPolygonDot_jqen1_gg_.__transparent_jqen1_gg_{opacity:.3}.___SPolygonDot_jqen1_gg_.__color_jqen1_gg_{fill:var(--color_jqen1)}.___SPolygonLine_jqen1_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SPolygonLine_jqen1_gg_.__transparent_jqen1_gg_{opacity:.3}.___SPolygonLine_jqen1_gg_.__color_jqen1_gg_{stroke:var(--color_jqen1)}.___SPieRect_jqen1_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}"
+/*__inner_css_end__*/
+, "jqen1_gg_")
+/*__reshadow_css_end__*/
+, {
+  "__SAxis": "___SAxis_jqen1_gg_",
+  "__SAxisLine": "___SAxisLine_jqen1_gg_",
+  "__SAxisTick": "___SAxisTick_jqen1_gg_",
+  "_active": "__active_jqen1_gg_",
+  "__SAxisLabel": "___SAxisLabel_jqen1_gg_",
+  "_xDirection": "__xDirection_jqen1_gg_",
+  "--xDirection": "--xDirection_jqen1",
+  "_yDirection": "__yDirection_jqen1_gg_",
+  "--yDirection": "--yDirection_jqen1",
+  "__SPolygon": "___SPolygon_jqen1_gg_",
+  "_color": "__color_jqen1_gg_",
+  "--color": "--color_jqen1",
+  "__SPolygonDot": "___SPolygonDot_jqen1_gg_",
+  "_transparent": "__transparent_jqen1_gg_",
+  "__SPolygonLine": "___SPolygonLine_jqen1_gg_",
+  "__SPieRect": "___SPieRect_jqen1_gg_"
+});
+
+function getAngle(i, range, func, total) {
+  var angle = (total - i) * 2 * Math.PI / total;
+  return range * (1 - func(angle)) - range;
+}
+
+function getRadianPosition(i, range, total) {
+  return [getAngle(i, range, Math.sin, total), getAngle(i, range, Math.cos, total)];
+}
+
+function getLabelDirection(i, total) {
+  var angle = -Math.PI / 2 + i / total * (Math.PI * 2);
+  return [Math.abs(angle) === Math.PI / 2 ? 'middle' : angle < Math.PI / 2 ? 'start' : 'end', angle === Math.PI / 2 ? 'mathematical' : angle === -Math.PI / 2 ? 'alphabetic' : 'middle'];
+}
+
+function computeTextWidth(texts, textSize) {
+  var defaultWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
+  var defaultHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;
+  var widths = texts.map(function (text) {
+    if (typeof text === 'string') {
+      return (0, _utils.measureText)(text, textSize);
+    }
+
+    if ( /*#__PURE__*/_react["default"].isValidElement(text)) {
+      var _text$props, _text$props2;
+
+      // @ts-ignore
+      return Math.max(((_text$props = text.props) === null || _text$props === void 0 ? void 0 : _text$props.width) || defaultWidth, ((_text$props2 = text.props) === null || _text$props2 === void 0 ? void 0 : _text$props2.height) || defaultHeight);
+    }
+
+    return defaultWidth;
+  });
+  return Math.max.apply(Math, (0, _toConsumableArray2["default"])(widths));
+}
+
+function getTicks(tickSize, radius) {
+  var ticks = 0;
+
+  while (Math.trunc(radius / (tickSize / 2)) > ticks) {
+    ticks += 1;
+  }
+
+  return (0, _toConsumableArray2["default"])(Array(ticks).keys()).reduce(function (ticks, t, i, total) {
+    if (i) ticks.push(i / total.length);
+    return ticks;
+  }, []);
+}
+
+function pieContains(_ref10, _ref11) {
+  var _ref12 = (0, _slicedToArray2["default"])(_ref10, 3),
+      startAngle = _ref12[0],
+      endAngle = _ref12[1],
+      radius = _ref12[2];
+
+  var _ref13 = (0, _slicedToArray2["default"])(_ref11, 2),
+      x = _ref13[0],
+      y = _ref13[1];
+
+  var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+  if (distance > radius) return false;
+  var angle = Math.atan2(y, x) + Math.PI / 2;
+
+  if (angle < 0) {
+    // angle from 0 to 6.28...
+    angle += 2 * Math.PI;
+  }
+
+  if (startAngle < 0) {
+    if (angle < endAngle) {
+      angle += Math.abs(startAngle);
+    } else {
+      angle += Math.abs(startAngle) - Math.PI * 2;
+    }
+
+    endAngle += Math.abs(startAngle);
+    startAngle = 0;
+  }
+
+  return angle > startAngle && angle < endAngle;
+}
+
+function getLabelOffsetPosition(xDirection, yDirection, width, height) {
+  var xOffset = 0;
+  var yOffset = 0;
+
+  switch ("".concat(xDirection, "-").concat(yDirection)) {
+    case 'middle-alphabetic':
+      yOffset = height / 2;
+      break;
+
+    case 'start-middle':
+      xOffset = -width / 2;
+      break;
+
+    case 'middle-mathematical':
+      yOffset = -height / 2;
+      break;
+
+    case 'end-middle':
+      xOffset = width / 2;
+      break;
+  }
+
+  return [xOffset + width / 2, yOffset + height / 2];
+}
+
+var MINIMUM_OFFSET = 5;
+
+var RadarRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(RadarRoot, _Component);
+
+  var _super = (0, _createSuper2["default"])(RadarRoot);
+
+  function RadarRoot() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, RadarRoot);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "computeOffset", 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "categoriesKey", null);
+    return _this;
+  }
+
+  (0, _createClass2["default"])(RadarRoot, [{
+    key: "id",
+    get: function get() {
+      var _this$asProps = this.asProps,
+          id = _this$asProps.id,
+          uid = _this$asProps.uid;
+      return id || uid;
+    }
+  }, {
+    key: "offset",
+    get: function get() {
+      var offset = this.asProps.offset;
+      return offset !== null && offset !== void 0 ? offset : this.computeOffset;
+    }
+  }, {
+    key: "textSize",
+    get: function get() {
+      var textSize = this.asProps.textSize;
+      return textSize !== null && textSize !== void 0 ? textSize : 12;
+    }
+  }, {
+    key: "getAxisProps",
+    value: function getAxisProps() {
+      return {
+        offset: this.offset,
+        textSize: this.textSize,
+        type: this.asProps.type
+      };
+    }
+  }, {
+    key: "getPolygonProps",
+    value: function getPolygonProps(_ref14) {
+      var dataKey = _ref14.dataKey;
+      var _this$asProps2 = this.asProps,
+          data = _this$asProps2.data,
+          scale = _this$asProps2.scale;
+      return {
+        offset: this.offset,
+        data: data[dataKey] || [],
+        scale: scale
+      };
+    }
+  }, {
+    key: "getHoverProps",
+    value: function getHoverProps() {
+      return {
+        type: this.asProps.type,
+        offset: this.offset,
+        categories: this.asProps.data[this.categoriesKey]
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref;
+
+      var SRadar = this.Element;
+      var _this$asProps3 = this.asProps,
+          Children = _this$asProps3.Children,
+          style = _this$asProps3.style,
+          size = _this$asProps3.size,
+          data = _this$asProps3.data,
+          offset = _this$asProps3.offset;
+
+      var _size = (0, _slicedToArray2["default"])(size, 2),
+          width = _size[0],
+          height = _size[1];
+
+      var dataKey;
+
+      _react["default"].Children.toArray((0, _getOriginChildren["default"])(Children)).forEach(function (child) {
+        if ( /*#__PURE__*/_react["default"].isValidElement(child) && child.type === Radar.Axis) {
+          dataKey = child.props.dataKey;
+        }
+      });
+
+      if (dataKey) {
+        if (offset === undefined) {
+          // +5 because font might not be loaded and just in case)
+          this.computeOffset = computeTextWidth(data[dataKey], this.textSize) + MINIMUM_OFFSET;
+        }
+
+        this.categoriesKey = dataKey;
+      }
+
+      return _ref = (0, _core.sstyled)(style), /*#__PURE__*/_react["default"].createElement(SRadar, _ref.cn("SRadar", {
+        "aria-hidden": true,
+        "id": this.id,
+        "render": 'g',
+        "childrenPosition": 'inside',
+        "transform": "translate(".concat(width / 2, ",").concat(height / 2, ")")
+      }));
+    }
+  }]);
+  return RadarRoot;
+}(_core.Component);
+
+(0, _defineProperty2["default"])(RadarRoot, "displayName", 'Line');
+(0, _defineProperty2["default"])(RadarRoot, "style", style);
+(0, _defineProperty2["default"])(RadarRoot, "enhance", [(0, _uniqueID["default"])()]);
+(0, _defineProperty2["default"])(RadarRoot, "defaultProps", {
+  type: 'polygon'
+});
+
+var PolygonRoot = /*#__PURE__*/function (_Component2) {
+  (0, _inherits2["default"])(PolygonRoot, _Component2);
+
+  var _super2 = (0, _createSuper2["default"])(PolygonRoot);
+
+  function PolygonRoot() {
+    (0, _classCallCheck2["default"])(this, PolygonRoot);
+    return _super2.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(PolygonRoot, [{
+    key: "getDotsProps",
+    value: function getDotsProps() {
+      var _this$asProps4 = this.asProps,
+          data = _this$asProps4.data,
+          scale = _this$asProps4.scale,
+          color = _this$asProps4.color,
+          transparent = _this$asProps4.transparent;
+      return {
+        data: data,
+        scale: scale,
+        color: color,
+        transparent: transparent
+      };
+    }
+  }, {
+    key: "getLineProps",
+    value: function getLineProps() {
+      var _this$asProps5 = this.asProps,
+          d3 = _this$asProps5.d3,
+          data = _this$asProps5.data,
+          color = _this$asProps5.color,
+          transparent = _this$asProps5.transparent;
+      return {
+        data: data,
+        color: color,
+        transparent: transparent,
+        d3: d3
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref2;
+
+      var _this$asProps6 = this.asProps,
+          SPolygon = _this$asProps6.Element,
+          styles = _this$asProps6.styles,
+          d3 = _this$asProps6.d3,
+          data = _this$asProps6.data,
+          color = _this$asProps6.color,
+          fill = _this$asProps6.fill;
+      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygon, _ref2.cn("SPolygon", {
+        "render": 'path',
+        "d": d3(data),
+        "color": fill || color
+      }));
+    }
+  }]);
+  return PolygonRoot;
+}(_core.Component);
+
+(0, _defineProperty2["default"])(PolygonRoot, "displayName", 'Polygon');
+(0, _defineProperty2["default"])(PolygonRoot, "style", style);
+(0, _defineProperty2["default"])(PolygonRoot, "defaultProps", function (_ref18) {
+  var scale = _ref18.scale,
+      _ref18$curve = _ref18.curve,
+      curve = _ref18$curve === void 0 ? _d3Shape.curveLinearClosed : _ref18$curve,
+      size = _ref18.size,
+      offset = _ref18.offset;
+  scale.range([0, Math.min(size[0], size[1]) / 2 - offset]);
+  return {
+    d3: (0, _d3Shape.lineRadial)().curve(curve).radius(function (d) {
+      return scale(d || 0);
+    }).angle(function (d, i, data) {
+      return i / data.length * 2 * Math.PI;
+    })
+  };
+});
+
+function PolygonLine(props) {
+  var _ref3;
+
+  var SPolygonLine = props.Element,
+      styles = props.styles,
+      d3 = props.d3,
+      color = props.color,
+      data = props.data,
+      transparent = props.transparent;
+  return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygonLine, _ref3.cn("SPolygonLine", {
+    "render": 'path',
+    "d": d3(data),
+    "color": color,
+    "transparent": transparent
+  }));
+}
+
+function PolygonDots(props) {
+  var SPolygonDot = props.Element,
+      styles = props.styles,
+      color = props.color,
+      data = props.data,
+      scale = props.scale,
+      transparent = props.transparent;
+  return data.map(function (value, i) {
+    var _ref4;
+
+    if (value === null || value === undefined) return;
+    var radius = scale(value);
+
+    var _getRadianPosition = getRadianPosition(i, radius, data.length),
+        _getRadianPosition2 = (0, _slicedToArray2["default"])(_getRadianPosition, 2),
+        cx = _getRadianPosition2[0],
+        cy = _getRadianPosition2[1];
+
+    return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygonDot, _ref4.cn("SPolygonDot", {
+      "key": i,
+      "render": 'circle',
+      "cx": cx,
+      "cy": cy,
+      "color": color,
+      "transparent": transparent
+    }));
+  });
+}
+
+var AxisRoot = /*#__PURE__*/function (_Component3) {
+  (0, _inherits2["default"])(AxisRoot, _Component3);
+
+  var _super3 = (0, _createSuper2["default"])(AxisRoot);
+
+  function AxisRoot() {
+    var _this2;
+
+    (0, _classCallCheck2["default"])(this, AxisRoot);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this2 = _super3.call.apply(_super3, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "unsubscribeTooltipVisible", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "state", {
+      activeLineIndex: null
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handlerTooltipVisible", function (visible, _ref15) {
+      var index = _ref15.index;
+
+      _this2.setState({
+        activeLineIndex: index
+      });
+    });
+    return _this2;
+  }
+
+  (0, _createClass2["default"])(AxisRoot, [{
+    key: "createLineRadial",
+    value: function createLineRadial(radius, total) {
+      return (0, _d3Shape.lineRadial)().curve(_d3Shape.curveLinearClosed).radius(function () {
+        return radius;
+      }).angle(function (d, i) {
+        return i / total * 2 * Math.PI;
+      });
+    }
+  }, {
+    key: "getTicksProps",
+    value: function getTicksProps(_ref16) {
+      var _ref16$tickSize = _ref16.tickSize,
+          tickSize = _ref16$tickSize === void 0 ? 100 : _ref16$tickSize;
+      var _this$asProps7 = this.asProps,
+          data = _this$asProps7.data,
+          offset = _this$asProps7.offset,
+          categories = _this$asProps7.categories,
+          size = _this$asProps7.size,
+          type = _this$asProps7.type;
+      var radius = Math.min(size[0], size[1]) / 2 - offset;
+      return {
+        type: type,
+        data: data,
+        categories: categories,
+        ticks: getTicks(tickSize, radius),
+        offset: offset,
+        d3: this.createLineRadial(radius, categories.length)
+      };
+    }
+  }, {
+    key: "getLabelsProps",
+    value: function getLabelsProps(_ref17) {
+      var _ref17$labelOffset = _ref17.labelOffset,
+          labelOffset = _ref17$labelOffset === void 0 ? 10 : _ref17$labelOffset;
+      var _this$asProps8 = this.asProps,
+          offset = _this$asProps8.offset,
+          categories = _this$asProps8.categories,
+          textSize = _this$asProps8.textSize;
+      return {
+        categories: categories,
+        textSize: textSize,
+        offset: offset - labelOffset
+      };
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var eventEmitter = this.asProps.eventEmitter;
+      this.unsubscribeTooltipVisible = eventEmitter.subscribe('onTooltipVisible', this.handlerTooltipVisible);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.unsubscribeTooltipVisible) {
+        this.unsubscribeTooltipVisible();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref5;
+
+      var _this$asProps9 = this.asProps,
+          SAxis = _this$asProps9.Element,
+          styles = _this$asProps9.styles,
+          categories = _this$asProps9.categories,
+          size = _this$asProps9.size,
+          offset = _this$asProps9.offset,
+          type = _this$asProps9.type;
+      var activeLineIndex = this.state.activeLineIndex;
+      var radius = Math.min(size[0], size[1]) / 2 - offset;
+      var total = categories.length;
+      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, type === 'circle' ? /*#__PURE__*/_react["default"].createElement(SAxis, _ref5.cn("SAxis", {
+        "render": 'circle',
+        "cx": 0,
+        "cy": 0,
+        "r": radius
+      })) : /*#__PURE__*/_react["default"].createElement(SAxis, _ref5.cn("SAxis", {
+        "render": 'path',
+        "d": this.createLineRadial(radius, total)(categories)
+      })), categories.map(function (category, i) {
+        var _getRadianPosition3 = getRadianPosition(i, radius, total),
+            _getRadianPosition4 = (0, _slicedToArray2["default"])(_getRadianPosition3, 2),
+            x = _getRadianPosition4[0],
+            y = _getRadianPosition4[1];
+
+        var _sstyled$cn = (0, _core.sstyled)(styles).cn('SAxisLine', {
+          active: activeLineIndex === i
+        }),
+            className = _sstyled$cn.className;
+
+        return /*#__PURE__*/_react["default"].createElement("line", {
+          key: i,
+          x1: 0,
+          y1: 0,
+          x2: x,
+          y2: y,
+          className: className
+        });
+      }));
+    }
+  }]);
+  return AxisRoot;
+}(_core.Component);
+
+(0, _defineProperty2["default"])(AxisRoot, "displayName", 'Polygon');
+(0, _defineProperty2["default"])(AxisRoot, "style", style);
+(0, _defineProperty2["default"])(AxisRoot, "defaultProps", function (_ref19) {
+  var data = _ref19.data,
+      dataKey = _ref19.dataKey;
+  var categories = data[dataKey];
+  return {
+    categories: categories
+  };
+});
+
+function AxisTicks(props) {
+  var SAxisTick = props.Element,
+      styles = props.styles,
+      size = props.size,
+      ticks = props.ticks,
+      d3 = props.d3,
+      categories = props.categories,
+      offset = props.offset,
+      type = props.type;
+  var radius = Math.min(size[0], size[1]) / 2 - offset;
+  return ticks.map(function (tick, i) {
+    var _ref6;
+
+    d3.radius(function () {
+      return radius * tick;
+    });
+    return _ref6 = (0, _core.sstyled)(styles), type === 'circle' ? /*#__PURE__*/_react["default"].createElement(SAxisTick, _ref6.cn("SAxisTick", {
+      "key": i,
+      "render": 'circle',
+      "cx": 0,
+      "cy": 0,
+      "r": radius * tick
+    })) : /*#__PURE__*/_react["default"].createElement(SAxisTick, _ref6.cn("SAxisTick", {
+      "render": 'path',
+      "key": i,
+      "d": d3(categories)
+    }));
+  });
+}
+
+function AxisLabels(props) {
+  var SAxisLabel = props.Element,
+      styles = props.styles,
+      textSize = props.textSize,
+      size = props.size,
+      offset = props.offset,
+      categories = props.categories;
+  var radius = Math.min(size[0], size[1]) / 2 - offset;
+  return categories.map(function (category, i) {
+    var _getRadianPosition5 = getRadianPosition(i, radius, categories.length),
+        _getRadianPosition6 = (0, _slicedToArray2["default"])(_getRadianPosition5, 2),
+        x = _getRadianPosition6[0],
+        y = _getRadianPosition6[1];
+
+    var _getLabelDirection = getLabelDirection(i, categories.length),
+        _getLabelDirection2 = (0, _slicedToArray2["default"])(_getLabelDirection, 2),
+        xDirection = _getLabelDirection2[0],
+        yDirection = _getLabelDirection2[1];
+
+    if (typeof category === 'string') {
+      var _ref7;
+
+      var lines = category.split('\n');
+      return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAxisLabel, _ref7.cn("SAxisLabel", {
+        "key": i,
+        "render": 'text',
+        "childrenPosition": 'inside',
+        "x": x,
+        "y": y,
+        "xDirection": xDirection,
+        "yDirection": yDirection
+      }), lines.map(function (lineText, lineIndex) {
+        return /*#__PURE__*/_react["default"].createElement("tspan", {
+          x: x,
+          y: y + (lineIndex - (lines.length - 1) / 2) * textSize,
+          key: "#".concat(lineIndex, "-").concat(lineText)
+        }, lineText);
+      }));
+    }
+
+    if ( /*#__PURE__*/_react["default"].isValidElement(category)) {
+      var _category$props = category === null || category === void 0 ? void 0 : category.props,
+          _category$props$width = _category$props.width,
+          width = _category$props$width === void 0 ? 0 : _category$props$width,
+          _category$props$heigh = _category$props.height,
+          height = _category$props$heigh === void 0 ? 0 : _category$props$heigh;
+
+      var _getLabelOffsetPositi = getLabelOffsetPosition(xDirection, yDirection, width, height),
+          _getLabelOffsetPositi2 = (0, _slicedToArray2["default"])(_getLabelOffsetPositi, 2),
+          xOffset = _getLabelOffsetPositi2[0],
+          yOffset = _getLabelOffsetPositi2[1];
+
+      return /*#__PURE__*/(0, _react.cloneElement)(category, {
+        key: i,
+        x: x - xOffset,
+        y: y - yOffset
+      });
+    }
+  });
+}
+
+var Hover = /*#__PURE__*/function (_Component4) {
+  (0, _inherits2["default"])(Hover, _Component4);
+
+  var _super4 = (0, _createSuper2["default"])(Hover);
+
+  function Hover() {
+    var _this3;
+
+    (0, _classCallCheck2["default"])(this, Hover);
+
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    _this3 = _super4.call.apply(_super4, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "state", {
+      index: null
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "virtualElement", (0, _canUseDOM["default"])() ? document.createElement('div') : {});
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "unsubscribeMouseMoveRoot", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "unsubscribeMouseLeaveRoot", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "handlerMouseMoveRoot", (0, _rafTrottle["default"])(function (e) {
+      var _this3$asProps = _this3.asProps,
+          eventEmitter = _this3$asProps.eventEmitter,
+          size = _this3$asProps.size,
+          rootRef = _this3$asProps.rootRef;
+      var point = (0, _utils.eventToPoint)(e, rootRef.current);
+      var diam = Math.min(size[0], size[1]);
+      var centerX = point[0] - diam / 2;
+      var centerY = point[1] - diam / 2;
+      var clientX = e.clientX,
+          clientY = e.clientY; // @ts-ignore
+
+      _this3.virtualElement.getBoundingClientRect = _this3.generateGetBoundingClientRect(clientX, clientY);
+      _this3.virtualElement[_utils.CONSTANT.VIRTUAL_ELEMENT] = true;
+
+      var index = _this3.getIndex([centerX, centerY]);
+
+      _this3.setState({
+        index: index
+      }, function () {
+        eventEmitter.emit('onTooltipVisible', index !== null, {
+          index: index
+        }, _this3.virtualElement);
+      });
+    }));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "handlerMouseLeaveRoot", (0, _rafTrottle["default"])(function () {
+      _this3.setState({
+        index: null
+      }, function () {
+        _this3.asProps.eventEmitter.emit('onTooltipVisible', false, {
+          index: null
+        });
+      });
+    }));
+    return _this3;
+  }
+
+  (0, _createClass2["default"])(Hover, [{
+    key: "generateGetBoundingClientRect",
+    value: function generateGetBoundingClientRect() {
+      var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      return function () {
+        return {
+          width: 0,
+          height: 0,
+          top: y,
+          right: x,
+          bottom: y,
+          left: x
+        };
+      };
+    }
+  }, {
+    key: "getPolygon",
+    value: function getPolygon(index) {
+      var _this$asProps10 = this.asProps,
+          categories = _this$asProps10.categories,
+          size = _this$asProps10.size,
+          offset = _this$asProps10.offset;
+      var total = categories.length;
+      var diam = Math.min(size[0], size[1]);
+      var radius = diam / 2 - offset;
+      var prevIndex = (index - 1 + total) % total;
+      var nextIndex = (index + 1 + total) % total;
+
+      var _getRadianPosition7 = getRadianPosition(prevIndex, radius, total),
+          _getRadianPosition8 = (0, _slicedToArray2["default"])(_getRadianPosition7, 2),
+          prevX1 = _getRadianPosition8[0],
+          prevY1 = _getRadianPosition8[1];
+
+      var _getRadianPosition9 = getRadianPosition(index, radius, total),
+          _getRadianPosition10 = (0, _slicedToArray2["default"])(_getRadianPosition9, 2),
+          x = _getRadianPosition10[0],
+          y = _getRadianPosition10[1];
+
+      var _getRadianPosition11 = getRadianPosition(nextIndex, radius, total),
+          _getRadianPosition12 = (0, _slicedToArray2["default"])(_getRadianPosition11, 2),
+          nextX1 = _getRadianPosition12[0],
+          nextY1 = _getRadianPosition12[1];
+
+      return [[0, 0], [(prevX1 + x) / 2, (prevY1 + y) / 2], [x, y], [(nextX1 + x) / 2, (nextY1 + y) / 2]];
+    }
+  }, {
+    key: "getPie",
+    value: function getPie(index) {
+      var _this$asProps11 = this.asProps,
+          categories = _this$asProps11.categories,
+          size = _this$asProps11.size,
+          offset = _this$asProps11.offset;
+      var angle = Math.PI * 2 / categories.length;
+      var radius = Math.min(size[0], size[1]) / 2 - offset;
+      return [index * angle - angle / 2, (index + 1) * angle - angle / 2, radius];
+    }
+  }, {
+    key: "getIndex",
+    value: function getIndex(point) {
+      var _this4 = this;
+
+      var _this$asProps12 = this.asProps,
+          categories = _this$asProps12.categories,
+          type = _this$asProps12.type;
+      var index;
+
+      if (type === 'circle') {
+        index = categories.findIndex(function (c, i) {
+          return pieContains(_this4.getPie(i), point);
+        });
+      } else {
+        index = categories.findIndex(function (c, i) {
+          return (0, _d3Polygon.polygonContains)(_this4.getPolygon(i), point);
+        });
+      }
+
+      return index === -1 ? null : index;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this5 = this;
+
+      var eventEmitter = this.asProps.eventEmitter;
+      this.unsubscribeMouseMoveRoot = eventEmitter.subscribe('onMouseMoveRoot', function (e) {
+        e.persist();
+
+        _this5.handlerMouseMoveRoot(e);
+      });
+      this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe('onMouseLeaveRoot', this.handlerMouseLeaveRoot);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.unsubscribeMouseMoveRoot) {
+        this.unsubscribeMouseMoveRoot();
+      }
+
+      if (this.unsubscribeMouseLeaveRoot) {
+        this.unsubscribeMouseLeaveRoot();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$asProps13 = this.asProps,
+          styles = _this$asProps13.styles,
+          type = _this$asProps13.type;
+      var index = this.state.index;
+      var SPieRect = this.Element;
+
+      if (index !== null) {
+        if (type === 'circle') {
+          var _ref8;
+
+          var _this$getPie = this.getPie(index),
+              _this$getPie2 = (0, _slicedToArray2["default"])(_this$getPie, 3),
+              startAngle = _this$getPie2[0],
+              endAngle = _this$getPie2[1],
+              radius = _this$getPie2[2];
+
+          var circle = (0, _d3Shape.arc)().innerRadius(0).outerRadius(radius).startAngle(startAngle).endAngle(endAngle);
+          return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref8.cn("SPieRect", {
+            "render": 'path',
+            "d": circle()
+          }));
+        } else {
+          var _ref9;
+
+          return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref9.cn("SPieRect", {
+            "render": 'path',
+            "d": (0, _d3Shape.line)()(this.getPolygon(index))
+          }));
+        }
+      }
+
+      return null;
+    }
+  }]);
+  return Hover;
+}(_core.Component);
+
+var Axis = (0, _createElement["default"])(AxisRoot, {
+  Ticks: AxisTicks,
+  Labels: AxisLabels
+});
+var Polygon = (0, _createElement["default"])(PolygonRoot, {
+  Line: PolygonLine,
+  Dots: PolygonDots
+});
+var Radar = (0, _createElement["default"])(RadarRoot, {
+  Axis: Axis,
+  Polygon: Polygon,
+  Hover: Hover
+});
+var _default = Radar;
+exports["default"] = _default;
+//# sourceMappingURL=Radar.js.map