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

package/lib/esm/Donut.mjs

@@ -2,46 +2,45 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import { Component, sstyled as sstyled$1, assignProps } from "@semcore/core";
-import React from "react";
-import { arc, pie } from "d3-shape";
+import { sstyled, Component, assignProps } from "@semcore/core";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { interpolate } from "d3-interpolate";
+import { arc, pie } from "d3-shape";
 import { transition } from "d3-transition";
-import canUseDOM from "@semcore/utils/lib/canUseDOM";
-import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import React from "react";
 import createElement from "./createElement.mjs";
-import { getChartDefaultColorName } from "./utils.mjs";
-import Tooltip from "./Tooltip.mjs";
 import { PatternFill } from "./Pattern.mjs";
-var _excluded = ["Element", "styles", "d3Arc", "data", "color", "$animationActivePie", "active", "d3ArcOut", "name", "dataKey", "dataHintsHandler", "transparent", "innerRadius", "outerRadius", "resolveColor", "halfsize", "uid", "patterns"];
+import Tooltip from "./Tooltip.mjs";
+import { getChartDefaultColorName } from "./utils.mjs";
+var _excluded = ["Element", "styles", "d3Arc", "data", "color", "$animationActivePie", "active", "d3ArcOut", "name", "dataKey", "dataHintsHandler", "transparent", "innerRadius", "outerRadius", "resolveColor", "halfsize", "uid", "patterns", "onClick", "onClickPieRoot"];
 /*!__reshadow-styles__:"./style/donut.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPie_8dnpi_gg_{stroke:var(--intergalactic-chart-grid-border, #fff);fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219))}.___SPie_8dnpi_gg_.__color_8dnpi_gg_{fill:var(--color_8dnpi)}.___SPie_8dnpi_gg_.__pattern_8dnpi_gg_.__color_8dnpi_gg_{fill:var(--pattern_8dnpi);stroke:var(--color_8dnpi);stroke-width:1px}.___SPie_8dnpi_gg_.__transparent_8dnpi_gg_{opacity:.3}.___SEmptyData_8dnpi_gg_{fill:var(--intergalactic-chart-palette-order-null, rgb(221, 222, 222))}.___SEmptyData_8dnpi_gg_.__color_8dnpi_gg_{fill:var(--color_8dnpi)}.___SLabel_8dnpi_gg_{text-anchor:middle;vertical-anchor:middle;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}",
+    ".___SPie_tg3q1_gg_{stroke:var(--intergalactic-chart-grid-border, #fff);fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219))}.___SPie_tg3q1_gg_.__color_tg3q1_gg_{fill:var(--color_tg3q1)}.___SPie_tg3q1_gg_.__pattern_tg3q1_gg_.__color_tg3q1_gg_{fill:var(--pattern_tg3q1);stroke:var(--color_tg3q1);stroke-width:1px}.___SPie_tg3q1_gg_.__transparent_tg3q1_gg_{opacity:.3}.___SEmptyData_tg3q1_gg_{fill:var(--intergalactic-chart-palette-order-null, rgb(221, 222, 222))}.___SEmptyData_tg3q1_gg_.__color_tg3q1_gg_{fill:var(--color_tg3q1)}.___SLabel_tg3q1_gg_{text-anchor:middle;vertical-anchor:middle;font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}",
     /*__inner_css_end__*/
-    "8dnpi_gg_"
+    "tg3q1_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPie": "___SPie_8dnpi_gg_",
-    "_color": "__color_8dnpi_gg_",
-    "--color": "--color_8dnpi",
-    "_pattern": "__pattern_8dnpi_gg_",
-    "--pattern": "--pattern_8dnpi",
-    "_transparent": "__transparent_8dnpi_gg_",
-    "__SEmptyData": "___SEmptyData_8dnpi_gg_",
-    "__SLabel": "___SLabel_8dnpi_gg_"
+    "__SPie": "___SPie_tg3q1_gg_",
+    "_color": "__color_tg3q1_gg_",
+    "--color": "--color_tg3q1",
+    "_pattern": "__pattern_tg3q1_gg_",
+    "--pattern": "--pattern_tg3q1",
+    "_transparent": "__transparent_tg3q1_gg_",
+    "__SEmptyData": "___SEmptyData_tg3q1_gg_",
+    "__SLabel": "___SLabel_tg3q1_gg_"
   })
 );
-var DEFAULT_INSTANCE = Symbol("DEFAULT_INSTANCE");
+var DEFAULT_INSTANCE = /* @__PURE__ */ Symbol("DEFAULT_INSTANCE");
 function transitionAnglePie(_ref6) {
   var selector = _ref6.selector, duration = _ref6.duration, halfsize = _ref6.halfsize, d3Arc = _ref6.d3Arc, d3ArcOut = _ref6.d3ArcOut, arcs = _ref6.arcs, activeIndexPie = _ref6.activeIndexPie;
   return transition().selection().selectAll(selector).interrupt().transition().duration(duration).attrTween("d", function(_, ind) {
@@ -87,31 +86,29 @@ function getOuterRadius(_ref8) {
   var minORmax = halfsize ? Math.max : Math.min;
   return minORmax(width - increaseFactor * 2, height - increaseFactor * 2) / 2;
 }
-var DonutRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(DonutRoot2, _Component);
-  var _super = _createSuper(DonutRoot2);
+var DonutRoot = /* @__PURE__ */ (function(_Component) {
   function DonutRoot2() {
     var _this;
     _classCallCheck(this, DonutRoot2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "virtualElement", canUseDOM() ? document.createElement("div") : {});
-    _defineProperty(_assertThisInitialized(_this), "activeIndexPie", void 0);
-    _defineProperty(_assertThisInitialized(_this), "canAnimatedHover", false);
-    _defineProperty(_assertThisInitialized(_this), "bindHandlerTooltip", function(visible, props, tooltipProps) {
+    _this = _callSuper(this, DonutRoot2, [].concat(args));
+    _defineProperty(_this, "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(_this, "activeIndexPie", void 0);
+    _defineProperty(_this, "canAnimatedHover", false);
+    _defineProperty(_this, "bindHandlerTooltip", function(visible, props, tooltipProps) {
       return function(_ref9) {
         var clientX = _ref9.clientX, clientY = _ref9.clientY;
-        var eventEmitter = _this.asProps.eventEmitter;
-        eventEmitter.emit("setTooltipPosition", clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps", props, tooltipProps);
-        eventEmitter.emit("setTooltipVisible", visible);
+        var _this$asProps = _this.asProps, eventEmitter = _this$asProps.eventEmitter, plotId = _this$asProps.plotId;
+        eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), props, tooltipProps);
+        eventEmitter.emit("setTooltipVisible_".concat(plotId), visible);
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "animationActivePie", function(_ref10) {
-      var data = _ref10.data, active = _ref10.active, selector = _ref10.selector, element = _ref10.element;
-      var _this$asProps = _this.asProps, duration = _this$asProps.duration, innerRadius = _this$asProps.innerRadius, d3Arc = _this$asProps.d3Arc, paddingAngle = _this$asProps.paddingAngle;
+    _defineProperty(_this, "animationActivePie", function(_ref0) {
+      var data = _ref0.data, active = _ref0.active, selector = _ref0.selector, element = _ref0.element;
+      var _this$asProps2 = _this.asProps, duration = _this$asProps2.duration, innerRadius = _this$asProps2.innerRadius, d3Arc = _this$asProps2.d3Arc, paddingAngle = _this$asProps2.paddingAngle;
       var outerRadius = d3Arc.outerRadius()();
       var outerRadiusStartEnd = active ? [+element.dataset["currentRadius"] || outerRadius, outerRadius + increaseFactor] : [+element.dataset["currentRadius"] || outerRadius, outerRadius];
       if (_this.canAnimatedHover && duration > 0) {
@@ -126,11 +123,11 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "animationTimeout", null);
-    _defineProperty(_assertThisInitialized(_this), "animationUpdatePie", function() {
+    _defineProperty(_this, "animationTimeout", null);
+    _defineProperty(_this, "animationUpdatePie", function() {
       clearTimeout(_this.animationTimeout);
       _this.animationTimeout = setTimeout(function() {
-        var _this$asProps2 = _this.asProps, duration = _this$asProps2.duration, d3Arc = _this$asProps2.d3Arc, halfsize = _this$asProps2.halfsize, d3ArcOut = _this$asProps2.d3ArcOut;
+        var _this$asProps3 = _this.asProps, duration = _this$asProps3.duration, d3Arc = _this$asProps3.d3Arc, halfsize = _this$asProps3.halfsize, d3ArcOut = _this$asProps3.d3ArcOut;
         _this.canAnimatedHover = false;
         if (duration > 0) {
           transitionAnglePie({
@@ -151,10 +148,11 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
     });
     return _this;
   }
-  _createClass(DonutRoot2, [{
+  _inherits(DonutRoot2, _Component);
+  return _createClass(DonutRoot2, [{
     key: "id",
     get: function get() {
-      var _this$asProps3 = this.asProps, uid = _this$asProps3.uid, id = _this$asProps3.id;
+      var _this$asProps4 = this.asProps, uid = _this$asProps4.uid, id = _this$asProps4.id;
       return id || uid;
     }
   }, {
@@ -176,7 +174,7 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getArcs",
     value: function getArcs() {
-      var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, data = _this$asProps4.data, d3Pie = _this$asProps4.d3Pie;
+      var _this$asProps5 = this.asProps, Children = _this$asProps5.Children, data = _this$asProps5.data, d3Pie = _this$asProps5.d3Pie;
       var pieData = Object.entries(data);
       if (d3Pie[DEFAULT_INSTANCE]) {
         var keys = React.Children.toArray(getOriginChildren(Children)).reduce(function(acc, child) {
@@ -185,12 +183,12 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
           }
           return acc;
         }, []);
-        pieData = Object.entries(data).filter(function(_ref11) {
-          var _ref12 = _slicedToArray(_ref11, 2), key = _ref12[0], value = _ref12[1];
+        pieData = Object.entries(data).filter(function(_ref1) {
+          var _ref10 = _slicedToArray(_ref1, 2), key = _ref10[0], value = _ref10[1];
           return keys.includes(key) && value > 0;
-        }).sort(function(_ref13, _ref14) {
-          var _ref15 = _slicedToArray(_ref13, 1), a = _ref15[0];
-          var _ref16 = _slicedToArray(_ref14, 1), b = _ref16[0];
+        }).sort(function(_ref11, _ref12) {
+          var _ref13 = _slicedToArray(_ref11, 1), a = _ref13[0];
+          var _ref14 = _slicedToArray(_ref12, 1), b = _ref14[0];
           return keys.indexOf(a) > keys.indexOf(b) ? 1 : -1;
         });
       }
@@ -204,11 +202,22 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
       });
       return d3Pie(pieData);
     }
+  }, {
+    key: "handlerOnClick",
+    value: function handlerOnClick(key) {
+      var _this2 = this;
+      return function(e) {
+        e.stopPropagation();
+        var onClick = _this2.asProps.onClick;
+        if (!onClick) return;
+        onClick(key, e);
+      };
+    }
   }, {
     key: "getPieProps",
     value: function getPieProps(props, index) {
-      var _this2 = this;
-      var _this$asProps5 = this.asProps, d3Arc = _this$asProps5.d3Arc, d3ArcOut = _this$asProps5.d3ArcOut, innerRadius = _this$asProps5.innerRadius, outerRadius = _this$asProps5.outerRadius, halfsize = _this$asProps5.halfsize, resolveColor = _this$asProps5.resolveColor, uid = _this$asProps5.uid, patterns = _this$asProps5.patterns;
+      var _this3 = this;
+      var _this$asProps6 = this.asProps, d3Arc = _this$asProps6.d3Arc, d3ArcOut = _this$asProps6.d3ArcOut, innerRadius = _this$asProps6.innerRadius, outerRadius = _this$asProps6.outerRadius, halfsize = _this$asProps6.halfsize, resolveColor = _this$asProps6.resolveColor, uid = _this$asProps6.uid, patterns = _this$asProps6.patterns;
       var active = props.active;
       var data = this.arcs.find(function(arc2) {
         return arc2.data[0] === props.dataKey;
@@ -241,7 +250,7 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
         onMouseLeave: this.bindHandlerTooltip(false, props, tooltipProps),
         onMouseOver: function onMouseOver(e) {
           if (!active) {
-            _this2.animationActivePie({
+            _this3.animationActivePie({
               active: true,
               data,
               selector: '[d="'.concat(e.target.getAttribute("d"), '"]'),
@@ -251,14 +260,15 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
         },
         onMouseOut: function onMouseOut(e) {
           if (!active) {
-            _this2.animationActivePie({
+            _this3.animationActivePie({
               active: false,
               data,
               selector: '[d="'.concat(e.target.getAttribute("d"), '"]'),
               element: e.target
             });
           }
-        }
+        },
+        onClickPieRoot: this.handlerOnClick(props.dataKey)
       };
     }
   }, {
@@ -285,7 +295,7 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$asProps6 = this.asProps, halfsize = _this$asProps6.halfsize, size = _this$asProps6.size;
+      var _this$asProps7 = this.asProps, halfsize = _this$asProps7.halfsize, size = _this$asProps7.size;
       this.asProps.dataHintsHandler.establishDataType("values-set");
       var _size2 = _slicedToArray(size, 2), width = _size2[0], height = _size2[1];
       var Element = this.Element;
@@ -300,13 +310,12 @@ var DonutRoot = /* @__PURE__ */ function(_Component) {
       });
     }
   }]);
-  return DonutRoot2;
-}(Component);
+})(Component);
 _defineProperty(DonutRoot, "displayName", "Donut");
 _defineProperty(DonutRoot, "style", style);
 _defineProperty(DonutRoot, "enhance", [uniqueIDEnhancement()]);
-_defineProperty(DonutRoot, "defaultProps", function(_ref20) {
-  var _ref20$innerRadius = _ref20.innerRadius, innerRadius = _ref20$innerRadius === void 0 ? 0 : _ref20$innerRadius, _ref20$paddingAngle = _ref20.paddingAngle, paddingAngle = _ref20$paddingAngle === void 0 ? 0 : _ref20$paddingAngle, outerRadius = _ref20.outerRadius, _ref20$halfsize = _ref20.halfsize, halfsize = _ref20$halfsize === void 0 ? false : _ref20$halfsize, size = _ref20.$rootProps.size;
+_defineProperty(DonutRoot, "defaultProps", function(_ref18) {
+  var _ref18$innerRadius = _ref18.innerRadius, innerRadius = _ref18$innerRadius === void 0 ? 0 : _ref18$innerRadius, _ref18$paddingAngle = _ref18.paddingAngle, paddingAngle = _ref18$paddingAngle === void 0 ? 0 : _ref18$paddingAngle, outerRadius = _ref18.outerRadius, _ref18$halfsize = _ref18.halfsize, halfsize = _ref18$halfsize === void 0 ? false : _ref18$halfsize, size = _ref18.$rootProps.size;
   var d3Arc = arc().outerRadius(outerRadius || getOuterRadius({
     size,
     halfsize,
@@ -316,8 +325,8 @@ _defineProperty(DonutRoot, "defaultProps", function(_ref20) {
     size,
     halfsize
   })) + increaseFactor).innerRadius(innerRadius).padAngle(paddingAngle);
-  var d3Pie = pie().sort(null).value(function(_ref21) {
-    var _ref22 = _slicedToArray(_ref21, 2), value = _ref22[1];
+  var d3Pie = pie().sort(null).value(function(_ref19) {
+    var _ref20 = _slicedToArray(_ref19, 2), value = _ref20[1];
     return value;
   });
   d3Pie[DEFAULT_INSTANCE] = true;
@@ -329,12 +338,13 @@ _defineProperty(DonutRoot, "defaultProps", function(_ref20) {
     d3Arc,
     d3ArcOut,
     duration: 500,
-    paddingAngle
+    paddingAngle,
+    innerRadius
   };
 });
-function Pie(_ref17) {
+function Pie(_ref15) {
   var _ref2;
-  var SPie = _ref17.Element, styles = _ref17.styles, d3Arc = _ref17.d3Arc, data = _ref17.data, color = _ref17.color, $animationActivePie = _ref17.$animationActivePie, active = _ref17.active, d3ArcOut = _ref17.d3ArcOut, name = _ref17.name, dataKey = _ref17.dataKey, dataHintsHandler = _ref17.dataHintsHandler, transparent = _ref17.transparent, innerRadius = _ref17.innerRadius, outerRadius = _ref17.outerRadius, resolveColor = _ref17.resolveColor, halfsize = _ref17.halfsize, uid = _ref17.uid, patterns = _ref17.patterns, other = _objectWithoutProperties(_ref17, _excluded);
+  var SPie = _ref15.Element, styles = _ref15.styles, d3Arc = _ref15.d3Arc, data = _ref15.data, color = _ref15.color, $animationActivePie = _ref15.$animationActivePie, active = _ref15.active, d3ArcOut = _ref15.d3ArcOut, name = _ref15.name, dataKey = _ref15.dataKey, dataHintsHandler = _ref15.dataHintsHandler, transparent = _ref15.transparent, innerRadius = _ref15.innerRadius, outerRadius = _ref15.outerRadius, resolveColor = _ref15.resolveColor, halfsize = _ref15.halfsize, uid = _ref15.uid, patterns = _ref15.patterns, onClick = _ref15.onClick, onClickPieRoot = _ref15.onClickPieRoot, other = _objectWithoutProperties(_ref15, _excluded);
   var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), isMount = _React$useState2[0], setIsMount = _React$useState2[1];
   var pieRef = React.useRef(null);
   React.useEffect(function() {
@@ -360,13 +370,14 @@ function Pie(_ref17) {
   if (!data) return null;
   dataHintsHandler.establishDataType("values-set");
   dataHintsHandler.describeValueEntity(dataKey, name);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPie, _ref2.cn("SPie", {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SPie, _ref2.cn("SPie", {
     "render": "path",
     "ref": pieRef,
     "color": resolveColor(color),
     "pattern": patterns ? "url(#".concat(uid, "-pattern)") : void 0,
     "d": active ? d3ArcOut(data) : d3Arc(data),
-    "transparent": transparent
+    "transparent": transparent,
+    "use:onClick": callAllEventHandlers(onClickPieRoot, onClick)
   }))), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref2.cn("PatternFill", {
     "id": "".concat(uid, "-pattern"),
     "patternKey": color,
@@ -374,10 +385,10 @@ function Pie(_ref17) {
     "patterns": patterns
   })));
 }
-function EmptyData(_ref18) {
+function EmptyData(_ref16) {
   var _ref3;
-  var SEmptyData = _ref18.Element, styles = _ref18.styles, d3Arc = _ref18.d3Arc, color = _ref18.color, resolveColor = _ref18.resolveColor;
-  return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SEmptyData, _ref3.cn("SEmptyData", {
+  var SEmptyData = _ref16.Element, styles = _ref16.styles, d3Arc = _ref16.d3Arc, color = _ref16.color, resolveColor = _ref16.resolveColor;
+  return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SEmptyData, _ref3.cn("SEmptyData", {
     "render": "path",
     "color": resolveColor(color),
     "d": d3Arc({
@@ -386,24 +397,25 @@ function EmptyData(_ref18) {
     })
   }));
 }
-function Label(_ref19) {
+function Label(_ref17) {
   var _ref4;
-  var SLabel = _ref19.Element, styles = _ref19.styles, Children = _ref19.Children, children = _ref19.children, label = _ref19.label, dataHintsHandler = _ref19.dataHintsHandler, _ref19$x = _ref19.x, x = _ref19$x === void 0 ? 0 : _ref19$x, _ref19$y = _ref19.y, y = _ref19$y === void 0 ? 0 : _ref19$y;
+  var SLabel = _ref17.Element, styles = _ref17.styles, Children = _ref17.Children, children = _ref17.children, label = _ref17.label, dataHintsHandler = _ref17.dataHintsHandler, _ref17$x = _ref17.x, x = _ref17$x === void 0 ? 0 : _ref17$x, _ref17$y = _ref17.y, y = _ref17$y === void 0 ? 0 : _ref17$y;
   dataHintsHandler.setTitle("vertical", label || children);
-  return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLabel, _ref4.cn("SLabel", {
+  return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SLabel, _ref4.cn("SLabel", {
     "render": "text",
     "x": x,
     "y": y,
     "aria-hidden": true
   }), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})));
 }
-var DonutTooltip = function DonutTooltip2(props) {
+function DonutTooltip(props) {
   var _ref = arguments[0], _ref5;
   var SDonutTooltip = Tooltip;
-  return _ref5 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SDonutTooltip, _ref5.cn("SDonutTooltip", _objectSpread({}, assignProps({
+  return _ref5 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SDonutTooltip, _ref5.cn("SDonutTooltip", _objectSpread({}, assignProps({
     "excludeAnchorProps": true
   }, _ref))));
-};
+}
+;
 var Donut = createElement(DonutRoot, {
   Pie,
   Label,

package/lib/esm/Dots.mjs

@@ -1,38 +1,39 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { sstyled } from "@semcore/utils/lib/core/index";
+import { sstyled } from "@semcore/core";
+import trottle from "@semcore/core/lib/utils/rafTrottle";
 import { bisector } from "d3-array";
 import React from "react";
-import { sstyled as sstyled$1 } from "@semcore/core";
-import trottle from "@semcore/utils/lib/rafTrottle";
 import createElement from "./createElement.mjs";
-import { interpolateValue, eventToPoint, invert, getChartDefaultColorName } from "./utils.mjs";
 import { getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
+import { getChartDefaultColorName, interpolateValue, eventToPoint, invert } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/dot.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SDots_j6j8o_gg_ .___SDot_j6j8o_gg_{transition-duration:var(--duration_j6j8o)}.___SDot_j6j8o_gg_{stroke-width:1px;stroke:var(--intergalactic-chart-grid-border, #fff);fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219));transition-property:cx,cy,x,y;transition-timing-function:ease-in-out}.___SDot_j6j8o_gg_.__hide_j6j8o_gg_{display:none}.___SDot_j6j8o_gg_.__color_j6j8o_gg_{fill:var(--color_j6j8o)}.___SDot_j6j8o_gg_.__transparent_j6j8o_gg_{opacity:.3}",
+    ".___SDots_1s5uq_gg_ .___SDot_1s5uq_gg_{transition-duration:var(--duration_1s5uq)}.___SDot_1s5uq_gg_{stroke-width:1px;stroke:var(--intergalactic-chart-grid-border, #fff);fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219));transition-property:cx,cy,x,y;transition-timing-function:ease-in-out}.___SDot_1s5uq_gg_.__hide_1s5uq_gg_{display:none}.___SDot_1s5uq_gg_.__color_1s5uq_gg_{fill:var(--color_1s5uq)}.___SDot_1s5uq_gg_.__transparent_1s5uq_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "j6j8o_gg_"
+    "1s5uq_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SDot": "___SDot_j6j8o_gg_",
-    "_hide": "__hide_j6j8o_gg_",
-    "_color": "__color_j6j8o_gg_",
-    "--color": "--color_j6j8o",
-    "_transparent": "__transparent_j6j8o_gg_",
-    "__SDots": "___SDots_j6j8o_gg_",
-    "--duration": "--duration_j6j8o"
+    "__SDot": "___SDot_1s5uq_gg_",
+    "_hide": "__hide_1s5uq_gg_",
+    "_color": "__color_1s5uq_gg_",
+    "--color": "--color_1s5uq",
+    "_transparent": "__transparent_1s5uq_gg_",
+    "__SDots": "___SDots_1s5uq_gg_",
+    "--duration": "--duration_1s5uq"
   })
 );
 function Dots(props) {
   var _ref3;
-  var SDot = props.Element, styles = props.styles, color = props.color, d3 = props.d3, x = props.x, y = props.y, eventEmitter = props.eventEmitter, display = props.display, hide = props.hide, rootRef = props.rootRef, scale = props.scale, _props$duration = props.duration, duration = _props$duration === void 0 ? 500 : _props$duration, transparent = props.transparent, _props$radius = props.radius, radiusBase = _props$radius === void 0 ? 4 : _props$radius, resolveColor = props.resolveColor, patterns = props.patterns;
+  var SDot = props.Element, styles = props.styles, color = props.color, d3 = props.d3, x = props.x, y = props.y, eventEmitter = props.eventEmitter, display = props.display, hide = props.hide, rootRef = props.rootRef, scale = props.scale, _props$duration = props.duration, duration = _props$duration === void 0 ? 500 : _props$duration, transparent = props.transparent, _props$radius = props.radius, radiusBase = _props$radius === void 0 ? 4 : _props$radius, resolveColor = props.resolveColor, patterns = props.patterns, onClick = props.onClick;
   var bisect = bisector(function(d) {
     return d[x];
   }).center;
   var _React$useState = React.useState(null), _React$useState2 = _slicedToArray(_React$useState, 2), activeIndex = _React$useState2[0], setActiveIndex = _React$useState2[1];
+  var patternKey = color || getChartDefaultColorName(0);
+  var svgPatternId = "template_".concat(patternKey);
   var data = React.useMemo(function() {
     return props.data.filter(function(item) {
       return item[y] !== interpolateValue;
@@ -47,6 +48,15 @@ function Dots(props) {
   var handlerMouseLeaveRoot = React.useCallback(trottle(function() {
     setActiveIndex(null);
   }), []);
+  var handlerOnClick = React.useCallback(function(e) {
+    e.stopPropagation();
+    if (!onClick) return;
+    var _scale2 = _slicedToArray(scale, 1), xScale = _scale2[0];
+    var _eventToPoint3 = eventToPoint(e, rootRef.current), _eventToPoint4 = _slicedToArray(_eventToPoint3, 1), pX = _eventToPoint4[0];
+    var vX = invert(xScale, pX);
+    var index = bisect(data, vX);
+    onClick(index, e);
+  }, [scale, data, onClick]);
   React.useEffect(function() {
     var unsubscribeMouseMoveRoot = eventEmitter.subscribe("onMouseMoveChart", function(e) {
       e.persist();
@@ -58,6 +68,10 @@ function Dots(props) {
       unsubscribeMouseLeaveRoot();
     };
   }, [eventEmitter, scale, data, x, y]);
+  var _getPatternSymbolSize = getPatternSymbolSize({
+    patternKey,
+    patterns
+  }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
   var dots = data.reduce(function(acc, d, i) {
     var isPrev = d3.defined()(data[i - 1] || {});
     var isNext = d3.defined()(data[i + 1] || {});
@@ -66,14 +80,9 @@ function Dots(props) {
     var radius = radiusBase * (active ? 5 / 4 : 1);
     if (!d3.defined()(d)) return acc;
     if (!visible) return acc;
-    var patternKey = color || getChartDefaultColorName(0);
-    var _getPatternSymbolSize = getPatternSymbolSize({
-      patternKey,
-      patterns
-    }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
     if (!patterns) {
       var _ref;
-      acc.push((_ref = sstyled$1(styles), /* @__PURE__ */ React.createElement(SDot, _ref.cn("SDot", {
+      acc.push((_ref = sstyled(styles), /* @__PURE__ */ React.createElement(SDot, _ref.cn("SDot", {
         "render": "circle",
         "color": resolveColor(color),
         "patternKey": patternKey,
@@ -86,32 +95,39 @@ function Dots(props) {
         "transparent": transparent,
         "cx": d3.x()(d),
         "cy": d3.y()(d),
-        "r": radius
+        "r": radius,
+        "__excludeProps": ["display", "data", "scale"]
       }))));
     } else {
       var _ref2;
-      acc.push((_ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SDot, _ref2.cn("SDot", {
-        "render": PatternSymbol,
-        "color": resolveColor(color),
-        "patternKey": patternKey,
-        "patterns": patterns,
-        "key": "".concat(i),
+      acc.push((_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDot, _ref2.cn("SDot", {
+        "key": i,
+        "render": "use",
+        "href": "#".concat(svgPatternId),
+        "x": width + (d3.x()(d) - width / 2),
+        "y": d3.y()(d) - height / 2,
         "value": d,
+        "transparent": transparent,
+        "radius": radius,
         "visible": visible,
         "active": active,
         "hide": hide,
-        "transparent": transparent,
-        "x": d3.x()(d) - width / 2,
-        "y": d3.y()(d) - height / 2,
-        "radius": radius
+        "__excludeProps": ["display", "data", "scale"]
       }))));
     }
     return acc;
   }, []);
   var SDots = "g";
-  return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SDots, _ref3.cn("SDots", {
-    "duration": "".concat(duration, "ms")
-  }), dots);
+  return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SDots, _ref3.cn("SDots", {
+    "duration": "".concat(duration, "ms"),
+    "onClickCapture": handlerOnClick
+  }), /* @__PURE__ */ React.createElement(PatternSymbol, _ref3.cn("PatternSymbol", {
+    "color": resolveColor(color),
+    "patternKey": color,
+    "id": svgPatternId,
+    "patterns": patterns,
+    "x": -1 * width
+  })), dots);
 }
 Dots.style = style;
 const Dots$1 = createElement(Dots);

package/lib/esm/GroupBar.mjs

@@ -1,24 +1,23 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from "react";
 import { Component } from "@semcore/core";
-import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
-import createElement from "./createElement.mjs";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+import { scaleBand } from "d3-scale";
+import React from "react";
 import Bar from "./Bar.mjs";
+import createElement from "./createElement.mjs";
 import HorizontalBar from "./HorizontalBar.mjs";
-import { scaleBand } from "d3-scale";
 import { scaleToBand, getChartDefaultColorName } from "./utils.mjs";
-var GroupBarRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(GroupBarRoot2, _Component);
-  var _super = _createSuper(GroupBarRoot2);
+var GroupBarRoot = /* @__PURE__ */ (function(_Component) {
   function GroupBarRoot2() {
     _classCallCheck(this, GroupBarRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, GroupBarRoot2, arguments);
   }
-  _createClass(GroupBarRoot2, [{
+  _inherits(GroupBarRoot2, _Component);
+  return _createClass(GroupBarRoot2, [{
     key: "getScaleGroup",
     value: function getScaleGroup() {
       var _this$asProps = this.asProps, Children = _this$asProps.Children, scale = _this$asProps.scale, scaleGroup = _this$asProps.scaleGroup, x = _this$asProps.x;
@@ -39,7 +38,7 @@ var GroupBarRoot = /* @__PURE__ */ function(_Component) {
     key: "getBarProps",
     value: function getBarProps(_ref, index) {
       var y = _ref.y;
-      var _this$asProps2 = this.asProps, x = _this$asProps2.x, _this$asProps2$maxBar = _this$asProps2.maxBarSize, maxBarSize = _this$asProps2$maxBar === void 0 ? Infinity : _this$asProps2$maxBar, patterns = _this$asProps2.patterns;
+      var _this$asProps2 = this.asProps, x = _this$asProps2.x, _this$asProps2$maxBar = _this$asProps2.maxBarSize, maxBarSize = _this$asProps2$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps2$maxBar, patterns = _this$asProps2.patterns;
       var bandWidth = this.scaleGroup.bandwidth();
       var width = Math.min(bandWidth, maxBarSize);
       var offsetX = this.scaleGroup(y) + bandWidth / 2 - width / 2;
@@ -56,7 +55,7 @@ var GroupBarRoot = /* @__PURE__ */ function(_Component) {
     key: "getHorizontalBarProps",
     value: function getHorizontalBarProps(_ref2, index) {
       var x = _ref2.x;
-      var _this$asProps3 = this.asProps, y = _this$asProps3.y, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Infinity : _this$asProps3$maxBar;
+      var _this$asProps3 = this.asProps, y = _this$asProps3.y, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps3$maxBar;
       var bandWidth = this.scaleGroup.bandwidth();
       var height = Math.min(bandWidth, maxBarSize);
       var offsetY = this.scaleGroup(x) + bandWidth / 2 - height / 2;
@@ -82,8 +81,7 @@ var GroupBarRoot = /* @__PURE__ */ function(_Component) {
       });
     }
   }]);
-  return GroupBarRoot2;
-}(Component);
+})(Component);
 _defineProperty(GroupBarRoot, "displayName", "GroupBar");
 var GroupBar = createElement(GroupBarRoot, {
   Bar,