@semcore/d3-chart 2.13.4 → 2.13.6

package/lib/cjs/Radar.js

@@ -1,113 +1,77 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 exports.getLabelOffsetPosition = getLabelOffsetPosition;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _core = require("@semcore/core");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
-
 var _getOriginChildren = _interopRequireDefault(require("@semcore/utils/lib/getOriginChildren"));
-
 var _rafTrottle = _interopRequireDefault(require("@semcore/utils/lib/rafTrottle"));
-
 var _canUseDOM = _interopRequireDefault(require("@semcore/utils/lib/canUseDOM"));
-
 var _d3Polygon = require("d3-polygon");
-
 var _d3Shape = require("d3-shape");
-
 var _createElement = _interopRequireDefault(require("./createElement"));
-
 var _utils = require("./utils");
-
 /*__reshadow-styles__:"./style/radar.shadow.css"*/
-var style = (
-/*__reshadow_css_start__*/
-_core.sstyled.insert(
-/*__inner_css_start__*/
-".___SAxisLine_con5p_gg_,.___SAxisTick_con5p_gg_,.___SAxis_con5p_gg_{stroke:var(--intergalactic-chart-grid-line, #e0e1e9);stroke-width:1;fill:transparent}.___SAxisLine_con5p_gg_,.___SAxisTick_con5p_gg_{stroke-dasharray:2}.___SAxisLine_con5p_gg_.__active_con5p_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___SAxisLabel_con5p_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_con5p_gg_.__xDirection_con5p_gg_{text-anchor:var(--xDirection_con5p)}.___SAxisLabel_con5p_gg_.__yDirection_con5p_gg_{dominant-baseline:var(--yDirection_con5p)}.___SPolygonDot_con5p_gg_,.___SPolygon_con5p_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPolygon_con5p_gg_{opacity:.2}.___SPolygon_con5p_gg_.__color_con5p_gg_{fill:var(--color_con5p)}.___SPolygonDot_con5p_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #ffffff);r:6px}.___SPolygonDot_con5p_gg_.__transparent_con5p_gg_{opacity:.3}.___SPolygonDot_con5p_gg_.__color_con5p_gg_{fill:var(--color_con5p)}.___SPolygonLine_con5p_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SPolygonLine_con5p_gg_.__transparent_con5p_gg_{opacity:.3}.___SPolygonLine_con5p_gg_.__color_con5p_gg_{stroke:var(--color_con5p)}.___SPieRect_con5p_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}"
-/*__inner_css_end__*/
-, "con5p_gg_")
-/*__reshadow_css_end__*/
-, {
-  "__SAxis": "___SAxis_con5p_gg_",
-  "__SAxisLine": "___SAxisLine_con5p_gg_",
-  "__SAxisTick": "___SAxisTick_con5p_gg_",
-  "_active": "__active_con5p_gg_",
-  "__SAxisLabel": "___SAxisLabel_con5p_gg_",
-  "_xDirection": "__xDirection_con5p_gg_",
-  "--xDirection": "--xDirection_con5p",
-  "_yDirection": "__yDirection_con5p_gg_",
-  "--yDirection": "--yDirection_con5p",
-  "__SPolygon": "___SPolygon_con5p_gg_",
-  "_color": "__color_con5p_gg_",
-  "--color": "--color_con5p",
-  "__SPolygonDot": "___SPolygonDot_con5p_gg_",
-  "_transparent": "__transparent_con5p_gg_",
-  "__SPolygonLine": "___SPolygonLine_con5p_gg_",
-  "__SPieRect": "___SPieRect_con5p_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SAxisLine_9n03z_gg_,.___SAxisTick_9n03z_gg_,.___SAxis_9n03z_gg_{stroke:var(--intergalactic-chart-grid-line, #e0e1e9);stroke-width:1;fill:transparent}.___SAxisLine_9n03z_gg_,.___SAxisTick_9n03z_gg_{stroke-dasharray:2}.___SAxisLine_9n03z_gg_.__active_9n03z_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___SAxisLabel_9n03z_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_9n03z_gg_.__xDirection_9n03z_gg_{text-anchor:var(--xDirection_9n03z)}.___SAxisLabel_9n03z_gg_.__yDirection_9n03z_gg_{dominant-baseline:var(--yDirection_9n03z)}.___SPolygonDot_9n03z_gg_,.___SPolygon_9n03z_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPolygon_9n03z_gg_{opacity:.2}.___SPolygon_9n03z_gg_.__color_9n03z_gg_{fill:var(--color_9n03z)}.___SPolygonDot_9n03z_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #ffffff);r:6px}.___SPolygonDot_9n03z_gg_.__transparent_9n03z_gg_{opacity:.3}.___SPolygonDot_9n03z_gg_.__color_9n03z_gg_{fill:var(--color_9n03z)}.___SPolygonLine_9n03z_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SPolygonLine_9n03z_gg_.__transparent_9n03z_gg_{opacity:.3}.___SPolygonLine_9n03z_gg_.__color_9n03z_gg_{stroke:var(--color_9n03z)}.___SPieRect_9n03z_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}" /*__inner_css_end__*/, "9n03z_gg_") /*__reshadow_css_end__*/, {
+  "__SAxis": "___SAxis_9n03z_gg_",
+  "__SAxisLine": "___SAxisLine_9n03z_gg_",
+  "__SAxisTick": "___SAxisTick_9n03z_gg_",
+  "_active": "__active_9n03z_gg_",
+  "__SAxisLabel": "___SAxisLabel_9n03z_gg_",
+  "_xDirection": "__xDirection_9n03z_gg_",
+  "--xDirection": "--xDirection_9n03z",
+  "_yDirection": "__yDirection_9n03z_gg_",
+  "--yDirection": "--yDirection_9n03z",
+  "__SPolygon": "___SPolygon_9n03z_gg_",
+  "_color": "__color_9n03z_gg_",
+  "--color": "--color_9n03z",
+  "__SPolygonDot": "___SPolygonDot_9n03z_gg_",
+  "_transparent": "__transparent_9n03z_gg_",
+  "__SPolygonLine": "___SPolygonLine_9n03z_gg_",
+  "__SPieRect": "___SPieRect_9n03z_gg_"
 });
-
 var clampAngle = function 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);
   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);
   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);
   if (angle >= Math.PI + Math.PI * (8 / 9) || angle <= Math.PI * (1 / 9)) return 'alphabetic';
   if (angle >= Math.PI * (8 / 9) && angle <= Math.PI + Math.PI * (1 / 9)) return 'mathematical';
   return 'middle';
 };
-
 function getLabelPlacement(i, total, angleOffset) {
   return [getLabelXPlacement(i, total, angleOffset), getLabelYPlacement(i, total, angleOffset)];
 }
-
 function computeTextWidth(texts, textSize) {
   var defaultWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
   var defaultHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 20;
@@ -115,42 +79,33 @@ function computeTextWidth(texts, textSize) {
     if (typeof text === 'string') {
       return (0, _utils.measureText)(text, textSize);
     }
-
     if ( /*#__PURE__*/_react["default"].isValidElement(text)) {
       var _text$props, _text$props2;
-
       // @ts-ignore
       return Math.max(((_text$props = text.props) === null || _text$props === void 0 ? void 0 : _text$props.width) || defaultWidth, ((_text$props2 = text.props) === null || _text$props2 === void 0 ? void 0 : _text$props2.height) || defaultHeight);
     }
-
     return defaultWidth;
   });
   return Math.max.apply(Math, (0, _toConsumableArray2["default"])(widths));
 }
-
 function getTicks(tickSize, radius) {
   var ticks = 0;
-
   while (Math.trunc(radius / (tickSize / 2)) > ticks) {
     ticks += 1;
   }
-
   return (0, _toConsumableArray2["default"])(Array(ticks).keys()).reduce(function (ticks, t, i, total) {
     if (i) ticks.push(i / total.length);
     return ticks;
   }, []);
 }
-
 function pieContains(_ref10, _ref11) {
   var _ref12 = (0, _slicedToArray2["default"])(_ref10, 3),
-      startAngle = _ref12[0],
-      endAngle = _ref12[1],
-      radius = _ref12[2];
-
+    startAngle = _ref12[0],
+    endAngle = _ref12[1],
+    radius = _ref12[2];
   var _ref13 = (0, _slicedToArray2["default"])(_ref11, 2),
-      x = _ref13[0],
-      y = _ref13[1];
-
+    x = _ref13[0],
+    y = _ref13[1];
   var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
   if (distance > radius) return false;
   startAngle = clampAngle(startAngle);
@@ -164,60 +119,46 @@ function pieContains(_ref10, _ref11) {
   if (nextAngle > startAngle && nextAngle < endAngle) return true;
   return false;
 }
-
 function getLabelOffsetPosition(xDirection, yDirection, width, height) {
   var xOffset = 0;
   var yOffset = 0;
-
   switch ("".concat(xDirection, "-").concat(yDirection)) {
     case 'middle-alphabetic':
       yOffset = height / 2;
       break;
-
     case 'start-middle':
       xOffset = -width / 2;
       break;
-
     case 'middle-mathematical':
       yOffset = -height / 2;
       break;
-
     case 'end-middle':
       xOffset = width / 2;
       break;
   }
-
   return [xOffset + width / 2, yOffset + height / 2];
 }
-
 var MINIMUM_OFFSET = 5;
-
 var RadarRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(RadarRoot, _Component);
-
   var _super = (0, _createSuper2["default"])(RadarRoot);
-
   function RadarRoot() {
     var _this;
-
     (0, _classCallCheck2["default"])(this, RadarRoot);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "computeOffset", 0);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "categoriesKey", null);
     return _this;
   }
-
   (0, _createClass2["default"])(RadarRoot, [{
     key: "id",
     get: function get() {
       var _this$asProps = this.asProps,
-          id = _this$asProps.id,
-          uid = _this$asProps.uid;
+        id = _this$asProps.id,
+        uid = _this$asProps.uid;
       return id || uid;
     }
   }, {
@@ -247,9 +188,9 @@ var RadarRoot = /*#__PURE__*/function (_Component) {
     value: function getPolygonProps(_ref14) {
       var dataKey = _ref14.dataKey;
       var _this$asProps2 = this.asProps,
-          data = _this$asProps2.data,
-          scale = _this$asProps2.scale,
-          angleOffset = _this$asProps2.angleOffset;
+        data = _this$asProps2.data,
+        scale = _this$asProps2.scale,
+        angleOffset = _this$asProps2.angleOffset;
       return {
         offset: this.offset,
         data: data[dataKey] || [],
@@ -271,38 +212,31 @@ var RadarRoot = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref;
-
       var SRadar = this.Element;
       var _this$asProps3 = this.asProps,
-          Children = _this$asProps3.Children,
-          style = _this$asProps3.style,
-          size = _this$asProps3.size,
-          data = _this$asProps3.data,
-          offset = _this$asProps3.offset;
-
+        Children = _this$asProps3.Children,
+        styles = _this$asProps3.styles,
+        size = _this$asProps3.size,
+        data = _this$asProps3.data,
+        offset = _this$asProps3.offset;
       var _size = (0, _slicedToArray2["default"])(size, 2),
-          width = _size[0],
-          height = _size[1];
-
+        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;
       }
-
-      return _ref = (0, _core.sstyled)(style), /*#__PURE__*/_react["default"].createElement(SRadar, _ref.cn("SRadar", {
+      return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SRadar, _ref.cn("SRadar", {
         "aria-hidden": true,
         "id": this.id,
         "render": "g",
@@ -313,7 +247,6 @@ var RadarRoot = /*#__PURE__*/function (_Component) {
   }]);
   return RadarRoot;
 }(_core.Component);
-
 (0, _defineProperty2["default"])(RadarRoot, "displayName", 'Line');
 (0, _defineProperty2["default"])(RadarRoot, "style", style);
 (0, _defineProperty2["default"])(RadarRoot, "enhance", [(0, _uniqueID["default"])()]);
@@ -321,28 +254,24 @@ var RadarRoot = /*#__PURE__*/function (_Component) {
   type: 'polygon',
   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);
   }
-
   (0, _createClass2["default"])(PolygonRoot, [{
     key: "getDotsProps",
     value: function getDotsProps() {
       var _this$asProps4 = this.asProps,
-          data = _this$asProps4.data,
-          scale = _this$asProps4.scale,
-          color = _this$asProps4.color,
-          transparent = _this$asProps4.transparent,
-          dataKey = _this$asProps4.dataKey,
-          dataHintsHandler = _this$asProps4.dataHintsHandler,
-          angleOffset = _this$asProps4.angleOffset;
+        data = _this$asProps4.data,
+        scale = _this$asProps4.scale,
+        color = _this$asProps4.color,
+        transparent = _this$asProps4.transparent,
+        dataKey = _this$asProps4.dataKey,
+        dataHintsHandler = _this$asProps4.dataHintsHandler,
+        angleOffset = _this$asProps4.angleOffset;
       return {
         data: data,
         scale: scale,
@@ -357,10 +286,10 @@ 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,
-          transparent = _this$asProps5.transparent;
+        d3 = _this$asProps5.d3,
+        data = _this$asProps5.data,
+        color = _this$asProps5.color,
+        transparent = _this$asProps5.transparent;
       return {
         data: data,
         color: color,
@@ -372,14 +301,13 @@ var PolygonRoot = /*#__PURE__*/function (_Component2) {
     key: "render",
     value: function render() {
       var _ref2;
-
       var _this$asProps6 = this.asProps,
-          SPolygon = _this$asProps6.Element,
-          styles = _this$asProps6.styles,
-          d3 = _this$asProps6.d3,
-          data = _this$asProps6.data,
-          color = _this$asProps6.color,
-          fill = _this$asProps6.fill;
+        SPolygon = _this$asProps6.Element,
+        styles = _this$asProps6.styles,
+        d3 = _this$asProps6.d3,
+        data = _this$asProps6.data,
+        color = _this$asProps6.color,
+        fill = _this$asProps6.fill;
       return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygon, _ref2.cn("SPolygon", {
         "render": "path",
         "d": d3(data),
@@ -389,16 +317,15 @@ 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 (_ref18) {
   var scale = _ref18.scale,
-      _ref18$curve = _ref18.curve,
-      curve = _ref18$curve === void 0 ? _d3Shape.curveLinearClosed : _ref18$curve,
-      size = _ref18.size,
-      offset = _ref18.offset,
-      angleOffset = _ref18.angleOffset;
+    _ref18$curve = _ref18.curve,
+    curve = _ref18$curve === void 0 ? _d3Shape.curveLinearClosed : _ref18$curve,
+    size = _ref18.size,
+    offset = _ref18.offset,
+    angleOffset = _ref18.angleOffset;
   scale.range([0, Math.min(size[0], size[1]) / 2 - offset]);
   return {
     d3: (0, _d3Shape.lineRadial)().curve(curve).radius(function (d) {
@@ -408,16 +335,14 @@ var PolygonRoot = /*#__PURE__*/function (_Component2) {
     })
   };
 });
-
 function PolygonLine(props) {
   var _ref3;
-
   var SPolygonLine = props.Element,
-      styles = props.styles,
-      d3 = props.d3,
-      color = props.color,
-      data = props.data,
-      transparent = props.transparent;
+    styles = props.styles,
+    d3 = props.d3,
+    color = props.color,
+    data = props.data,
+    transparent = props.transparent;
   return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygonLine, _ref3.cn("SPolygonLine", {
     "render": "path",
     "d": d3(data),
@@ -425,28 +350,24 @@ function PolygonLine(props) {
     "transparent": transparent
   }));
 }
-
 function PolygonDots(props) {
   var SPolygonDot = props.Element,
-      styles = props.styles,
-      color = props.color,
-      data = props.data,
-      scale = props.scale,
-      transparent = props.transparent,
-      categoryKey = props.categoryKey,
-      angleOffset = props.angleOffset;
+    styles = props.styles,
+    color = props.color,
+    data = props.data,
+    scale = props.scale,
+    transparent = props.transparent,
+    categoryKey = props.categoryKey,
+    angleOffset = props.angleOffset;
   return data.map(function (value, i) {
     var _ref4;
-
     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];
-
+      _getRadianPosition2 = (0, _slicedToArray2["default"])(_getRadianPosition, 2),
+      cx = _getRadianPosition2[0],
+      cy = _getRadianPosition2[1];
     return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPolygonDot, _ref4.cn("SPolygonDot", {
       "key": i,
       "render": "circle",
@@ -457,21 +378,15 @@ function PolygonDots(props) {
     }));
   });
 }
-
 var AxisRoot = /*#__PURE__*/function (_Component3) {
   (0, _inherits2["default"])(AxisRoot, _Component3);
-
   var _super3 = (0, _createSuper2["default"])(AxisRoot);
-
   function AxisRoot() {
     var _this2;
-
     (0, _classCallCheck2["default"])(this, AxisRoot);
-
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     _this2 = _super3.call.apply(_super3, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "unsubscribeTooltipVisible", null);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "state", {
@@ -479,14 +394,12 @@ var AxisRoot = /*#__PURE__*/function (_Component3) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handlerTooltipVisible", function (visible, _ref15) {
       var index = _ref15.index;
-
       _this2.setState({
         activeLineIndex: index
       });
     });
     return _this2;
   }
-
   (0, _createClass2["default"])(AxisRoot, [{
     key: "createLineRadial",
     value: function createLineRadial(radius, total) {
@@ -500,13 +413,13 @@ var AxisRoot = /*#__PURE__*/function (_Component3) {
     key: "getTicksProps",
     value: function getTicksProps(_ref16) {
       var _ref16$tickSize = _ref16.tickSize,
-          tickSize = _ref16$tickSize === void 0 ? 100 : _ref16$tickSize;
+        tickSize = _ref16$tickSize === void 0 ? 100 : _ref16$tickSize;
       var _this$asProps7 = this.asProps,
-          data = _this$asProps7.data,
-          offset = _this$asProps7.offset,
-          categories = _this$asProps7.categories,
-          size = _this$asProps7.size,
-          type = _this$asProps7.type;
+        data = _this$asProps7.data,
+        offset = _this$asProps7.offset,
+        categories = _this$asProps7.categories,
+        size = _this$asProps7.size,
+        type = _this$asProps7.type;
       var radius = Math.min(size[0], size[1]) / 2 - offset;
       return {
         type: type,
@@ -521,12 +434,12 @@ var AxisRoot = /*#__PURE__*/function (_Component3) {
     key: "getLabelsProps",
     value: function getLabelsProps(_ref17) {
       var _ref17$labelOffset = _ref17.labelOffset,
-          labelOffset = _ref17$labelOffset === void 0 ? 10 : _ref17$labelOffset;
+        labelOffset = _ref17$labelOffset === void 0 ? 10 : _ref17$labelOffset;
       var _this$asProps8 = this.asProps,
-          offset = _this$asProps8.offset,
-          categories = _this$asProps8.categories,
-          textSize = _this$asProps8.textSize,
-          angleOffset = _this$asProps8.angleOffset;
+        offset = _this$asProps8.offset,
+        categories = _this$asProps8.categories,
+        textSize = _this$asProps8.textSize,
+        angleOffset = _this$asProps8.angleOffset;
       return {
         categories: categories,
         textSize: textSize,
@@ -551,15 +464,14 @@ var AxisRoot = /*#__PURE__*/function (_Component3) {
     key: "render",
     value: function render() {
       var _ref5;
-
       var _this$asProps9 = this.asProps,
-          SAxis = _this$asProps9.Element,
-          styles = _this$asProps9.styles,
-          categories = _this$asProps9.categories,
-          size = _this$asProps9.size,
-          offset = _this$asProps9.offset,
-          type = _this$asProps9.type,
-          angleOffset = _this$asProps9.angleOffset;
+        SAxis = _this$asProps9.Element,
+        styles = _this$asProps9.styles,
+        categories = _this$asProps9.categories,
+        size = _this$asProps9.size,
+        offset = _this$asProps9.offset,
+        type = _this$asProps9.type,
+        angleOffset = _this$asProps9.angleOffset;
       var activeLineIndex = this.state.activeLineIndex;
       var radius = Math.min(size[0], size[1]) / 2 - offset;
       var total = categories.length;
@@ -573,15 +485,13 @@ var AxisRoot = /*#__PURE__*/function (_Component3) {
         "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];
-
+          _getRadianPosition4 = (0, _slicedToArray2["default"])(_getRadianPosition3, 2),
+          x = _getRadianPosition4[0],
+          y = _getRadianPosition4[1];
         var _sstyled$cn = (0, _core.sstyled)(styles).cn('SAxisLine', {
-          active: activeLineIndex === i
-        }),
-            className = _sstyled$cn.className;
-
+            active: activeLineIndex === i
+          }),
+          className = _sstyled$cn.className;
         return /*#__PURE__*/_react["default"].createElement("line", {
           key: i,
           x1: 0,
@@ -595,31 +505,28 @@ 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 (_ref19) {
   var data = _ref19.data,
-      dataKey = _ref19.dataKey;
+    dataKey = _ref19.dataKey;
   var categories = data[dataKey];
   return {
     categories: categories
   };
 });
-
 function AxisTicks(props) {
   var SAxisTick = props.Element,
-      styles = props.styles,
-      size = props.size,
-      ticks = props.ticks,
-      d3 = props.d3,
-      categories = props.categories,
-      offset = props.offset,
-      type = props.type;
+    styles = props.styles,
+    size = props.size,
+    ticks = props.ticks,
+    d3 = props.d3,
+    categories = props.categories,
+    offset = props.offset,
+    type = props.type;
   var radius = Math.min(size[0], size[1]) / 2 - offset;
   return ticks.map(function (tick, i) {
     var _ref6;
-
     d3.radius(function () {
       return radius * tick;
     });
@@ -636,30 +543,26 @@ 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;
+    styles = props.styles,
+    textSize = props.textSize,
+    size = props.size,
+    offset = props.offset,
+    categories = props.categories,
+    angleOffset = props.angleOffset;
   var radius = Math.min(size[0], size[1]) / 2 - offset;
   return categories.map(function (category, i) {
     var _getRadianPosition5 = getRadianPosition(i, radius, categories.length, angleOffset),
-        _getRadianPosition6 = (0, _slicedToArray2["default"])(_getRadianPosition5, 2),
-        x = _getRadianPosition6[0],
-        y = _getRadianPosition6[1];
-
+      _getRadianPosition6 = (0, _slicedToArray2["default"])(_getRadianPosition5, 2),
+      x = _getRadianPosition6[0],
+      y = _getRadianPosition6[1];
     var _getLabelPlacement = getLabelPlacement(i, categories.length, angleOffset),
-        _getLabelPlacement2 = (0, _slicedToArray2["default"])(_getLabelPlacement, 2),
-        xDirection = _getLabelPlacement2[0],
-        yDirection = _getLabelPlacement2[1];
-
+      _getLabelPlacement2 = (0, _slicedToArray2["default"])(_getLabelPlacement, 2),
+      xDirection = _getLabelPlacement2[0],
+      yDirection = _getLabelPlacement2[1];
     if (typeof category === 'string') {
       var _ref7;
-
       props.dataHintsHandler.labelKey('value', i, category);
       var lines = category.split('\n');
       return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAxisLabel, _ref7.cn("SAxisLabel", {
@@ -678,19 +581,16 @@ function AxisLabels(props) {
         }, lineText);
       }));
     }
-
     if ( /*#__PURE__*/_react["default"].isValidElement(category)) {
       var _category$props = category === null || category === void 0 ? void 0 : category.props,
-          _category$props$width = _category$props.width,
-          width = _category$props$width === void 0 ? 0 : _category$props$width,
-          _category$props$heigh = _category$props.height,
-          height = _category$props$heigh === void 0 ? 0 : _category$props$heigh;
-
+        _category$props$width = _category$props.width,
+        width = _category$props$width === void 0 ? 0 : _category$props$width,
+        _category$props$heigh = _category$props.height,
+        height = _category$props$heigh === void 0 ? 0 : _category$props$heigh;
       var _getLabelOffsetPositi = getLabelOffsetPosition(xDirection, yDirection, width, height),
-          _getLabelOffsetPositi2 = (0, _slicedToArray2["default"])(_getLabelOffsetPositi, 2),
-          xOffset = _getLabelOffsetPositi2[0],
-          yOffset = _getLabelOffsetPositi2[1];
-
+        _getLabelOffsetPositi2 = (0, _slicedToArray2["default"])(_getLabelOffsetPositi, 2),
+        xOffset = _getLabelOffsetPositi2[0],
+        yOffset = _getLabelOffsetPositi2[1];
       return /*#__PURE__*/(0, _react.cloneElement)(category, {
         key: i,
         x: x - xOffset,
@@ -699,21 +599,15 @@ function AxisLabels(props) {
     }
   });
 }
-
 var Hover = /*#__PURE__*/function (_Component4) {
   (0, _inherits2["default"])(Hover, _Component4);
-
   var _super4 = (0, _createSuper2["default"])(Hover);
-
   function Hover() {
     var _this3;
-
     (0, _classCallCheck2["default"])(this, Hover);
-
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-
     _this3 = _super4.call.apply(_super4, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "state", {
       index: null
@@ -723,21 +617,19 @@ var Hover = /*#__PURE__*/function (_Component4) {
     (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;
+        eventEmitter = _this3$asProps.eventEmitter,
+        size = _this3$asProps.size,
+        rootRef = _this3$asProps.rootRef;
       var point = (0, _utils.eventToPoint)(e, rootRef.current);
       var diam = Math.min(size[0], size[1]);
       var centerX = point[0] - diam / 2;
       var centerY = point[1] - diam / 2;
       var clientX = e.clientX,
-          clientY = e.clientY; // @ts-ignore
-
+        clientY = e.clientY;
+      // @ts-ignore
       _this3.virtualElement.getBoundingClientRect = _this3.generateGetBoundingClientRect(clientX, clientY);
       _this3.virtualElement[_utils.CONSTANT.VIRTUAL_ELEMENT] = true;
-
       var index = _this3.getIndex([centerX, centerY]);
-
       _this3.setState({
         index: index
       }, function () {
@@ -757,7 +649,6 @@ var Hover = /*#__PURE__*/function (_Component4) {
     }));
     return _this3;
   }
-
   (0, _createClass2["default"])(Hover, [{
     key: "generateGetBoundingClientRect",
     value: function generateGetBoundingClientRect() {
@@ -778,41 +669,37 @@ 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;
+        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];
-
+        _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];
-
+        _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];
-
+        _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;
+        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];
@@ -821,12 +708,10 @@ var Hover = /*#__PURE__*/function (_Component4) {
     key: "getIndex",
     value: function getIndex(point) {
       var _this4 = this;
-
       var _this$asProps12 = this.asProps,
-          categories = _this$asProps12.categories,
-          type = _this$asProps12.type;
+        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);
@@ -836,18 +721,15 @@ var Hover = /*#__PURE__*/function (_Component4) {
           return (0, _d3Polygon.polygonContains)(_this4.getPolygon(i), point);
         });
       }
-
       return index === -1 ? null : index;
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this5 = this;
-
       var eventEmitter = this.asProps.eventEmitter;
       this.unsubscribeMouseMoveRoot = eventEmitter.subscribe('onMouseMoveRoot', function (e) {
         e.persist();
-
         _this5.handlerMouseMoveRoot(e);
       });
       this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe('onMouseLeaveRoot', this.handlerMouseLeaveRoot);
@@ -858,7 +740,6 @@ var Hover = /*#__PURE__*/function (_Component4) {
       if (this.unsubscribeMouseMoveRoot) {
         this.unsubscribeMouseMoveRoot();
       }
-
       if (this.unsubscribeMouseLeaveRoot) {
         this.unsubscribeMouseLeaveRoot();
       }
@@ -867,21 +748,18 @@ var Hover = /*#__PURE__*/function (_Component4) {
     key: "render",
     value: function render() {
       var _this$asProps13 = this.asProps,
-          styles = _this$asProps13.styles,
-          type = _this$asProps13.type;
+        styles = _this$asProps13.styles,
+        type = _this$asProps13.type;
       var index = this.state.index;
       var SPieRect = this.Element;
-
       if (index !== null) {
         if (type === 'circle') {
           var _ref8;
-
           var _this$getPie = this.getPie(index),
-              _this$getPie2 = (0, _slicedToArray2["default"])(_this$getPie, 3),
-              startAngle = _this$getPie2[0],
-              endAngle = _this$getPie2[1],
-              radius = _this$getPie2[2];
-
+            _this$getPie2 = (0, _slicedToArray2["default"])(_this$getPie, 3),
+            startAngle = _this$getPie2[0],
+            endAngle = _this$getPie2[1],
+            radius = _this$getPie2[2];
           var circle = (0, _d3Shape.arc)().innerRadius(0).outerRadius(radius).startAngle(startAngle).endAngle(endAngle);
           return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref8.cn("SPieRect", {
             "render": "path",
@@ -889,20 +767,17 @@ var Hover = /*#__PURE__*/function (_Component4) {
           }));
         } else {
           var _ref9;
-
           return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPieRect, _ref9.cn("SPieRect", {
             "render": "path",
             "d": (0, _d3Shape.line)()(this.getPolygon(index))
           }));
         }
       }
-
       return null;
     }
   }]);
   return Hover;
 }(_core.Component);
-
 var Axis = (0, _createElement["default"])(AxisRoot, {
   Ticks: AxisTicks,
   Labels: AxisLabels