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

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_bosjb_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_bosjb);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_bosjb_gg_:hover{opacity:.8}}.___SBubble_bosjb_gg_.__color_bosjb_gg_{fill:var(--color_bosjb)}.___SBubble_bosjb_gg_.__pattern_bosjb_gg_.__color_bosjb_gg_{fill:var(--pattern_bosjb);stroke:var(--color_bosjb);stroke-width:1px}.___SBubble_bosjb_gg_.__transparent_bosjb_gg_{opacity:.3}.___SCenter_bosjb_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_bosjb_gg_.__color_bosjb_gg_{stroke:var(--color_bosjb)}.___SCenter_bosjb_gg_.__transparent_bosjb_gg_{opacity:.3}.___SLabel_bosjb_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210))}.___SLabel_bosjb_gg_._position_right_bosjb_gg_{text-anchor:end}.___SLabel_bosjb_gg_._position_left_bosjb_gg_{text-anchor:start}.___SLabel_bosjb_gg_.__color_bosjb_gg_{fill:var(--color_bosjb)}.___SLabel_bosjb_gg_.__transparent_bosjb_gg_{opacity:.3}",
+    ".___SBubble_cs3io_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219));stroke:var(--intergalactic-chart-grid-border, #fff);stroke-width:2px;transition-property:cx,cy;transition-duration:var(--duration_cs3io);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_cs3io_gg_:hover{opacity:.8}}g._visible_false_cs3io_gg_{display:none}.___SBubble_cs3io_gg_.__clickable_cs3io_gg_{cursor:pointer}.___SBubble_cs3io_gg_.__color_cs3io_gg_{fill:var(--color_cs3io)}.___SBubble_cs3io_gg_.__pattern_cs3io_gg_.__color_cs3io_gg_{fill:var(--pattern_cs3io);stroke:var(--color_cs3io);stroke-width:1px}.___SBubble_cs3io_gg_.__transparent_cs3io_gg_{opacity:.3}.___SCenter_cs3io_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219))}.___SCenter_cs3io_gg_.__color_cs3io_gg_{stroke:var(--color_cs3io)}.___SCenter_cs3io_gg_.__transparent_cs3io_gg_{opacity:.3}.___SLabel_cs3io_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219))}.___SLabel_cs3io_gg_._position_right_cs3io_gg_{text-anchor:end}.___SLabel_cs3io_gg_._position_left_cs3io_gg_{text-anchor:start}.___SLabel_cs3io_gg_.__color_cs3io_gg_{fill:var(--color_cs3io)}.___SLabel_cs3io_gg_.__transparent_cs3io_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "bosjb_gg_"
+    "cs3io_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBubble": "___SBubble_bosjb_gg_",
-    "_color": "__color_bosjb_gg_",
-    "--color": "--color_bosjb",
-    "_pattern": "__pattern_bosjb_gg_",
-    "--pattern": "--pattern_bosjb",
-    "_transparent": "__transparent_bosjb_gg_",
-    "__SCenter": "___SCenter_bosjb_gg_",
-    "__SLabel": "___SLabel_bosjb_gg_",
-    "_position_right": "_position_right_bosjb_gg_",
-    "_position_left": "_position_left_bosjb_gg_",
-    "--duration": "--duration_bosjb"
+    "_visible_false": "_visible_false_cs3io_gg_",
+    "__SBubble": "___SBubble_cs3io_gg_",
+    "_clickable": "__clickable_cs3io_gg_",
+    "_color": "__color_cs3io_gg_",
+    "--color": "--color_cs3io",
+    "_pattern": "__pattern_cs3io_gg_",
+    "--pattern": "--pattern_cs3io",
+    "_transparent": "__transparent_cs3io_gg_",
+    "__SCenter": "___SCenter_cs3io_gg_",
+    "__SLabel": "___SLabel_cs3io_gg_",
+    "_position_right": "_position_right_cs3io_gg_",
+    "_position_left": "_position_left_cs3io_gg_",
+    "--duration": "--duration_cs3io"
   })
 );
-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