@semcore/d3-chart 3.60.0 → 3.60.1

package/lib/esm/Reference.mjs

@@ -0,0 +1,243 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import React from "react";
+import { sstyled as sstyled$1, Component } from "@semcore/core";
+import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import createElement from "./createElement.mjs";
+import { scaleOfBandwidth } from "./utils.mjs";
+/*!__reshadow-styles__:"./style/reference.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SReferenceLine_157js_gg_{fill:none;stroke:var(--intergalactic-chart-grid-y-accent-hover-line, #a9abb6)}.___STitle_157js_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, #6c6e79);transform-origin:var(--transform-origin_157js)}.___STitle_157js_gg_._position_top_157js_gg_{text-anchor:middle}.___STitle_157js_gg_._position_bottom_157js_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_157js_gg_._position_left_157js_gg_,.___STitle_157js_gg_._position_right_157js_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___SBackground_157js_gg_{fill:var(--intergalactic-chart-grid-period-bg, rgba(196, 199, 207, 0.2))}.___SStripes_157js_gg_{fill:var(--fill_157js)}.___SStripesPatternPath_157js_gg_{stroke:var(--intergalactic-chart-grid-period-pattern, rgba(25, 27, 35, 0.15));stroke-width:1px}",
+    /*__inner_css_end__*/
+    "157js_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SReferenceLine": "___SReferenceLine_157js_gg_",
+    "__STitle": "___STitle_157js_gg_",
+    "--transform-origin": "--transform-origin_157js",
+    "_position_top": "_position_top_157js_gg_",
+    "_position_bottom": "_position_bottom_157js_gg_",
+    "_position_right": "_position_right_157js_gg_",
+    "_position_left": "_position_left_157js_gg_",
+    "__SBackground": "___SBackground_157js_gg_",
+    "__SStripes": "___SStripes_157js_gg_",
+    "--fill": "--fill_157js",
+    "__SStripesPatternPath": "___SStripesPatternPath_157js_gg_"
+  })
+);
+var side2direction = {
+  left: "vertical",
+  right: "vertical",
+  top: "horizontal",
+  bottom: "horizontal"
+};
+var lineDirection2props = {
+  vertical: function vertical(_ref5, value) {
+    var _ref6 = _slicedToArray(_ref5, 2), xScale = _ref6[0], yScale = _ref6[1];
+    var yRange = yScale.range();
+    var x = scaleOfBandwidth(xScale, value);
+    return {
+      x1: x,
+      x2: x,
+      y1: yRange[0],
+      y2: yRange[1]
+    };
+  },
+  horizontal: function horizontal(_ref7, value) {
+    var _ref8 = _slicedToArray(_ref7, 2), xScale = _ref8[0], yScale = _ref8[1];
+    var xRange = xScale.range();
+    var y = scaleOfBandwidth(yScale, value);
+    return {
+      x1: xRange[0],
+      x2: xRange[1],
+      y1: y,
+      y2: y
+    };
+  }
+};
+var rectDirection2props = {
+  vertical: function vertical2(_ref9, value, endValue) {
+    var _ref10 = _slicedToArray(_ref9, 2), xScale = _ref10[0], yScale = _ref10[1];
+    var yRange = yScale.range();
+    var x = scaleOfBandwidth(xScale, value);
+    var width = endValue !== void 0 ? scaleOfBandwidth(xScale, endValue) - x : 100;
+    return {
+      x,
+      y: yRange[1],
+      width,
+      height: yRange[0] - yRange[1]
+    };
+  },
+  horizontal: function horizontal2(_ref11, value, endValue) {
+    var _ref12 = _slicedToArray(_ref11, 2), xScale = _ref12[0], yScale = _ref12[1];
+    var xRange = xScale.range();
+    var y = scaleOfBandwidth(yScale, value);
+    var height = endValue !== void 0 ? scaleOfBandwidth(yScale, endValue) - y : 100;
+    return {
+      x: xRange[0],
+      y,
+      width: xRange[1] - xRange[0],
+      height
+    };
+  }
+};
+var titleOffset = 10;
+var titleSideToProps = {
+  left: function left(_ref13, value) {
+    var _ref14 = _slicedToArray(_ref13, 2), xScale = _ref14[0], yScale = _ref14[1];
+    var yRange = yScale.range();
+    var x = scaleOfBandwidth(xScale, value);
+    return {
+      x: x - titleOffset,
+      y: (yRange[0] + yRange[1]) / 2
+    };
+  },
+  right: function right(_ref15, value) {
+    var _ref16 = _slicedToArray(_ref15, 2), xScale = _ref16[0], yScale = _ref16[1];
+    var yRange = yScale.range();
+    var x = scaleOfBandwidth(xScale, value);
+    return {
+      x: x + titleOffset,
+      y: (yRange[0] + yRange[1]) / 2
+    };
+  },
+  top: function top(_ref17, value) {
+    var _ref18 = _slicedToArray(_ref17, 2), xScale = _ref18[0], yScale = _ref18[1];
+    var xRange = xScale.range();
+    var y = scaleOfBandwidth(yScale, value);
+    return {
+      x: (xRange[1] + xRange[0]) / 2,
+      y: y - titleOffset
+    };
+  },
+  bottom: function bottom(_ref19, value) {
+    var _ref20 = _slicedToArray(_ref19, 2), xScale = _ref20[0], yScale = _ref20[1];
+    var xRange = xScale.range();
+    var y = scaleOfBandwidth(yScale, value);
+    return {
+      x: (xRange[1] + xRange[0]) / 2,
+      y: y + titleOffset
+    };
+  }
+};
+var ReferenceLineRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(ReferenceLineRoot2, _Component);
+  var _super = _createSuper(ReferenceLineRoot2);
+  function ReferenceLineRoot2() {
+    _classCallCheck(this, ReferenceLineRoot2);
+    return _super.apply(this, arguments);
+  }
+  _createClass(ReferenceLineRoot2, [{
+    key: "getTitleProps",
+    value: function getTitleProps() {
+      var _this$asProps = this.asProps, position = _this$asProps.position, value = _this$asProps.value;
+      return {
+        position,
+        value
+      };
+    }
+  }, {
+    key: "getBackgroundProps",
+    value: function getBackgroundProps() {
+      var _this$asProps2 = this.asProps, position = _this$asProps2.position, value = _this$asProps2.value;
+      return {
+        position,
+        value
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref;
+      var SReferenceLine = this.Element;
+      var _this$asProps3 = this.asProps, title = _this$asProps3.title, scale = _this$asProps3.scale, position = _this$asProps3.position, value = _this$asProps3.value, color = _this$asProps3.color, resolveColor = _this$asProps3.resolveColor, styles = _this$asProps3.styles;
+      var positionProps = lineDirection2props[side2direction[position]];
+      return _ref = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SReferenceLine, _ref.cn("SReferenceLine", _objectSpread({
+        "render": "line",
+        "__excludeProps": ["data", "scale", "format", "value", "color"],
+        "stroke": resolveColor(color)
+      }, positionProps(scale, value)))), title && /* @__PURE__ */ React.createElement(ReferenceLine.Title, null, title));
+    }
+  }]);
+  return ReferenceLineRoot2;
+}(Component);
+_defineProperty(ReferenceLineRoot, "displayName", "ReferenceLine");
+_defineProperty(ReferenceLineRoot, "style", style);
+_defineProperty(ReferenceLineRoot, "defaultProps", {
+  position: "left"
+});
+function Title(props) {
+  var _ref2;
+  var STitle = props.Element, styles = props.styles, scale = props.scale, position = props.position, value = props.value;
+  var _titleSideToProps$pos = titleSideToProps[position](scale, value), x = _titleSideToProps$pos.x, y = _titleSideToProps$pos.y;
+  var sstyles = sstyled$1(styles);
+  var sTitleStyles = sstyles.cn("STitle", {
+    "transform-origin": "".concat(x.toFixed(2), "px ").concat(y.toFixed(2), "px")
+  });
+  return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STitle, _ref2.cn("STitle", {
+    "render": "text",
+    "childrenPosition": "inside",
+    "className": sTitleStyles.className,
+    "style": sTitleStyles.style,
+    "position": position,
+    "x": x,
+    "y": y
+  }));
+}
+function Background(props) {
+  var _ref3;
+  var SBackground = props.Element, styles = props.styles, scale = props.scale, _props$position = props.position, position = _props$position === void 0 ? "left" : _props$position, value = props.value, endValue = props.endValue;
+  var positionProps = rectDirection2props[side2direction[position]];
+  return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBackground, _ref3.cn("SBackground", _objectSpread({
+    "render": "rect",
+    "childrenPosition": "inside"
+  }, positionProps(scale, value, endValue))));
+}
+Background.style = style;
+var diagonalGap = 8;
+var gap = Math.sqrt(Math.pow(diagonalGap, 2) + Math.pow(diagonalGap, 2));
+var gap12 = gap * (1 / 2);
+var gap32 = gap * (3 / 2);
+var path = "M-".concat(gap, ",-").concat(gap12, " L").concat(gap, ",").concat(gap32, " M-").concat(gap12, ",-").concat(gap, " L").concat(gap32, ",").concat(gap);
+function Stripes(props) {
+  var _ref4;
+  var SStripes = props.Element, styles = props.styles, scale = props.scale, _props$position2 = props.position, position = _props$position2 === void 0 ? "left" : _props$position2, value = props.value, endValue = props.endValue, uid = props.uid;
+  var SStripesPatternPath = "path";
+  var positionProps = rectDirection2props[side2direction[position]];
+  var patternId = "".concat(uid, "-pattern");
+  return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement("g", _ref4.cn("g", {}), /* @__PURE__ */ React.createElement(SStripes, _ref4.cn("SStripes", _objectSpread({
+    "render": "rect",
+    "childrenPosition": "inside",
+    "fill": "url(#".concat(patternId, ")")
+  }, positionProps(scale, value, endValue)))), /* @__PURE__ */ React.createElement("pattern", _ref4.cn("pattern", {
+    "id": patternId,
+    "patternUnits": "userSpaceOnUse",
+    "width": gap,
+    "height": gap
+  }), /* @__PURE__ */ React.createElement(SStripesPatternPath, _ref4.cn("SStripesPatternPath", {
+    "d": path
+  }))));
+}
+Stripes.style = style;
+Stripes.enhance = [uniqueIDEnhancement()];
+var ReferenceLine = createElement(ReferenceLineRoot, {
+  Title,
+  Background,
+  Stripes
+});
+var ReferenceBackground = createElement(Background);
+var ReferenceStripes = createElement(Stripes);
+export {
+  ReferenceBackground,
+  ReferenceLine,
+  ReferenceStripes
+};

package/lib/esm/ResponsiveContainer.mjs

@@ -0,0 +1,99 @@
+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 createComponent, { sstyled, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import trottle from "@semcore/utils/lib/rafTrottle";
+import fire from "@semcore/utils/lib/fire";
+import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
+import canUseDOM from "@semcore/utils/lib/canUseDOM";
+var ResponsiveContainerRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(ResponsiveContainerRoot2, _Component);
+  var _super = _createSuper(ResponsiveContainerRoot2);
+  function ResponsiveContainerRoot2(props) {
+    var _this;
+    _classCallCheck(this, ResponsiveContainerRoot2);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "size", [0, 0]);
+    _defineProperty(_assertThisInitialized(_this), "handleResize", trottle(function(entries) {
+      var _this$asProps = _this.asProps, Children = _this$asProps.Children, aspect = _this$asProps.aspect;
+      if (!_this.$container) return;
+      var _this$$container = _this.$container, width = _this$$container.clientWidth, height = _this$$container.clientHeight;
+      if (aspect) {
+        var style = window.getComputedStyle(_this.$container);
+        var minHeight = Number.parseInt(style.getPropertyValue("min-height"));
+        var maxHeight = Number.parseInt(style.getPropertyValue("max-height"));
+        height = width * aspect;
+        if (height < minHeight) {
+          height = minHeight;
+        }
+        if (height > maxHeight) {
+          height = maxHeight;
+        }
+      }
+      if (_this.size[0] === width && _this.size[1] === height) return;
+      _this.size = [width, height];
+      fire(_assertThisInitialized(_this), "onResize", _this.size, entries);
+      if (typeof getOriginChildren(Children) === "function") {
+        _this.forceUpdate();
+      }
+    }));
+    if (canUseDOM()) {
+      _this.observer = new ResizeObserver(_this.handleResize);
+    }
+    return _this;
+  }
+  _createClass(ResponsiveContainerRoot2, [{
+    key: "$container",
+    get: function get() {
+      return this.containerRef.current;
+    }
+  }, {
+    key: "setContext",
+    value: function setContext() {
+      var _this$size = _slicedToArray(this.size, 2), width = _this$size[0], height = _this$size[1];
+      return {
+        width,
+        height
+      };
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.$container) {
+        var _this$observer;
+        (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.observe(this.$container);
+      }
+    }
+    // TODO component did update ref?
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$observer2;
+      (_this$observer2 = this.observer) === null || _this$observer2 === void 0 ? void 0 : _this$observer2.disconnect();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SResponsiveContainer = Box;
+      var styles = this.asProps.styles;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SResponsiveContainer, _ref2.cn("SResponsiveContainer", _objectSpread({}, assignProps({
+        "ref": this.containerRef
+      }, _ref))));
+    }
+  }]);
+  return ResponsiveContainerRoot2;
+}(Component);
+_defineProperty(ResponsiveContainerRoot, "displayName", "ResponsiveContainer");
+var ResponsiveContainer = createComponent(ResponsiveContainerRoot);
+export {
+  ResponsiveContainer as default
+};

package/lib/esm/ScatterPlot.mjs

@@ -0,0 +1,194 @@
+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 canUseDOM from "@semcore/utils/lib/canUseDOM";
+import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import createElement from "./createElement.mjs";
+import { getScatterPlotRadius } from "./utils.mjs";
+import Tooltip from "./Tooltip.mjs";
+import { PatternFill } from "./Pattern.mjs";
+/*!__reshadow-styles__:"./style/scatterplot.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SScatterPlot_bcv24_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:cx,cy;transition-duration:var(--duration_bcv24);transition-timing-function:ease-in-out;opacity:.5}@media (hover:hover){.___SScatterPlot_bcv24_gg_:hover{opacity:.8}}.___SScatterPlot_bcv24_gg_.__color_bcv24_gg_{fill:var(--color_bcv24)}.___SScatterPlot_bcv24_gg_.__pattern_bcv24_gg_.__color_bcv24_gg_{fill:var(--pattern_bcv24);stroke:var(--color_bcv24);stroke-width:1px}.___SScatterPlot_bcv24_gg_.__transparent_bcv24_gg_{opacity:.3}.___SValue_bcv24_gg_{text-anchor:middle;font-size:var(--intergalactic-fs-50, 10px);stroke:var(--intergalactic-chart-palette-order-9, #008ff8)}.___SValue_bcv24_gg_.__color_bcv24_gg_{stroke:var(--color_bcv24)}.___SValue_bcv24_gg_.__transparent_bcv24_gg_{opacity:.3}",
+    /*__inner_css_end__*/
+    "bcv24_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SScatterPlot": "___SScatterPlot_bcv24_gg_",
+    "_color": "__color_bcv24_gg_",
+    "--color": "--color_bcv24",
+    "_pattern": "__pattern_bcv24_gg_",
+    "--pattern": "--pattern_bcv24",
+    "_transparent": "__transparent_bcv24_gg_",
+    "__SValue": "___SValue_bcv24_gg_",
+    "--duration": "--duration_bcv24"
+  })
+);
+var ScatterPlotRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(ScatterPlotRoot2, _Component);
+  var _super = _createSuper(ScatterPlotRoot2);
+  function ScatterPlotRoot2() {
+    var _this;
+    _classCallCheck(this, ScatterPlotRoot2);
+    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), "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _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(ScatterPlotRoot2, [{
+    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, r = _this$asProps.r, value = _this$asProps.value;
+      var radius = r ? r : getScatterPlotRadius(value);
+      var selectRect = transition().selection().selectAll("[id^=".concat(uid, "]")).attr("r", 0);
+      var selectRectNode = selectRect.node();
+      if (duration > 0 && selectRectNode) {
+        selectRect.transition().duration(duration).attr("r", radius);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.data !== this.props.data) {
+        this.animationCircle();
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.animationCircle();
+    }
+  }, {
+    key: "renderCircle",
+    value: function renderCircle(d, i) {
+      var _ref2;
+      var _this$asProps2 = this.asProps, color = _this$asProps2.color, scale = _this$asProps2.scale, x = _this$asProps2.x, y = _this$asProps2.y, r = _this$asProps2.r, offset = _this$asProps2.offset, styles = _this$asProps2.styles, uid = _this$asProps2.uid, duration = _this$asProps2.duration, value = _this$asProps2.value, valueColor = _this$asProps2.valueColor, transparent = _this$asProps2.transparent, resolveColor = _this$asProps2.resolveColor, patterns = _this$asProps2.patterns;
+      var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
+      var SScatterPlot = this.Element;
+      var SValue = "text";
+      if (Number.isNaN(d[x]) || Number.isNaN(d[y])) {
+        return null;
+      }
+      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement("g", _ref2.cn("g", {
+        "aria-hidden": true,
+        "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
+        })
+      }), /* @__PURE__ */ React.createElement(SScatterPlot, _ref2.cn("SScatterPlot", {
+        "aria-hidden": true,
+        "id": "".concat(uid).concat(i),
+        "index": i,
+        "render": "circle",
+        "clipPath": "url(#".concat(uid, ")"),
+        "cx": xScale(d[x]) + offset[0],
+        "cy": yScale(d[y]) + offset[1],
+        "color": resolveColor(color),
+        "pattern": patterns ? "url(#".concat(uid, "-").concat(i, "-pattern)") : void 0,
+        "r": r,
+        "use:duration": "".concat(duration, "ms"),
+        "transparent": transparent
+      })), patterns && /* @__PURE__ */ React.createElement(PatternFill, _ref2.cn("PatternFill", {
+        "id": "".concat(uid, "-").concat(i, "-pattern"),
+        "patternKey": color,
+        "color": resolveColor(color),
+        "patterns": patterns
+      })), d[value] !== void 0 && /* @__PURE__ */ React.createElement(SValue, _ref2.cn("SValue", {
+        "aria-hidden": true,
+        "x": xScale(d[x]) + offset[0],
+        "y": yScale(d[y]) + offset[1],
+        "dy": ".3em",
+        "clipPath": "url(#".concat(uid, ")"),
+        "color": resolveColor(valueColor),
+        "transparent": transparent
+      }), d[value]));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$asProps3 = this.asProps, data = _this$asProps3.data, uid = _this$asProps3.uid, scale = _this$asProps3.scale, x = _this$asProps3.x, y = _this$asProps3.y, value = _this$asProps3.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", {
+        id: uid
+      }, /* @__PURE__ */ React.createElement("rect", {
+        x: xMargin,
+        y: yMargin,
+        width: "".concat(xSize, "px"),
+        height: "".concat(ySize, "px")
+      })));
+    }
+  }]);
+  return ScatterPlotRoot2;
+}(Component);
+_defineProperty(ScatterPlotRoot, "displayName", "ScatterPlot");
+_defineProperty(ScatterPlotRoot, "style", style);
+_defineProperty(ScatterPlotRoot, "enhance", [uniqueIDEnhancement()]);
+_defineProperty(ScatterPlotRoot, "defaultProps", {
+  offset: [0, 0],
+  duration: 500
+});
+var ScatterPlotTooltip = function ScatterPlotTooltip2(props) {
+  var _ref = arguments[0], _ref3;
+  var SScatterPlotTooltip = Tooltip;
+  return _ref3 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SScatterPlotTooltip, _ref3.cn("SScatterPlotTooltip", _objectSpread({}, assignProps({
+    "excludeAnchorProps": true
+  }, _ref))));
+};
+var ScatterPlot = createElement(ScatterPlotRoot, {
+  Tooltip: [ScatterPlotTooltip, Tooltip._______childrenComponents]
+});
+export {
+  ScatterPlot as default
+};