@semcore/d3-chart 16.0.6 → 16.1.0-prerelease.1

package/lib/esm/Line.mjs

@@ -8,13 +8,14 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, Component } from "@semcore/core";
 import uniqueIDEnhancement, { useUID } from "@semcore/core/lib/utils/uniqueID";
+import { bisector } from "d3-array";
 import { area, curveCardinal, line, curveLinear } from "d3-shape";
 import React from "react";
 import AnimatedClipPath from "./AnimatedClipPath.mjs";
 import createElement from "./createElement.mjs";
 import Dots from "./Dots.mjs";
 import { resolvePatternDasharray } from "./Pattern.mjs";
-import { interpolateValue, getNullData, definedData, definedNullData, getChartDefaultColorName, scaleOfBandwidth } from "./utils.mjs";
+import { interpolateValue, getNullData, eventToPoint, invert, definedData, definedNullData, getChartDefaultColorName, scaleOfBandwidth } from "./utils.mjs";
 function _callSuper(t, o, e) {
   return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
 }
@@ -23,19 +24,19 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SLine_tl1sj_gg_{fill:transparent;stroke-width:3;stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:d;transition-duration:var(--duration_tl1sj);transition-timing-function:ease-in-out}.___SLine_tl1sj_gg_.__color_tl1sj_gg_{stroke:var(--color_tl1sj)}.___SLine_tl1sj_gg_.__hide_tl1sj_gg_{display:none}.___SLine_tl1sj_gg_.__transparent_tl1sj_gg_{opacity:.3}.___SNull_tl1sj_gg_{fill:transparent;stroke:var(--intergalactic-border-primary, #c4c7cf);stroke-dasharray:4}.___SNull_tl1sj_gg_.__hide_tl1sj_gg_{display:none}.___SLineArea_tl1sj_gg_{transition-property:d;transition-duration:var(--duration_tl1sj);transition-timing-function:ease-in-out;opacity:.3;fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLineArea_tl1sj_gg_.__color_tl1sj_gg_{fill:var(--color_tl1sj)}",
+    ".___SLine_o5bhk_gg_{fill:transparent;stroke-width:3;stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:d;transition-duration:var(--duration_o5bhk);transition-timing-function:ease-in-out}.___SLine_o5bhk_gg_.__color_o5bhk_gg_{stroke:var(--color_o5bhk)}.___SLine_o5bhk_gg_.__hide_o5bhk_gg_{display:none}.___SLine_o5bhk_gg_.__transparent_o5bhk_gg_{opacity:.3}.___SNull_o5bhk_gg_{fill:transparent;stroke:var(--intergalactic-border-primary, #c4c7cf);stroke-dasharray:4}.___SNull_o5bhk_gg_.__hide_o5bhk_gg_{display:none}.___SLineArea_o5bhk_gg_{transition-property:d;transition-duration:var(--duration_o5bhk);transition-timing-function:ease-in-out;opacity:.3;fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLineArea_o5bhk_gg_.__color_o5bhk_gg_{fill:var(--color_o5bhk)}",
     /*__inner_css_end__*/
-    "tl1sj_gg_"
+    "o5bhk_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLine": "___SLine_tl1sj_gg_",
-    "--duration": "--duration_tl1sj",
-    "_color": "__color_tl1sj_gg_",
-    "--color": "--color_tl1sj",
-    "_hide": "__hide_tl1sj_gg_",
-    "_transparent": "__transparent_tl1sj_gg_",
-    "__SNull": "___SNull_tl1sj_gg_",
-    "__SLineArea": "___SLineArea_tl1sj_gg_"
+    "__SLine": "___SLine_o5bhk_gg_",
+    "--duration": "--duration_o5bhk",
+    "_color": "__color_o5bhk_gg_",
+    "--color": "--color_o5bhk",
+    "_hide": "__hide_o5bhk_gg_",
+    "_transparent": "__transparent_o5bhk_gg_",
+    "__SNull": "___SNull_o5bhk_gg_",
+    "__SLineArea": "___SLineArea_o5bhk_gg_"
   })
 );
 var LineRoot = /* @__PURE__ */ function(_Component) {
@@ -47,7 +48,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
   return _createClass(LineRoot2, [{
     key: "getDotsProps",
     value: function getDotsProps() {
-      var _this$asProps = this.asProps, x = _this$asProps.x, y = _this$asProps.y, d3 = _this$asProps.d3, color = _this$asProps.color, resolveColor = _this$asProps.resolveColor, duration = _this$asProps.duration, transparent = _this$asProps.transparent, patterns = _this$asProps.patterns;
+      var _this$asProps = this.asProps, x = _this$asProps.x, y = _this$asProps.y, d3 = _this$asProps.d3, color = _this$asProps.color, resolveColor = _this$asProps.resolveColor, duration = _this$asProps.duration, transparent = _this$asProps.transparent, patterns = _this$asProps.patterns, onClick = _this$asProps.onClick;
       return {
         x,
         y,
@@ -56,7 +57,8 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
         resolveColor,
         duration,
         transparent,
-        patterns
+        patterns,
+        onClick
       };
     }
   }, {
@@ -91,12 +93,25 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
         scale
       };
     }
+  }, {
+    key: "handlerOnClick",
+    value: function handlerOnClick(e) {
+      e.stopPropagation();
+      var _this$asProps4 = this.asProps, rootRef = _this$asProps4.rootRef, _this$asProps4$scale = _slicedToArray(_this$asProps4.scale, 1), xScale = _this$asProps4$scale[0], data = _this$asProps4.data, x = _this$asProps4.x, onClick = _this$asProps4.onClick;
+      if (!onClick) return;
+      var _eventToPoint = eventToPoint(e, rootRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 1), pX = _eventToPoint2[0];
+      var vX = invert(xScale, pX);
+      var index = bisector(function(d) {
+        return d[x];
+      }).center(data, vX);
+      onClick(index, e);
+    }
   }, {
     key: "render",
     value: function render() {
       var _ref;
       var SLine = this.Element;
-      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, hide = _this$asProps4.hide, color = _this$asProps4.color, resolveColor = _this$asProps4.resolveColor, uid = _this$asProps4.uid, size = _this$asProps4.size, d3 = _this$asProps4.d3, duration = _this$asProps4.duration, x = _this$asProps4.x, y = _this$asProps4.y, transparent = _this$asProps4.transparent, patterns = _this$asProps4.patterns;
+      var _this$asProps5 = this.asProps, styles = _this$asProps5.styles, hide = _this$asProps5.hide, color = _this$asProps5.color, resolveColor = _this$asProps5.resolveColor, uid = _this$asProps5.uid, size = _this$asProps5.size, d3 = _this$asProps5.d3, duration = _this$asProps5.duration, x = _this$asProps5.x, y = _this$asProps5.y, transparent = _this$asProps5.transparent, patterns = _this$asProps5.patterns;
       var data = this.asProps.data.filter(function(item) {
         return item[y] !== interpolateValue;
       });
@@ -112,7 +127,9 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
         "transparent": transparent,
         "d": d3(data),
         "use:duration": "".concat(duration, "ms"),
-        "strokeDasharray": patterns ? resolvePatternDasharray(patternKey, patterns) : void 0
+        "strokeDasharray": patterns ? resolvePatternDasharray(patternKey, patterns) : void 0,
+        "onClickCapture": this.handlerOnClick.bind(this),
+        "pointerEvents": "stroke"
       })), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, _ref.cn("AnimatedClipPath", {
         "aria-hidden": true,
         "duration": duration,

package/lib/esm/Plot.mjs

@@ -26,13 +26,13 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlot_1lexs_gg_{overflow:hidden}.___SPlot_1lexs_gg_:active,.___SPlot_1lexs_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}foreignObject[data-aria-only]{pointer-events:none}.___SPlot_1lexs_gg_.__keyboardFocused_1lexs_gg_{border:1px solid var(--intergalactic-chart-palette-order-9, #008ff8);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}",
+    ".___SPlot_clrhu_gg_{overflow:hidden}.___SPlot_clrhu_gg_:active,.___SPlot_clrhu_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}foreignObject[data-aria-only]{pointer-events:none}.___SPlot_clrhu_gg_.__keyboardFocused_clrhu_gg_{border:1px solid var(--intergalactic-chart-palette-order-9, #008ff8);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}",
     /*__inner_css_end__*/
-    "1lexs_gg_"
+    "clrhu_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlot": "___SPlot_1lexs_gg_",
-    "_keyboardFocused": "__keyboardFocused_1lexs_gg_"
+    "__SPlot": "___SPlot_clrhu_gg_",
+    "_keyboardFocused": "__keyboardFocused_clrhu_gg_"
   })
 );
 var PlotRoot = /* @__PURE__ */ function(_Component) {

package/lib/esm/Radar.mjs

@@ -19,7 +19,7 @@ import React, { cloneElement } from "react";
 import createElement from "./createElement.mjs";
 import { PatternFill, getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
 import Tooltip from "./Tooltip.mjs";
-import { getChartDefaultColorName, measureText, eventToPoint } from "./utils.mjs";
+import { getChartDefaultColorName, eventToPoint, measureText } from "./utils.mjs";
 function _callSuper(t, o, e) {
   return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
 }
@@ -28,29 +28,29 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SAxisLine_1q8vt_gg_,.___SAxisTick_1q8vt_gg_,.___SAxis_1q8vt_gg_{stroke:var(--intergalactic-chart-grid-line, #e0e1e9);stroke-width:1;fill:transparent}.___SAxisLine_1q8vt_gg_,.___SAxisTick_1q8vt_gg_{stroke-dasharray:2}.___SAxisLine_1q8vt_gg_.__active_1q8vt_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___SAxisLabel_1q8vt_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_1q8vt_gg_.__xDirection_1q8vt_gg_{text-anchor:var(--xDirection_1q8vt)}.___SAxisLabel_1q8vt_gg_.__yDirection_1q8vt_gg_{dominant-baseline:var(--yDirection_1q8vt)}.___SPolygonDot_1q8vt_gg_,.___SPolygon_1q8vt_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPolygon_1q8vt_gg_{opacity:.2}.___SPolygon_1q8vt_gg_.__color_1q8vt_gg_{fill:var(--color_1q8vt)}.___SPolygon_1q8vt_gg_.__pattern_1q8vt_gg_.__color_1q8vt_gg_{fill:var(--pattern_1q8vt);stroke:var(--color_1q8vt);stroke-width:1px}.___SPolygonDot_1q8vt_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #ffffff);r:6px}.___SPolygonDot_1q8vt_gg_.__transparent_1q8vt_gg_{opacity:.3}.___SPolygonDot_1q8vt_gg_.__color_1q8vt_gg_{fill:var(--color_1q8vt)}.___SPolygonLine_1q8vt_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SPolygonLine_1q8vt_gg_.__transparent_1q8vt_gg_{opacity:.3}.___SPolygonLine_1q8vt_gg_.__color_1q8vt_gg_{stroke:var(--color_1q8vt)}.___SPieRect_1q8vt_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SAxisLine_15mev_gg_,.___SAxisTick_15mev_gg_,.___SAxis_15mev_gg_{stroke:var(--intergalactic-chart-grid-line, #e0e1e9);stroke-width:1;fill:transparent}.___SAxisLine_15mev_gg_,.___SAxisTick_15mev_gg_{stroke-dasharray:2}.___SAxisLine_15mev_gg_.__active_15mev_gg_{stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___SAxisLabel_15mev_gg_{text-anchor:middle;dominant-baseline:central;font-size:12px}.___SAxisLabel_15mev_gg_.__xDirection_15mev_gg_{text-anchor:var(--xDirection_15mev)}.___SAxisLabel_15mev_gg_.__yDirection_15mev_gg_{dominant-baseline:var(--yDirection_15mev)}.___SPolygonDot_15mev_gg_,.___SPolygon_15mev_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SPolygon_15mev_gg_{opacity:.2}.___SPolygon_15mev_gg_.__color_15mev_gg_{fill:var(--color_15mev)}.___SPolygon_15mev_gg_.__pattern_15mev_gg_.__color_15mev_gg_{fill:var(--pattern_15mev);stroke:var(--color_15mev);stroke-width:1px}.___SPolygonDot_15mev_gg_{stroke-width:2px;stroke:var(--intergalactic-chart-grid-border, #ffffff);r:6px}.___SPolygonDot_15mev_gg_.__transparent_15mev_gg_{opacity:.3}.___SPolygonDot_15mev_gg_.__color_15mev_gg_{fill:var(--color_15mev)}.___SPolygonLine_15mev_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SPolygonLine_15mev_gg_.__transparent_15mev_gg_{opacity:.3}.___SPolygonLine_15mev_gg_.__color_15mev_gg_{stroke:var(--color_15mev)}.___SPieRect_15mev_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
     /*__inner_css_end__*/
-    "1q8vt_gg_"
+    "15mev_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SAxis": "___SAxis_1q8vt_gg_",
-    "__SAxisLine": "___SAxisLine_1q8vt_gg_",
-    "__SAxisTick": "___SAxisTick_1q8vt_gg_",
-    "_active": "__active_1q8vt_gg_",
-    "__SAxisLabel": "___SAxisLabel_1q8vt_gg_",
-    "_xDirection": "__xDirection_1q8vt_gg_",
-    "--xDirection": "--xDirection_1q8vt",
-    "_yDirection": "__yDirection_1q8vt_gg_",
-    "--yDirection": "--yDirection_1q8vt",
-    "__SPolygon": "___SPolygon_1q8vt_gg_",
-    "_color": "__color_1q8vt_gg_",
-    "--color": "--color_1q8vt",
-    "_pattern": "__pattern_1q8vt_gg_",
-    "--pattern": "--pattern_1q8vt",
-    "__SPolygonDot": "___SPolygonDot_1q8vt_gg_",
-    "_transparent": "__transparent_1q8vt_gg_",
-    "__SPolygonLine": "___SPolygonLine_1q8vt_gg_",
-    "__SPieRect": "___SPieRect_1q8vt_gg_"
+    "__SAxis": "___SAxis_15mev_gg_",
+    "__SAxisLine": "___SAxisLine_15mev_gg_",
+    "__SAxisTick": "___SAxisTick_15mev_gg_",
+    "_active": "__active_15mev_gg_",
+    "__SAxisLabel": "___SAxisLabel_15mev_gg_",
+    "_xDirection": "__xDirection_15mev_gg_",
+    "--xDirection": "--xDirection_15mev",
+    "_yDirection": "__yDirection_15mev_gg_",
+    "--yDirection": "--yDirection_15mev",
+    "__SPolygon": "___SPolygon_15mev_gg_",
+    "_color": "__color_15mev_gg_",
+    "--color": "--color_15mev",
+    "_pattern": "__pattern_15mev_gg_",
+    "--pattern": "--pattern_15mev",
+    "__SPolygonDot": "___SPolygonDot_15mev_gg_",
+    "_transparent": "__transparent_15mev_gg_",
+    "__SPolygonLine": "___SPolygonLine_15mev_gg_",
+    "__SPieRect": "___SPieRect_15mev_gg_"
   })
 );
 var clampAngle = function clampAngle2(angle) {
@@ -205,15 +205,76 @@ var RadarRoot = /* @__PURE__ */ function(_Component) {
         type: this.asProps.type,
         offset: this.offset,
         categories: this.asProps.data[this.categoriesKey],
-        angleOffset: this.asProps.angleOffset
+        angleOffset: this.asProps.angleOffset,
+        getIndex: this.getIndex.bind(this),
+        getPolygon: this.getPolygon.bind(this),
+        getPie: this.getPie.bind(this)
       };
     }
+  }, {
+    key: "getIndex",
+    value: function getIndex(point) {
+      var _this2 = this;
+      var _this$asProps3 = this.asProps, data = _this$asProps3.data, type = _this$asProps3.type;
+      var categories = data[this.categoriesKey];
+      var index;
+      if (type === "circle") {
+        index = categories.findIndex(function(_c, i) {
+          return pieContains(_this2.getPie(i), point);
+        });
+      } else {
+        index = categories.findIndex(function(_c, i) {
+          return polygonContains(_this2.getPolygon(i), point);
+        });
+      }
+      return index === -1 ? null : index;
+    }
+  }, {
+    key: "getPolygon",
+    value: function getPolygon(index) {
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, size = _this$asProps4.size, angleOffset = _this$asProps4.angleOffset;
+      var offset = this.offset;
+      var categories = data[this.categoriesKey];
+      var total = categories.length;
+      var diam = Math.min(size[0], size[1]);
+      var radius = diam / 2 - offset;
+      var prevIndex = (index - 1 + total) % total;
+      var nextIndex = (index + 1 + total) % total;
+      var _getRadianPosition = getRadianPosition(prevIndex, radius, total, angleOffset), _getRadianPosition2 = _slicedToArray(_getRadianPosition, 2), prevX1 = _getRadianPosition2[0], prevY1 = _getRadianPosition2[1];
+      var _getRadianPosition3 = getRadianPosition(index, radius, total, angleOffset), _getRadianPosition4 = _slicedToArray(_getRadianPosition3, 2), x = _getRadianPosition4[0], y = _getRadianPosition4[1];
+      var _getRadianPosition5 = getRadianPosition(nextIndex, radius, total, angleOffset), _getRadianPosition6 = _slicedToArray(_getRadianPosition5, 2), nextX1 = _getRadianPosition6[0], nextY1 = _getRadianPosition6[1];
+      return [[0, 0], [(prevX1 + x) / 2, (prevY1 + y) / 2], [x, y], [(nextX1 + x) / 2, (nextY1 + y) / 2]];
+    }
+  }, {
+    key: "getPie",
+    value: function getPie(index) {
+      var _this$asProps5 = this.asProps, data = _this$asProps5.data, size = _this$asProps5.size, angleOffset = _this$asProps5.angleOffset;
+      var categories = data[this.categoriesKey];
+      var offset = this.offset;
+      var angle = Math.PI * 2 / categories.length;
+      var radius = Math.min(size[0], size[1]) / 2 - offset;
+      return [index * angle - angle / 2 - angleOffset, (index + 1) * angle - angle / 2 - angleOffset, radius];
+    }
+  }, {
+    key: "handlerOnClick",
+    value: function handlerOnClick(e) {
+      e.stopPropagation();
+      var _this$asProps6 = this.asProps, rootRef = _this$asProps6.rootRef, size = _this$asProps6.size, onClick = _this$asProps6.onClick;
+      if (!onClick) return;
+      var _eventToPoint = eventToPoint(e, rootRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 2), pointX = _eventToPoint2[0], pointY = _eventToPoint2[1];
+      var r = Math.min(size[0], size[1]) / 2;
+      var centerX = pointX - r;
+      var centerY = pointY - r;
+      var index = this.getIndex([centerX, centerY]);
+      if (index === null) return;
+      onClick(index, e);
+    }
   }, {
     key: "render",
     value: function render() {
       var _ref2;
       var SRadar = this.Element;
-      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, size = _this$asProps3.size, data = _this$asProps3.data, offset = _this$asProps3.offset;
+      var _this$asProps7 = this.asProps, Children = _this$asProps7.Children, styles = _this$asProps7.styles, size = _this$asProps7.size, data = _this$asProps7.data, offset = _this$asProps7.offset;
       var _size = _slicedToArray(size, 2), width = _size[0], height = _size[1];
       this.asProps.dataHintsHandler.establishDataType("indexed-groups");
       var dataKey;
@@ -233,7 +294,8 @@ var RadarRoot = /* @__PURE__ */ function(_Component) {
         "id": this.id,
         "render": "g",
         "childrenPosition": "inside",
-        "transform": "translate(".concat(width / 2, ",").concat(height / 2, ")")
+        "transform": "translate(".concat(width / 2, ",").concat(height / 2, ")"),
+        "onClickCapture": this.handlerOnClick.bind(this)
       }));
     }
   }]);
@@ -254,7 +316,7 @@ var PolygonRoot = /* @__PURE__ */ function(_Component2) {
   return _createClass(PolygonRoot2, [{
     key: "getDotsProps",
     value: function getDotsProps() {
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, scale = _this$asProps4.scale, color = _this$asProps4.color, resolveColor = _this$asProps4.resolveColor, transparent = _this$asProps4.transparent, dataKey = _this$asProps4.dataKey, dataHintsHandler = _this$asProps4.dataHintsHandler, angleOffset = _this$asProps4.angleOffset, patterns = _this$asProps4.patterns;
+      var _this$asProps8 = this.asProps, data = _this$asProps8.data, scale = _this$asProps8.scale, color = _this$asProps8.color, resolveColor = _this$asProps8.resolveColor, transparent = _this$asProps8.transparent, dataKey = _this$asProps8.dataKey, dataHintsHandler = _this$asProps8.dataHintsHandler, angleOffset = _this$asProps8.angleOffset, patterns = _this$asProps8.patterns;
       return {
         data,
         scale,
@@ -270,7 +332,7 @@ var PolygonRoot = /* @__PURE__ */ function(_Component2) {
   }, {
     key: "getLineProps",
     value: function getLineProps() {
-      var _this$asProps5 = this.asProps, d3 = _this$asProps5.d3, data = _this$asProps5.data, color = _this$asProps5.color, resolveColor = _this$asProps5.resolveColor, transparent = _this$asProps5.transparent;
+      var _this$asProps9 = this.asProps, d3 = _this$asProps9.d3, data = _this$asProps9.data, color = _this$asProps9.color, resolveColor = _this$asProps9.resolveColor, transparent = _this$asProps9.transparent;
       return {
         data,
         color,
@@ -283,7 +345,7 @@ var PolygonRoot = /* @__PURE__ */ function(_Component2) {
     key: "render",
     value: function render() {
       var _ref3;
-      var _this$asProps6 = this.asProps, SPolygon = _this$asProps6.Element, styles = _this$asProps6.styles, d3 = _this$asProps6.d3, data = _this$asProps6.data, color = _this$asProps6.color, resolveColor = _this$asProps6.resolveColor, fill = _this$asProps6.fill, uid = _this$asProps6.uid, patterns = _this$asProps6.patterns;
+      var _this$asProps0 = this.asProps, SPolygon = _this$asProps0.Element, styles = _this$asProps0.styles, d3 = _this$asProps0.d3, data = _this$asProps0.data, color = _this$asProps0.color, resolveColor = _this$asProps0.resolveColor, fill = _this$asProps0.fill, uid = _this$asProps0.uid, patterns = _this$asProps0.patterns;
       return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SPolygon, _ref3.cn("SPolygon", {
         "render": "path",
         "d": d3(data),
@@ -328,7 +390,7 @@ function PolygonDots(props) {
     if (value === null || value === void 0) return;
     var radius = scale(value);
     props.dataHintsHandler.describeGroupedValues(categoryKey, "".concat(categoryKey, ".").concat(i));
-    var _getRadianPosition = getRadianPosition(i, radius, data.length, angleOffset), _getRadianPosition2 = _slicedToArray(_getRadianPosition, 2), cx = _getRadianPosition2[0], cy = _getRadianPosition2[1];
+    var _getRadianPosition7 = getRadianPosition(i, radius, data.length, angleOffset), _getRadianPosition8 = _slicedToArray(_getRadianPosition7, 2), cx = _getRadianPosition8[0], cy = _getRadianPosition8[1];
     if (!patterns) {
       var _ref5;
       return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SPolygonDot, _ref5.cn("SPolygonDot", {
@@ -359,23 +421,23 @@ function PolygonDots(props) {
 }
 var AxisRoot = /* @__PURE__ */ function(_Component3) {
   function AxisRoot2() {
-    var _this2;
+    var _this3;
     _classCallCheck(this, AxisRoot2);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _this2 = _callSuper(this, AxisRoot2, [].concat(args));
-    _defineProperty(_this2, "unsubscribeTooltipVisible", null);
-    _defineProperty(_this2, "state", {
+    _this3 = _callSuper(this, AxisRoot2, [].concat(args));
+    _defineProperty(_this3, "unsubscribeTooltipVisible", null);
+    _defineProperty(_this3, "state", {
       activeLineIndex: null
     });
-    _defineProperty(_this2, "handleTooltipRenderingProps", function(_anchorProps, _ref16) {
+    _defineProperty(_this3, "handleTooltipRenderingProps", function(_anchorProps, _ref16) {
       var index = _ref16.index;
-      _this2.setState({
+      _this3.setState({
         activeLineIndex: index
       });
     });
-    return _this2;
+    return _this3;
   }
   _inherits(AxisRoot2, _Component3);
   return _createClass(AxisRoot2, [{
@@ -391,7 +453,7 @@ var AxisRoot = /* @__PURE__ */ function(_Component3) {
     key: "getTicksProps",
     value: function getTicksProps(_ref17) {
       var _ref17$tickSize = _ref17.tickSize, tickSize = _ref17$tickSize === void 0 ? 100 : _ref17$tickSize;
-      var _this$asProps7 = this.asProps, data = _this$asProps7.data, offset = _this$asProps7.offset, categories = _this$asProps7.categories, size = _this$asProps7.size, type = _this$asProps7.type;
+      var _this$asProps1 = this.asProps, data = _this$asProps1.data, offset = _this$asProps1.offset, categories = _this$asProps1.categories, size = _this$asProps1.size, type = _this$asProps1.type;
       var radius = Math.min(size[0], size[1]) / 2 - offset;
       return {
         type,
@@ -406,7 +468,7 @@ var AxisRoot = /* @__PURE__ */ function(_Component3) {
     key: "getLabelsProps",
     value: function getLabelsProps(_ref18) {
       var _ref18$labelOffset = _ref18.labelOffset, labelOffset = _ref18$labelOffset === void 0 ? 10 : _ref18$labelOffset;
-      var _this$asProps8 = this.asProps, offset = _this$asProps8.offset, categories = _this$asProps8.categories, textSize = _this$asProps8.textSize, angleOffset = _this$asProps8.angleOffset;
+      var _this$asProps10 = this.asProps, offset = _this$asProps10.offset, categories = _this$asProps10.categories, textSize = _this$asProps10.textSize, angleOffset = _this$asProps10.angleOffset;
       return {
         categories,
         textSize,
@@ -430,7 +492,7 @@ var AxisRoot = /* @__PURE__ */ function(_Component3) {
     key: "render",
     value: function render() {
       var _ref7;
-      var _this$asProps9 = this.asProps, SAxis = _this$asProps9.Element, styles = _this$asProps9.styles, categories = _this$asProps9.categories, size = _this$asProps9.size, offset = _this$asProps9.offset, type = _this$asProps9.type, angleOffset = _this$asProps9.angleOffset;
+      var _this$asProps11 = this.asProps, SAxis = _this$asProps11.Element, styles = _this$asProps11.styles, categories = _this$asProps11.categories, size = _this$asProps11.size, offset = _this$asProps11.offset, type = _this$asProps11.type, angleOffset = _this$asProps11.angleOffset;
       var activeLineIndex = this.state.activeLineIndex;
       var radius = Math.min(size[0], size[1]) / 2 - offset;
       var total = categories.length;
@@ -443,7 +505,7 @@ var AxisRoot = /* @__PURE__ */ function(_Component3) {
         "render": "path",
         "d": this.createLineRadial(radius, total)(categories)
       })), categories.map(function(_category, i) {
-        var _getRadianPosition3 = getRadianPosition(i, radius, total, angleOffset), _getRadianPosition4 = _slicedToArray(_getRadianPosition3, 2), x = _getRadianPosition4[0], y = _getRadianPosition4[1];
+        var _getRadianPosition9 = getRadianPosition(i, radius, total, angleOffset), _getRadianPosition0 = _slicedToArray(_getRadianPosition9, 2), x = _getRadianPosition0[0], y = _getRadianPosition0[1];
         var _sstyled$cn = sstyled(styles).cn("SAxisLine", {
           active: activeLineIndex === i
         }), className = _sstyled$cn.className;
@@ -493,7 +555,7 @@ function AxisLabels(props) {
   var SAxisLabel = props.Element, styles = props.styles, textSize = props.textSize, size = props.size, offset = props.offset, categories = props.categories, angleOffset = props.angleOffset;
   var radius = Math.min(size[0], size[1]) / 2 - offset;
   return categories.map(function(category, i) {
-    var _getRadianPosition5 = getRadianPosition(i, radius, categories.length, angleOffset), _getRadianPosition6 = _slicedToArray(_getRadianPosition5, 2), x = _getRadianPosition6[0], y = _getRadianPosition6[1];
+    var _getRadianPosition1 = getRadianPosition(i, radius, categories.length, angleOffset), _getRadianPosition10 = _slicedToArray(_getRadianPosition1, 2), x = _getRadianPosition10[0], y = _getRadianPosition10[1];
     var _getLabelPlacement = getLabelPlacement(i, categories.length, angleOffset), _getLabelPlacement2 = _slicedToArray(_getLabelPlacement, 2), xDirection = _getLabelPlacement2[0], yDirection = _getLabelPlacement2[1];
     if (typeof category === "string") {
       var _ref9;
@@ -529,27 +591,27 @@ function AxisLabels(props) {
 }
 var Hover = /* @__PURE__ */ function(_Component4) {
   function Hover2() {
-    var _this3;
+    var _this4;
     _classCallCheck(this, Hover2);
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-    _this3 = _callSuper(this, Hover2, [].concat(args));
-    _defineProperty(_this3, "state", {
+    _this4 = _callSuper(this, Hover2, [].concat(args));
+    _defineProperty(_this4, "state", {
       index: null
     });
-    _defineProperty(_this3, "virtualElement", canUseDOM() ? document.createElement("div") : {});
-    _defineProperty(_this3, "unsubscribeMouseMoveRoot", null);
-    _defineProperty(_this3, "unsubscribeMouseLeaveRoot", null);
-    _defineProperty(_this3, "handlerMouseMoveRoot", trottle(function(e) {
-      var _this3$asProps = _this3.asProps, eventEmitter = _this3$asProps.eventEmitter, size = _this3$asProps.size, rootRef = _this3$asProps.rootRef, patterns = _this3$asProps.patterns;
+    _defineProperty(_this4, "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(_this4, "unsubscribeMouseMoveRoot", null);
+    _defineProperty(_this4, "unsubscribeMouseLeaveRoot", null);
+    _defineProperty(_this4, "handlerMouseMoveRoot", trottle(function(e) {
+      var _this4$asProps = _this4.asProps, eventEmitter = _this4$asProps.eventEmitter, size = _this4$asProps.size, rootRef = _this4$asProps.rootRef, patterns = _this4$asProps.patterns, getIndex = _this4$asProps.getIndex;
       var point = eventToPoint(e, rootRef.current);
       var diam = Math.min(size[0], size[1]);
       var centerX = point[0] - diam / 2;
       var centerY = point[1] - diam / 2;
       var clientX = e.clientX, clientY = e.clientY;
-      var index = _this3.getIndex([centerX, centerY]);
-      _this3.setState({
+      var index = getIndex([centerX, centerY]);
+      _this4.setState({
         index
       }, function() {
         eventEmitter.emit("setTooltipPosition", clientX, clientY);
@@ -560,14 +622,14 @@ var Hover = /* @__PURE__ */ function(_Component4) {
         eventEmitter.emit("setTooltipVisible", index !== null);
       });
     }));
-    _defineProperty(_this3, "handlerMouseLeaveRoot", trottle(function() {
-      _this3.setState({
+    _defineProperty(_this4, "handlerMouseLeaveRoot", trottle(function() {
+      _this4.setState({
         index: null
       }, function() {
-        _this3.asProps.eventEmitter.emit("setTooltipVisible", false);
+        _this4.asProps.eventEmitter.emit("setTooltipVisible", false);
       });
     }));
-    return _this3;
+    return _this4;
   }
   _inherits(Hover2, _Component4);
   return _createClass(Hover2, [{
@@ -586,45 +648,6 @@ var Hover = /* @__PURE__ */ function(_Component4) {
         };
       };
     }
-  }, {
-    key: "getPolygon",
-    value: function getPolygon(index) {
-      var _this$asProps0 = this.asProps, categories = _this$asProps0.categories, size = _this$asProps0.size, offset = _this$asProps0.offset, angleOffset = _this$asProps0.angleOffset;
-      var total = categories.length;
-      var diam = Math.min(size[0], size[1]);
-      var radius = diam / 2 - offset;
-      var prevIndex = (index - 1 + total) % total;
-      var nextIndex = (index + 1 + total) % total;
-      var _getRadianPosition7 = getRadianPosition(prevIndex, radius, total, angleOffset), _getRadianPosition8 = _slicedToArray(_getRadianPosition7, 2), prevX1 = _getRadianPosition8[0], prevY1 = _getRadianPosition8[1];
-      var _getRadianPosition9 = getRadianPosition(index, radius, total, angleOffset), _getRadianPosition0 = _slicedToArray(_getRadianPosition9, 2), x = _getRadianPosition0[0], y = _getRadianPosition0[1];
-      var _getRadianPosition1 = getRadianPosition(nextIndex, radius, total, angleOffset), _getRadianPosition10 = _slicedToArray(_getRadianPosition1, 2), nextX1 = _getRadianPosition10[0], nextY1 = _getRadianPosition10[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$asProps1 = this.asProps, categories = _this$asProps1.categories, size = _this$asProps1.size, offset = _this$asProps1.offset, angleOffset = _this$asProps1.angleOffset;
-      var angle = Math.PI * 2 / categories.length;
-      var radius = Math.min(size[0], size[1]) / 2 - offset;
-      return [index * angle - angle / 2 - angleOffset, (index + 1) * angle - angle / 2 - angleOffset, radius];
-    }
-  }, {
-    key: "getIndex",
-    value: function getIndex(point) {
-      var _this4 = this;
-      var _this$asProps10 = this.asProps, categories = _this$asProps10.categories, type = _this$asProps10.type;
-      var index;
-      if (type === "circle") {
-        index = categories.findIndex(function(_c, i) {
-          return pieContains(_this4.getPie(i), point);
-        });
-      } else {
-        index = categories.findIndex(function(_c, i) {
-          return polygonContains(_this4.getPolygon(i), point);
-        });
-      }
-      return index === -1 ? null : index;
-    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -649,13 +672,13 @@ var Hover = /* @__PURE__ */ function(_Component4) {
   }, {
     key: "render",
     value: function render() {
-      var _this$asProps11 = this.asProps, styles = _this$asProps11.styles, type = _this$asProps11.type;
+      var _this$asProps12 = this.asProps, styles = _this$asProps12.styles, type = _this$asProps12.type, getPie = _this$asProps12.getPie, getPolygon = _this$asProps12.getPolygon;
       var index = this.state.index;
       var SPieRect = this.Element;
       if (index !== null) {
         if (type === "circle") {
           var _ref0;
-          var _this$getPie = this.getPie(index), _this$getPie2 = _slicedToArray(_this$getPie, 3), startAngle = _this$getPie2[0], endAngle = _this$getPie2[1], radius = _this$getPie2[2];
+          var _getPie = getPie(index), _getPie2 = _slicedToArray(_getPie, 3), startAngle = _getPie2[0], endAngle = _getPie2[1], radius = _getPie2[2];
           var circle = arc().innerRadius(0).outerRadius(radius).startAngle(startAngle).endAngle(endAngle);
           return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SPieRect, _ref0.cn("SPieRect", {
             "render": "path",
@@ -665,7 +688,7 @@ var Hover = /* @__PURE__ */ function(_Component4) {
           var _ref1;
           return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(SPieRect, _ref1.cn("SPieRect", {
             "render": "path",
-            "d": line()(this.getPolygon(index))
+            "d": line()(getPolygon(index))
           }));
         }
       }

package/lib/esm/RadialTree.mjs

@@ -28,22 +28,22 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SRadian_8zonu_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_8zonu_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_8zonu_gg_.__stroke_8zonu_gg_{stroke:var(--stroke_8zonu)}.___SLine_8zonu_gg_.__transparent_8zonu_gg_{opacity:.3}.___SCap_8zonu_gg_{transition:r .1s}.___SCap_8zonu_gg_.__pattern_8zonu_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:1px}.___SCap_8zonu_gg_.__transparent_8zonu_gg_,.___SIcon_8zonu_gg_.__transparent_8zonu_gg_,.___SLabel_8zonu_gg_.__transparent_8zonu_gg_{opacity:.3}.___SLabel_8zonu_gg_{fill:var(--color_8zonu)}@media (hover:hover){.___SRadian_8zonu_gg_:hover .___SLabel_8zonu_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_8zonu_gg_{transition:none}}",
+    ".___SRadian_zc1qp_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_zc1qp_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_zc1qp_gg_.__stroke_zc1qp_gg_{stroke:var(--stroke_zc1qp)}.___SLine_zc1qp_gg_.__transparent_zc1qp_gg_{opacity:.3}.___SCap_zc1qp_gg_{transition:r .1s}.___SCap_zc1qp_gg_.__pattern_zc1qp_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:1px}.___SCap_zc1qp_gg_.__transparent_zc1qp_gg_,.___SIcon_zc1qp_gg_.__transparent_zc1qp_gg_,.___SLabel_zc1qp_gg_.__transparent_zc1qp_gg_{opacity:.3}.___SLabel_zc1qp_gg_{fill:var(--color_zc1qp)}@media (hover:hover){.___SRadian_zc1qp_gg_:hover .___SLabel_zc1qp_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_zc1qp_gg_{transition:none}}",
     /*__inner_css_end__*/
-    "8zonu_gg_"
+    "zc1qp_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SRadian": "___SRadian_8zonu_gg_",
-    "__SLine": "___SLine_8zonu_gg_",
-    "_stroke": "__stroke_8zonu_gg_",
-    "--stroke": "--stroke_8zonu",
-    "_transparent": "__transparent_8zonu_gg_",
-    "__SCap": "___SCap_8zonu_gg_",
-    "_pattern": "__pattern_8zonu_gg_",
-    "__SIcon": "___SIcon_8zonu_gg_",
-    "__SLabel": "___SLabel_8zonu_gg_",
-    "--color": "--color_8zonu",
-    "__SLineCap": "___SLineCap_8zonu_gg_"
+    "__SRadian": "___SRadian_zc1qp_gg_",
+    "__SLine": "___SLine_zc1qp_gg_",
+    "_stroke": "__stroke_zc1qp_gg_",
+    "--stroke": "--stroke_zc1qp",
+    "_transparent": "__transparent_zc1qp_gg_",
+    "__SCap": "___SCap_zc1qp_gg_",
+    "_pattern": "__pattern_zc1qp_gg_",
+    "__SIcon": "___SIcon_zc1qp_gg_",
+    "__SLabel": "___SLabel_zc1qp_gg_",
+    "--color": "--color_zc1qp",
+    "__SLineCap": "___SLineCap_zc1qp_gg_"
   })
 );
 var baseAngle = -Math.PI / 2;

package/lib/esm/Reference.mjs

@@ -20,22 +20,22 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SReferenceLine_13tt9_gg_{fill:none;stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___STitle_13tt9_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, #6c6e79);transform-origin:var(--transform-origin_13tt9)}.___STitle_13tt9_gg_._position_top_13tt9_gg_{text-anchor:middle}.___STitle_13tt9_gg_._position_bottom_13tt9_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_13tt9_gg_._position_left_13tt9_gg_,.___STitle_13tt9_gg_._position_right_13tt9_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___SBackground_13tt9_gg_{fill:var(--intergalactic-chart-grid-period-bg, rgba(196, 199, 207, 0.2))}.___SStripes_13tt9_gg_{fill:var(--fill_13tt9)}.___SStripesPatternPath_13tt9_gg_{stroke:var(--intergalactic-chart-grid-period-pattern, rgba(25, 27, 35, 0.15));stroke-width:1px}",
+    ".___SReferenceLine_uwwsc_gg_{fill:none;stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___STitle_uwwsc_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, #6c6e79);transform-origin:var(--transform-origin_uwwsc)}.___STitle_uwwsc_gg_._position_top_uwwsc_gg_{text-anchor:middle}.___STitle_uwwsc_gg_._position_bottom_uwwsc_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_uwwsc_gg_._position_left_uwwsc_gg_,.___STitle_uwwsc_gg_._position_right_uwwsc_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___SBackground_uwwsc_gg_{fill:var(--intergalactic-chart-grid-period-bg, rgba(196, 199, 207, 0.2))}.___SStripes_uwwsc_gg_{fill:var(--fill_uwwsc)}.___SStripesPatternPath_uwwsc_gg_{stroke:var(--intergalactic-chart-grid-period-pattern, rgba(25, 27, 35, 0.15));stroke-width:1px}",
     /*__inner_css_end__*/
-    "13tt9_gg_"
+    "uwwsc_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SReferenceLine": "___SReferenceLine_13tt9_gg_",
-    "__STitle": "___STitle_13tt9_gg_",
-    "--transform-origin": "--transform-origin_13tt9",
-    "_position_top": "_position_top_13tt9_gg_",
-    "_position_bottom": "_position_bottom_13tt9_gg_",
-    "_position_right": "_position_right_13tt9_gg_",
-    "_position_left": "_position_left_13tt9_gg_",
-    "__SBackground": "___SBackground_13tt9_gg_",
-    "__SStripes": "___SStripes_13tt9_gg_",
-    "--fill": "--fill_13tt9",
-    "__SStripesPatternPath": "___SStripesPatternPath_13tt9_gg_"
+    "__SReferenceLine": "___SReferenceLine_uwwsc_gg_",
+    "__STitle": "___STitle_uwwsc_gg_",
+    "--transform-origin": "--transform-origin_uwwsc",
+    "_position_top": "_position_top_uwwsc_gg_",
+    "_position_bottom": "_position_bottom_uwwsc_gg_",
+    "_position_right": "_position_right_uwwsc_gg_",
+    "_position_left": "_position_left_uwwsc_gg_",
+    "__SBackground": "___SBackground_uwwsc_gg_",
+    "__SStripes": "___SStripes_uwwsc_gg_",
+    "--fill": "--fill_uwwsc",
+    "__SStripesPatternPath": "___SStripesPatternPath_uwwsc_gg_"
   })
 );
 var side2direction = {