@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.8

package/lib/cjs/Radar.js

@@ -1,20 +1,13 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 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 _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _core = require("@semcore/core");
 var _canUseDOM = _interopRequireDefault(require("@semcore/core/lib/utils/canUseDOM"));
 var _getOriginChildren = _interopRequireDefault(require("@semcore/core/lib/utils/getOriginChildren"));
@@ -28,49 +21,49 @@ var _Pattern = require("./Pattern");
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _utils = require("./utils");
 /*!__reshadow-styles__:"./style/radar.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SAxisLine_vlbp0_gg_,.___SAxisTick_vlbp0_gg_,.___SAxis_vlbp0_gg_{stroke:var(--intergalactic-chart-grid-line, #e0e1e9);stroke-width:1;fill:transparent}.___SAxisLine_vlbp0_gg_,.___SAxisTick_vlbp0_gg_{stroke-dasharray:2}.___SAxisLine_vlbp0_gg_.__active_vlbp0_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___SAxisLabel_vlbp0_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_vlbp0_gg_.__xDirection_vlbp0_gg_{text-anchor:var(--xDirection_vlbp0)}.___SAxisLabel_vlbp0_gg_.__yDirection_vlbp0_gg_{dominant-baseline:var(--yDirection_vlbp0)}.___SPolygonDot_vlbp0_gg_,.___SPolygon_vlbp0_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPolygon_vlbp0_gg_{opacity:.2}.___SPolygon_vlbp0_gg_.__color_vlbp0_gg_{fill:var(--color_vlbp0)}.___SPolygon_vlbp0_gg_.__pattern_vlbp0_gg_.__color_vlbp0_gg_{fill:var(--pattern_vlbp0);stroke:var(--color_vlbp0);stroke-width:1px}.___SPolygonDot_vlbp0_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #ffffff);r:6px}.___SPolygonDot_vlbp0_gg_.__transparent_vlbp0_gg_{opacity:.3}.___SPolygonDot_vlbp0_gg_.__color_vlbp0_gg_{fill:var(--color_vlbp0)}.___SPolygonLine_vlbp0_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SPolygonLine_vlbp0_gg_.__transparent_vlbp0_gg_{opacity:.3}.___SPolygonLine_vlbp0_gg_.__color_vlbp0_gg_{stroke:var(--color_vlbp0)}.___SPieRect_vlbp0_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}", /*__inner_css_end__*/"vlbp0_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SAxisLine_9qq2r_gg_,.___SAxisTick_9qq2r_gg_,.___SAxis_9qq2r_gg_{stroke:var(--intergalactic-chart-grid-line, #e0e1e9);stroke-width:1;fill:transparent}.___SAxisLine_9qq2r_gg_,.___SAxisTick_9qq2r_gg_{stroke-dasharray:2}.___SAxisLine_9qq2r_gg_.__active_9qq2r_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___SAxisLabel_9qq2r_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_9qq2r_gg_.__xDirection_9qq2r_gg_{text-anchor:var(--xDirection_9qq2r)}.___SAxisLabel_9qq2r_gg_.__yDirection_9qq2r_gg_{dominant-baseline:var(--yDirection_9qq2r)}.___SPolygonDot_9qq2r_gg_,.___SPolygon_9qq2r_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPolygon_9qq2r_gg_{opacity:.2}.___SPolygon_9qq2r_gg_.__color_9qq2r_gg_{fill:var(--color_9qq2r)}.___SPolygon_9qq2r_gg_.__pattern_9qq2r_gg_.__color_9qq2r_gg_{fill:var(--pattern_9qq2r);stroke:var(--color_9qq2r);stroke-width:1px}.___SPolygonDot_9qq2r_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #ffffff);r:6px}.___SPolygonDot_9qq2r_gg_.__transparent_9qq2r_gg_{opacity:.3}.___SPolygonDot_9qq2r_gg_.__color_9qq2r_gg_{fill:var(--color_9qq2r)}.___SPolygonLine_9qq2r_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SPolygonLine_9qq2r_gg_.__transparent_9qq2r_gg_{opacity:.3}.___SPolygonLine_9qq2r_gg_.__color_9qq2r_gg_{stroke:var(--color_9qq2r)}.___SPieRect_9qq2r_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}", /*__inner_css_end__*/"9qq2r_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SAxis": "___SAxis_vlbp0_gg_",
-  "__SAxisLine": "___SAxisLine_vlbp0_gg_",
-  "__SAxisTick": "___SAxisTick_vlbp0_gg_",
-  "_active": "__active_vlbp0_gg_",
-  "__SAxisLabel": "___SAxisLabel_vlbp0_gg_",
-  "_xDirection": "__xDirection_vlbp0_gg_",
-  "--xDirection": "--xDirection_vlbp0",
-  "_yDirection": "__yDirection_vlbp0_gg_",
-  "--yDirection": "--yDirection_vlbp0",
-  "__SPolygon": "___SPolygon_vlbp0_gg_",
-  "_color": "__color_vlbp0_gg_",
-  "--color": "--color_vlbp0",
-  "_pattern": "__pattern_vlbp0_gg_",
-  "--pattern": "--pattern_vlbp0",
-  "__SPolygonDot": "___SPolygonDot_vlbp0_gg_",
-  "_transparent": "__transparent_vlbp0_gg_",
-  "__SPolygonLine": "___SPolygonLine_vlbp0_gg_",
-  "__SPieRect": "___SPieRect_vlbp0_gg_"
+  "__SAxis": "___SAxis_9qq2r_gg_",
+  "__SAxisLine": "___SAxisLine_9qq2r_gg_",
+  "__SAxisTick": "___SAxisTick_9qq2r_gg_",
+  "_active": "__active_9qq2r_gg_",
+  "__SAxisLabel": "___SAxisLabel_9qq2r_gg_",
+  "_xDirection": "__xDirection_9qq2r_gg_",
+  "--xDirection": "--xDirection_9qq2r",
+  "_yDirection": "__yDirection_9qq2r_gg_",
+  "--yDirection": "--yDirection_9qq2r",
+  "__SPolygon": "___SPolygon_9qq2r_gg_",
+  "_color": "__color_9qq2r_gg_",
+  "--color": "--color_9qq2r",
+  "_pattern": "__pattern_9qq2r_gg_",
+  "--pattern": "--pattern_9qq2r",
+  "__SPolygonDot": "___SPolygonDot_9qq2r_gg_",
+  "_transparent": "__transparent_9qq2r_gg_",
+  "__SPolygonLine": "___SPolygonLine_9qq2r_gg_",
+  "__SPieRect": "___SPieRect_9qq2r_gg_"
 });
-var clampAngle = function clampAngle(angle) {
+const clampAngle = 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);
+  const func = axes === 'y' ? Math.sin : Math.cos;
+  const 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 getLabelXPlacement(i, total, angleOffset) {
-  var angle = clampAngle(i / total * (Math.PI * 2) - angleOffset);
+const getLabelXPlacement = (i, total, angleOffset) => {
+  const 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 getLabelYPlacement(i, total, angleOffset) {
-  var angle = clampAngle(i / total * (Math.PI * 2) - angleOffset);
+const getLabelYPlacement = (i, total, angleOffset) => {
+  const 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';
@@ -78,57 +71,47 @@ var getLabelYPlacement = function getLabelYPlacement(i, total, angleOffset) {
 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] !== undefined ? arguments[2] : 50;
-  var defaultHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;
-  var widths = texts.map(function (text) {
+function computeTextWidth(texts, textSize, defaultWidth = 50, defaultHeight = 20) {
+  const widths = texts.map(text => {
     if (typeof text === 'string') {
       return (0, _utils.measureText)(text, textSize);
     }
-    if (/*#__PURE__*/_react["default"].isValidElement(text)) {
-      var _text$props, _text$props2;
+    if (/*#__PURE__*/_react.default.isValidElement(text)) {
       // @ts-ignore
-      return Math.max(((_text$props = text.props) === null || _text$props === void 0 ? void 0 : _text$props.width) || defaultWidth, ((_text$props2 = text.props) === null || _text$props2 === void 0 ? void 0 : _text$props2.height) || defaultHeight);
+      return Math.max(text.props?.width || defaultWidth, text.props?.height || defaultHeight);
     }
     return defaultWidth;
   });
-  return Math.max.apply(Math, (0, _toConsumableArray2["default"])(widths));
+  return Math.max(...widths);
 }
 function getTicks(tickSize, radius) {
-  var ticks = 0;
+  let ticks = 0;
   while (Math.trunc(radius / (tickSize / 2)) > ticks) {
     ticks += 1;
   }
-  return (0, _toConsumableArray2["default"])(Array(ticks).keys()).reduce(function (ticks, _t, i, total) {
+  return [...Array(ticks).keys()].reduce((ticks, _t, i, total) => {
     if (i) ticks.push(i / total.length);
     return ticks;
   }, []);
 }
-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));
+function pieContains([startAngle, endAngle, radius], [x, y]) {
+  const distance = Math.sqrt(x ** 2 + 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;
+  const angle = clampAngle(Math.atan2(y, x) + Math.PI / 2);
+  const prevAngle = angle - Math.PI * 2;
+  const 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)) {
+  let xOffset = 0;
+  let yOffset = 0;
+  switch (`${xDirection}-${yDirection}`) {
     case 'middle-alphabetic':
       yOffset = height / 2;
       break;
@@ -144,314 +127,270 @@ function getLabelOffsetPosition(xDirection, yDirection, width, height) {
   }
   return [xOffset + width / 2, yOffset + height / 2];
 }
-var MINIMUM_OFFSET = 5;
-var RadarRoot = /*#__PURE__*/function (_Component) {
-  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 = (0, _callSuper2["default"])(this, RadarRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "computeOffset", 0);
-    (0, _defineProperty2["default"])(_this, "categoriesKey", null);
-    return _this;
+const MINIMUM_OFFSET = 5;
+class RadarRoot extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "computeOffset", 0);
+    (0, _defineProperty2.default)(this, "categoriesKey", null);
   }
-  (0, _inherits2["default"])(RadarRoot, _Component);
-  return (0, _createClass2["default"])(RadarRoot, [{
-    key: "id",
-    get: function get() {
-      var _this$asProps = this.asProps,
-        id = _this$asProps.id,
-        uid = _this$asProps.uid;
-      return id || uid;
-    }
-  }, {
-    key: "offset",
-    get: function get() {
-      var offset = this.asProps.offset;
-      return offset !== null && offset !== void 0 ? offset : this.computeOffset;
-    }
-  }, {
-    key: "textSize",
-    get: function get() {
-      var textSize = this.asProps.textSize;
-      return textSize !== null && textSize !== void 0 ? textSize : 12;
-    }
-  }, {
-    key: "getAxisProps",
-    value: function getAxisProps() {
-      return {
-        offset: this.offset,
-        textSize: this.textSize,
-        type: this.asProps.type,
-        angleOffset: this.asProps.angleOffset
-      };
-    }
-  }, {
-    key: "getPolygonProps",
-    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,
-        data: data[dataKey] || [],
-        scale: scale,
-        angleOffset: angleOffset,
-        color: (0, _utils.getChartDefaultColorName)(index),
-        uid: "".concat(uid, "-").concat(index),
-        patterns: patterns
-      };
-    }
-  }, {
-    key: "getHoverProps",
-    value: function getHoverProps() {
-      return {
-        type: this.asProps.type,
-        offset: this.offset,
-        categories: this.asProps.data[this.categoriesKey],
-        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);
-        });
+  get id() {
+    const {
+      id,
+      uid
+    } = this.asProps;
+    return id || uid;
+  }
+  get offset() {
+    const {
+      offset
+    } = this.asProps;
+    return offset ?? this.computeOffset;
+  }
+  get textSize() {
+    const {
+      textSize
+    } = this.asProps;
+    return textSize ?? 12;
+  }
+  getAxisProps() {
+    return {
+      offset: this.offset,
+      textSize: this.textSize,
+      type: this.asProps.type,
+      angleOffset: this.asProps.angleOffset
+    };
+  }
+  getPolygonProps({
+    dataKey
+  }, index) {
+    const {
+      data,
+      scale,
+      angleOffset,
+      uid,
+      patterns
+    } = this.asProps;
+    return {
+      offset: this.offset,
+      data: data[dataKey] || [],
+      scale,
+      angleOffset,
+      color: (0, _utils.getChartDefaultColorName)(index),
+      uid: `${uid}-${index}`,
+      patterns
+    };
+  }
+  getHoverProps() {
+    return {
+      type: this.asProps.type,
+      offset: this.offset,
+      categories: this.asProps.data[this.categoriesKey],
+      angleOffset: this.asProps.angleOffset,
+      getIndex: this.getIndex.bind(this),
+      getPolygon: this.getPolygon.bind(this),
+      getPie: this.getPie.bind(this)
+    };
+  }
+  getIndex(point) {
+    const {
+      data,
+      type
+    } = this.asProps;
+    const categories = data[this.categoriesKey];
+    let index;
+    if (type === 'circle') {
+      index = categories.findIndex((_c, i) => pieContains(this.getPie(i), point));
+    } else {
+      index = categories.findIndex((_c, i) => (0, _d3Polygon.polygonContains)(this.getPolygon(i), point));
+    }
+    return index === -1 ? null : index;
+  }
+  getPolygon(index) {
+    const {
+      data,
+      size,
+      angleOffset
+    } = this.asProps;
+    const offset = this.offset;
+    const categories = data[this.categoriesKey];
+    const total = categories.length;
+    const diam = Math.min(size[0], size[1]);
+    const radius = diam / 2 - offset;
+    const prevIndex = (index - 1 + total) % total;
+    const nextIndex = (index + 1 + total) % total;
+    const [prevX1, prevY1] = getRadianPosition(prevIndex, radius, total, angleOffset);
+    const [x, y] = getRadianPosition(index, radius, total, angleOffset);
+    const [nextX1, nextY1] = getRadianPosition(nextIndex, radius, total, angleOffset);
+    return [[0, 0], [(prevX1 + x) / 2, (prevY1 + y) / 2], [x, y], [(nextX1 + x) / 2, (nextY1 + y) / 2]];
+  }
+  getPie(index) {
+    const {
+      data,
+      size,
+      angleOffset
+    } = this.asProps;
+    const categories = data[this.categoriesKey];
+    const offset = this.offset;
+    const angle = Math.PI * 2 / categories.length;
+    const radius = Math.min(size[0], size[1]) / 2 - offset;
+    return [index * angle - angle / 2 - angleOffset, (index + 1) * angle - angle / 2 - angleOffset, radius];
+  }
+  handlerOnClick(e) {
+    e.stopPropagation();
+    const {
+      rootRef,
+      size,
+      onClick
+    } = this.asProps;
+    if (!onClick) return;
+    const [pointX, pointY] = (0, _utils.eventToPoint)(e, rootRef.current);
+    const r = Math.min(size[0], size[1]) / 2;
+    const centerX = pointX - r;
+    const centerY = pointY - r;
+    const index = this.getIndex([centerX, centerY]);
+    if (index === null) return;
+    onClick(index, e);
+  }
+  render() {
+    var _ref2;
+    const SRadar = this.Element;
+    const {
+      Children,
+      styles,
+      size,
+      data,
+      offset
+    } = this.asProps;
+    const [width, height] = size;
+    this.asProps.dataHintsHandler.establishDataType('indexed-groups');
+    let dataKey;
+    _react.default.Children.toArray((0, _getOriginChildren.default)(Children)).forEach(child => {
+      if (/*#__PURE__*/_react.default.isValidElement(child) && child.type === Radar.Axis) {
+        dataKey = child.props.dataKey;
       }
-      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$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) {
-          dataKey = child.props.dataKey;
-        }
-      });
-      if (dataKey) {
-        if (offset === undefined) {
-          // +5 because font might not be loaded and just in case)
-          this.computeOffset = computeTextWidth(data[dataKey], this.textSize) + MINIMUM_OFFSET;
-        }
-        this.categoriesKey = dataKey;
+    });
+    if (dataKey) {
+      if (offset === undefined) {
+        // +5 because font might not be loaded and just in case)
+        this.computeOffset = computeTextWidth(data[dataKey], this.textSize) + MINIMUM_OFFSET;
       }
-      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SRadar, _ref2.cn("SRadar", {
-        "aria-hidden": true,
-        "id": this.id,
-        "render": 'g',
-        "childrenPosition": 'inside',
-        "transform": "translate(".concat(width / 2, ",").concat(height / 2, ")"),
-        "onClickCapture": this.handlerOnClick.bind(this)
-      }));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(RadarRoot, "displayName", 'Line');
-(0, _defineProperty2["default"])(RadarRoot, "style", style);
-(0, _defineProperty2["default"])(RadarRoot, "enhance", [(0, _uniqueID["default"])()]);
-(0, _defineProperty2["default"])(RadarRoot, "defaultProps", {
+      this.categoriesKey = dataKey;
+    }
+    return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SRadar, _ref2.cn("SRadar", {
+      "aria-hidden": true,
+      "id": this.id,
+      "render": 'g',
+      "childrenPosition": 'inside',
+      "transform": `translate(${width / 2},${height / 2})`,
+      "onClickCapture": this.handlerOnClick.bind(this)
+    }));
+  }
+}
+(0, _defineProperty2.default)(RadarRoot, "displayName", 'Line');
+(0, _defineProperty2.default)(RadarRoot, "style", style);
+(0, _defineProperty2.default)(RadarRoot, "enhance", [(0, _uniqueID.default)()]);
+(0, _defineProperty2.default)(RadarRoot, "defaultProps", {
   type: 'polygon',
   angleOffset: 0
 });
-var PolygonRoot = /*#__PURE__*/function (_Component2) {
-  function PolygonRoot() {
-    (0, _classCallCheck2["default"])(this, PolygonRoot);
-    return (0, _callSuper2["default"])(this, PolygonRoot, arguments);
+class PolygonRoot extends _core.Component {
+  getDotsProps() {
+    const {
+      data,
+      scale,
+      color,
+      resolveColor,
+      transparent,
+      dataKey,
+      dataHintsHandler,
+      angleOffset,
+      patterns
+    } = this.asProps;
+    return {
+      data,
+      scale,
+      color,
+      resolveColor,
+      transparent,
+      categoryKey: dataKey,
+      dataHintsHandler,
+      angleOffset,
+      patterns
+    };
   }
-  (0, _inherits2["default"])(PolygonRoot, _Component2);
-  return (0, _createClass2["default"])(PolygonRoot, [{
-    key: "getDotsProps",
-    value: function getDotsProps() {
-      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,
-        color: color,
-        resolveColor: resolveColor,
-        transparent: transparent,
-        categoryKey: dataKey,
-        dataHintsHandler: dataHintsHandler,
-        angleOffset: angleOffset,
-        patterns: patterns
-      };
-    }
-  }, {
-    key: "getLineProps",
-    value: function getLineProps() {
-      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,
-        resolveColor: resolveColor,
-        transparent: transparent,
-        d3: d3
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref3;
-      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),
-        "color": resolveColor(fill || color),
-        "pattern": patterns ? "url(#".concat(uid, "-pattern)") : undefined
-      }))), patterns && /*#__PURE__*/_react["default"].createElement(_Pattern.PatternFill, _ref3.cn("PatternFill", {
-        "id": "".concat(uid, "-pattern"),
-        "patternKey": color,
-        "color": resolveColor(fill || color),
-        "patterns": patterns
-      })));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(PolygonRoot, "displayName", 'Polygon');
-(0, _defineProperty2["default"])(PolygonRoot, "style", style);
-(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;
+  getLineProps() {
+    const {
+      d3,
+      data,
+      color,
+      resolveColor,
+      transparent
+    } = this.asProps;
+    return {
+      data,
+      color,
+      resolveColor,
+      transparent,
+      d3
+    };
+  }
+  render() {
+    var _ref3;
+    const {
+      Element: SPolygon,
+      styles,
+      d3,
+      data,
+      color,
+      resolveColor,
+      fill,
+      uid,
+      patterns
+    } = this.asProps;
+    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),
+      "color": resolveColor(fill || color),
+      "pattern": patterns ? `url(#${uid}-pattern)` : undefined
+    }))), patterns && /*#__PURE__*/_react.default.createElement(_Pattern.PatternFill, _ref3.cn("PatternFill", {
+      "id": `${uid}-pattern`,
+      "patternKey": color,
+      "color": resolveColor(fill || color),
+      "patterns": patterns
+    })));
+  }
+}
+(0, _defineProperty2.default)(PolygonRoot, "displayName", 'Polygon');
+(0, _defineProperty2.default)(PolygonRoot, "style", style);
+(0, _defineProperty2.default)(PolygonRoot, "defaultProps", ({
+  scale,
+  curve = _d3Shape.curveLinearClosed,
+  size,
+  offset,
+  angleOffset
+}) => {
   scale.range([0, Math.min(size[0], size[1]) / 2 - offset]);
   return {
-    d3: (0, _d3Shape.lineRadial)().curve(curve).radius(function (d) {
+    d3: (0, _d3Shape.lineRadial)().curve(curve).radius(d => {
       return scale(d || 0);
-    }).angle(function (_d, i, data) {
+    }).angle((_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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygonLine, _ref4.cn("SPolygonLine", {
+  const {
+    Element: SPolygonLine,
+    styles,
+    d3,
+    color,
+    resolveColor,
+    data,
+    transparent
+  } = props;
+  return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPolygonLine, _ref4.cn("SPolygonLine", {
     "render": 'path',
     "d": d3(data),
     "color": resolveColor(color),
@@ -459,212 +398,194 @@ function PolygonLine(props) {
   }));
 }
 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) {
+  const {
+    Element: SPolygonDot,
+    styles,
+    color,
+    resolveColor,
+    data,
+    scale,
+    transparent,
+    categoryKey,
+    angleOffset,
+    patterns
+  } = props;
+  return data.map((value, i) => {
     var _ref6;
     if (value === null || value === undefined) return;
-    var radius = scale(value);
-    props.dataHintsHandler.describeGroupedValues(categoryKey, "".concat(categoryKey, ".").concat(i));
-    var _getRadianPosition7 = getRadianPosition(i, radius, data.length, angleOffset),
-      _getRadianPosition8 = (0, _slicedToArray2["default"])(_getRadianPosition7, 2),
-      cx = _getRadianPosition8[0],
-      cy = _getRadianPosition8[1];
+    const radius = scale(value);
+    props.dataHintsHandler.describeGroupedValues(categoryKey, `${categoryKey}.${i}`);
+    const [cx, cy] = getRadianPosition(i, radius, data.length, angleOffset);
     if (!patterns) {
       var _ref5;
-      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygonDot, _ref5.cn("SPolygonDot", {
+      return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPolygonDot, _ref5.cn("SPolygonDot", {
         "render": 'circle',
         "color": resolveColor(color),
         "transparent": transparent,
         "patternKey": color,
-        "key": "".concat(i),
+        "key": `${i}`,
         "cx": cx,
         "cy": cy
       }));
     }
-    var patternKey = color || (0, _utils.getChartDefaultColorName)(0);
-    var _getPatternSymbolSize = (0, _Pattern.getPatternSymbolSize)({
-        patternKey: patternKey,
-        patterns: patterns
-      }),
-      _getPatternSymbolSize2 = (0, _slicedToArray2["default"])(_getPatternSymbolSize, 2),
-      width = _getPatternSymbolSize2[0],
-      height = _getPatternSymbolSize2[1];
-    return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygonDot, _ref6.cn("SPolygonDot", {
+    const patternKey = color || (0, _utils.getChartDefaultColorName)(0);
+    const [width, height] = (0, _Pattern.getPatternSymbolSize)({
+      patternKey,
+      patterns
+    });
+    return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPolygonDot, _ref6.cn("SPolygonDot", {
       "render": _Pattern.PatternSymbol,
       "color": resolveColor(color),
       "transparent": transparent,
       "patternKey": color,
-      "key": "".concat(i),
+      "key": `${i}`,
       "x": cx - width / 2,
       "y": cy - height / 2
     }));
   });
 }
-var AxisRoot = /*#__PURE__*/function (_Component3) {
-  function AxisRoot() {
-    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];
-    }
-    _this3 = (0, _callSuper2["default"])(this, AxisRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_this3, "unsubscribeTooltipVisible", null);
-    (0, _defineProperty2["default"])(_this3, "state", {
+class AxisRoot extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "unsubscribeTooltipVisible", null);
+    (0, _defineProperty2.default)(this, "state", {
       activeLineIndex: null
     });
-    (0, _defineProperty2["default"])(_this3, "handleTooltipRenderingProps", function (_anchorProps, _ref16) {
-      var index = _ref16.index;
-      _this3.setState({
+    (0, _defineProperty2.default)(this, "handleTooltipRenderingProps", (_anchorProps, {
+      index
+    }) => {
+      this.setState({
         activeLineIndex: index
       });
     });
-    return _this3;
   }
-  (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) {
-        return i / total * 2 * Math.PI;
+  createLineRadial(radius, total) {
+    return (0, _d3Shape.lineRadial)().curve(_d3Shape.curveLinearClosed).radius(() => {
+      return radius;
+    }).angle((_d, i) => {
+      return i / total * 2 * Math.PI;
+    });
+  }
+  getTicksProps({
+    tickSize = 100
+  }) {
+    const {
+      data,
+      offset,
+      categories,
+      size,
+      type
+    } = this.asProps;
+    const radius = Math.min(size[0], size[1]) / 2 - offset;
+    return {
+      type,
+      data,
+      categories,
+      ticks: getTicks(tickSize, radius),
+      offset,
+      d3: this.createLineRadial(radius, categories.length)
+    };
+  }
+  getLabelsProps({
+    labelOffset = 10
+  }) {
+    const {
+      offset,
+      categories,
+      textSize,
+      angleOffset
+    } = this.asProps;
+    return {
+      categories,
+      textSize,
+      offset: offset - labelOffset,
+      angleOffset
+    };
+  }
+  componentDidMount() {
+    const {
+      eventEmitter
+    } = this.asProps;
+    this.unsubscribeTooltipVisible = eventEmitter.subscribe('setTooltipRenderingProps', this.handleTooltipRenderingProps);
+  }
+  componentWillUnmount() {
+    this.unsubscribeTooltipVisible?.();
+  }
+  render() {
+    var _ref7;
+    const {
+      Element: SAxis,
+      styles,
+      categories,
+      size,
+      offset,
+      type,
+      angleOffset
+    } = this.asProps;
+    const {
+      activeLineIndex
+    } = this.state;
+    const radius = Math.min(size[0], size[1]) / 2 - offset;
+    const total = categories.length;
+    return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'circle' ? /*#__PURE__*/_react.default.createElement(SAxis, _ref7.cn("SAxis", {
+      "render": 'circle',
+      "cx": 0,
+      "cy": 0,
+      "r": radius
+    })) : /*#__PURE__*/_react.default.createElement(SAxis, _ref7.cn("SAxis", {
+      "render": 'path',
+      "d": this.createLineRadial(radius, total)(categories)
+    })), categories.map((_category, i) => {
+      const [x, y] = getRadianPosition(i, radius, total, angleOffset);
+      const {
+        className
+      } = (0, _core.sstyled)(styles).cn('SAxisLine', {
+        active: activeLineIndex === i
       });
-    }
-  }, {
-    key: "getTicksProps",
-    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,
-        data: data,
-        categories: categories,
-        ticks: getTicks(tickSize, radius),
-        offset: offset,
-        d3: this.createLineRadial(radius, categories.length)
-      };
-    }
-  }, {
-    key: "getLabelsProps",
-    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,
-        offset: offset - labelOffset,
-        angleOffset: 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 || _this$unsubscribeTool.call(this);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref7;
-      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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, type === 'circle' ? /*#__PURE__*/_react["default"].createElement(SAxis, _ref7.cn("SAxis", {
-        "render": 'circle',
-        "cx": 0,
-        "cy": 0,
-        "r": radius
-      })) : /*#__PURE__*/_react["default"].createElement(SAxis, _ref7.cn("SAxis", {
-        "render": 'path',
-        "d": this.createLineRadial(radius, total)(categories)
-      })), 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
-          }),
-          className = _sstyled$cn.className;
-        return /*#__PURE__*/_react["default"].createElement("line", {
-          key: i,
-          x1: 0,
-          y1: 0,
-          x2: x,
-          y2: y,
-          className: className
-        });
-      }));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(AxisRoot, "displayName", 'Polygon');
-(0, _defineProperty2["default"])(AxisRoot, "style", style);
-(0, _defineProperty2["default"])(AxisRoot, "defaultProps", function (_ref21) {
-  var data = _ref21.data,
-    dataKey = _ref21.dataKey;
-  var categories = data[dataKey];
+      return /*#__PURE__*/_react.default.createElement("line", {
+        key: i,
+        x1: 0,
+        y1: 0,
+        x2: x,
+        y2: y,
+        className: className
+      });
+    }));
+  }
+}
+(0, _defineProperty2.default)(AxisRoot, "displayName", 'Polygon');
+(0, _defineProperty2.default)(AxisRoot, "style", style);
+(0, _defineProperty2.default)(AxisRoot, "defaultProps", ({
+  data,
+  dataKey
+}) => {
+  const categories = data[dataKey];
   return {
-    categories: categories
+    categories
   };
 });
 function AxisTicks(props) {
-  var SAxisTick = props.Element,
-    styles = props.styles,
-    size = props.size,
-    ticks = props.ticks,
-    d3 = props.d3,
-    categories = props.categories,
-    offset = props.offset,
-    type = props.type;
-  var radius = Math.min(size[0], size[1]) / 2 - offset;
-  return ticks.map(function (tick, i) {
+  const {
+    Element: SAxisTick,
+    styles,
+    size,
+    ticks,
+    d3,
+    categories,
+    offset,
+    type
+  } = props;
+  const radius = Math.min(size[0], size[1]) / 2 - offset;
+  return ticks.map((tick, i) => {
     var _ref8;
-    d3.radius(function () {
-      return radius * tick;
-    });
-    return _ref8 = (0, _core.sstyled)(styles), type === 'circle' ? /*#__PURE__*/_react["default"].createElement(SAxisTick, _ref8.cn("SAxisTick", {
+    d3.radius(() => radius * tick);
+    return _ref8 = (0, _core.sstyled)(styles), type === 'circle' ? /*#__PURE__*/_react.default.createElement(SAxisTick, _ref8.cn("SAxisTick", {
       "key": i,
       "render": 'circle',
       "cx": 0,
       "cy": 0,
       "r": radius * tick
-    })) : /*#__PURE__*/_react["default"].createElement(SAxisTick, _ref8.cn("SAxisTick", {
+    })) : /*#__PURE__*/_react.default.createElement(SAxisTick, _ref8.cn("SAxisTick", {
       "render": 'path',
       "key": i,
       "d": d3(categories)
@@ -672,28 +593,24 @@ function AxisTicks(props) {
   });
 }
 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 _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],
-      yDirection = _getLabelPlacement2[1];
+  const {
+    Element: SAxisLabel,
+    styles,
+    textSize,
+    size,
+    offset,
+    categories,
+    angleOffset
+  } = props;
+  const radius = Math.min(size[0], size[1]) / 2 - offset;
+  return categories.map((category, i) => {
+    const [x, y] = getRadianPosition(i, radius, categories.length, angleOffset);
+    const [xDirection, yDirection] = getLabelPlacement(i, categories.length, angleOffset);
     if (typeof category === 'string') {
       var _ref9;
       props.dataHintsHandler.labelKey('value', i, category);
-      var lines = category.split('\n');
-      return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAxisLabel, _ref9.cn("SAxisLabel", {
+      const lines = category.split('\n');
+      return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SAxisLabel, _ref9.cn("SAxisLabel", {
         "key": i,
         "render": 'text',
         "childrenPosition": 'inside',
@@ -701,25 +618,18 @@ function AxisLabels(props) {
         "y": y,
         "xDirection": xDirection,
         "yDirection": yDirection
-      }), lines.map(function (lineText, lineIndex) {
-        return /*#__PURE__*/_react["default"].createElement("tspan", {
-          x: x,
-          y: y + (lineIndex - (lines.length - 1) / 2) * textSize,
-          key: "#".concat(lineIndex, "-").concat(lineText)
-        }, lineText);
-      }));
-    }
-    if (/*#__PURE__*/_react["default"].isValidElement(category)) {
-      var _category$props;
-      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],
-        yOffset = _getLabelOffsetPositi2[1];
+      }), lines.map((lineText, lineIndex) => /*#__PURE__*/_react.default.createElement("tspan", {
+        x: x,
+        y: y + (lineIndex - (lines.length - 1) / 2) * textSize,
+        key: `#${lineIndex}-${lineText}`
+      }, lineText)));
+    }
+    if (/*#__PURE__*/_react.default.isValidElement(category)) {
+      const {
+        width = 0,
+        height = 0
+      } = category?.props ?? {};
+      const [xOffset, yOffset] = getLabelOffsetPosition(xDirection, yDirection, width, height);
       return /*#__PURE__*/(0, _react.cloneElement)(category, {
         key: i,
         x: x - xOffset,
@@ -728,150 +638,135 @@ function AxisLabels(props) {
     }
   });
 }
-var Hover = /*#__PURE__*/function (_Component4) {
-  function Hover() {
-    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];
-    }
-    _this4 = (0, _callSuper2["default"])(this, Hover, [].concat(args));
-    (0, _defineProperty2["default"])(_this4, "state", {
+class Hover extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       index: null
     });
-    (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 = getIndex([centerX, centerY]);
-      _this4.setState({
-        index: index
-      }, function () {
-        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), {}, {
-          index: index,
-          patterns: patterns
+    (0, _defineProperty2.default)(this, "virtualElement", (0, _canUseDOM.default)() ? document.createElement('div') : {});
+    (0, _defineProperty2.default)(this, "unsubscribeMouseMoveRoot", null);
+    (0, _defineProperty2.default)(this, "unsubscribeMouseLeaveRoot", null);
+    (0, _defineProperty2.default)(this, "handlerMouseMoveRoot", (0, _rafTrottle.default)(e => {
+      const {
+        eventEmitter,
+        size,
+        rootRef,
+        patterns,
+        getIndex,
+        plotId
+      } = this.asProps;
+      const point = (0, _utils.eventToPoint)(e, rootRef.current);
+      const diam = Math.min(size[0], size[1]);
+      const centerX = point[0] - diam / 2;
+      const centerY = point[1] - diam / 2;
+      const {
+        clientX,
+        clientY
+      } = e;
+      const index = getIndex([centerX, centerY]);
+      this.setState({
+        index
+      }, () => {
+        eventEmitter.emit(`setTooltipPosition_${plotId}`, clientX, clientY);
+        eventEmitter.emit(`setTooltipRenderingProps_${plotId}`, {}, {
+          index,
+          patterns
         });
-        eventEmitter.emit("setTooltipVisible_".concat(plotId), index !== null);
+        eventEmitter.emit(`setTooltipVisible_${plotId}`, index !== null);
       });
     }));
-    (0, _defineProperty2["default"])(_this4, "handlerMouseLeaveRoot", (0, _rafTrottle["default"])(function () {
-      _this4.setState({
+    (0, _defineProperty2.default)(this, "handlerMouseLeaveRoot", (0, _rafTrottle.default)(() => {
+      this.setState({
         index: null
-      }, function () {
-        _this4.asProps.eventEmitter.emit("setTooltipVisible_".concat(_this4.asProps.plotId), false);
+      }, () => {
+        this.asProps.eventEmitter.emit(`setTooltipVisible_${this.asProps.plotId}`, false);
       });
     }));
-    return _this4;
   }
-  (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;
-      var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      return function () {
-        return {
-          width: 0,
-          height: 0,
-          top: y,
-          right: x,
-          bottom: y,
-          left: x
-        };
-      };
-    }
-  }, {
-    key: "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);
+  generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({
+      width: 0,
+      height: 0,
+      top: y,
+      right: x,
+      bottom: y,
+      left: x
+    });
+  }
+  componentDidMount() {
+    const {
+      eventEmitter
+    } = this.asProps;
+    this.unsubscribeMouseMoveRoot = eventEmitter.subscribe('onMouseMoveRoot', e => {
+      e.persist();
+      this.handlerMouseMoveRoot(e);
+    });
+    this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe('onMouseLeaveRoot', this.handlerMouseLeaveRoot);
+  }
+  componentWillUnmount() {
+    if (this.unsubscribeMouseMoveRoot) {
+      this.unsubscribeMouseMoveRoot();
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.unsubscribeMouseMoveRoot) {
-        this.unsubscribeMouseMoveRoot();
-      }
-      if (this.unsubscribeMouseLeaveRoot) {
-        this.unsubscribeMouseLeaveRoot();
-      }
+    if (this.unsubscribeMouseLeaveRoot) {
+      this.unsubscribeMouseLeaveRoot();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      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 _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 _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref0.cn("SPieRect", {
-            "render": 'path',
-            "d": circle()
-          }));
-        } else {
-          var _ref1;
-          return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref1.cn("SPieRect", {
-            "render": 'path',
-            "d": (0, _d3Shape.line)()(getPolygon(index))
-          }));
-        }
+  }
+  render() {
+    const {
+      styles,
+      type,
+      getPie,
+      getPolygon
+    } = this.asProps;
+    const {
+      index
+    } = this.state;
+    const SPieRect = this.Element;
+    if (index !== null) {
+      if (type === 'circle') {
+        var _ref0;
+        const [startAngle, endAngle, radius] = getPie(index);
+        const circle = (0, _d3Shape.arc)().innerRadius(0).outerRadius(radius).startAngle(startAngle).endAngle(endAngle);
+        return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPieRect, _ref0.cn("SPieRect", {
+          "render": 'path',
+          "d": circle()
+        }));
+      } else {
+        var _ref1;
+        return _ref1 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPieRect, _ref1.cn("SPieRect", {
+          "render": 'path',
+          "d": (0, _d3Shape.line)()(getPolygon(index))
+        }));
       }
-      return null;
     }
-  }]);
-}(_core.Component);
-var Axis = (0, _createElement["default"])(AxisRoot, {
+    return null;
+  }
+}
+const Axis = (0, _createElement.default)(AxisRoot, {
   Ticks: AxisTicks,
   Labels: AxisLabels
 });
-var Polygon = (0, _createElement["default"])(PolygonRoot, {
+const Polygon = (0, _createElement.default)(PolygonRoot, {
   Line: PolygonLine,
   Dots: PolygonDots
 });
 function RadarTooltip(props) {
   var _ref = arguments[0],
     _ref10;
-  var SRadarTooltip = _Tooltip["default"];
-  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))));
+  const SRadarTooltip = _Tooltip.default;
+  return _ref10 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(SRadarTooltip, _ref10.cn("SRadarTooltip", {
+    ...(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]
+const Radar = (0, _createElement.default)(RadarRoot, {
+  Axis,
+  Polygon,
+  Hover,
+  Tooltip: [RadarTooltip, _Tooltip.default._______childrenComponents]
 });
-var _default = exports["default"] = Radar;
+var _default = exports.default = Radar;
 //# sourceMappingURL=Radar.js.map