@semcore/d3-chart 3.60.2-prerelease.0 → 3.61.0-prerelease.0

package/lib/esm/Radar.mjs

@@ -1,53 +1,51 @@
 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 { sstyled, Component, assignProps } from "@semcore/core";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+import trottle from "@semcore/core/lib/utils/rafTrottle";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { polygonContains } from "d3-polygon";
-import { lineRadial, curveLinearClosed, arc, line } from "d3-shape";
+import { curveLinearClosed, lineRadial, arc, line } from "d3-shape";
+import React, { cloneElement } from "react";
 import createElement from "./createElement.mjs";
-import { getChartDefaultColorName, eventToPoint, measureText } from "./utils.mjs";
-import Tooltip from "./Tooltip.mjs";
 import { PatternFill, getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
+import Tooltip from "./Tooltip.mjs";
+import { measureText, getChartDefaultColorName, eventToPoint } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/radar.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SAxisLine_1634e_gg_,.___SAxisTick_1634e_gg_,.___SAxis_1634e_gg_{stroke:var(--intergalactic-chart-grid-line, #e0e1e9);stroke-width:1;fill:transparent}.___SAxisLine_1634e_gg_,.___SAxisTick_1634e_gg_{stroke-dasharray:2}.___SAxisLine_1634e_gg_.__active_1634e_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___SAxisLabel_1634e_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_1634e_gg_.__xDirection_1634e_gg_{text-anchor:var(--xDirection_1634e)}.___SAxisLabel_1634e_gg_.__yDirection_1634e_gg_{dominant-baseline:var(--yDirection_1634e)}.___SPolygonDot_1634e_gg_,.___SPolygon_1634e_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPolygon_1634e_gg_{opacity:.2}.___SPolygon_1634e_gg_.__color_1634e_gg_{fill:var(--color_1634e)}.___SPolygon_1634e_gg_.__pattern_1634e_gg_.__color_1634e_gg_{fill:var(--pattern_1634e);stroke:var(--color_1634e);stroke-width:1px}.___SPolygonDot_1634e_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #ffffff);r:6px}.___SPolygonDot_1634e_gg_.__transparent_1634e_gg_{opacity:.3}.___SPolygonDot_1634e_gg_.__color_1634e_gg_{fill:var(--color_1634e)}.___SPolygonLine_1634e_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SPolygonLine_1634e_gg_.__transparent_1634e_gg_{opacity:.3}.___SPolygonLine_1634e_gg_.__color_1634e_gg_{stroke:var(--color_1634e)}.___SPieRect_1634e_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SAxisLine_49jzl_gg_,.___SAxisTick_49jzl_gg_,.___SAxis_49jzl_gg_{stroke:var(--intergalactic-chart-grid-line, rgb(237, 239, 238));stroke-width:1;fill:transparent}.___SAxisLine_49jzl_gg_,.___SAxisTick_49jzl_gg_{stroke-dasharray:2}.___SAxisLine_49jzl_gg_.__active_49jzl_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, rgb(214, 216, 215))}.___SAxisLabel_49jzl_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_49jzl_gg_.__xDirection_49jzl_gg_{text-anchor:var(--xDirection_49jzl)}.___SAxisLabel_49jzl_gg_.__yDirection_49jzl_gg_{dominant-baseline:var(--yDirection_49jzl)}.___SPolygonDot_49jzl_gg_,.___SPolygon_49jzl_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210))}.___SPolygon_49jzl_gg_{opacity:.2}.___SPolygon_49jzl_gg_.__color_49jzl_gg_{fill:var(--color_49jzl)}.___SPolygon_49jzl_gg_.__pattern_49jzl_gg_.__color_49jzl_gg_{fill:var(--pattern_49jzl);stroke:var(--color_49jzl);stroke-width:1px}.___SPolygonDot_49jzl_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #fff);r:6px}.___SPolygonDot_49jzl_gg_.__transparent_49jzl_gg_{opacity:.3}.___SPolygonDot_49jzl_gg_.__color_49jzl_gg_{fill:var(--color_49jzl)}.___SPolygonLine_49jzl_gg_{stroke:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210));stroke-width:3;fill:transparent}.___SPolygonLine_49jzl_gg_.__transparent_49jzl_gg_{opacity:.3}.___SPolygonLine_49jzl_gg_.__color_49jzl_gg_{stroke:var(--color_49jzl)}.___SPieRect_49jzl_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(0, 22, 16, 0.028))}",
     /*__inner_css_end__*/
-    "1634e_gg_"
+    "49jzl_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SAxis": "___SAxis_1634e_gg_",
-    "__SAxisLine": "___SAxisLine_1634e_gg_",
-    "__SAxisTick": "___SAxisTick_1634e_gg_",
-    "_active": "__active_1634e_gg_",
-    "__SAxisLabel": "___SAxisLabel_1634e_gg_",
-    "_xDirection": "__xDirection_1634e_gg_",
-    "--xDirection": "--xDirection_1634e",
-    "_yDirection": "__yDirection_1634e_gg_",
-    "--yDirection": "--yDirection_1634e",
-    "__SPolygon": "___SPolygon_1634e_gg_",
-    "_color": "__color_1634e_gg_",
-    "--color": "--color_1634e",
-    "_pattern": "__pattern_1634e_gg_",
-    "--pattern": "--pattern_1634e",
-    "__SPolygonDot": "___SPolygonDot_1634e_gg_",
-    "_transparent": "__transparent_1634e_gg_",
-    "__SPolygonLine": "___SPolygonLine_1634e_gg_",
-    "__SPieRect": "___SPieRect_1634e_gg_"
+    "__SAxis": "___SAxis_49jzl_gg_",
+    "__SAxisLine": "___SAxisLine_49jzl_gg_",
+    "__SAxisTick": "___SAxisTick_49jzl_gg_",
+    "_active": "__active_49jzl_gg_",
+    "__SAxisLabel": "___SAxisLabel_49jzl_gg_",
+    "_xDirection": "__xDirection_49jzl_gg_",
+    "--xDirection": "--xDirection_49jzl",
+    "_yDirection": "__yDirection_49jzl_gg_",
+    "--yDirection": "--yDirection_49jzl",
+    "__SPolygon": "___SPolygon_49jzl_gg_",
+    "_color": "__color_49jzl_gg_",
+    "--color": "--color_49jzl",
+    "_pattern": "__pattern_49jzl_gg_",
+    "--pattern": "--pattern_49jzl",
+    "__SPolygonDot": "___SPolygonDot_49jzl_gg_",
+    "_transparent": "__transparent_49jzl_gg_",
+    "__SPolygonLine": "___SPolygonLine_49jzl_gg_",
+    "__SPieRect": "___SPieRect_49jzl_gg_"
   })
 );
 var clampAngle = function clampAngle2(angle) {
@@ -98,14 +96,14 @@ function getTicks(tickSize, radius) {
   while (Math.trunc(radius / (tickSize / 2)) > ticks) {
     ticks += 1;
   }
-  return _toConsumableArray(Array(ticks).keys()).reduce(function(ticks2, t, i, total) {
+  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];
+function pieContains(_ref11, _ref12) {
+  var _ref13 = _slicedToArray(_ref11, 3), startAngle = _ref13[0], endAngle = _ref13[1], radius = _ref13[2];
+  var _ref14 = _slicedToArray(_ref12, 2), x = _ref14[0], y = _ref14[1];
   var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
   if (distance > radius) return false;
   startAngle = clampAngle(startAngle);
@@ -139,21 +137,20 @@ function getLabelOffsetPosition(xDirection, yDirection, width, height) {
   return [xOffset + width / 2, yOffset + height / 2];
 }
 var MINIMUM_OFFSET = 5;
-var RadarRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(RadarRoot2, _Component);
-  var _super = _createSuper(RadarRoot2);
+var RadarRoot = /* @__PURE__ */ (function(_Component) {
   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);
+    _this = _callSuper(this, RadarRoot2, [].concat(args));
+    _defineProperty(_this, "computeOffset", 0);
+    _defineProperty(_this, "categoriesKey", null);
     return _this;
   }
-  _createClass(RadarRoot2, [{
+  _inherits(RadarRoot2, _Component);
+  return _createClass(RadarRoot2, [{
     key: "id",
     get: function get() {
       var _this$asProps = this.asProps, id = _this$asProps.id, uid = _this$asProps.uid;
@@ -183,8 +180,8 @@ var RadarRoot = /* @__PURE__ */ function(_Component) {
     }
   }, {
     key: "getPolygonProps",
-    value: function getPolygonProps(_ref17, index) {
-      var dataKey = _ref17.dataKey;
+    value: function getPolygonProps(_ref15, index) {
+      var dataKey = _ref15.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,
@@ -203,15 +200,76 @@ var RadarRoot = /* @__PURE__ */ function(_Component) {
         type: this.asProps.type,
         offset: this.offset,
         categories: this.asProps.data[this.categoriesKey],
-        angleOffset: this.asProps.angleOffset
+        angleOffset: this.asProps.angleOffset,
+        getIndex: this.getIndex.bind(this),
+        getPolygon: this.getPolygon.bind(this),
+        getPie: this.getPie.bind(this)
       };
     }
+  }, {
+    key: "getIndex",
+    value: function getIndex(point) {
+      var _this2 = this;
+      var _this$asProps3 = this.asProps, data = _this$asProps3.data, type = _this$asProps3.type;
+      var categories = data[this.categoriesKey];
+      var index;
+      if (type === "circle") {
+        index = categories.findIndex(function(_c, i) {
+          return pieContains(_this2.getPie(i), point);
+        });
+      } else {
+        index = categories.findIndex(function(_c, i) {
+          return polygonContains(_this2.getPolygon(i), point);
+        });
+      }
+      return index === -1 ? null : index;
+    }
+  }, {
+    key: "getPolygon",
+    value: function getPolygon(index) {
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, size = _this$asProps4.size, angleOffset = _this$asProps4.angleOffset;
+      var offset = this.offset;
+      var categories = data[this.categoriesKey];
+      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 _getRadianPosition = getRadianPosition(prevIndex, radius, total, angleOffset), _getRadianPosition2 = _slicedToArray(_getRadianPosition, 2), prevX1 = _getRadianPosition2[0], prevY1 = _getRadianPosition2[1];
+      var _getRadianPosition3 = getRadianPosition(index, radius, total, angleOffset), _getRadianPosition4 = _slicedToArray(_getRadianPosition3, 2), x = _getRadianPosition4[0], y = _getRadianPosition4[1];
+      var _getRadianPosition5 = getRadianPosition(nextIndex, radius, total, angleOffset), _getRadianPosition6 = _slicedToArray(_getRadianPosition5, 2), nextX1 = _getRadianPosition6[0], nextY1 = _getRadianPosition6[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$asProps5 = this.asProps, data = _this$asProps5.data, size = _this$asProps5.size, angleOffset = _this$asProps5.angleOffset;
+      var categories = data[this.categoriesKey];
+      var offset = this.offset;
+      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: "handlerOnClick",
+    value: function handlerOnClick(e) {
+      e.stopPropagation();
+      var _this$asProps6 = this.asProps, rootRef = _this$asProps6.rootRef, size = _this$asProps6.size, onClick = _this$asProps6.onClick;
+      if (!onClick) return;
+      var _eventToPoint = eventToPoint(e, rootRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 2), pointX = _eventToPoint2[0], pointY = _eventToPoint2[1];
+      var r = Math.min(size[0], size[1]) / 2;
+      var centerX = pointX - r;
+      var centerY = pointY - r;
+      var index = this.getIndex([centerX, centerY]);
+      if (index === null) return;
+      onClick(index, e);
+    }
   }, {
     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 _this$asProps7 = this.asProps, Children = _this$asProps7.Children, styles = _this$asProps7.styles, size = _this$asProps7.size, data = _this$asProps7.data, offset = _this$asProps7.offset;
       var _size = _slicedToArray(size, 2), width = _size[0], height = _size[1];
       this.asProps.dataHintsHandler.establishDataType("indexed-groups");
       var dataKey;
@@ -226,17 +284,17 @@ var RadarRoot = /* @__PURE__ */ function(_Component) {
         }
         this.categoriesKey = dataKey;
       }
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SRadar, _ref2.cn("SRadar", {
+      return _ref2 = sstyled(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, ")")
+        "transform": "translate(".concat(width / 2, ",").concat(height / 2, ")"),
+        "onClickCapture": this.handlerOnClick.bind(this)
       }));
     }
   }]);
-  return RadarRoot2;
-}(Component);
+})(Component);
 _defineProperty(RadarRoot, "displayName", "Line");
 _defineProperty(RadarRoot, "style", style);
 _defineProperty(RadarRoot, "enhance", [uniqueIDEnhancement()]);
@@ -244,17 +302,16 @@ _defineProperty(RadarRoot, "defaultProps", {
   type: "polygon",
   angleOffset: 0
 });
-var PolygonRoot = /* @__PURE__ */ function(_Component2) {
-  _inherits(PolygonRoot2, _Component2);
-  var _super2 = _createSuper(PolygonRoot2);
+var PolygonRoot = /* @__PURE__ */ (function(_Component2) {
   function PolygonRoot2() {
     _classCallCheck(this, PolygonRoot2);
-    return _super2.apply(this, arguments);
+    return _callSuper(this, PolygonRoot2, arguments);
   }
-  _createClass(PolygonRoot2, [{
+  _inherits(PolygonRoot2, _Component2);
+  return _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;
+      var _this$asProps8 = this.asProps, data = _this$asProps8.data, scale = _this$asProps8.scale, color = _this$asProps8.color, resolveColor = _this$asProps8.resolveColor, transparent = _this$asProps8.transparent, dataKey = _this$asProps8.dataKey, dataHintsHandler = _this$asProps8.dataHintsHandler, angleOffset = _this$asProps8.angleOffset, patterns = _this$asProps8.patterns;
       return {
         data,
         scale,
@@ -270,7 +327,7 @@ var PolygonRoot = /* @__PURE__ */ function(_Component2) {
   }, {
     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;
+      var _this$asProps9 = this.asProps, d3 = _this$asProps9.d3, data = _this$asProps9.data, color = _this$asProps9.color, resolveColor = _this$asProps9.resolveColor, transparent = _this$asProps9.transparent;
       return {
         data,
         color,
@@ -283,8 +340,8 @@ var PolygonRoot = /* @__PURE__ */ function(_Component2) {
     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", {
+      var _this$asProps0 = this.asProps, SPolygon = _this$asProps0.Element, styles = _this$asProps0.styles, d3 = _this$asProps0.d3, data = _this$asProps0.data, color = _this$asProps0.color, resolveColor = _this$asProps0.resolveColor, fill = _this$asProps0.fill, uid = _this$asProps0.uid, patterns = _this$asProps0.patterns;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SPolygon, _ref3.cn("SPolygon", {
         "render": "path",
         "d": d3(data),
         "color": resolveColor(fill || color),
@@ -297,17 +354,16 @@ var PolygonRoot = /* @__PURE__ */ function(_Component2) {
       })));
     }
   }]);
-  return PolygonRoot2;
-}(Component);
+})(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;
+_defineProperty(PolygonRoot, "defaultProps", function(_ref20) {
+  var scale = _ref20.scale, _ref20$curve = _ref20.curve, curve = _ref20$curve === void 0 ? curveLinearClosed : _ref20$curve, size = _ref20.size, offset = _ref20.offset, angleOffset = _ref20.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) {
+    }).angle(function(_d, i, data) {
       return i / data.length * 2 * Math.PI - angleOffset;
     })
   };
@@ -315,7 +371,7 @@ _defineProperty(PolygonRoot, "defaultProps", function(_ref22) {
 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", {
+  return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SPolygonLine, _ref4.cn("SPolygonLine", {
     "render": "path",
     "d": d3(data),
     "color": resolveColor(color),
@@ -329,10 +385,10 @@ function PolygonDots(props) {
     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];
+    var _getRadianPosition7 = getRadianPosition(i, radius, data.length, angleOffset), _getRadianPosition8 = _slicedToArray(_getRadianPosition7, 2), cx = _getRadianPosition8[0], cy = _getRadianPosition8[1];
     if (!patterns) {
       var _ref5;
-      return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPolygonDot, _ref5.cn("SPolygonDot", {
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SPolygonDot, _ref5.cn("SPolygonDot", {
         "render": "circle",
         "color": resolveColor(color),
         "transparent": transparent,
@@ -347,7 +403,7 @@ function PolygonDots(props) {
       patternKey,
       patterns
     }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
-    return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPolygonDot, _ref6.cn("SPolygonDot", {
+    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SPolygonDot, _ref6.cn("SPolygonDot", {
       "render": PatternSymbol,
       "color": resolveColor(color),
       "transparent": transparent,
@@ -358,42 +414,41 @@ function PolygonDots(props) {
     }));
   });
 }
-var AxisRoot = /* @__PURE__ */ function(_Component3) {
-  _inherits(AxisRoot2, _Component3);
-  var _super3 = _createSuper(AxisRoot2);
+var AxisRoot = /* @__PURE__ */ (function(_Component3) {
   function AxisRoot2() {
-    var _this2;
+    var _this3;
     _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", {
+    _this3 = _callSuper(this, AxisRoot2, [].concat(args));
+    _defineProperty(_this3, "unsubscribeTooltipVisible", null);
+    _defineProperty(_this3, "state", {
       activeLineIndex: null
     });
-    _defineProperty(_assertThisInitialized(_this2), "handleTooltipRenderingProps", function(_anchorProps, _ref18) {
-      var index = _ref18.index;
-      _this2.setState({
+    _defineProperty(_this3, "handleTooltipRenderingProps", function(_anchorProps, _ref16) {
+      var index = _ref16.index;
+      _this3.setState({
         activeLineIndex: index
       });
     });
-    return _this2;
+    return _this3;
   }
-  _createClass(AxisRoot2, [{
+  _inherits(AxisRoot2, _Component3);
+  return _createClass(AxisRoot2, [{
     key: "createLineRadial",
     value: function createLineRadial(radius, total) {
       return lineRadial().curve(curveLinearClosed).radius(function() {
         return radius;
-      }).angle(function(d, i) {
+      }).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;
+    value: function getTicksProps(_ref17) {
+      var _ref17$tickSize = _ref17.tickSize, tickSize = _ref17$tickSize === void 0 ? 100 : _ref17$tickSize;
+      var _this$asProps1 = this.asProps, data = _this$asProps1.data, offset = _this$asProps1.offset, categories = _this$asProps1.categories, size = _this$asProps1.size, type = _this$asProps1.type;
       var radius = Math.min(size[0], size[1]) / 2 - offset;
       return {
         type,
@@ -406,9 +461,9 @@ var AxisRoot = /* @__PURE__ */ function(_Component3) {
     }
   }, {
     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;
+    value: function getLabelsProps(_ref18) {
+      var _ref18$labelOffset = _ref18.labelOffset, labelOffset = _ref18$labelOffset === void 0 ? 10 : _ref18$labelOffset;
+      var _this$asProps10 = this.asProps, offset = _this$asProps10.offset, categories = _this$asProps10.categories, textSize = _this$asProps10.textSize, angleOffset = _this$asProps10.angleOffset;
       return {
         categories,
         textSize,
@@ -426,17 +481,17 @@ var AxisRoot = /* @__PURE__ */ function(_Component3) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var _this$unsubscribeTool;
-      (_this$unsubscribeTool = this.unsubscribeTooltipVisible) === null || _this$unsubscribeTool === void 0 ? void 0 : _this$unsubscribeTool.call(this);
+      (_this$unsubscribeTool = this.unsubscribeTooltipVisible) === null || _this$unsubscribeTool === 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 _this$asProps11 = this.asProps, SAxis = _this$asProps11.Element, styles = _this$asProps11.styles, categories = _this$asProps11.categories, size = _this$asProps11.size, offset = _this$asProps11.offset, type = _this$asProps11.type, angleOffset = _this$asProps11.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", {
+      return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, type === "circle" ? /* @__PURE__ */ React.createElement(SAxis, _ref7.cn("SAxis", {
         "render": "circle",
         "cx": 0,
         "cy": 0,
@@ -444,9 +499,9 @@ var AxisRoot = /* @__PURE__ */ function(_Component3) {
       })) : /* @__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", {
+      })), categories.map(function(_category, i) {
+        var _getRadianPosition9 = getRadianPosition(i, radius, total, angleOffset), _getRadianPosition0 = _slicedToArray(_getRadianPosition9, 2), x = _getRadianPosition0[0], y = _getRadianPosition0[1];
+        var _sstyled$cn = sstyled(styles).cn("SAxisLine", {
           active: activeLineIndex === i
         }), className = _sstyled$cn.className;
         return /* @__PURE__ */ React.createElement("line", {
@@ -460,12 +515,11 @@ var AxisRoot = /* @__PURE__ */ function(_Component3) {
       }));
     }
   }]);
-  return AxisRoot2;
-}(Component);
+})(Component);
 _defineProperty(AxisRoot, "displayName", "Polygon");
 _defineProperty(AxisRoot, "style", style);
-_defineProperty(AxisRoot, "defaultProps", function(_ref23) {
-  var data = _ref23.data, dataKey = _ref23.dataKey;
+_defineProperty(AxisRoot, "defaultProps", function(_ref21) {
+  var data = _ref21.data, dataKey = _ref21.dataKey;
   var categories = data[dataKey];
   return {
     categories
@@ -479,7 +533,7 @@ function AxisTicks(props) {
     d3.radius(function() {
       return radius * tick;
     });
-    return _ref8 = sstyled$1(styles), type === "circle" ? /* @__PURE__ */ React.createElement(SAxisTick, _ref8.cn("SAxisTick", {
+    return _ref8 = sstyled(styles), type === "circle" ? /* @__PURE__ */ React.createElement(SAxisTick, _ref8.cn("SAxisTick", {
       "key": i,
       "render": "circle",
       "cx": 0,
@@ -496,13 +550,13 @@ 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 _getRadianPosition1 = getRadianPosition(i, radius, categories.length, angleOffset), _getRadianPosition10 = _slicedToArray(_getRadianPosition1, 2), x = _getRadianPosition10[0], y = _getRadianPosition10[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", {
+      return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SAxisLabel, _ref9.cn("SAxisLabel", {
         "key": i,
         "render": "text",
         "childrenPosition": "inside",
@@ -520,7 +574,7 @@ function AxisLabels(props) {
     }
     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 _ref19 = (_category$props = category === null || category === void 0 ? void 0 : category.props) !== null && _category$props !== void 0 ? _category$props : {}, _ref19$width = _ref19.width, width = _ref19$width === void 0 ? 0 : _ref19$width, _ref19$height = _ref19.height, height = _ref19$height === void 0 ? 0 : _ref19$height;
       var _getLabelOffsetPositi = getLabelOffsetPosition(xDirection, yDirection, width, height), _getLabelOffsetPositi2 = _slicedToArray(_getLabelOffsetPositi, 2), xOffset = _getLabelOffsetPositi2[0], yOffset = _getLabelOffsetPositi2[1];
       return /* @__PURE__ */ cloneElement(category, {
         key: i,
@@ -530,51 +584,50 @@ function AxisLabels(props) {
     }
   });
 }
-var Hover = /* @__PURE__ */ function(_Component4) {
-  _inherits(Hover2, _Component4);
-  var _super4 = _createSuper(Hover2);
+var Hover = /* @__PURE__ */ (function(_Component4) {
   function Hover2() {
-    var _this3;
+    var _this4;
     _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", {
+    _this4 = _callSuper(this, Hover2, [].concat(args));
+    _defineProperty(_this4, "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;
+    _defineProperty(_this4, "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(_this4, "unsubscribeMouseMoveRoot", null);
+    _defineProperty(_this4, "unsubscribeMouseLeaveRoot", null);
+    _defineProperty(_this4, "handlerMouseMoveRoot", trottle(function(e) {
+      var _this4$asProps = _this4.asProps, eventEmitter = _this4$asProps.eventEmitter, size = _this4$asProps.size, rootRef = _this4$asProps.rootRef, patterns = _this4$asProps.patterns, getIndex = _this4$asProps.getIndex, plotId = _this4$asProps.plotId;
       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({
+      var index = getIndex([centerX, centerY]);
+      _this4.setState({
         index
       }, function() {
-        eventEmitter.emit("setTooltipPosition", clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps", {}, {
+        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), {}, {
           index,
           patterns
         });
-        eventEmitter.emit("setTooltipVisible", index !== null);
+        eventEmitter.emit("setTooltipVisible_".concat(plotId), index !== null);
       });
     }));
-    _defineProperty(_assertThisInitialized(_this3), "handlerMouseLeaveRoot", trottle(function() {
-      _this3.setState({
+    _defineProperty(_this4, "handlerMouseLeaveRoot", trottle(function() {
+      _this4.setState({
         index: null
       }, function() {
-        _this3.asProps.eventEmitter.emit("setTooltipVisible", false);
+        _this4.asProps.eventEmitter.emit("setTooltipVisible_".concat(_this4.asProps.plotId), false);
       });
     }));
-    return _this3;
+    return _this4;
   }
-  _createClass(Hover2, [{
+  _inherits(Hover2, _Component4);
+  return _createClass(Hover2, [{
     key: "generateGetBoundingClientRect",
     value: function generateGetBoundingClientRect() {
       var x = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
@@ -590,45 +643,6 @@ var Hover = /* @__PURE__ */ function(_Component4) {
         };
       };
     }
-  }, {
-    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() {
@@ -653,31 +667,30 @@ var Hover = /* @__PURE__ */ function(_Component4) {
   }, {
     key: "render",
     value: function render() {
-      var _this$asProps13 = this.asProps, styles = _this$asProps13.styles, type = _this$asProps13.type;
+      var _this$asProps12 = this.asProps, styles = _this$asProps12.styles, type = _this$asProps12.type, getPie = _this$asProps12.getPie, getPolygon = _this$asProps12.getPolygon;
       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 _ref0;
+          var _getPie = getPie(index), _getPie2 = _slicedToArray(_getPie, 3), startAngle = _getPie2[0], endAngle = _getPie2[1], radius = _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", {
+          return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SPieRect, _ref0.cn("SPieRect", {
             "render": "path",
             "d": circle()
           }));
         } else {
-          var _ref11;
-          return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPieRect, _ref11.cn("SPieRect", {
+          var _ref1;
+          return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SPieRect, _ref1.cn("SPieRect", {
             "render": "path",
-            "d": line()(this.getPolygon(index))
+            "d": line()(getPolygon(index))
           }));
         }
       }
       return null;
     }
   }]);
-  return Hover2;
-}(Component);
+})(Component);
 var Axis = createElement(AxisRoot, {
   Ticks: AxisTicks,
   Labels: AxisLabels
@@ -686,14 +699,14 @@ var Polygon = createElement(PolygonRoot, {
   Line: PolygonLine,
   Dots: PolygonDots
 });
-var RadarTooltip = function RadarTooltip2(props) {
-  var _ref = arguments[0], _ref12;
+function RadarTooltip(props) {
+  var _ref = arguments[0], _ref10;
   var SRadarTooltip = Tooltip;
-  return _ref12 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SRadarTooltip, _ref12.cn("SRadarTooltip", _objectSpread({}, assignProps({
+  return _ref10 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SRadarTooltip, _ref10.cn("SRadarTooltip", _objectSpread({}, assignProps({
     "tag": Radar.Hover,
     "excludeAnchorProps": true
   }, _ref))));
-};
+}
 var Radar = createElement(RadarRoot, {
   Axis,
   Polygon,