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

package/lib/esm/Bubble.mjs

@@ -2,66 +2,64 @@ 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 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, 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 { sstyled } from "@semcore/utils/lib/core/index";
+import { sstyled as sstyled$1, Component, assignProps } from "@semcore/core";
 import React from "react";
-import { SvgElement } from "./component/SvgElement.mjs";
+import { transition } from "d3-transition";
+import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
 import createElement from "./createElement.mjs";
-import { PatternFill } from "./Pattern.mjs";
-import Tooltip from "./Tooltip.mjs";
 import { getBubbleChartValueScale, measureText } from "./utils.mjs";
+import Tooltip from "./Tooltip.mjs";
+import { PatternFill } from "./Pattern.mjs";
 /*!__reshadow-styles__:"./style/bubble.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___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}",
+    ".___SBubble_1vi52_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_1vi52);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_1vi52_gg_:hover{opacity:.8}}.___SBubble_1vi52_gg_.__color_1vi52_gg_{fill:var(--color_1vi52)}.___SBubble_1vi52_gg_.__pattern_1vi52_gg_.__color_1vi52_gg_{fill:var(--pattern_1vi52);stroke:var(--color_1vi52);stroke-width:1px}.___SBubble_1vi52_gg_.__transparent_1vi52_gg_{opacity:.3}.___SCenter_1vi52_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_1vi52_gg_.__color_1vi52_gg_{stroke:var(--color_1vi52)}.___SCenter_1vi52_gg_.__transparent_1vi52_gg_{opacity:.3}.___SLabel_1vi52_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219))}.___SLabel_1vi52_gg_._position_right_1vi52_gg_{text-anchor:end}.___SLabel_1vi52_gg_._position_left_1vi52_gg_{text-anchor:start}.___SLabel_1vi52_gg_.__color_1vi52_gg_{fill:var(--color_1vi52)}.___SLabel_1vi52_gg_.__transparent_1vi52_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "cs3io_gg_"
+    "1vi52_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "_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"
+    "__SBubble": "___SBubble_1vi52_gg_",
+    "_color": "__color_1vi52_gg_",
+    "--color": "--color_1vi52",
+    "_pattern": "__pattern_1vi52_gg_",
+    "--pattern": "--pattern_1vi52",
+    "_transparent": "__transparent_1vi52_gg_",
+    "__SCenter": "___SCenter_1vi52_gg_",
+    "__SLabel": "___SLabel_1vi52_gg_",
+    "_position_right": "_position_right_1vi52_gg_",
+    "_position_left": "_position_left_1vi52_gg_",
+    "--duration": "--duration_1vi52"
   })
 );
-var BubbleRoot = /* @__PURE__ */ (function(_Component) {
+var BubbleRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(BubbleRoot2, _Component);
+  var _super = _createSuper(BubbleRoot2);
   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 = _callSuper(this, BubbleRoot2, [].concat(args));
-    _defineProperty(_this, "bindHandlerTooltip", function(visible, props, tooltipProps) {
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerTooltip", function(visible, props, tooltipProps) {
       return function(_ref4) {
         var clientX = _ref4.clientX, clientY = _ref4.clientY;
-        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);
+        var eventEmitter = _this.asProps.eventEmitter;
+        eventEmitter.emit("setTooltipPosition", clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps", props, tooltipProps);
+        eventEmitter.emit("setTooltipVisible", visible);
       };
     });
     return _this;
   }
-  _inherits(BubbleRoot2, _Component);
-  return _createClass(BubbleRoot2, [{
+  _createClass(BubbleRoot2, [{
     key: "generateGetBoundingClientRect",
     value: function generateGetBoundingClientRect() {
       var x = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
@@ -80,7 +78,7 @@ var BubbleRoot = /* @__PURE__ */ (function(_Component) {
   }, {
     key: "animationCircle",
     value: function animationCircle() {
-      var _this$asProps2 = this.asProps, duration = _this$asProps2.duration, uid = _this$asProps2.uid, data = _this$asProps2.data, value = _this$asProps2.value;
+      var _this$asProps = this.asProps, duration = _this$asProps.duration, uid = _this$asProps.uid, data = _this$asProps.data, value = _this$asProps.value;
       var z = getBubbleChartValueScale(data, value);
       var selectRect = transition().selection().selectAll("[id^=".concat(uid).concat(uid, "]")).attr("r", 0);
       var selectRectNode = selectRect.node();
@@ -94,7 +92,7 @@ var BubbleRoot = /* @__PURE__ */ (function(_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$asProps3 = this.asProps, data = _this$asProps3.data, x = _this$asProps3.x, y = _this$asProps3.y, value = _this$asProps3.value;
+      var _this$asProps2 = this.asProps, data = _this$asProps2.data, x = _this$asProps2.x, y = _this$asProps2.y, value = _this$asProps2.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) {
@@ -107,59 +105,82 @@ var BubbleRoot = /* @__PURE__ */ (function(_Component) {
       this.animationCircle();
     }
   }, {
-    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: "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: "render",
     value: function render() {
-      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 _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 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");
-      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", {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, data.map(this.renderCircle.bind(this)), /* @__PURE__ */ React.createElement("clipPath", {
         "aria-hidden": true,
         id: uid
       }, /* @__PURE__ */ React.createElement("rect", {
@@ -170,7 +191,8 @@ var BubbleRoot = /* @__PURE__ */ (function(_Component) {
       }), " "));
     }
   }]);
-})(Component);
+  return BubbleRoot2;
+}(Component);
 _defineProperty(BubbleRoot, "displayName", "Bubble");
 _defineProperty(BubbleRoot, "style", style);
 _defineProperty(BubbleRoot, "enhance", [uniqueIDEnhancement()]);
@@ -179,85 +201,15 @@ _defineProperty(BubbleRoot, "defaultProps", {
   duration: 500,
   markedCross: true
 });
-function BubbleTooltip(props) {
-  var _ref = arguments[0], _ref2;
+var BubbleTooltip = function BubbleTooltip2(props) {
+  var _ref = arguments[0], _ref3;
   var SBubbleTooltip = Tooltip;
-  return _ref2 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SBubbleTooltip, _ref2.cn("SBubbleTooltip", _objectSpread({}, assignProps({
+  return _ref3 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SBubbleTooltip, _ref3.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],
-  Circle: BubbleCircle
+  Tooltip: [BubbleTooltip, Tooltip._______childrenComponents]
 });
 export {
   Bubble as default