@semcore/d3-chart 3.60.0 → 3.60.1

package/lib/esm/Bubble.mjs

@@ -0,0 +1,216 @@
+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 _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 { transition } from "d3-transition";
+import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import createElement from "./createElement.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_lk086_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_lk086);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SBubble_lk086_gg_:hover{opacity:.8}}.___SBubble_lk086_gg_.__color_lk086_gg_{fill:var(--color_lk086)}.___SBubble_lk086_gg_.__pattern_lk086_gg_.__color_lk086_gg_{fill:var(--pattern_lk086);stroke:var(--color_lk086);stroke-width:1px}.___SBubble_lk086_gg_.__transparent_lk086_gg_{opacity:.3}.___SCenter_lk086_gg_{text-anchor:middle;font-size:calc(var(--intergalactic-fs-100, 12px) - 1px);stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SCenter_lk086_gg_.__color_lk086_gg_{stroke:var(--color_lk086)}.___SCenter_lk086_gg_.__transparent_lk086_gg_{opacity:.3}.___SLabel_lk086_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLabel_lk086_gg_._position_right_lk086_gg_{text-anchor:end}.___SLabel_lk086_gg_._position_left_lk086_gg_{text-anchor:start}.___SLabel_lk086_gg_.__color_lk086_gg_{fill:var(--color_lk086)}.___SLabel_lk086_gg_.__transparent_lk086_gg_{opacity:.3}",
+    /*__inner_css_end__*/
+    "lk086_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SBubble": "___SBubble_lk086_gg_",
+    "_color": "__color_lk086_gg_",
+    "--color": "--color_lk086",
+    "_pattern": "__pattern_lk086_gg_",
+    "--pattern": "--pattern_lk086",
+    "_transparent": "__transparent_lk086_gg_",
+    "__SCenter": "___SCenter_lk086_gg_",
+    "__SLabel": "___SLabel_lk086_gg_",
+    "_position_right": "_position_right_lk086_gg_",
+    "_position_left": "_position_left_lk086_gg_",
+    "--duration": "--duration_lk086"
+  })
+);
+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 = _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 eventEmitter = _this.asProps.eventEmitter;
+        eventEmitter.emit("setTooltipPosition", clientX, clientY);
+        eventEmitter.emit("setTooltipRenderingProps", props, tooltipProps);
+        eventEmitter.emit("setTooltipVisible", visible);
+      };
+    });
+    return _this;
+  }
+  _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$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();
+      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$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) {
+        this.animationCircle();
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      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: "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 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", {
+        "aria-hidden": true,
+        id: uid
+      }, /* @__PURE__ */ React.createElement("rect", {
+        x: xMargin,
+        y: yMargin,
+        width: "".concat(xSize, "px"),
+        height: "".concat(ySize, "px")
+      }), " "));
+    }
+  }]);
+  return BubbleRoot2;
+}(Component);
+_defineProperty(BubbleRoot, "displayName", "Bubble");
+_defineProperty(BubbleRoot, "style", style);
+_defineProperty(BubbleRoot, "enhance", [uniqueIDEnhancement()]);
+_defineProperty(BubbleRoot, "defaultProps", {
+  offset: [0, 0],
+  duration: 500,
+  markedCross: true
+});
+var BubbleTooltip = function BubbleTooltip2(props) {
+  var _ref = arguments[0], _ref3;
+  var SBubbleTooltip = Tooltip;
+  return _ref3 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SBubbleTooltip, _ref3.cn("SBubbleTooltip", _objectSpread({}, assignProps({
+    "excludeAnchorProps": true
+  }, _ref))));
+};
+var Bubble = createElement(BubbleRoot, {
+  Tooltip: [BubbleTooltip, Tooltip._______childrenComponents]
+});
+export {
+  Bubble as default
+};