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

package/lib/esm/Bubble.mjs

@@ -1,9 +1,3 @@
-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 _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, assignProps, Component } from "@semcore/core";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
@@ -17,158 +11,173 @@ import { PatternFill } from "./Pattern.mjs";
 import Tooltip from "./Tooltip.mjs";
 import { getBubbleChartValueScale, measureText } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/bubble.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (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}",
+    ".___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__*/
-    "1d4b3_gg_"
+    "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 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) {
-      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 Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(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;
   }
-  _inherits(BubbleRoot2, _Component);
-  return _createClass(BubbleRoot2, [{
-    key: "generateGetBoundingClientRect",
-    value: function generateGetBoundingClientRect() {
-      var x = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
-      var y = arguments.length > 1 && arguments[1] !== void 0 ? 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 = getBubbleChartValueScale(data, value);
-      var selectRect = 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 = getBubbleChartValueScale(data, value);
+    const selectRect = transition().selection().selectAll(`[id^=${uid}${uid}]`).attr("r", 0);
+    const selectRectNode = selectRect.node();
+    if (selectRectNode) {
+      selectRect.transition().duration(duration).attr("r", function(_, ind) {
+        var _a;
+        return z((_a = data[ind]) == null ? void 0 : _a[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,
-        scale,
-        x,
-        y,
-        offset,
-        styles,
-        uid,
-        duration,
-        value,
-        label,
-        markedCross,
-        size,
-        data,
-        transparent,
-        resolveColor,
-        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 = _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");
-      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", {
-        x: xMargin,
-        y: yMargin,
-        width: "".concat(xSize, "px"),
-        height: "".concat(ySize, "px")
-      }), " "));
-    }
-  }]);
-})(Component);
+  }
+  componentDidMount() {
+    this.animationCircle();
+  }
+  handlerOnClick(index) {
+    return (e) => {
+      e.stopPropagation();
+      const {
+        onClick
+      } = this.asProps;
+      onClick == null ? void 0 : 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(findComponent(Children, [Bubble.Circle.displayName]));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, isAdvancedMode ? /* @__PURE__ */ React.createElement(Children, null) : data.map((_, idx) => /* @__PURE__ */ React.createElement(Bubble.Circle, {
+      key: idx,
+      index: idx
+    })), /* @__PURE__ */ React.createElement("clipPath", {
+      "aria-hidden": true,
+      id: uid
+    }, /* @__PURE__ */ React.createElement("rect", {
+      x: xMargin,
+      y: yMargin,
+      width: `${xSize}px`,
+      height: `${ySize}px`
+    }), " "));
+  }
+}
 _defineProperty(BubbleRoot, "displayName", "Bubble");
 _defineProperty(BubbleRoot, "style", style);
 _defineProperty(BubbleRoot, "enhance", [uniqueIDEnhancement()]);
@@ -179,30 +188,55 @@ _defineProperty(BubbleRoot, "defaultProps", {
 });
 function BubbleTooltip(props) {
   var _ref = arguments[0], _ref2;
-  var SBubbleTooltip = Tooltip;
-  return _ref2 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SBubbleTooltip, _ref2.cn("SBubbleTooltip", _objectSpread({}, assignProps({
-    "excludeAnchorProps": true
-  }, _ref))));
+  const SBubbleTooltip = Tooltip;
+  return _ref2 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SBubbleTooltip, _ref2.cn("SBubbleTooltip", {
+    ...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 = _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 = {
+  const [xScale, yScale] = scale;
+  const SBubble = Element;
+  const SCenter = "text";
+  const SLabel = "text";
+  const z = 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])) < 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 = sstyled(styles), /* @__PURE__ */ React.createElement(SvgElement, _ref3.cn("SvgElement", {
     "tag": "g",
-    "key": "circle(#".concat(index, ")"),
+    "key": `circle(#${index})`,
     "onClickCapture": callAllEventHandlers(onClickCircleRoot(index), onClick),
     "onMouseMove": bindHandlerTooltip(true, props, {
       xIndex: index,
@@ -214,30 +248,30 @@ function BubbleCircle(props) {
       index,
       patterns
     }),
-    "visible": "".concat(visible)
+    "visible": `${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),
+    "clipPath": `url(#${uid})`,
+    "color": resolveColor(circleData[color] ?? color),
     "transparent": transparent
   }), "+"), /* @__PURE__ */ React.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)") : void 0,
+    "pattern": patterns ? `url(#${uid}-${index}-pattern)` : void 0,
     "r": z(circleData[value]),
-    "use:duration": "".concat(duration, "ms"),
+    "use:duration": `${duration}ms`,
     "transparent": transparent
   })), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref3.cn("PatternFill", {
-    "id": "".concat(uid, "-").concat(index, "-pattern"),
+    "id": `${uid}-${index}-pattern`,
     "patternKey": circleData[color],
     "color": resolveColor(circleData[color]),
     "patterns": patterns
@@ -246,13 +280,13 @@ function BubbleCircle(props) {
     "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 = createElement(BubbleRoot, {
+const Bubble = createElement(BubbleRoot, {
   Tooltip: [BubbleTooltip, Tooltip._______childrenComponents],
   Circle: BubbleCircle
 });