@semcore/d3-chart 3.61.0-prerelease.4 → 3.61.0-prerelease.5

package/lib/cjs/Radar.js

@@ -1,7 +1,7 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,47 +10,45 @@ exports.getLabelOffsetPosition = getLabelOffsetPosition;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 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 _index = require("@semcore/utils/lib/core/index");
 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 _canUseDOM = _interopRequireDefault(require("@semcore/core/lib/utils/canUseDOM"));
+var _getOriginChildren = _interopRequireDefault(require("@semcore/core/lib/utils/getOriginChildren"));
+var _rafTrottle = _interopRequireDefault(require("@semcore/core/lib/utils/rafTrottle"));
+var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
 var _d3Polygon = require("d3-polygon");
 var _d3Shape = require("d3-shape");
+var _react = _interopRequireWildcard(require("react"));
 var _createElement = _interopRequireDefault(require("./createElement"));
-var _utils = require("./utils");
-var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _Pattern = require("./Pattern");
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+var _utils = require("./utils");
 /*!__reshadow-styles__:"./style/radar.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SAxisLine_1ggy5_gg_,.___SAxisTick_1ggy5_gg_,.___SAxis_1ggy5_gg_{stroke:var(--intergalactic-chart-grid-line, rgb(237, 239, 238));stroke-width:1;fill:transparent}.___SAxisLine_1ggy5_gg_,.___SAxisTick_1ggy5_gg_{stroke-dasharray:2}.___SAxisLine_1ggy5_gg_.__active_1ggy5_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, rgb(214, 216, 215))}.___SAxisLabel_1ggy5_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_1ggy5_gg_.__xDirection_1ggy5_gg_{text-anchor:var(--xDirection_1ggy5)}.___SAxisLabel_1ggy5_gg_.__yDirection_1ggy5_gg_{dominant-baseline:var(--yDirection_1ggy5)}.___SPolygonDot_1ggy5_gg_,.___SPolygon_1ggy5_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219))}.___SPolygon_1ggy5_gg_{opacity:.2}.___SPolygon_1ggy5_gg_.__color_1ggy5_gg_{fill:var(--color_1ggy5)}.___SPolygon_1ggy5_gg_.__pattern_1ggy5_gg_.__color_1ggy5_gg_{fill:var(--pattern_1ggy5);stroke:var(--color_1ggy5);stroke-width:1px}.___SPolygonDot_1ggy5_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #fff);r:6px}.___SPolygonDot_1ggy5_gg_.__transparent_1ggy5_gg_{opacity:.3}.___SPolygonDot_1ggy5_gg_.__color_1ggy5_gg_{fill:var(--color_1ggy5)}.___SPolygonLine_1ggy5_gg_{stroke:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219));stroke-width:3;fill:transparent}.___SPolygonLine_1ggy5_gg_.__transparent_1ggy5_gg_{opacity:.3}.___SPolygonLine_1ggy5_gg_.__color_1ggy5_gg_{stroke:var(--color_1ggy5)}.___SPieRect_1ggy5_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(0, 22, 16, 0.028))}", /*__inner_css_end__*/"1ggy5_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SAxisLine_se4af_gg_,.___SAxisTick_se4af_gg_,.___SAxis_se4af_gg_{stroke:var(--intergalactic-chart-grid-line, rgb(237, 239, 238));stroke-width:1;fill:transparent}.___SAxisLine_se4af_gg_,.___SAxisTick_se4af_gg_{stroke-dasharray:2}.___SAxisLine_se4af_gg_.__active_se4af_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, rgb(214, 216, 215))}.___SAxisLabel_se4af_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_se4af_gg_.__xDirection_se4af_gg_{text-anchor:var(--xDirection_se4af)}.___SAxisLabel_se4af_gg_.__yDirection_se4af_gg_{dominant-baseline:var(--yDirection_se4af)}.___SPolygonDot_se4af_gg_,.___SPolygon_se4af_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219))}.___SPolygon_se4af_gg_{opacity:.2}.___SPolygon_se4af_gg_.__color_se4af_gg_{fill:var(--color_se4af)}.___SPolygon_se4af_gg_.__pattern_se4af_gg_.__color_se4af_gg_{fill:var(--pattern_se4af);stroke:var(--color_se4af);stroke-width:1px}.___SPolygonDot_se4af_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #fff);r:6px}.___SPolygonDot_se4af_gg_.__transparent_se4af_gg_{opacity:.3}.___SPolygonDot_se4af_gg_.__color_se4af_gg_{fill:var(--color_se4af)}.___SPolygonLine_se4af_gg_{stroke:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219));stroke-width:3;fill:transparent}.___SPolygonLine_se4af_gg_.__transparent_se4af_gg_{opacity:.3}.___SPolygonLine_se4af_gg_.__color_se4af_gg_{stroke:var(--color_se4af)}.___SPieRect_se4af_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(0, 22, 16, 0.028))}", /*__inner_css_end__*/"se4af_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SAxis": "___SAxis_1ggy5_gg_",
-  "__SAxisLine": "___SAxisLine_1ggy5_gg_",
-  "__SAxisTick": "___SAxisTick_1ggy5_gg_",
-  "_active": "__active_1ggy5_gg_",
-  "__SAxisLabel": "___SAxisLabel_1ggy5_gg_",
-  "_xDirection": "__xDirection_1ggy5_gg_",
-  "--xDirection": "--xDirection_1ggy5",
-  "_yDirection": "__yDirection_1ggy5_gg_",
-  "--yDirection": "--yDirection_1ggy5",
-  "__SPolygon": "___SPolygon_1ggy5_gg_",
-  "_color": "__color_1ggy5_gg_",
-  "--color": "--color_1ggy5",
-  "_pattern": "__pattern_1ggy5_gg_",
-  "--pattern": "--pattern_1ggy5",
-  "__SPolygonDot": "___SPolygonDot_1ggy5_gg_",
-  "_transparent": "__transparent_1ggy5_gg_",
-  "__SPolygonLine": "___SPolygonLine_1ggy5_gg_",
-  "__SPieRect": "___SPieRect_1ggy5_gg_"
+  "__SAxis": "___SAxis_se4af_gg_",
+  "__SAxisLine": "___SAxisLine_se4af_gg_",
+  "__SAxisTick": "___SAxisTick_se4af_gg_",
+  "_active": "__active_se4af_gg_",
+  "__SAxisLabel": "___SAxisLabel_se4af_gg_",
+  "_xDirection": "__xDirection_se4af_gg_",
+  "--xDirection": "--xDirection_se4af",
+  "_yDirection": "__yDirection_se4af_gg_",
+  "--yDirection": "--yDirection_se4af",
+  "__SPolygon": "___SPolygon_se4af_gg_",
+  "_color": "__color_se4af_gg_",
+  "--color": "--color_se4af",
+  "_pattern": "__pattern_se4af_gg_",
+  "--pattern": "--pattern_se4af",
+  "__SPolygonDot": "___SPolygonDot_se4af_gg_",
+  "_transparent": "__transparent_se4af_gg_",
+  "__SPolygonLine": "___SPolygonLine_se4af_gg_",
+  "__SPieRect": "___SPieRect_se4af_gg_"
 });
 var clampAngle = function clampAngle(angle) {
   angle = angle % (2 * Math.PI);
@@ -87,7 +85,7 @@ function computeTextWidth(texts, textSize) {
     if (typeof text === 'string') {
       return (0, _utils.measureText)(text, textSize);
     }
-    if ( /*#__PURE__*/_react["default"].isValidElement(text)) {
+    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);
@@ -101,19 +99,19 @@ function getTicks(tickSize, radius) {
   while (Math.trunc(radius / (tickSize / 2)) > ticks) {
     ticks += 1;
   }
-  return (0, _toConsumableArray2["default"])(Array(ticks).keys()).reduce(function (ticks, t, i, total) {
+  return (0, _toConsumableArray2["default"])(Array(ticks).keys()).reduce(function (ticks, _t, i, total) {
     if (i) ticks.push(i / total.length);
     return ticks;
   }, []);
 }
-function pieContains(_ref13, _ref14) {
-  var _ref15 = (0, _slicedToArray2["default"])(_ref13, 3),
-    startAngle = _ref15[0],
-    endAngle = _ref15[1],
-    radius = _ref15[2];
-  var _ref16 = (0, _slicedToArray2["default"])(_ref14, 2),
-    x = _ref16[0],
-    y = _ref16[1];
+function pieContains(_ref11, _ref12) {
+  var _ref13 = (0, _slicedToArray2["default"])(_ref11, 3),
+    startAngle = _ref13[0],
+    endAngle = _ref13[1],
+    radius = _ref13[2];
+  var _ref14 = (0, _slicedToArray2["default"])(_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);
@@ -148,20 +146,19 @@ function getLabelOffsetPosition(xDirection, yDirection, width, height) {
 }
 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);
+    _this = (0, _callSuper2["default"])(this, RadarRoot, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "computeOffset", 0);
+    (0, _defineProperty2["default"])(_this, "categoriesKey", null);
     return _this;
   }
-  (0, _createClass2["default"])(RadarRoot, [{
+  (0, _inherits2["default"])(RadarRoot, _Component);
+  return (0, _createClass2["default"])(RadarRoot, [{
     key: "id",
     get: function get() {
       var _this$asProps = this.asProps,
@@ -193,8 +190,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,
@@ -218,27 +215,111 @@ 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 (0, _d3Polygon.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 = (0, _slicedToArray2["default"])(_getRadianPosition, 2),
+        prevX1 = _getRadianPosition2[0],
+        prevY1 = _getRadianPosition2[1];
+      var _getRadianPosition3 = getRadianPosition(index, radius, total, angleOffset),
+        _getRadianPosition4 = (0, _slicedToArray2["default"])(_getRadianPosition3, 2),
+        x = _getRadianPosition4[0],
+        y = _getRadianPosition4[1];
+      var _getRadianPosition5 = getRadianPosition(nextIndex, radius, total, angleOffset),
+        _getRadianPosition6 = (0, _slicedToArray2["default"])(_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 = (0, _utils.eventToPoint)(e, rootRef.current),
+        _eventToPoint2 = (0, _slicedToArray2["default"])(_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 = (0, _slicedToArray2["default"])(size, 2),
         width = _size[0],
         height = _size[1];
       this.asProps.dataHintsHandler.establishDataType('indexed-groups');
       var dataKey;
       _react["default"].Children.toArray((0, _getOriginChildren["default"])(Children)).forEach(function (child) {
-        if ( /*#__PURE__*/_react["default"].isValidElement(child) && child.type === Radar.Axis) {
+        if (/*#__PURE__*/_react["default"].isValidElement(child) && child.type === Radar.Axis) {
           dataKey = child.props.dataKey;
         }
       });
@@ -254,11 +335,11 @@ var RadarRoot = /*#__PURE__*/function (_Component) {
         "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 RadarRoot;
 }(_core.Component);
 (0, _defineProperty2["default"])(RadarRoot, "displayName", 'Line');
 (0, _defineProperty2["default"])(RadarRoot, "style", style);
@@ -268,25 +349,24 @@ var RadarRoot = /*#__PURE__*/function (_Component) {
   angleOffset: 0
 });
 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);
+    return (0, _callSuper2["default"])(this, PolygonRoot, arguments);
   }
-  (0, _createClass2["default"])(PolygonRoot, [{
+  (0, _inherits2["default"])(PolygonRoot, _Component2);
+  return (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,
-        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: data,
         scale: scale,
@@ -302,12 +382,12 @@ 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: data,
         color: color,
@@ -320,16 +400,16 @@ 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;
+      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["default"].createElement(_react["default"].Fragment, null, (_ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygon, _ref3.cn("SPolygon", {
         "render": 'path',
         "d": d3(data),
@@ -343,22 +423,21 @@ var PolygonRoot = /*#__PURE__*/function (_Component2) {
       })));
     }
   }]);
-  return PolygonRoot;
 }(_core.Component);
 (0, _defineProperty2["default"])(PolygonRoot, "displayName", 'Polygon');
 (0, _defineProperty2["default"])(PolygonRoot, "style", style);
-(0, _defineProperty2["default"])(PolygonRoot, "defaultProps", function (_ref22) {
-  var scale = _ref22.scale,
-    _ref22$curve = _ref22.curve,
-    curve = _ref22$curve === void 0 ? _d3Shape.curveLinearClosed : _ref22$curve,
-    size = _ref22.size,
-    offset = _ref22.offset,
-    angleOffset = _ref22.angleOffset;
+(0, _defineProperty2["default"])(PolygonRoot, "defaultProps", function (_ref20) {
+  var scale = _ref20.scale,
+    _ref20$curve = _ref20.curve,
+    curve = _ref20$curve === void 0 ? _d3Shape.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: (0, _d3Shape.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;
     })
   };
@@ -395,10 +474,10 @@ function PolygonDots(props) {
     if (value === null || value === undefined) return;
     var radius = scale(value);
     props.dataHintsHandler.describeGroupedValues(categoryKey, "".concat(categoryKey, ".").concat(i));
-    var _getRadianPosition = getRadianPosition(i, radius, data.length, angleOffset),
-      _getRadianPosition2 = (0, _slicedToArray2["default"])(_getRadianPosition, 2),
-      cx = _getRadianPosition2[0],
-      cy = _getRadianPosition2[1];
+    var _getRadianPosition7 = getRadianPosition(i, radius, data.length, angleOffset),
+      _getRadianPosition8 = (0, _slicedToArray2["default"])(_getRadianPosition7, 2),
+      cx = _getRadianPosition8[0],
+      cy = _getRadianPosition8[1];
     if (!patterns) {
       var _ref5;
       return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygonDot, _ref5.cn("SPolygonDot", {
@@ -431,47 +510,46 @@ function PolygonDots(props) {
   });
 }
 var AxisRoot = /*#__PURE__*/function (_Component3) {
-  (0, _inherits2["default"])(AxisRoot, _Component3);
-  var _super3 = (0, _createSuper2["default"])(AxisRoot);
   function AxisRoot() {
-    var _this2;
+    var _this3;
     (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", {
+    _this3 = (0, _callSuper2["default"])(this, AxisRoot, [].concat(args));
+    (0, _defineProperty2["default"])(_this3, "unsubscribeTooltipVisible", null);
+    (0, _defineProperty2["default"])(_this3, "state", {
       activeLineIndex: null
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handleTooltipRenderingProps", function (_anchorProps, _ref18) {
-      var index = _ref18.index;
-      _this2.setState({
+    (0, _defineProperty2["default"])(_this3, "handleTooltipRenderingProps", function (_anchorProps, _ref16) {
+      var index = _ref16.index;
+      _this3.setState({
         activeLineIndex: index
       });
     });
-    return _this2;
+    return _this3;
   }
-  (0, _createClass2["default"])(AxisRoot, [{
+  (0, _inherits2["default"])(AxisRoot, _Component3);
+  return (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) {
+      }).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: type,
@@ -484,14 +562,14 @@ 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: categories,
         textSize: textSize,
@@ -509,20 +587,20 @@ 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;
@@ -534,11 +612,11 @@ var AxisRoot = /*#__PURE__*/function (_Component3) {
       })) : /*#__PURE__*/_react["default"].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 = (0, _slicedToArray2["default"])(_getRadianPosition3, 2),
-          x = _getRadianPosition4[0],
-          y = _getRadianPosition4[1];
+      })), categories.map(function (_category, i) {
+        var _getRadianPosition9 = getRadianPosition(i, radius, total, angleOffset),
+          _getRadianPosition0 = (0, _slicedToArray2["default"])(_getRadianPosition9, 2),
+          x = _getRadianPosition0[0],
+          y = _getRadianPosition0[1];
         var _sstyled$cn = (0, _core.sstyled)(styles).cn('SAxisLine', {
             active: activeLineIndex === i
           }),
@@ -554,13 +632,12 @@ var AxisRoot = /*#__PURE__*/function (_Component3) {
       }));
     }
   }]);
-  return AxisRoot;
 }(_core.Component);
 (0, _defineProperty2["default"])(AxisRoot, "displayName", 'Polygon');
 (0, _defineProperty2["default"])(AxisRoot, "style", style);
-(0, _defineProperty2["default"])(AxisRoot, "defaultProps", function (_ref23) {
-  var data = _ref23.data,
-    dataKey = _ref23.dataKey;
+(0, _defineProperty2["default"])(AxisRoot, "defaultProps", function (_ref21) {
+  var data = _ref21.data,
+    dataKey = _ref21.dataKey;
   var categories = data[dataKey];
   return {
     categories: categories
@@ -604,10 +681,10 @@ function AxisLabels(props) {
     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 = (0, _slicedToArray2["default"])(_getRadianPosition5, 2),
-      x = _getRadianPosition6[0],
-      y = _getRadianPosition6[1];
+    var _getRadianPosition1 = getRadianPosition(i, radius, categories.length, angleOffset),
+      _getRadianPosition10 = (0, _slicedToArray2["default"])(_getRadianPosition1, 2),
+      x = _getRadianPosition10[0],
+      y = _getRadianPosition10[1];
     var _getLabelPlacement = getLabelPlacement(i, categories.length, angleOffset),
       _getLabelPlacement2 = (0, _slicedToArray2["default"])(_getLabelPlacement, 2),
       xDirection = _getLabelPlacement2[0],
@@ -632,13 +709,13 @@ function AxisLabels(props) {
         }, lineText);
       }));
     }
-    if ( /*#__PURE__*/_react["default"].isValidElement(category)) {
+    if (/*#__PURE__*/_react["default"].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 = (0, _slicedToArray2["default"])(_getLabelOffsetPositi, 2),
         xOffset = _getLabelOffsetPositi2[0],
@@ -652,55 +729,56 @@ function AxisLabels(props) {
   });
 }
 var Hover = /*#__PURE__*/function (_Component4) {
-  (0, _inherits2["default"])(Hover, _Component4);
-  var _super4 = (0, _createSuper2["default"])(Hover);
   function Hover() {
-    var _this3;
+    var _this4;
     (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", {
+    _this4 = (0, _callSuper2["default"])(this, Hover, [].concat(args));
+    (0, _defineProperty2["default"])(_this4, "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,
-        patterns = _this3$asProps.patterns;
+    (0, _defineProperty2["default"])(_this4, "virtualElement", (0, _canUseDOM["default"])() ? document.createElement('div') : {});
+    (0, _defineProperty2["default"])(_this4, "unsubscribeMouseMoveRoot", null);
+    (0, _defineProperty2["default"])(_this4, "unsubscribeMouseLeaveRoot", null);
+    (0, _defineProperty2["default"])(_this4, "handlerMouseMoveRoot", (0, _rafTrottle["default"])(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 = (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;
-      var index = _this3.getIndex([centerX, centerY]);
-      _this3.setState({
+      var index = getIndex([centerX, centerY]);
+      _this4.setState({
         index: index
       }, function () {
-        eventEmitter.emit('setTooltipPosition', clientX, clientY);
-        eventEmitter.emit('setTooltipRenderingProps', {}, {
+        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), {}, {
           index: index,
           patterns: patterns
         });
-        eventEmitter.emit('setTooltipVisible', index !== null);
+        eventEmitter.emit("setTooltipVisible_".concat(plotId), index !== null);
       });
     }));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "handlerMouseLeaveRoot", (0, _rafTrottle["default"])(function () {
-      _this3.setState({
+    (0, _defineProperty2["default"])(_this4, "handlerMouseLeaveRoot", (0, _rafTrottle["default"])(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;
   }
-  (0, _createClass2["default"])(Hover, [{
+  (0, _inherits2["default"])(Hover, _Component4);
+  return (0, _createClass2["default"])(Hover, [{
     key: "generateGetBoundingClientRect",
     value: function generateGetBoundingClientRect() {
       var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -716,64 +794,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 = (0, _slicedToArray2["default"])(_getRadianPosition7, 2),
-        prevX1 = _getRadianPosition8[0],
-        prevY1 = _getRadianPosition8[1];
-      var _getRadianPosition9 = getRadianPosition(index, radius, total, angleOffset),
-        _getRadianPosition10 = (0, _slicedToArray2["default"])(_getRadianPosition9, 2),
-        x = _getRadianPosition10[0],
-        y = _getRadianPosition10[1];
-      var _getRadianPosition11 = getRadianPosition(nextIndex, radius, total, angleOffset),
-        _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,
-        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 (0, _d3Polygon.polygonContains)(_this4.getPolygon(i), point);
-        });
-      }
-      return index === -1 ? null : index;
-    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -798,36 +818,37 @@ 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 = (0, _slicedToArray2["default"])(_this$getPie, 3),
-            startAngle = _this$getPie2[0],
-            endAngle = _this$getPie2[1],
-            radius = _this$getPie2[2];
+          var _ref0;
+          var _getPie = getPie(index),
+            _getPie2 = (0, _slicedToArray2["default"])(_getPie, 3),
+            startAngle = _getPie2[0],
+            endAngle = _getPie2[1],
+            radius = _getPie2[2];
           var circle = (0, _d3Shape.arc)().innerRadius(0).outerRadius(radius).startAngle(startAngle).endAngle(endAngle);
-          return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref10.cn("SPieRect", {
+          return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref0.cn("SPieRect", {
             "render": 'path',
             "d": circle()
           }));
         } else {
-          var _ref11;
-          return _ref11 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref11.cn("SPieRect", {
+          var _ref1;
+          return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref1.cn("SPieRect", {
             "render": 'path',
-            "d": (0, _d3Shape.line)()(this.getPolygon(index))
+            "d": (0, _d3Shape.line)()(getPolygon(index))
           }));
         }
       }
       return null;
     }
   }]);
-  return Hover;
 }(_core.Component);
 var Axis = (0, _createElement["default"])(AxisRoot, {
   Ticks: AxisTicks,
@@ -837,21 +858,20 @@ var Polygon = (0, _createElement["default"])(PolygonRoot, {
   Line: PolygonLine,
   Dots: PolygonDots
 });
-var RadarTooltip = function RadarTooltip(props) {
+function RadarTooltip(props) {
   var _ref = arguments[0],
-    _ref12;
+    _ref10;
   var SRadarTooltip = _Tooltip["default"];
-  return _ref12 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SRadarTooltip, _ref12.cn("SRadarTooltip", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
+  return _ref10 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SRadarTooltip, _ref10.cn("SRadarTooltip", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tag": Radar.Hover,
     "excludeAnchorProps": true
   }, _ref))));
-};
+}
 var Radar = (0, _createElement["default"])(RadarRoot, {
   Axis: Axis,
   Polygon: Polygon,
   Hover: Hover,
   Tooltip: [RadarTooltip, _Tooltip["default"]._______childrenComponents]
 });
-var _default = Radar;
-exports["default"] = _default;
+var _default = exports["default"] = Radar;
 //# sourceMappingURL=Radar.js.map