@semcore/d3-chart 3.60.0 → 3.60.1

package/lib/esm/Radar.mjs

@@ -0,0 +1,706 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import { sstyled as sstyled$1, Component, assignProps } from "@semcore/core";
+import React, { cloneElement } from "react";
+import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
+import trottle from "@semcore/utils/lib/rafTrottle";
+import canUseDOM from "@semcore/utils/lib/canUseDOM";
+import { polygonContains } from "d3-polygon";
+import { lineRadial, curveLinearClosed, arc, line } from "d3-shape";
+import createElement from "./createElement.mjs";
+import { getChartDefaultColorName, eventToPoint, measureText } from "./utils.mjs";
+import Tooltip from "./Tooltip.mjs";
+import { PatternFill, getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
+/*!__reshadow-styles__:"./style/radar.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SAxisLine_17thy_gg_,.___SAxisTick_17thy_gg_,.___SAxis_17thy_gg_{stroke:var(--intergalactic-chart-grid-line, #e0e1e9);stroke-width:1;fill:transparent}.___SAxisLine_17thy_gg_,.___SAxisTick_17thy_gg_{stroke-dasharray:2}.___SAxisLine_17thy_gg_.__active_17thy_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___SAxisLabel_17thy_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_17thy_gg_.__xDirection_17thy_gg_{text-anchor:var(--xDirection_17thy)}.___SAxisLabel_17thy_gg_.__yDirection_17thy_gg_{dominant-baseline:var(--yDirection_17thy)}.___SPolygonDot_17thy_gg_,.___SPolygon_17thy_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPolygon_17thy_gg_{opacity:.2}.___SPolygon_17thy_gg_.__color_17thy_gg_{fill:var(--color_17thy)}.___SPolygon_17thy_gg_.__pattern_17thy_gg_.__color_17thy_gg_{fill:var(--pattern_17thy);stroke:var(--color_17thy);stroke-width:1px}.___SPolygonDot_17thy_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #ffffff);r:6px}.___SPolygonDot_17thy_gg_.__transparent_17thy_gg_{opacity:.3}.___SPolygonDot_17thy_gg_.__color_17thy_gg_{fill:var(--color_17thy)}.___SPolygonLine_17thy_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SPolygonLine_17thy_gg_.__transparent_17thy_gg_{opacity:.3}.___SPolygonLine_17thy_gg_.__color_17thy_gg_{stroke:var(--color_17thy)}.___SPieRect_17thy_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    /*__inner_css_end__*/
+    "17thy_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SAxis": "___SAxis_17thy_gg_",
+    "__SAxisLine": "___SAxisLine_17thy_gg_",
+    "__SAxisTick": "___SAxisTick_17thy_gg_",
+    "_active": "__active_17thy_gg_",
+    "__SAxisLabel": "___SAxisLabel_17thy_gg_",
+    "_xDirection": "__xDirection_17thy_gg_",
+    "--xDirection": "--xDirection_17thy",
+    "_yDirection": "__yDirection_17thy_gg_",
+    "--yDirection": "--yDirection_17thy",
+    "__SPolygon": "___SPolygon_17thy_gg_",
+    "_color": "__color_17thy_gg_",
+    "--color": "--color_17thy",
+    "_pattern": "__pattern_17thy_gg_",
+    "--pattern": "--pattern_17thy",
+    "__SPolygonDot": "___SPolygonDot_17thy_gg_",
+    "_transparent": "__transparent_17thy_gg_",
+    "__SPolygonLine": "___SPolygonLine_17thy_gg_",
+    "__SPieRect": "___SPieRect_17thy_gg_"
+  })
+);
+var clampAngle = function clampAngle2(angle) {
+  angle = angle % (2 * Math.PI);
+  if (angle < 0) angle += 2 * Math.PI;
+  return angle;
+};
+function getBoxAxesValue(i, range, axes, total, angleOffset) {
+  var func = axes === "y" ? Math.sin : Math.cos;
+  var angle = clampAngle((total - i) * 2 * Math.PI / total + angleOffset);
+  return range * (1 - func(angle)) - range;
+}
+function getRadianPosition(i, range, total, angleOffset) {
+  return [getBoxAxesValue(i, range, "y", total, angleOffset), getBoxAxesValue(i, range, "x", total, angleOffset)];
+}
+var getLabelXPlacement = function getLabelXPlacement2(i, total, angleOffset) {
+  var angle = clampAngle(i / total * (Math.PI * 2) - angleOffset);
+  if (angle >= Math.PI + Math.PI * (8 / 9) || angle <= Math.PI * (1 / 9)) return "middle";
+  if (angle >= Math.PI * (8 / 9) && angle <= Math.PI + Math.PI * (1 / 9)) return "middle";
+  return angle < Math.PI ? "start" : "end";
+};
+var getLabelYPlacement = function getLabelYPlacement2(i, total, angleOffset) {
+  var angle = clampAngle(i / total * (Math.PI * 2) - angleOffset);
+  if (angle >= Math.PI + Math.PI * (8 / 9) || angle <= Math.PI * (1 / 9)) return "alphabetic";
+  if (angle >= Math.PI * (8 / 9) && angle <= Math.PI + Math.PI * (1 / 9)) return "mathematical";
+  return "middle";
+};
+function getLabelPlacement(i, total, angleOffset) {
+  return [getLabelXPlacement(i, total, angleOffset), getLabelYPlacement(i, total, angleOffset)];
+}
+function computeTextWidth(texts, textSize) {
+  var defaultWidth = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 50;
+  var defaultHeight = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 20;
+  var widths = texts.map(function(text) {
+    if (typeof text === "string") {
+      return measureText(text, textSize);
+    }
+    if (/* @__PURE__ */ React.isValidElement(text)) {
+      var _text$props, _text$props2;
+      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, _toConsumableArray(widths));
+}
+function getTicks(tickSize, radius) {
+  var ticks = 0;
+  while (Math.trunc(radius / (tickSize / 2)) > ticks) {
+    ticks += 1;
+  }
+  return _toConsumableArray(Array(ticks).keys()).reduce(function(ticks2, t, i, total) {
+    if (i) ticks2.push(i / total.length);
+    return ticks2;
+  }, []);
+}
+function pieContains(_ref13, _ref14) {
+  var _ref15 = _slicedToArray(_ref13, 3), startAngle = _ref15[0], endAngle = _ref15[1], radius = _ref15[2];
+  var _ref16 = _slicedToArray(_ref14, 2), x = _ref16[0], y = _ref16[1];
+  var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+  if (distance > radius) return false;
+  startAngle = clampAngle(startAngle);
+  endAngle = clampAngle(endAngle);
+  startAngle = startAngle < endAngle ? startAngle : startAngle - 2 * Math.PI;
+  var angle = clampAngle(Math.atan2(y, x) + Math.PI / 2);
+  var prevAngle = angle - Math.PI * 2;
+  var nextAngle = angle + Math.PI * 2;
+  if (angle > startAngle && angle < endAngle) return true;
+  if (prevAngle > startAngle && prevAngle < endAngle) return true;
+  if (nextAngle > startAngle && nextAngle < endAngle) return true;
+  return false;
+}
+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) {
+  _inherits(RadarRoot2, _Component);
+  var _super = _createSuper(RadarRoot2);
+  function RadarRoot2() {
+    var _this;
+    _classCallCheck(this, RadarRoot2);
+    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));
+    _defineProperty(_assertThisInitialized(_this), "computeOffset", 0);
+    _defineProperty(_assertThisInitialized(_this), "categoriesKey", null);
+    return _this;
+  }
+  _createClass(RadarRoot2, [{
+    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,
+        angleOffset: this.asProps.angleOffset
+      };
+    }
+  }, {
+    key: "getPolygonProps",
+    value: function getPolygonProps(_ref17, index) {
+      var dataKey = _ref17.dataKey;
+      var _this$asProps2 = this.asProps, data = _this$asProps2.data, scale = _this$asProps2.scale, angleOffset = _this$asProps2.angleOffset, uid = _this$asProps2.uid, patterns = _this$asProps2.patterns;
+      return {
+        offset: this.offset,
+        data: data[dataKey] || [],
+        scale,
+        angleOffset,
+        color: getChartDefaultColorName(index),
+        uid: "".concat(uid, "-").concat(index),
+        patterns
+      };
+    }
+  }, {
+    key: "getHoverProps",
+    value: function getHoverProps() {
+      return {
+        type: this.asProps.type,
+        offset: this.offset,
+        categories: this.asProps.data[this.categoriesKey],
+        angleOffset: this.asProps.angleOffset
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref2;
+      var SRadar = this.Element;
+      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, size = _this$asProps3.size, data = _this$asProps3.data, offset = _this$asProps3.offset;
+      var _size = _slicedToArray(size, 2), width = _size[0], height = _size[1];
+      this.asProps.dataHintsHandler.establishDataType("indexed-groups");
+      var dataKey;
+      React.Children.toArray(getOriginChildren(Children)).forEach(function(child) {
+        if (/* @__PURE__ */ React.isValidElement(child) && child.type === Radar.Axis) {
+          dataKey = child.props.dataKey;
+        }
+      });
+      if (dataKey) {
+        if (offset === void 0) {
+          this.computeOffset = computeTextWidth(data[dataKey], this.textSize) + MINIMUM_OFFSET;
+        }
+        this.categoriesKey = dataKey;
+      }
+      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SRadar, _ref2.cn("SRadar", {
+        "aria-hidden": true,
+        "id": this.id,
+        "render": "g",
+        "childrenPosition": "inside",
+        "transform": "translate(".concat(width / 2, ",").concat(height / 2, ")")
+      }));
+    }
+  }]);
+  return RadarRoot2;
+}(Component);
+_defineProperty(RadarRoot, "displayName", "Line");
+_defineProperty(RadarRoot, "style", style);
+_defineProperty(RadarRoot, "enhance", [uniqueIDEnhancement()]);
+_defineProperty(RadarRoot, "defaultProps", {
+  type: "polygon",
+  angleOffset: 0
+});
+var PolygonRoot = /* @__PURE__ */ function(_Component2) {
+  _inherits(PolygonRoot2, _Component2);
+  var _super2 = _createSuper(PolygonRoot2);
+  function PolygonRoot2() {
+    _classCallCheck(this, PolygonRoot2);
+    return _super2.apply(this, arguments);
+  }
+  _createClass(PolygonRoot2, [{
+    key: "getDotsProps",
+    value: function getDotsProps() {
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, scale = _this$asProps4.scale, color = _this$asProps4.color, resolveColor = _this$asProps4.resolveColor, transparent = _this$asProps4.transparent, dataKey = _this$asProps4.dataKey, dataHintsHandler = _this$asProps4.dataHintsHandler, angleOffset = _this$asProps4.angleOffset, patterns = _this$asProps4.patterns;
+      return {
+        data,
+        scale,
+        color,
+        resolveColor,
+        transparent,
+        categoryKey: dataKey,
+        dataHintsHandler,
+        angleOffset,
+        patterns
+      };
+    }
+  }, {
+    key: "getLineProps",
+    value: function getLineProps() {
+      var _this$asProps5 = this.asProps, d3 = _this$asProps5.d3, data = _this$asProps5.data, color = _this$asProps5.color, resolveColor = _this$asProps5.resolveColor, transparent = _this$asProps5.transparent;
+      return {
+        data,
+        color,
+        resolveColor,
+        transparent,
+        d3
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref3;
+      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, resolveColor = _this$asProps6.resolveColor, fill = _this$asProps6.fill, uid = _this$asProps6.uid, patterns = _this$asProps6.patterns;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPolygon, _ref3.cn("SPolygon", {
+        "render": "path",
+        "d": d3(data),
+        "color": resolveColor(fill || color),
+        "pattern": patterns ? "url(#".concat(uid, "-pattern)") : void 0
+      }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref3.cn("PatternFill", {
+        "id": "".concat(uid, "-pattern"),
+        "patternKey": color,
+        "color": resolveColor(fill || color),
+        "patterns": patterns
+      })));
+    }
+  }]);
+  return PolygonRoot2;
+}(Component);
+_defineProperty(PolygonRoot, "displayName", "Polygon");
+_defineProperty(PolygonRoot, "style", style);
+_defineProperty(PolygonRoot, "defaultProps", function(_ref22) {
+  var scale = _ref22.scale, _ref22$curve = _ref22.curve, curve = _ref22$curve === void 0 ? curveLinearClosed : _ref22$curve, size = _ref22.size, offset = _ref22.offset, angleOffset = _ref22.angleOffset;
+  scale.range([0, Math.min(size[0], size[1]) / 2 - offset]);
+  return {
+    d3: lineRadial().curve(curve).radius(function(d) {
+      return scale(d || 0);
+    }).angle(function(d, i, data) {
+      return i / data.length * 2 * Math.PI - angleOffset;
+    })
+  };
+});
+function PolygonLine(props) {
+  var _ref4;
+  var SPolygonLine = props.Element, styles = props.styles, d3 = props.d3, color = props.color, resolveColor = props.resolveColor, data = props.data, transparent = props.transparent;
+  return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPolygonLine, _ref4.cn("SPolygonLine", {
+    "render": "path",
+    "d": d3(data),
+    "color": resolveColor(color),
+    "transparent": transparent
+  }));
+}
+function PolygonDots(props) {
+  var SPolygonDot = props.Element, styles = props.styles, color = props.color, resolveColor = props.resolveColor, data = props.data, scale = props.scale, transparent = props.transparent, categoryKey = props.categoryKey, angleOffset = props.angleOffset, patterns = props.patterns;
+  return data.map(function(value, i) {
+    var _ref6;
+    if (value === null || value === void 0) return;
+    var radius = scale(value);
+    props.dataHintsHandler.describeGroupedValues(categoryKey, "".concat(categoryKey, ".").concat(i));
+    var _getRadianPosition = getRadianPosition(i, radius, data.length, angleOffset), _getRadianPosition2 = _slicedToArray(_getRadianPosition, 2), cx = _getRadianPosition2[0], cy = _getRadianPosition2[1];
+    if (!patterns) {
+      var _ref5;
+      return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPolygonDot, _ref5.cn("SPolygonDot", {
+        "render": "circle",
+        "color": resolveColor(color),
+        "transparent": transparent,
+        "patternKey": color,
+        "key": "".concat(i),
+        "cx": cx,
+        "cy": cy
+      }));
+    }
+    var patternKey = color || getChartDefaultColorName(0);
+    var _getPatternSymbolSize = getPatternSymbolSize({
+      patternKey,
+      patterns
+    }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
+    return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPolygonDot, _ref6.cn("SPolygonDot", {
+      "render": PatternSymbol,
+      "color": resolveColor(color),
+      "transparent": transparent,
+      "patternKey": color,
+      "key": "".concat(i),
+      "x": cx - width / 2,
+      "y": cy - height / 2
+    }));
+  });
+}
+var AxisRoot = /* @__PURE__ */ function(_Component3) {
+  _inherits(AxisRoot2, _Component3);
+  var _super3 = _createSuper(AxisRoot2);
+  function AxisRoot2() {
+    var _this2;
+    _classCallCheck(this, AxisRoot2);
+    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));
+    _defineProperty(_assertThisInitialized(_this2), "unsubscribeTooltipVisible", null);
+    _defineProperty(_assertThisInitialized(_this2), "state", {
+      activeLineIndex: null
+    });
+    _defineProperty(_assertThisInitialized(_this2), "handleTooltipRenderingProps", function(_anchorProps, _ref18) {
+      var index = _ref18.index;
+      _this2.setState({
+        activeLineIndex: index
+      });
+    });
+    return _this2;
+  }
+  _createClass(AxisRoot2, [{
+    key: "createLineRadial",
+    value: function createLineRadial(radius, total) {
+      return lineRadial().curve(curveLinearClosed).radius(function() {
+        return radius;
+      }).angle(function(d, i) {
+        return i / total * 2 * Math.PI;
+      });
+    }
+  }, {
+    key: "getTicksProps",
+    value: function getTicksProps(_ref19) {
+      var _ref19$tickSize = _ref19.tickSize, tickSize = _ref19$tickSize === void 0 ? 100 : _ref19$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,
+        data,
+        categories,
+        ticks: getTicks(tickSize, radius),
+        offset,
+        d3: this.createLineRadial(radius, categories.length)
+      };
+    }
+  }, {
+    key: "getLabelsProps",
+    value: function getLabelsProps(_ref20) {
+      var _ref20$labelOffset = _ref20.labelOffset, labelOffset = _ref20$labelOffset === void 0 ? 10 : _ref20$labelOffset;
+      var _this$asProps8 = this.asProps, offset = _this$asProps8.offset, categories = _this$asProps8.categories, textSize = _this$asProps8.textSize, angleOffset = _this$asProps8.angleOffset;
+      return {
+        categories,
+        textSize,
+        offset: offset - labelOffset,
+        angleOffset
+      };
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var eventEmitter = this.asProps.eventEmitter;
+      this.unsubscribeTooltipVisible = eventEmitter.subscribe("setTooltipRenderingProps", this.handleTooltipRenderingProps);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$unsubscribeTool;
+      (_this$unsubscribeTool = this.unsubscribeTooltipVisible) === null || _this$unsubscribeTool === void 0 ? void 0 : _this$unsubscribeTool.call(this);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref7;
+      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, angleOffset = _this$asProps9.angleOffset;
+      var activeLineIndex = this.state.activeLineIndex;
+      var radius = Math.min(size[0], size[1]) / 2 - offset;
+      var total = categories.length;
+      return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, type === "circle" ? /* @__PURE__ */ React.createElement(SAxis, _ref7.cn("SAxis", {
+        "render": "circle",
+        "cx": 0,
+        "cy": 0,
+        "r": radius
+      })) : /* @__PURE__ */ React.createElement(SAxis, _ref7.cn("SAxis", {
+        "render": "path",
+        "d": this.createLineRadial(radius, total)(categories)
+      })), categories.map(function(category, i) {
+        var _getRadianPosition3 = getRadianPosition(i, radius, total, angleOffset), _getRadianPosition4 = _slicedToArray(_getRadianPosition3, 2), x = _getRadianPosition4[0], y = _getRadianPosition4[1];
+        var _sstyled$cn = sstyled$1(styles).cn("SAxisLine", {
+          active: activeLineIndex === i
+        }), className = _sstyled$cn.className;
+        return /* @__PURE__ */ React.createElement("line", {
+          key: i,
+          x1: 0,
+          y1: 0,
+          x2: x,
+          y2: y,
+          className
+        });
+      }));
+    }
+  }]);
+  return AxisRoot2;
+}(Component);
+_defineProperty(AxisRoot, "displayName", "Polygon");
+_defineProperty(AxisRoot, "style", style);
+_defineProperty(AxisRoot, "defaultProps", function(_ref23) {
+  var data = _ref23.data, dataKey = _ref23.dataKey;
+  var categories = data[dataKey];
+  return {
+    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 _ref8;
+    d3.radius(function() {
+      return radius * tick;
+    });
+    return _ref8 = sstyled$1(styles), type === "circle" ? /* @__PURE__ */ React.createElement(SAxisTick, _ref8.cn("SAxisTick", {
+      "key": i,
+      "render": "circle",
+      "cx": 0,
+      "cy": 0,
+      "r": radius * tick
+    })) : /* @__PURE__ */ React.createElement(SAxisTick, _ref8.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, angleOffset = props.angleOffset;
+  var radius = Math.min(size[0], size[1]) / 2 - offset;
+  return categories.map(function(category, i) {
+    var _getRadianPosition5 = getRadianPosition(i, radius, categories.length, angleOffset), _getRadianPosition6 = _slicedToArray(_getRadianPosition5, 2), x = _getRadianPosition6[0], y = _getRadianPosition6[1];
+    var _getLabelPlacement = getLabelPlacement(i, categories.length, angleOffset), _getLabelPlacement2 = _slicedToArray(_getLabelPlacement, 2), xDirection = _getLabelPlacement2[0], yDirection = _getLabelPlacement2[1];
+    if (typeof category === "string") {
+      var _ref9;
+      props.dataHintsHandler.labelKey("value", i, category);
+      var lines = category.split("\n");
+      return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAxisLabel, _ref9.cn("SAxisLabel", {
+        "key": i,
+        "render": "text",
+        "childrenPosition": "inside",
+        "x": x,
+        "y": y,
+        "xDirection": xDirection,
+        "yDirection": yDirection
+      }), lines.map(function(lineText, lineIndex) {
+        return /* @__PURE__ */ React.createElement("tspan", {
+          x,
+          y: y + (lineIndex - (lines.length - 1) / 2) * textSize,
+          key: "#".concat(lineIndex, "-").concat(lineText)
+        }, lineText);
+      }));
+    }
+    if (/* @__PURE__ */ React.isValidElement(category)) {
+      var _category$props;
+      var _ref21 = (_category$props = category === null || category === void 0 ? void 0 : category.props) !== null && _category$props !== void 0 ? _category$props : {}, _ref21$width = _ref21.width, width = _ref21$width === void 0 ? 0 : _ref21$width, _ref21$height = _ref21.height, height = _ref21$height === void 0 ? 0 : _ref21$height;
+      var _getLabelOffsetPositi = getLabelOffsetPosition(xDirection, yDirection, width, height), _getLabelOffsetPositi2 = _slicedToArray(_getLabelOffsetPositi, 2), xOffset = _getLabelOffsetPositi2[0], yOffset = _getLabelOffsetPositi2[1];
+      return /* @__PURE__ */ cloneElement(category, {
+        key: i,
+        x: x - xOffset,
+        y: y - yOffset
+      });
+    }
+  });
+}
+var Hover = /* @__PURE__ */ function(_Component4) {
+  _inherits(Hover2, _Component4);
+  var _super4 = _createSuper(Hover2);
+  function Hover2() {
+    var _this3;
+    _classCallCheck(this, Hover2);
+    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));
+    _defineProperty(_assertThisInitialized(_this3), "state", {
+      index: null
+    });
+    _defineProperty(_assertThisInitialized(_this3), "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(_assertThisInitialized(_this3), "unsubscribeMouseMoveRoot", null);
+    _defineProperty(_assertThisInitialized(_this3), "unsubscribeMouseLeaveRoot", null);
+    _defineProperty(_assertThisInitialized(_this3), "handlerMouseMoveRoot", trottle(function(e) {
+      var _this3$asProps = _this3.asProps, eventEmitter = _this3$asProps.eventEmitter, size = _this3$asProps.size, rootRef = _this3$asProps.rootRef, patterns = _this3$asProps.patterns;
+      var point = 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;
+      var index = _this3.getIndex([centerX, centerY]);
+      _this3.setState({
+        index
+      }, function() {
+        eventEmitter.emit("setTooltipPosition", clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps", {}, {
+          index,
+          patterns
+        });
+        eventEmitter.emit("setTooltipVisible", index !== null);
+      });
+    }));
+    _defineProperty(_assertThisInitialized(_this3), "handlerMouseLeaveRoot", trottle(function() {
+      _this3.setState({
+        index: null
+      }, function() {
+        _this3.asProps.eventEmitter.emit("setTooltipVisible", false);
+      });
+    }));
+    return _this3;
+  }
+  _createClass(Hover2, [{
+    key: "generateGetBoundingClientRect",
+    value: function generateGetBoundingClientRect() {
+      var x = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
+      var y = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+      return function() {
+        return {
+          width: 0,
+          height: 0,
+          top: y,
+          right: x,
+          bottom: y,
+          left: x
+        };
+      };
+    }
+  }, {
+    key: "getPolygon",
+    value: function getPolygon(index) {
+      var _this$asProps10 = this.asProps, categories = _this$asProps10.categories, size = _this$asProps10.size, offset = _this$asProps10.offset, angleOffset = _this$asProps10.angleOffset;
+      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, angleOffset), _getRadianPosition8 = _slicedToArray(_getRadianPosition7, 2), prevX1 = _getRadianPosition8[0], prevY1 = _getRadianPosition8[1];
+      var _getRadianPosition9 = getRadianPosition(index, radius, total, angleOffset), _getRadianPosition10 = _slicedToArray(_getRadianPosition9, 2), x = _getRadianPosition10[0], y = _getRadianPosition10[1];
+      var _getRadianPosition11 = getRadianPosition(nextIndex, radius, total, angleOffset), _getRadianPosition12 = _slicedToArray(_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, angleOffset = _this$asProps11.angleOffset;
+      var angle = Math.PI * 2 / categories.length;
+      var radius = Math.min(size[0], size[1]) / 2 - offset;
+      return [index * angle - angle / 2 - angleOffset, (index + 1) * angle - angle / 2 - angleOffset, 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 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 _ref10;
+          var _this$getPie = this.getPie(index), _this$getPie2 = _slicedToArray(_this$getPie, 3), startAngle = _this$getPie2[0], endAngle = _this$getPie2[1], radius = _this$getPie2[2];
+          var circle = arc().innerRadius(0).outerRadius(radius).startAngle(startAngle).endAngle(endAngle);
+          return _ref10 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPieRect, _ref10.cn("SPieRect", {
+            "render": "path",
+            "d": circle()
+          }));
+        } else {
+          var _ref11;
+          return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPieRect, _ref11.cn("SPieRect", {
+            "render": "path",
+            "d": line()(this.getPolygon(index))
+          }));
+        }
+      }
+      return null;
+    }
+  }]);
+  return Hover2;
+}(Component);
+var Axis = createElement(AxisRoot, {
+  Ticks: AxisTicks,
+  Labels: AxisLabels
+});
+var Polygon = createElement(PolygonRoot, {
+  Line: PolygonLine,
+  Dots: PolygonDots
+});
+var RadarTooltip = function RadarTooltip2(props) {
+  var _ref = arguments[0], _ref12;
+  var SRadarTooltip = Tooltip;
+  return _ref12 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SRadarTooltip, _ref12.cn("SRadarTooltip", _objectSpread({}, assignProps({
+    "tag": Radar.Hover,
+    "excludeAnchorProps": true
+  }, _ref))));
+};
+var Radar = createElement(RadarRoot, {
+  Axis,
+  Polygon,
+  Hover,
+  Tooltip: [RadarTooltip, Tooltip._______childrenComponents]
+});
+export {
+  Radar as default,
+  getLabelOffsetPosition
+};