@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.8

package/lib/cjs/Bubble.js

@@ -1,16 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _assignProps2 = require("@semcore/core/lib/utils/assignProps");
@@ -24,193 +18,169 @@ var _Pattern = require("./Pattern");
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _utils = require("./utils");
 /*!__reshadow-styles__:"./style/bubble.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SBubble_1d4b3_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_1d4b3);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_1d4b3_gg_:hover{opacity:.8}}g._visible_false_1d4b3_gg_{display:none}.___SBubble_1d4b3_gg_.__color_1d4b3_gg_{fill:var(--color_1d4b3)}.___SBubble_1d4b3_gg_.__pattern_1d4b3_gg_.__color_1d4b3_gg_{fill:var(--pattern_1d4b3);stroke:var(--color_1d4b3);stroke-width:1px}.___SBubble_1d4b3_gg_.__transparent_1d4b3_gg_{opacity:.3}.___SCenter_1d4b3_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SCenter_1d4b3_gg_.__color_1d4b3_gg_{stroke:var(--color_1d4b3)}.___SCenter_1d4b3_gg_.__transparent_1d4b3_gg_{opacity:.3}.___SLabel_1d4b3_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLabel_1d4b3_gg_._position_right_1d4b3_gg_{text-anchor:end}.___SLabel_1d4b3_gg_._position_left_1d4b3_gg_{text-anchor:start}.___SLabel_1d4b3_gg_.__color_1d4b3_gg_{fill:var(--color_1d4b3)}.___SLabel_1d4b3_gg_.__transparent_1d4b3_gg_{opacity:.3}", /*__inner_css_end__*/"1d4b3_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SBubble_h0z26_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_h0z26);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_h0z26_gg_:hover{opacity:.8}}g._visible_false_h0z26_gg_{display:none}.___SBubble_h0z26_gg_.__color_h0z26_gg_{fill:var(--color_h0z26)}.___SBubble_h0z26_gg_.__pattern_h0z26_gg_.__color_h0z26_gg_{fill:var(--pattern_h0z26);stroke:var(--color_h0z26);stroke-width:1px}.___SBubble_h0z26_gg_.__transparent_h0z26_gg_{opacity:.3}.___SCenter_h0z26_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SCenter_h0z26_gg_.__color_h0z26_gg_{stroke:var(--color_h0z26)}.___SCenter_h0z26_gg_.__transparent_h0z26_gg_{opacity:.3}.___SLabel_h0z26_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLabel_h0z26_gg_._position_right_h0z26_gg_{text-anchor:end}.___SLabel_h0z26_gg_._position_left_h0z26_gg_{text-anchor:start}.___SLabel_h0z26_gg_.__color_h0z26_gg_{fill:var(--color_h0z26)}.___SLabel_h0z26_gg_.__transparent_h0z26_gg_{opacity:.3}", /*__inner_css_end__*/"h0z26_gg_"),
 /*__reshadow_css_end__*/
 {
-  "_visible_false": "_visible_false_1d4b3_gg_",
-  "__SBubble": "___SBubble_1d4b3_gg_",
-  "_color": "__color_1d4b3_gg_",
-  "--color": "--color_1d4b3",
-  "_pattern": "__pattern_1d4b3_gg_",
-  "--pattern": "--pattern_1d4b3",
-  "_transparent": "__transparent_1d4b3_gg_",
-  "__SCenter": "___SCenter_1d4b3_gg_",
-  "__SLabel": "___SLabel_1d4b3_gg_",
-  "_position_right": "_position_right_1d4b3_gg_",
-  "_position_left": "_position_left_1d4b3_gg_",
-  "--duration": "--duration_1d4b3"
+  "_visible_false": "_visible_false_h0z26_gg_",
+  "__SBubble": "___SBubble_h0z26_gg_",
+  "_color": "__color_h0z26_gg_",
+  "--color": "--color_h0z26",
+  "_pattern": "__pattern_h0z26_gg_",
+  "--pattern": "--pattern_h0z26",
+  "_transparent": "__transparent_h0z26_gg_",
+  "__SCenter": "___SCenter_h0z26_gg_",
+  "__SLabel": "___SLabel_h0z26_gg_",
+  "_position_right": "_position_right_h0z26_gg_",
+  "_position_left": "_position_left_h0z26_gg_",
+  "--duration": "--duration_h0z26"
 });
-var BubbleRoot = /*#__PURE__*/function (_Component) {
-  function BubbleRoot() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, BubbleRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, BubbleRoot, [].concat(args));
-    (0, _defineProperty2["default"])(_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);
-      };
+class BubbleRoot extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "bindHandlerTooltip", (visible, props, tooltipProps) => ({
+      clientX,
+      clientY
+    }) => {
+      const {
+        eventEmitter,
+        plotId
+      } = this.asProps;
+      eventEmitter.emit(`setTooltipPosition_${plotId}`, clientX, clientY);
+      eventEmitter.emit(`setTooltipRenderingProps_${plotId}`, props, tooltipProps);
+      eventEmitter.emit(`setTooltipVisible_${plotId}`, visible);
     });
-    return _this;
   }
-  (0, _inherits2["default"])(BubbleRoot, _Component);
-  return (0, _createClass2["default"])(BubbleRoot, [{
-    key: "generateGetBoundingClientRect",
-    value: function generateGetBoundingClientRect() {
-      var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-      return function () {
-        return {
-          width: 0,
-          height: 0,
-          top: y,
-          right: x,
-          bottom: y,
-          left: x
-        };
-      };
-    }
-  }, {
-    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 z = (0, _utils.getBubbleChartValueScale)(data, value);
-      var selectRect = (0, _d3Transition.transition)().selection().selectAll("[id^=".concat(uid).concat(uid, "]")).attr('r', 0);
-      var selectRectNode = selectRect.node();
-      if (selectRectNode) {
-        selectRect.transition().duration(duration).attr('r', function (_, ind) {
-          var _data$ind;
-          return z((_data$ind = data[ind]) === null || _data$ind === void 0 ? void 0 : _data$ind[value]);
-        });
-      }
-    }
-  }, {
-    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 prevX = prevProps.x,
-        prevY = prevProps.y,
-        prevValue = prevProps.value;
-      var prevData = prevProps.$rootProps.data;
-      if (data !== prevData || x !== prevX || y !== prevY || value !== prevValue) {
-        this.animationCircle();
-      }
+  generateGetBoundingClientRect(x = 0, y = 0) {
+    return () => ({
+      width: 0,
+      height: 0,
+      top: y,
+      right: x,
+      bottom: y,
+      left: x
+    });
+  }
+  animationCircle() {
+    const {
+      duration,
+      uid,
+      data,
+      value
+    } = this.asProps;
+    const z = (0, _utils.getBubbleChartValueScale)(data, value);
+    const selectRect = (0, _d3Transition.transition)().selection().selectAll(`[id^=${uid}${uid}]`).attr('r', 0);
+    const selectRectNode = selectRect.node();
+    if (selectRectNode) {
+      selectRect.transition().duration(duration).attr('r', function (_, ind) {
+        return z(data[ind]?.[value]);
+      });
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      data,
+      x,
+      y,
+      value
+    } = this.asProps;
+    const {
+      x: prevX,
+      y: prevY,
+      value: prevValue
+    } = prevProps;
+    const prevData = prevProps.$rootProps.data;
+    if (data !== prevData || x !== prevX || y !== prevY || value !== prevValue) {
       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;
-      return {
-        color: color,
-        scale: scale,
-        x: x,
-        y: y,
-        offset: offset,
-        styles: styles,
-        uid: uid,
-        duration: duration,
-        value: value,
-        label: label,
-        markedCross: markedCross,
-        size: size,
-        data: data,
-        transparent: transparent,
-        resolveColor: resolveColor,
-        patterns: patterns,
-        bindHandlerTooltip: this.bindHandlerTooltip,
-        onClickCircleRoot: this.handlerOnClick.bind(this)
-      };
-    }
-  }, {
-    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 = (0, _slicedToArray2["default"])(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');
-      var isAdvancedMode = Boolean((0, _findComponent["default"])(Children, [Bubble.Circle.displayName]));
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isAdvancedMode ? /*#__PURE__*/_react["default"].createElement(Children, null) : data.map(function (_, idx) {
-        return /*#__PURE__*/_react["default"].createElement(Bubble.Circle, {
-          key: idx,
-          index: idx
-        });
-      }), /*#__PURE__*/_react["default"].createElement("clipPath", {
-        "aria-hidden": true,
-        id: uid
-      }, /*#__PURE__*/_react["default"].createElement("rect", {
-        x: xMargin,
-        y: yMargin,
-        width: "".concat(xSize, "px"),
-        height: "".concat(ySize, "px")
-      }), ' '));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(BubbleRoot, "displayName", 'Bubble');
-(0, _defineProperty2["default"])(BubbleRoot, "style", style);
-(0, _defineProperty2["default"])(BubbleRoot, "enhance", [(0, _uniqueID["default"])()]);
-(0, _defineProperty2["default"])(BubbleRoot, "defaultProps", {
+  }
+  componentDidMount() {
+    this.animationCircle();
+  }
+  handlerOnClick(index) {
+    return e => {
+      e.stopPropagation();
+      const {
+        onClick
+      } = this.asProps;
+      onClick?.(index, e);
+    };
+  }
+  getCircleProps() {
+    const {
+      color,
+      scale,
+      x,
+      y,
+      offset,
+      styles,
+      uid,
+      duration,
+      value,
+      label,
+      markedCross,
+      size,
+      data,
+      transparent,
+      resolveColor,
+      patterns
+    } = this.asProps;
+    return {
+      color,
+      scale,
+      x,
+      y,
+      offset,
+      styles,
+      uid,
+      duration,
+      value,
+      label,
+      markedCross,
+      size,
+      data,
+      transparent,
+      resolveColor,
+      patterns,
+      bindHandlerTooltip: this.bindHandlerTooltip,
+      onClickCircleRoot: this.handlerOnClick.bind(this)
+    };
+  }
+  render() {
+    const {
+      data,
+      uid,
+      scale,
+      x,
+      y,
+      value,
+      Children
+    } = this.asProps;
+    const [xScale, yScale] = scale;
+    const xSize = Math.abs(xScale.range()[0] - xScale.range()[1]);
+    const ySize = Math.abs(yScale.range()[0] - yScale.range()[1]);
+    const xMargin = Math.min(xScale.range()[0], xScale.range()[1]);
+    const yMargin = Math.min(yScale.range()[0], yScale.range()[1]);
+    this.asProps.dataHintsHandler.specifyDataRowFields(x, y, value);
+    this.asProps.dataHintsHandler.establishDataType('points-cloud');
+    const isAdvancedMode = Boolean((0, _findComponent.default)(Children, [Bubble.Circle.displayName]));
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isAdvancedMode ? /*#__PURE__*/_react.default.createElement(Children, null) : data.map((_, idx) => /*#__PURE__*/_react.default.createElement(Bubble.Circle, {
+      key: idx,
+      index: idx
+    })), /*#__PURE__*/_react.default.createElement("clipPath", {
+      "aria-hidden": true,
+      id: uid
+    }, /*#__PURE__*/_react.default.createElement("rect", {
+      x: xMargin,
+      y: yMargin,
+      width: `${xSize}px`,
+      height: `${ySize}px`
+    }), ' '));
+  }
+}
+(0, _defineProperty2.default)(BubbleRoot, "displayName", 'Bubble');
+(0, _defineProperty2.default)(BubbleRoot, "style", style);
+(0, _defineProperty2.default)(BubbleRoot, "enhance", [(0, _uniqueID.default)()]);
+(0, _defineProperty2.default)(BubbleRoot, "defaultProps", {
   offset: [0, 0],
   duration: 500,
   markedCross: true
@@ -218,106 +188,107 @@ var BubbleRoot = /*#__PURE__*/function (_Component) {
 function BubbleTooltip(props) {
   var _ref = arguments[0],
     _ref2;
-  var SBubbleTooltip = _Tooltip["default"];
-  return _ref2 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SBubbleTooltip, _ref2.cn("SBubbleTooltip", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-    "excludeAnchorProps": true
-  }, _ref))));
+  const SBubbleTooltip = _Tooltip.default;
+  return _ref2 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(SBubbleTooltip, _ref2.cn("SBubbleTooltip", {
+    ...(0, _core.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,
-    onClick = props.onClick,
-    onClickCircleRoot = props.onClickCircleRoot;
-  var circleData = data[index];
+  var _ref3;
+  const {
+    color,
+    scale,
+    x,
+    y,
+    offset,
+    styles,
+    uid,
+    duration,
+    value,
+    label,
+    markedCross,
+    size,
+    data,
+    transparent,
+    resolveColor,
+    patterns,
+    index,
+    bindHandlerTooltip,
+    Element,
+    visible = true,
+    onClick,
+    onClickCircleRoot
+  } = props;
+  const circleData = data[index];
   if (!circleData) return null;
-  var _scale2 = (0, _slicedToArray2["default"])(scale, 2),
-    xScale = _scale2[0],
-    yScale = _scale2[1];
-  var SBubble = Element;
-  var SCenter = 'text';
-  var SLabel = 'text';
-  var z = (0, _utils.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])) < (0, _utils.measureText)(circleData[label]) ? 'right' : 'left';
-  var labelDistance = {
+  const [xScale, yScale] = scale;
+  const SBubble = Element;
+  const SCenter = 'text';
+  const SLabel = 'text';
+  const z = (0, _utils.getBubbleChartValueScale)(data, value);
+  const margin = Math.min(xScale.range()[0], xScale.range()[1]);
+  const labelPosition = size[0] - 2 * margin - (xScale(circleData[x]) + offset[0] + z(circleData[value])) < (0, _utils.measureText)(circleData[label]) ? 'right' : 'left';
+  const labelDistance = {
     right: xScale(circleData[x]) + offset[0] - z(circleData[value]),
     left: xScale(circleData[x]) + offset[0] + z(circleData[value])
   }[labelPosition];
-  return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_SvgElement.SvgElement, _ref3.cn("SvgElement", {
+  return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_SvgElement.SvgElement, _ref3.cn("SvgElement", {
     "tag": 'g',
-    "key": "circle(#".concat(index, ")"),
+    "key": `circle(#${index})`,
     "onClickCapture": (0, _assignProps2.callAllEventHandlers)(onClickCircleRoot(index), onClick),
     "onMouseMove": bindHandlerTooltip(true, props, {
       xIndex: index,
-      index: index,
-      patterns: patterns
+      index,
+      patterns
     }),
     "onMouseLeave": bindHandlerTooltip(false, props, {
       xIndex: index,
-      index: index,
-      patterns: patterns
+      index,
+      patterns
     }),
-    "visible": "".concat(visible)
-  }), markedCross && /*#__PURE__*/_react["default"].createElement(SCenter, _ref3.cn("SCenter", {
+    "visible": `${visible}`
+  }), markedCross && /*#__PURE__*/_react.default.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),
+    "clipPath": `url(#${uid})`,
+    "color": resolveColor(circleData[color] ?? color),
     "transparent": transparent
-  }), "+"), /*#__PURE__*/_react["default"].createElement(SBubble, _ref3.cn("SBubble", {
+  }), "+"), /*#__PURE__*/_react.default.createElement(SBubble, _ref3.cn("SBubble", {
     "aria-hidden": true,
-    "id": "".concat(uid).concat(uid),
+    "id": `${uid}${uid}`,
     "index": index,
     "render": 'circle',
-    "clipPath": "url(#".concat(uid, ")"),
+    "clipPath": `url(#${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)") : undefined,
+    "pattern": patterns ? `url(#${uid}-${index}-pattern)` : undefined,
     "r": z(circleData[value]),
-    "use:duration": "".concat(duration, "ms"),
+    "use:duration": `${duration}ms`,
     "transparent": transparent
-  })), patterns && /*#__PURE__*/_react["default"].createElement(_Pattern.PatternFill, _ref3.cn("PatternFill", {
-    "id": "".concat(uid, "-").concat(index, "-pattern"),
+  })), patterns && /*#__PURE__*/_react.default.createElement(_Pattern.PatternFill, _ref3.cn("PatternFill", {
+    "id": `${uid}-${index}-pattern`,
     "patternKey": circleData[color],
     "color": resolveColor(circleData[color]),
     "patterns": patterns
-  })), circleData[label] && /*#__PURE__*/_react["default"].createElement(SLabel, _ref3.cn("SLabel", {
+  })), circleData[label] && /*#__PURE__*/_react.default.createElement(SLabel, _ref3.cn("SLabel", {
     "aria-hidden": true,
     "x": labelDistance,
     "y": yScale(circleData[y]) + offset[1],
     "dy": '.3em',
-    "clipPath": "url(#".concat(uid, ")"),
+    "clipPath": `url(#${uid})`,
     "position": labelPosition,
     "color": resolveColor(circleData[color]),
     "transparent": transparent
   }), circleData[label]));
 }
-var Bubble = (0, _createElement["default"])(BubbleRoot, {
-  Tooltip: [BubbleTooltip, _Tooltip["default"]._______childrenComponents],
+const Bubble = (0, _createElement.default)(BubbleRoot, {
+  Tooltip: [BubbleTooltip, _Tooltip.default._______childrenComponents],
   Circle: BubbleCircle
 });
-var _default = exports["default"] = Bubble;
+var _default = exports.default = Bubble;
 //# sourceMappingURL=Bubble.js.map