@semcore/d3-chart 3.60.2-prerelease.0 → 3.61.0-prerelease.0

package/lib/esm/Bar.mjs

@@ -1,43 +1,42 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 { sstyled } from "@semcore/utils/lib/core/index";
-import React from "react";
+import { sstyled, Component } from "@semcore/core";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { transition } from "d3-transition";
-import { sstyled as sstyled$1, Component } from "@semcore/core";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
-import createElement from "./createElement.mjs";
+import React from "react";
 import AnimatedClipPath from "./AnimatedClipPath.mjs";
-import { scaleToBand, roundedPath } from "./utils.mjs";
+import createElement from "./createElement.mjs";
 import { PatternFill } from "./Pattern.mjs";
+import { scaleToBand, roundedPath } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/bar.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBar_1rmdr_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1rmdr);transition-timing-function:ease-in-out}.___SBar_1rmdr_gg_.__color_1rmdr_gg_{fill:var(--color_1rmdr)}.___SBar_1rmdr_gg_.__pattern_1rmdr_gg_.__color_1rmdr_gg_{fill:var(--pattern_1rmdr);stroke:var(--color_1rmdr);stroke-width:1px}.___SBar_1rmdr_gg_.__hide_1rmdr_gg_{display:none}.___SBar_1rmdr_gg_.__transparent_1rmdr_gg_{opacity:.3}.___SBackground_1rmdr_gg_.__onClick_1rmdr_gg_,.___SBar_1rmdr_gg_.__onClick_1rmdr_gg_{cursor:pointer}.___SBackground_1rmdr_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1rmdr_gg_{display:flex;justify-content:space-between}.___SBarLabel_1rmdr_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1rmdr_gg_,.___SBarPercent_1rmdr_gg_,.___SBarValue_1rmdr_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1rmdr_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1rmdr_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1rmdr_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SBar_1l5sd_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210));transition-property:height,width,y;transition-duration:var(--duration_1l5sd);transition-timing-function:ease-in-out}.___SBar_1l5sd_gg_.__color_1l5sd_gg_{fill:var(--color_1l5sd)}.___SBar_1l5sd_gg_.__pattern_1l5sd_gg_.__color_1l5sd_gg_{fill:var(--pattern_1l5sd);stroke:var(--color_1l5sd);stroke-width:1px}.___SBar_1l5sd_gg_.__hide_1l5sd_gg_{display:none}.___SBar_1l5sd_gg_.__transparent_1l5sd_gg_{opacity:.3}.___SBackground_1l5sd_gg_.__onClick_1l5sd_gg_,.___SBar_1l5sd_gg_.__onClick_1l5sd_gg_{cursor:pointer}.___SBackground_1l5sd_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242))}.___SBarAnnotation_1l5sd_gg_{display:flex;justify-content:space-between}.___SBarLabel_1l5sd_gg_,.___SBarPercent_1l5sd_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarLabel_1l5sd_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:auto}.___SBarPercent_1l5sd_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));margin-right:var(--intergalactic-spacing-2x, 8px)}@supports (color:color(display-p3 0 0 0%)){.___SBarPercent_1l5sd_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBarPercent_1l5sd_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SBarValue_1l5sd_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);text-align:right}.___SCompactHorizontalBarHoverRect_1l5sd_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(0, 22, 16, 0.028))}",
     /*__inner_css_end__*/
-    "1rmdr_gg_"
+    "1l5sd_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBar": "___SBar_1rmdr_gg_",
-    "--duration": "--duration_1rmdr",
-    "_color": "__color_1rmdr_gg_",
-    "--color": "--color_1rmdr",
-    "_pattern": "__pattern_1rmdr_gg_",
-    "--pattern": "--pattern_1rmdr",
-    "_hide": "__hide_1rmdr_gg_",
-    "_transparent": "__transparent_1rmdr_gg_",
-    "_onClick": "__onClick_1rmdr_gg_",
-    "__SBackground": "___SBackground_1rmdr_gg_",
-    "__SBarAnnotation": "___SBarAnnotation_1rmdr_gg_",
-    "__SBarLabel": "___SBarLabel_1rmdr_gg_",
-    "__SBarPercent": "___SBarPercent_1rmdr_gg_",
-    "__SBarValue": "___SBarValue_1rmdr_gg_",
-    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1rmdr_gg_"
+    "__SBar": "___SBar_1l5sd_gg_",
+    "--duration": "--duration_1l5sd",
+    "_color": "__color_1l5sd_gg_",
+    "--color": "--color_1l5sd",
+    "_pattern": "__pattern_1l5sd_gg_",
+    "--pattern": "--pattern_1l5sd",
+    "_hide": "__hide_1l5sd_gg_",
+    "_transparent": "__transparent_1l5sd_gg_",
+    "_onClick": "__onClick_1l5sd_gg_",
+    "__SBackground": "___SBackground_1l5sd_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_1l5sd_gg_",
+    "__SBarLabel": "___SBarLabel_1l5sd_gg_",
+    "__SBarPercent": "___SBarPercent_1l5sd_gg_",
+    "__SBarValue": "___SBarValue_1l5sd_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1l5sd_gg_"
   })
 );
 var MIN_HEIGHT = 2;
@@ -47,14 +46,13 @@ var calcPartBarY = function calcPartBarY2(y, minHeight, height) {
   }
   return height <= minHeight ? minHeight : 0;
 };
-var BarRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(BarRoot2, _Component);
-  var _super = _createSuper(BarRoot2);
+var BarRoot = /* @__PURE__ */ (function(_Component) {
   function BarRoot2() {
     _classCallCheck(this, BarRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, BarRoot2, arguments);
   }
-  _createClass(BarRoot2, [{
+  _inherits(BarRoot2, _Component);
+  return _createClass(BarRoot2, [{
     key: "getBackgroundProps",
     value: function getBackgroundProps(_props, index) {
       var _this$asProps = this.asProps, x = _this$asProps.x, data = _this$asProps.data;
@@ -88,7 +86,7 @@ var BarRoot = /* @__PURE__ */ function(_Component) {
     value: function renderBar(d, i) {
       var _ref, _d$y, _d$y2, _d$y3;
       var SBar = this.Element;
-      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, color = _this$asProps3.color, resolveColor = _this$asProps3.resolveColor, x = _this$asProps3.x, y = _this$asProps3.y, y0 = _this$asProps3.y0, scale = _this$asProps3.scale, hide = _this$asProps3.hide, offsetProps = _this$asProps3.offset, duration = _this$asProps3.duration, uid = _this$asProps3.uid, r = _this$asProps3.r, hMin = _this$asProps3.hMin, widthProps = _this$asProps3.width, groupKey = _this$asProps3.groupKey, onClick = _this$asProps3.onClick, transparent = _this$asProps3.transparent, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Infinity : _this$asProps3$maxBar, patterns = _this$asProps3.patterns, dataHintsHandler = _this$asProps3.dataHintsHandler;
+      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, color = _this$asProps3.color, resolveColor = _this$asProps3.resolveColor, x = _this$asProps3.x, y = _this$asProps3.y, y0 = _this$asProps3.y0, scale = _this$asProps3.scale, hide = _this$asProps3.hide, offsetProps = _this$asProps3.offset, duration = _this$asProps3.duration, uid = _this$asProps3.uid, r = _this$asProps3.r, hMin = _this$asProps3.hMin, widthProps = _this$asProps3.width, groupKey = _this$asProps3.groupKey, onClick = _this$asProps3.onClick, transparent = _this$asProps3.transparent, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps3$maxBar, patterns = _this$asProps3.patterns, dataHintsHandler = _this$asProps3.dataHintsHandler;
       var offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
       var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
       var absHeight = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale((_d$y = d[y0]) !== null && _d$y !== void 0 ? _d$y : 0)));
@@ -116,7 +114,7 @@ var BarRoot = /* @__PURE__ */ function(_Component) {
       }
       return /* @__PURE__ */ React.createElement(React.Fragment, {
         key: "bar-".concat(i)
-      }, (_ref = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBar, _ref.cn("SBar", {
+      }, (_ref = sstyled(styles), /* @__PURE__ */ React.createElement(SBar, _ref.cn("SBar", {
         "aria-hidden": true,
         "render": "path",
         "clipPath": "url(#".concat(uid, ")"),
@@ -157,8 +155,7 @@ var BarRoot = /* @__PURE__ */ function(_Component) {
       }));
     }
   }]);
-  return BarRoot2;
-}(Component);
+})(Component);
 _defineProperty(BarRoot, "displayName", "Bar");
 _defineProperty(BarRoot, "style", style);
 _defineProperty(BarRoot, "enhance", [uniqueIDEnhancement()]);
@@ -173,7 +170,7 @@ function Background(props) {
   var SBackground = props.Element, styles = props.styles, scale = props.scale, value = props.value;
   var _scale2 = _slicedToArray(scale, 2), xScale = _scale2[0], yScale = _scale2[1];
   var yRange = yScale.range();
-  return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBackground, _ref2.cn("SBackground", {
+  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SBackground, _ref2.cn("SBackground", {
     "aria-hidden": true,
     "render": "rect",
     "childrenPosition": "above",

package/lib/esm/Bubble.mjs

@@ -2,64 +2,66 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 { sstyled } from "@semcore/utils/lib/core/index";
-import { sstyled as sstyled$1, Component, assignProps } from "@semcore/core";
-import React from "react";
+import { sstyled, Component, assignProps } from "@semcore/core";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+import findComponent from "@semcore/core/lib/utils/findComponent";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { transition } from "d3-transition";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import React from "react";
+import { SvgElement } from "./component/SvgElement.mjs";
 import createElement from "./createElement.mjs";
-import { getBubbleChartValueScale, measureText } from "./utils.mjs";
-import Tooltip from "./Tooltip.mjs";
 import { PatternFill } from "./Pattern.mjs";
+import Tooltip from "./Tooltip.mjs";
+import { getBubbleChartValueScale, measureText } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/bubble.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBubble_1cl2b_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_1cl2b);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_1cl2b_gg_:hover{opacity:.8}}.___SBubble_1cl2b_gg_.__color_1cl2b_gg_{fill:var(--color_1cl2b)}.___SBubble_1cl2b_gg_.__pattern_1cl2b_gg_.__color_1cl2b_gg_{fill:var(--pattern_1cl2b);stroke:var(--color_1cl2b);stroke-width:1px}.___SBubble_1cl2b_gg_.__transparent_1cl2b_gg_{opacity:.3}.___SCenter_1cl2b_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SCenter_1cl2b_gg_.__color_1cl2b_gg_{stroke:var(--color_1cl2b)}.___SCenter_1cl2b_gg_.__transparent_1cl2b_gg_{opacity:.3}.___SLabel_1cl2b_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLabel_1cl2b_gg_._position_right_1cl2b_gg_{text-anchor:end}.___SLabel_1cl2b_gg_._position_left_1cl2b_gg_{text-anchor:start}.___SLabel_1cl2b_gg_.__color_1cl2b_gg_{fill:var(--color_1cl2b)}.___SLabel_1cl2b_gg_.__transparent_1cl2b_gg_{opacity:.3}",
+    ".___SBubble_57tzb_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210));stroke:var(--intergalactic-chart-grid-border, #fff);stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_57tzb);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_57tzb_gg_:hover{opacity:.8}}g._visible_false_57tzb_gg_{display:none}.___SBubble_57tzb_gg_.__clickable_57tzb_gg_{cursor:pointer}.___SBubble_57tzb_gg_.__color_57tzb_gg_{fill:var(--color_57tzb)}.___SBubble_57tzb_gg_.__pattern_57tzb_gg_.__color_57tzb_gg_{fill:var(--pattern_57tzb);stroke:var(--color_57tzb);stroke-width:1px}.___SBubble_57tzb_gg_.__transparent_57tzb_gg_{opacity:.3}.___SCenter_57tzb_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210))}.___SCenter_57tzb_gg_.__color_57tzb_gg_{stroke:var(--color_57tzb)}.___SCenter_57tzb_gg_.__transparent_57tzb_gg_{opacity:.3}.___SLabel_57tzb_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210))}.___SLabel_57tzb_gg_._position_right_57tzb_gg_{text-anchor:end}.___SLabel_57tzb_gg_._position_left_57tzb_gg_{text-anchor:start}.___SLabel_57tzb_gg_.__color_57tzb_gg_{fill:var(--color_57tzb)}.___SLabel_57tzb_gg_.__transparent_57tzb_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "1cl2b_gg_"
+    "57tzb_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBubble": "___SBubble_1cl2b_gg_",
-    "_color": "__color_1cl2b_gg_",
-    "--color": "--color_1cl2b",
-    "_pattern": "__pattern_1cl2b_gg_",
-    "--pattern": "--pattern_1cl2b",
-    "_transparent": "__transparent_1cl2b_gg_",
-    "__SCenter": "___SCenter_1cl2b_gg_",
-    "__SLabel": "___SLabel_1cl2b_gg_",
-    "_position_right": "_position_right_1cl2b_gg_",
-    "_position_left": "_position_left_1cl2b_gg_",
-    "--duration": "--duration_1cl2b"
+    "_visible_false": "_visible_false_57tzb_gg_",
+    "__SBubble": "___SBubble_57tzb_gg_",
+    "_clickable": "__clickable_57tzb_gg_",
+    "_color": "__color_57tzb_gg_",
+    "--color": "--color_57tzb",
+    "_pattern": "__pattern_57tzb_gg_",
+    "--pattern": "--pattern_57tzb",
+    "_transparent": "__transparent_57tzb_gg_",
+    "__SCenter": "___SCenter_57tzb_gg_",
+    "__SLabel": "___SLabel_57tzb_gg_",
+    "_position_right": "_position_right_57tzb_gg_",
+    "_position_left": "_position_left_57tzb_gg_",
+    "--duration": "--duration_57tzb"
   })
 );
-var BubbleRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(BubbleRoot2, _Component);
-  var _super = _createSuper(BubbleRoot2);
+var BubbleRoot = /* @__PURE__ */ (function(_Component) {
   function BubbleRoot2() {
     var _this;
     _classCallCheck(this, BubbleRoot2);
     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), "bindHandlerTooltip", function(visible, props, tooltipProps) {
+    _this = _callSuper(this, BubbleRoot2, [].concat(args));
+    _defineProperty(_this, "bindHandlerTooltip", function(visible, props, tooltipProps) {
       return function(_ref4) {
         var clientX = _ref4.clientX, clientY = _ref4.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);
       };
     });
     return _this;
   }
-  _createClass(BubbleRoot2, [{
+  _inherits(BubbleRoot2, _Component);
+  return _createClass(BubbleRoot2, [{
     key: "generateGetBoundingClientRect",
     value: function generateGetBoundingClientRect() {
       var x = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
@@ -78,7 +80,7 @@ var BubbleRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "animationCircle",
     value: function animationCircle() {
-      var _this$asProps = this.asProps, duration = _this$asProps.duration, uid = _this$asProps.uid, data = _this$asProps.data, value = _this$asProps.value;
+      var _this$asProps2 = this.asProps, duration = _this$asProps2.duration, uid = _this$asProps2.uid, data = _this$asProps2.data, value = _this$asProps2.value;
       var z = getBubbleChartValueScale(data, value);
       var selectRect = transition().selection().selectAll("[id^=".concat(uid).concat(uid, "]")).attr("r", 0);
       var selectRectNode = selectRect.node();
@@ -92,7 +94,7 @@ var BubbleRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$asProps2 = this.asProps, data = _this$asProps2.data, x = _this$asProps2.x, y = _this$asProps2.y, value = _this$asProps2.value;
+      var _this$asProps3 = this.asProps, data = _this$asProps3.data, x = _this$asProps3.x, y = _this$asProps3.y, value = _this$asProps3.value;
       var prevX = prevProps.x, prevY = prevProps.y, prevValue = prevProps.value;
       var prevData = prevProps.$rootProps.data;
       if (data !== prevData || x !== prevX || y !== prevY || value !== prevValue) {
@@ -105,82 +107,59 @@ var BubbleRoot = /* @__PURE__ */ function(_Component) {
       this.animationCircle();
     }
   }, {
-    key: "renderCircle",
-    value: function renderCircle(d, i) {
-      var _ref2, _d$color;
-      var _this$asProps3 = this.asProps, color = _this$asProps3.color, scale = _this$asProps3.scale, x = _this$asProps3.x, y = _this$asProps3.y, offset = _this$asProps3.offset, styles = _this$asProps3.styles, uid = _this$asProps3.uid, duration = _this$asProps3.duration, value = _this$asProps3.value, label = _this$asProps3.label, markedCross = _this$asProps3.markedCross, size = _this$asProps3.size, data = _this$asProps3.data, transparent = _this$asProps3.transparent, resolveColor = _this$asProps3.resolveColor, patterns = _this$asProps3.patterns;
-      var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
-      var SBubble = this.Element;
-      var SCenter = "text";
-      var SLabel = "text";
-      var z = getBubbleChartValueScale(data, value);
-      var margin = Math.min(xScale.range()[0], xScale.range()[1]);
-      var labelPosition = size[0] - 2 * margin - (xScale(d[x]) + offset[0] + z(d[value])) < measureText(d[label]) ? "right" : "left";
-      var labelDistance = {
-        right: xScale(d[x]) + offset[0] - z(d[value]),
-        left: xScale(d[x]) + offset[0] + z(d[value])
-      }[labelPosition];
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement("g", _ref2.cn("g", {
-        "key": "circle(#".concat(i, ")"),
-        "onMouseMove": this.bindHandlerTooltip(true, this.props, {
-          xIndex: i,
-          index: i,
-          patterns
-        }),
-        "onMouseLeave": this.bindHandlerTooltip(false, this.props, {
-          xIndex: i,
-          index: i,
-          patterns
-        })
-      }), markedCross && /* @__PURE__ */ React.createElement(SCenter, _ref2.cn("SCenter", {
-        "aria-hidden": true,
-        "x": xScale(d[x]) + offset[0],
-        "y": yScale(d[y]) + offset[1],
-        "dy": ".3em",
-        "clipPath": "url(#".concat(uid, ")"),
-        "color": resolveColor((_d$color = d[color]) !== null && _d$color !== void 0 ? _d$color : color),
-        "transparent": transparent
-      }), "+"), /* @__PURE__ */ React.createElement(SBubble, _ref2.cn("SBubble", {
-        "aria-hidden": true,
-        "id": "".concat(uid).concat(uid),
-        "index": i,
-        "render": "circle",
-        "clipPath": "url(#".concat(uid, ")"),
-        "cx": xScale(d[x]) + offset[0],
-        "cy": yScale(d[y]) + offset[1],
-        "color": resolveColor(d[color]),
-        "pattern": patterns ? "url(#".concat(uid, "-").concat(i, "-pattern)") : void 0,
-        "r": z(d[value]),
-        "use:duration": "".concat(duration, "ms"),
-        "transparent": transparent
-      })), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref2.cn("PatternFill", {
-        "id": "".concat(uid, "-").concat(i, "-pattern"),
-        "patternKey": d[color],
-        "color": resolveColor(d[color]),
-        "patterns": patterns
-      })), d[label] && /* @__PURE__ */ React.createElement(SLabel, _ref2.cn("SLabel", {
-        "aria-hidden": true,
-        "x": labelDistance,
-        "y": yScale(d[y]) + offset[1],
-        "dy": ".3em",
-        "clipPath": "url(#".concat(uid, ")"),
-        "position": labelPosition,
-        "color": resolveColor(d[color]),
-        "transparent": transparent
-      }), d[label]));
+    key: "handlerOnClick",
+    value: function handlerOnClick(index) {
+      var _this2 = this;
+      return function(e) {
+        e.stopPropagation();
+        var onClick = _this2.asProps.onClick;
+        onClick === null || onClick === void 0 || onClick(index, e);
+      };
+    }
+  }, {
+    key: "getCircleProps",
+    value: function getCircleProps() {
+      var _this$asProps4 = this.asProps, color = _this$asProps4.color, scale = _this$asProps4.scale, x = _this$asProps4.x, y = _this$asProps4.y, offset = _this$asProps4.offset, styles = _this$asProps4.styles, uid = _this$asProps4.uid, duration = _this$asProps4.duration, value = _this$asProps4.value, label = _this$asProps4.label, markedCross = _this$asProps4.markedCross, size = _this$asProps4.size, data = _this$asProps4.data, transparent = _this$asProps4.transparent, resolveColor = _this$asProps4.resolveColor, patterns = _this$asProps4.patterns, onClick = _this$asProps4.onClick;
+      return {
+        color,
+        scale,
+        x,
+        y,
+        offset,
+        styles,
+        uid,
+        duration,
+        value,
+        label,
+        markedCross,
+        size,
+        data,
+        transparent,
+        resolveColor,
+        patterns,
+        bindHandlerTooltip: this.bindHandlerTooltip,
+        clickable: Boolean(onClick),
+        onClickCircleRoot: this.handlerOnClick.bind(this)
+      };
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, uid = _this$asProps4.uid, scale = _this$asProps4.scale, x = _this$asProps4.x, y = _this$asProps4.y, value = _this$asProps4.value;
-      var _scale2 = _slicedToArray(scale, 2), xScale = _scale2[0], yScale = _scale2[1];
+      var _this$asProps5 = this.asProps, data = _this$asProps5.data, uid = _this$asProps5.uid, scale = _this$asProps5.scale, x = _this$asProps5.x, y = _this$asProps5.y, value = _this$asProps5.value, Children = _this$asProps5.Children;
+      var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
       var xSize = Math.abs(xScale.range()[0] - xScale.range()[1]);
       var ySize = Math.abs(yScale.range()[0] - yScale.range()[1]);
       var xMargin = Math.min(xScale.range()[0], xScale.range()[1]);
       var yMargin = Math.min(yScale.range()[0], yScale.range()[1]);
       this.asProps.dataHintsHandler.specifyDataRowFields(x, y, value);
       this.asProps.dataHintsHandler.establishDataType("points-cloud");
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, data.map(this.renderCircle.bind(this)), /* @__PURE__ */ React.createElement("clipPath", {
+      var isAdvancedMode = Boolean(findComponent(Children, [Bubble.Circle.displayName]));
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, isAdvancedMode ? /* @__PURE__ */ React.createElement(Children, null) : data.map(function(_, idx) {
+        return /* @__PURE__ */ React.createElement(Bubble.Circle, {
+          key: idx,
+          index: idx
+        });
+      }), /* @__PURE__ */ React.createElement("clipPath", {
         "aria-hidden": true,
         id: uid
       }, /* @__PURE__ */ React.createElement("rect", {
@@ -191,8 +170,7 @@ var BubbleRoot = /* @__PURE__ */ function(_Component) {
       }), " "));
     }
   }]);
-  return BubbleRoot2;
-}(Component);
+})(Component);
 _defineProperty(BubbleRoot, "displayName", "Bubble");
 _defineProperty(BubbleRoot, "style", style);
 _defineProperty(BubbleRoot, "enhance", [uniqueIDEnhancement()]);
@@ -201,15 +179,85 @@ _defineProperty(BubbleRoot, "defaultProps", {
   duration: 500,
   markedCross: true
 });
-var BubbleTooltip = function BubbleTooltip2(props) {
-  var _ref = arguments[0], _ref3;
+function BubbleTooltip(props) {
+  var _ref = arguments[0], _ref2;
   var SBubbleTooltip = Tooltip;
-  return _ref3 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SBubbleTooltip, _ref3.cn("SBubbleTooltip", _objectSpread({}, assignProps({
+  return _ref2 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SBubbleTooltip, _ref2.cn("SBubbleTooltip", _objectSpread({}, assignProps({
     "excludeAnchorProps": true
   }, _ref))));
-};
+}
+function BubbleCircle(props) {
+  var _ref3, _circleData$color;
+  var color = props.color, scale = props.scale, x = props.x, y = props.y, offset = props.offset, styles = props.styles, uid = props.uid, duration = props.duration, value = props.value, label = props.label, markedCross = props.markedCross, size = props.size, data = props.data, transparent = props.transparent, resolveColor = props.resolveColor, patterns = props.patterns, index = props.index, bindHandlerTooltip = props.bindHandlerTooltip, Element = props.Element, _props$visible = props.visible, visible = _props$visible === void 0 ? true : _props$visible, clickable = props.clickable, onClick = props.onClick, onClickCircleRoot = props.onClickCircleRoot;
+  var circleData = data[index];
+  if (!circleData) return null;
+  var _scale2 = _slicedToArray(scale, 2), xScale = _scale2[0], yScale = _scale2[1];
+  var SBubble = Element;
+  var SCenter = "text";
+  var SLabel = "text";
+  var z = getBubbleChartValueScale(data, value);
+  var margin = Math.min(xScale.range()[0], xScale.range()[1]);
+  var labelPosition = size[0] - 2 * margin - (xScale(circleData[x]) + offset[0] + z(circleData[value])) < measureText(circleData[label]) ? "right" : "left";
+  var labelDistance = {
+    right: xScale(circleData[x]) + offset[0] - z(circleData[value]),
+    left: xScale(circleData[x]) + offset[0] + z(circleData[value])
+  }[labelPosition];
+  return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SvgElement, _ref3.cn("SvgElement", {
+    "tag": "g",
+    "key": "circle(#".concat(index, ")"),
+    "onClickCapture": callAllEventHandlers(onClickCircleRoot(index), onClick),
+    "onMouseMove": bindHandlerTooltip(true, props, {
+      xIndex: index,
+      index,
+      patterns
+    }),
+    "onMouseLeave": bindHandlerTooltip(false, props, {
+      xIndex: index,
+      index,
+      patterns
+    }),
+    "visible": "".concat(visible)
+  }), markedCross && /* @__PURE__ */ React.createElement(SCenter, _ref3.cn("SCenter", {
+    "aria-hidden": true,
+    "x": xScale(circleData[x]) + offset[0],
+    "y": yScale(circleData[y]) + offset[1],
+    "dy": ".3em",
+    "clipPath": "url(#".concat(uid, ")"),
+    "color": resolveColor((_circleData$color = circleData[color]) !== null && _circleData$color !== void 0 ? _circleData$color : color),
+    "transparent": transparent
+  }), "+"), /* @__PURE__ */ React.createElement(SBubble, _ref3.cn("SBubble", {
+    "aria-hidden": true,
+    "id": "".concat(uid).concat(uid),
+    "index": index,
+    "render": "circle",
+    "clipPath": "url(#".concat(uid, ")"),
+    "cx": xScale(circleData[x]) + offset[0],
+    "cy": yScale(circleData[y]) + offset[1],
+    "color": resolveColor(circleData[color]),
+    "pattern": patterns ? "url(#".concat(uid, "-").concat(index, "-pattern)") : void 0,
+    "r": z(circleData[value]),
+    "use:duration": "".concat(duration, "ms"),
+    "transparent": transparent,
+    "clickable": clickable || Boolean(onClick)
+  })), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref3.cn("PatternFill", {
+    "id": "".concat(uid, "-").concat(index, "-pattern"),
+    "patternKey": circleData[color],
+    "color": resolveColor(circleData[color]),
+    "patterns": patterns
+  })), circleData[label] && /* @__PURE__ */ React.createElement(SLabel, _ref3.cn("SLabel", {
+    "aria-hidden": true,
+    "x": labelDistance,
+    "y": yScale(circleData[y]) + offset[1],
+    "dy": ".3em",
+    "clipPath": "url(#".concat(uid, ")"),
+    "position": labelPosition,
+    "color": resolveColor(circleData[color]),
+    "transparent": transparent
+  }), circleData[label]));
+}
 var Bubble = createElement(BubbleRoot, {
-  Tooltip: [BubbleTooltip, Tooltip._______childrenComponents]
+  Tooltip: [BubbleTooltip, Tooltip._______childrenComponents],
+  Circle: BubbleCircle
 });
 export {
   Bubble as default