@semcore/d3-chart 3.60.2-prerelease.0 → 3.61.0-prerelease.0

package/lib/esm/HorizontalBar.mjs

@@ -1,42 +1,41 @@
 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 _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, Component } from "@semcore/core";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 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 AnimatedClipPath from "./AnimatedClipPath.mjs";
-import { scaleToBand, roundedPath } from "./utils.mjs";
+import createElement from "./createElement.mjs";
 import { PatternFill } from "./Pattern.mjs";
+import { scaleToBand, roundedPath } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/bar.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBar_1rmdr_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1rmdr);transition-timing-function:ease-in-out}.___SBar_1rmdr_gg_.__color_1rmdr_gg_{fill:var(--color_1rmdr)}.___SBar_1rmdr_gg_.__pattern_1rmdr_gg_.__color_1rmdr_gg_{fill:var(--pattern_1rmdr);stroke:var(--color_1rmdr);stroke-width:1px}.___SBar_1rmdr_gg_.__hide_1rmdr_gg_{display:none}.___SBar_1rmdr_gg_.__transparent_1rmdr_gg_{opacity:.3}.___SBackground_1rmdr_gg_.__onClick_1rmdr_gg_,.___SBar_1rmdr_gg_.__onClick_1rmdr_gg_{cursor:pointer}.___SBackground_1rmdr_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1rmdr_gg_{display:flex;justify-content:space-between}.___SBarLabel_1rmdr_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1rmdr_gg_,.___SBarPercent_1rmdr_gg_,.___SBarValue_1rmdr_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1rmdr_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1rmdr_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1rmdr_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SBar_1l5sd_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210));transition-property:height,width,y;transition-duration:var(--duration_1l5sd);transition-timing-function:ease-in-out}.___SBar_1l5sd_gg_.__color_1l5sd_gg_{fill:var(--color_1l5sd)}.___SBar_1l5sd_gg_.__pattern_1l5sd_gg_.__color_1l5sd_gg_{fill:var(--pattern_1l5sd);stroke:var(--color_1l5sd);stroke-width:1px}.___SBar_1l5sd_gg_.__hide_1l5sd_gg_{display:none}.___SBar_1l5sd_gg_.__transparent_1l5sd_gg_{opacity:.3}.___SBackground_1l5sd_gg_.__onClick_1l5sd_gg_,.___SBar_1l5sd_gg_.__onClick_1l5sd_gg_{cursor:pointer}.___SBackground_1l5sd_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242))}.___SBarAnnotation_1l5sd_gg_{display:flex;justify-content:space-between}.___SBarLabel_1l5sd_gg_,.___SBarPercent_1l5sd_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarLabel_1l5sd_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:auto}.___SBarPercent_1l5sd_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));margin-right:var(--intergalactic-spacing-2x, 8px)}@supports (color:color(display-p3 0 0 0%)){.___SBarPercent_1l5sd_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBarPercent_1l5sd_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SBarValue_1l5sd_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);text-align:right}.___SCompactHorizontalBarHoverRect_1l5sd_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(0, 22, 16, 0.028))}",
     /*__inner_css_end__*/
-    "1rmdr_gg_"
+    "1l5sd_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBar": "___SBar_1rmdr_gg_",
-    "--duration": "--duration_1rmdr",
-    "_color": "__color_1rmdr_gg_",
-    "--color": "--color_1rmdr",
-    "_pattern": "__pattern_1rmdr_gg_",
-    "--pattern": "--pattern_1rmdr",
-    "_hide": "__hide_1rmdr_gg_",
-    "_transparent": "__transparent_1rmdr_gg_",
-    "_onClick": "__onClick_1rmdr_gg_",
-    "__SBackground": "___SBackground_1rmdr_gg_",
-    "__SBarAnnotation": "___SBarAnnotation_1rmdr_gg_",
-    "__SBarLabel": "___SBarLabel_1rmdr_gg_",
-    "__SBarPercent": "___SBarPercent_1rmdr_gg_",
-    "__SBarValue": "___SBarValue_1rmdr_gg_",
-    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1rmdr_gg_"
+    "__SBar": "___SBar_1l5sd_gg_",
+    "--duration": "--duration_1l5sd",
+    "_color": "__color_1l5sd_gg_",
+    "--color": "--color_1l5sd",
+    "_pattern": "__pattern_1l5sd_gg_",
+    "--pattern": "--pattern_1l5sd",
+    "_hide": "__hide_1l5sd_gg_",
+    "_transparent": "__transparent_1l5sd_gg_",
+    "_onClick": "__onClick_1l5sd_gg_",
+    "__SBackground": "___SBackground_1l5sd_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_1l5sd_gg_",
+    "__SBarLabel": "___SBarLabel_1l5sd_gg_",
+    "__SBarPercent": "___SBarPercent_1l5sd_gg_",
+    "__SBarValue": "___SBarValue_1l5sd_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1l5sd_gg_"
   })
 );
 var MIN_WIDTH = 2;
@@ -46,14 +45,13 @@ var calcPartBarX = function calcPartBarX2(x, minWidth, width) {
   }
   return Object.is(x, 0) ? minWidth : 0;
 };
-var HorizontalBarRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(HorizontalBarRoot2, _Component);
-  var _super = _createSuper(HorizontalBarRoot2);
+var HorizontalBarRoot = /* @__PURE__ */ (function(_Component) {
   function HorizontalBarRoot2() {
     _classCallCheck(this, HorizontalBarRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, HorizontalBarRoot2, arguments);
   }
-  _createClass(HorizontalBarRoot2, [{
+  _inherits(HorizontalBarRoot2, _Component);
+  return _createClass(HorizontalBarRoot2, [{
     key: "getBackgroundProps",
     value: function getBackgroundProps(_props, index) {
       var _this$asProps = this.asProps, data = _this$asProps.data, y = _this$asProps.y;
@@ -67,7 +65,7 @@ var HorizontalBarRoot = /* @__PURE__ */ function(_Component) {
     value: function renderBar(d, i) {
       var _ref, _d$x, _d$x2, _d$x3;
       var SBar = this.Element;
-      var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, color = _this$asProps2.color, x = _this$asProps2.x, x0 = _this$asProps2.x0, y = _this$asProps2.y, scale = _this$asProps2.scale, hide = _this$asProps2.hide, offsetProps = _this$asProps2.offset, uid = _this$asProps2.uid, duration = _this$asProps2.duration, r = _this$asProps2.r, wMin = _this$asProps2.wMin, heightProps = _this$asProps2.height, onMouseMove = _this$asProps2.onMouseMove, onMouseLeave = _this$asProps2.onMouseLeave, groupKey = _this$asProps2.groupKey, transparent = _this$asProps2.transparent, _this$asProps2$maxBar = _this$asProps2.maxBarSize, maxBarSize = _this$asProps2$maxBar === void 0 ? Infinity : _this$asProps2$maxBar, resolveColor = _this$asProps2.resolveColor, patterns = _this$asProps2.patterns, onClick = _this$asProps2.onClick;
+      var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, color = _this$asProps2.color, x = _this$asProps2.x, x0 = _this$asProps2.x0, y = _this$asProps2.y, scale = _this$asProps2.scale, hide = _this$asProps2.hide, offsetProps = _this$asProps2.offset, uid = _this$asProps2.uid, duration = _this$asProps2.duration, r = _this$asProps2.r, wMin = _this$asProps2.wMin, heightProps = _this$asProps2.height, onMouseMove = _this$asProps2.onMouseMove, onMouseLeave = _this$asProps2.onMouseLeave, groupKey = _this$asProps2.groupKey, transparent = _this$asProps2.transparent, _this$asProps2$maxBar = _this$asProps2.maxBarSize, maxBarSize = _this$asProps2$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps2$maxBar, resolveColor = _this$asProps2.resolveColor, patterns = _this$asProps2.patterns, onClick = _this$asProps2.onClick;
       var offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
       var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
       var absWidth = Math.abs(xScale(d[x]) - Math.max(xScale(xScale.domain()[0]), xScale((_d$x = d[x0]) !== null && _d$x !== void 0 ? _d$x : 0)));
@@ -94,7 +92,7 @@ var HorizontalBarRoot = /* @__PURE__ */ function(_Component) {
       }
       return /* @__PURE__ */ React.createElement(React.Fragment, {
         key: "horizontal-bar-".concat(i)
-      }, (_ref = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBar, _ref.cn("SBar", {
+      }, (_ref = sstyled(styles), /* @__PURE__ */ React.createElement(SBar, _ref.cn("SBar", {
         "aria-hidden": true,
         "render": "path",
         "clipPath": "url(#".concat(uid, ")"),
@@ -137,15 +135,14 @@ var HorizontalBarRoot = /* @__PURE__ */ function(_Component) {
       }));
     }
   }]);
-  return HorizontalBarRoot2;
-}(Component);
+})(Component);
 _defineProperty(HorizontalBarRoot, "displayName", "HorizontalBar");
 _defineProperty(HorizontalBarRoot, "enhance", [uniqueIDEnhancement()]);
 _defineProperty(HorizontalBarRoot, "style", style);
 _defineProperty(HorizontalBarRoot, "defaultProps", {
   offset: [0, 0],
   duration: 500,
-  r: 2,
+  r: 0,
   wMin: MIN_WIDTH
 });
 function Background(props) {
@@ -153,7 +150,7 @@ function Background(props) {
   var SBackground = props.Element, styles = props.styles, scale = props.scale, value = props.value;
   var _scale2 = _slicedToArray(scale, 2), xScale = _scale2[0], yScale = _scale2[1];
   var xRange = xScale.range();
-  return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBackground, _ref2.cn("SBackground", {
+  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SBackground, _ref2.cn("SBackground", {
     "aria-hidden": true,
     "render": "rect",
     "childrenPosition": "above",

package/lib/esm/Hover.mjs

@@ -2,49 +2,46 @@ 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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 { Component, sstyled as sstyled$1, assignProps } from "@semcore/core";
+import { sstyled, Component, assignProps } from "@semcore/core";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import { hasParent } from "@semcore/core/lib/utils/hasParent";
+import trottle from "@semcore/core/lib/utils/rafTrottle";
 import React from "react";
-import canUseDOM from "@semcore/utils/lib/canUseDOM";
-import trottle from "@semcore/utils/lib/rafTrottle";
 import createElement from "./createElement.mjs";
-import { eventToPoint, invert, getIndexFromData, scaleOfBandwidth, scaleToBand } from "./utils.mjs";
 import Tooltip from "./Tooltip.mjs";
+import { eventToPoint, invert, getIndexFromData, scaleOfBandwidth, scaleToBand } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/hover.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SHoverLine_sq64f_gg_{outline:0;stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf)}.___SHoverRect_sq64f_gg_{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SHoverLine_3ufbt_gg_,.___SHoverLine_3ufbt_gg_:focus-visible{outline:0;stroke:var(--intergalactic-chart-grid-x-axis, rgb(214, 216, 215))}.___SHoverRect_3ufbt_gg_,.___SHoverRect_3ufbt_gg_:focus-visible{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(0, 22, 16, 0.028))}",
     /*__inner_css_end__*/
-    "sq64f_gg_"
+    "3ufbt_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHoverLine": "___SHoverLine_sq64f_gg_",
-    "__SHoverRect": "___SHoverRect_sq64f_gg_"
+    "__SHoverLine": "___SHoverLine_3ufbt_gg_",
+    "__SHoverRect": "___SHoverRect_3ufbt_gg_"
   })
 );
-var Hover = /* @__PURE__ */ function(_Component) {
-  _inherits(Hover2, _Component);
-  var _super = _createSuper(Hover2);
+var Hover = /* @__PURE__ */ (function(_Component) {
   function Hover2() {
     var _this;
     _classCallCheck(this, Hover2);
     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), "state", {
+    _this = _callSuper(this, Hover2, [].concat(args));
+    _defineProperty(_this, "state", {
       xIndex: null,
       yIndex: null
     });
-    _defineProperty(_assertThisInitialized(_this), "virtualElement", canUseDOM() ? document.createElement("div") : {});
-    _defineProperty(_assertThisInitialized(_this), "handlerMouseMoveRoot", trottle(function(e) {
-      var _this$asProps = _this.asProps, eventEmitter = _this$asProps.eventEmitter, data = _this$asProps.data, scale = _this$asProps.scale, x = _this$asProps.x, y = _this$asProps.y, rootRef = _this$asProps.rootRef, patterns = _this$asProps.patterns;
+    _defineProperty(_this, "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(_this, "handlerMouseMoveRoot", trottle(function(e, currentTarget) {
+      var _this$asProps = _this.asProps, eventEmitter = _this$asProps.eventEmitter, data = _this$asProps.data, scale = _this$asProps.scale, x = _this$asProps.x, y = _this$asProps.y, rootRef = _this$asProps.rootRef, patterns = _this$asProps.patterns, plotId = _this$asProps.plotId;
       var clientX = e.clientX, clientY = e.clientY;
       var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
       var _eventToPoint = eventToPoint(e, rootRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 2), pX = _eventToPoint2[0], pY = _eventToPoint2[1];
@@ -57,32 +54,43 @@ var Hover = /* @__PURE__ */ function(_Component) {
         yIndex,
         patterns
       };
+      var _rootRef$current$getB = rootRef.current.getBoundingClientRect(), xRect = _rootRef$current$getB.x, yRect = _rootRef$current$getB.y, height = _rootRef$current$getB.height;
+      var _currentTarget$getBou = currentTarget.getBoundingClientRect(), yOriginal = _currentTarget$getBou.y, heightOriginal = _currentTarget$getBou.height;
+      var isRootTooltip = hasParent(e.target, rootRef.current);
       _this.setState(state, function() {
-        eventEmitter.emit("setTooltipPosition", clientX, clientY);
-        eventEmitter.emit("setTooltipRenderingProps", {}, state);
-        eventEmitter.emit("setTooltipVisible", xIndex !== null || yIndex !== null);
+        if (isRootTooltip) {
+          eventEmitter.emit("setTooltipPosition_".concat(plotId), clientX, clientY);
+        } else {
+          var diff = clientY - yOriginal;
+          var dimension = diff / heightOriginal * 100;
+          var heightValue = height / 100 * dimension;
+          eventEmitter.emit("setTooltipPosition_".concat(plotId), pX + xRect, yRect + heightValue);
+        }
+        eventEmitter.emit("setTooltipRenderingProps_".concat(plotId), {}, state);
+        eventEmitter.emit("setTooltipVisible_".concat(plotId), xIndex !== null || yIndex !== null);
       });
     }));
-    _defineProperty(_assertThisInitialized(_this), "handlerMouseLeaveRoot", trottle(function() {
+    _defineProperty(_this, "handlerMouseLeaveRoot", trottle(function() {
       var state = {
         xIndex: null,
         yIndex: null,
         patterns: _this.asProps.patterns
       };
       _this.setState(state, function() {
-        _this.asProps.eventEmitter.emit("setTooltipVisible", false);
+        _this.asProps.eventEmitter.emit("setTooltipVisible_".concat(_this.asProps.plotId), false);
       });
     }));
     return _this;
   }
-  _createClass(Hover2, [{
+  _inherits(Hover2, _Component);
+  return _createClass(Hover2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
       var eventEmitter = this.asProps.eventEmitter;
       this.unsubscribeMouseMoveRoot = eventEmitter.subscribe("onMouseMoveChart", function(e) {
         e.persist();
-        _this2.handlerMouseMoveRoot(e);
+        _this2.handlerMouseMoveRoot(e, e.currentTarget);
       });
       this.unsubscribeMouseLeaveRoot = eventEmitter.subscribe("onMouseLeaveChart", this.handlerMouseLeaveRoot);
     }
@@ -97,17 +105,15 @@ var Hover = /* @__PURE__ */ function(_Component) {
       }
     }
   }]);
-  return Hover2;
-}(Component);
+})(Component);
 _defineProperty(Hover, "style", style);
-var HoverLineRoot = /* @__PURE__ */ function(_Hover) {
-  _inherits(HoverLineRoot2, _Hover);
-  var _super2 = _createSuper(HoverLineRoot2);
+var HoverLineRoot = /* @__PURE__ */ (function(_Hover2) {
   function HoverLineRoot2() {
     _classCallCheck(this, HoverLineRoot2);
-    return _super2.apply(this, arguments);
+    return _callSuper(this, HoverLineRoot2, arguments);
   }
-  _createClass(HoverLineRoot2, [{
+  _inherits(HoverLineRoot2, _Hover2);
+  return _createClass(HoverLineRoot2, [{
     key: "render",
     value: function render() {
       var _ref3;
@@ -123,7 +129,7 @@ var HoverLineRoot = /* @__PURE__ */ function(_Hover) {
       if (isHide) {
         return null;
       }
-      return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, xIndex !== null ? /* @__PURE__ */ React.createElement(SHoverLine, _ref3.cn("SHoverLine", {
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, xIndex !== null ? /* @__PURE__ */ React.createElement(SHoverLine, _ref3.cn("SHoverLine", {
         "aria-hidden": true,
         "render": "line",
         "index": xIndex,
@@ -142,17 +148,15 @@ var HoverLineRoot = /* @__PURE__ */ function(_Hover) {
       })) : null);
     }
   }]);
-  return HoverLineRoot2;
-}(Hover);
+})(Hover);
 _defineProperty(HoverLineRoot, "displayName", "HoverLine");
-var HoverRectRoot = /* @__PURE__ */ function(_Hover2) {
-  _inherits(HoverRectRoot2, _Hover2);
-  var _super3 = _createSuper(HoverRectRoot2);
+var HoverRectRoot = /* @__PURE__ */ (function(_Hover3) {
   function HoverRectRoot2() {
     _classCallCheck(this, HoverRectRoot2);
-    return _super3.apply(this, arguments);
+    return _callSuper(this, HoverRectRoot2, arguments);
   }
-  _createClass(HoverRectRoot2, [{
+  _inherits(HoverRectRoot2, _Hover3);
+  return _createClass(HoverRectRoot2, [{
     key: "render",
     value: function render() {
       var _ref4;
@@ -167,7 +171,7 @@ var HoverRectRoot = /* @__PURE__ */ function(_Hover2) {
       if (hideHoverLine) {
         return null;
       }
-      return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, xIndex !== null ? /* @__PURE__ */ React.createElement(SHoverRect, _ref4.cn("SHoverRect", {
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, xIndex !== null ? /* @__PURE__ */ React.createElement(SHoverRect, _ref4.cn("SHoverRect", {
         "aria-hidden": true,
         "render": "rect",
         "index": xIndex,
@@ -186,25 +190,24 @@ var HoverRectRoot = /* @__PURE__ */ function(_Hover2) {
       })) : null);
     }
   }]);
-  return HoverRectRoot2;
-}(Hover);
+})(Hover);
 _defineProperty(HoverRectRoot, "displayName", "HoverRect");
-var HoverLineTooltip = function HoverLineTooltip2(props) {
+function HoverLineTooltip(props) {
   var _ref = arguments[0], _ref5;
   var SHoverLineTooltip = Tooltip;
-  return _ref5 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SHoverLineTooltip, _ref5.cn("SHoverLineTooltip", _objectSpread({}, assignProps({
+  return _ref5 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SHoverLineTooltip, _ref5.cn("SHoverLineTooltip", _objectSpread({}, assignProps({
     "tag": HoverLine,
     "excludeAnchorProps": true
   }, _ref))));
-};
-var HoverRectTooltip = function HoverRectTooltip2(props) {
+}
+function HoverRectTooltip(props) {
   var _ref2 = arguments[0], _ref6;
   var SHoverRectTooltip = Tooltip;
-  return _ref6 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SHoverRectTooltip, _ref6.cn("SHoverRectTooltip", _objectSpread({}, assignProps({
+  return _ref6 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SHoverRectTooltip, _ref6.cn("SHoverRectTooltip", _objectSpread({}, assignProps({
     "tag": HoverRect,
     "excludeAnchorProps": true
   }, _ref2))));
-};
+}
 var HoverLine = createElement(HoverLineRoot, {
   Tooltip: [HoverLineTooltip, Tooltip._______childrenComponents]
 });

package/lib/esm/Line.mjs

@@ -1,50 +1,49 @@
 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 _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, Component } from "@semcore/core";
+import uniqueIDEnhancement, { useUID } from "@semcore/core/lib/utils/uniqueID";
+import { bisector } from "d3-array";
+import { curveLinear, line, curveCardinal, area } from "d3-shape";
 import React from "react";
-import { line, curveLinear, area, curveCardinal } from "d3-shape";
-import { sstyled as sstyled$1, Component } from "@semcore/core";
-import uniqueIDEnhancement, { useUID } from "@semcore/utils/lib/uniqueID";
+import AnimatedClipPath from "./AnimatedClipPath.mjs";
 import createElement from "./createElement.mjs";
-import { definedData, scaleOfBandwidth, interpolateValue, getNullData, definedNullData, getChartDefaultColorName } from "./utils.mjs";
 import Dots from "./Dots.mjs";
-import AnimatedClipPath from "./AnimatedClipPath.mjs";
 import { resolvePatternDasharray } from "./Pattern.mjs";
+import { interpolateValue, getNullData, definedNullData, eventToPoint, invert, getChartDefaultColorName, definedData, scaleOfBandwidth } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/line.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SLine_yaw39_gg_{fill:transparent;stroke-width:3;stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:d;transition-duration:var(--duration_yaw39);transition-timing-function:ease-in-out}.___SLine_yaw39_gg_.__color_yaw39_gg_{stroke:var(--color_yaw39)}.___SLine_yaw39_gg_.__hide_yaw39_gg_{display:none}.___SLine_yaw39_gg_.__transparent_yaw39_gg_{opacity:.3}.___SNull_yaw39_gg_{fill:transparent;stroke:var(--intergalactic-border-primary, #c4c7cf);stroke-dasharray:4}.___SNull_yaw39_gg_.__hide_yaw39_gg_{display:none}.___SLineArea_yaw39_gg_{transition-property:d;transition-duration:var(--duration_yaw39);transition-timing-function:ease-in-out;opacity:.3;fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLineArea_yaw39_gg_.__color_yaw39_gg_{fill:var(--color_yaw39)}",
+    ".___SLine_5lbse_gg_{fill:transparent;stroke-width:3;stroke:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210));transition-property:d;transition-duration:var(--duration_5lbse);transition-timing-function:ease-in-out}.___SLine_5lbse_gg_.__color_5lbse_gg_{stroke:var(--color_5lbse)}.___SLine_5lbse_gg_.__hide_5lbse_gg_{display:none}.___SLine_5lbse_gg_.__transparent_5lbse_gg_{opacity:.3}.___SNull_5lbse_gg_{fill:transparent;stroke:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));stroke-dasharray:4}@supports (color:color(display-p3 0 0 0%)){.___SNull_5lbse_gg_{stroke:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SNull_5lbse_gg_{stroke:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SNull_5lbse_gg_.__hide_5lbse_gg_{display:none}.___SLineArea_5lbse_gg_{transition-property:d;transition-duration:var(--duration_5lbse);transition-timing-function:ease-in-out;opacity:.3;fill:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210))}.___SLineArea_5lbse_gg_.__color_5lbse_gg_{fill:var(--color_5lbse)}",
     /*__inner_css_end__*/
-    "yaw39_gg_"
+    "5lbse_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLine": "___SLine_yaw39_gg_",
-    "--duration": "--duration_yaw39",
-    "_color": "__color_yaw39_gg_",
-    "--color": "--color_yaw39",
-    "_hide": "__hide_yaw39_gg_",
-    "_transparent": "__transparent_yaw39_gg_",
-    "__SNull": "___SNull_yaw39_gg_",
-    "__SLineArea": "___SLineArea_yaw39_gg_"
+    "__SLine": "___SLine_5lbse_gg_",
+    "--duration": "--duration_5lbse",
+    "_color": "__color_5lbse_gg_",
+    "--color": "--color_5lbse",
+    "_hide": "__hide_5lbse_gg_",
+    "_transparent": "__transparent_5lbse_gg_",
+    "__SNull": "___SNull_5lbse_gg_",
+    "__SLineArea": "___SLineArea_5lbse_gg_"
   })
 );
-var LineRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(LineRoot2, _Component);
-  var _super = _createSuper(LineRoot2);
+var LineRoot = /* @__PURE__ */ (function(_Component) {
   function LineRoot2() {
     _classCallCheck(this, LineRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, LineRoot2, arguments);
   }
-  _createClass(LineRoot2, [{
+  _inherits(LineRoot2, _Component);
+  return _createClass(LineRoot2, [{
     key: "getDotsProps",
     value: function getDotsProps() {
-      var _this$asProps = this.asProps, x = _this$asProps.x, y = _this$asProps.y, d3 = _this$asProps.d3, color = _this$asProps.color, resolveColor = _this$asProps.resolveColor, duration = _this$asProps.duration, transparent = _this$asProps.transparent, patterns = _this$asProps.patterns;
+      var _this$asProps = this.asProps, x = _this$asProps.x, y = _this$asProps.y, d3 = _this$asProps.d3, color = _this$asProps.color, resolveColor = _this$asProps.resolveColor, duration = _this$asProps.duration, transparent = _this$asProps.transparent, patterns = _this$asProps.patterns, onClick = _this$asProps.onClick;
       return {
         x,
         y,
@@ -53,7 +52,8 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
         resolveColor,
         duration,
         transparent,
-        patterns
+        patterns,
+        onClick
       };
     }
   }, {
@@ -88,19 +88,32 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
         scale
       };
     }
+  }, {
+    key: "handlerOnClick",
+    value: function handlerOnClick(e) {
+      e.stopPropagation();
+      var _this$asProps4 = this.asProps, rootRef = _this$asProps4.rootRef, _this$asProps4$scale = _slicedToArray(_this$asProps4.scale, 1), xScale = _this$asProps4$scale[0], data = _this$asProps4.data, x = _this$asProps4.x, onClick = _this$asProps4.onClick;
+      if (!onClick) return;
+      var _eventToPoint = eventToPoint(e, rootRef.current), _eventToPoint2 = _slicedToArray(_eventToPoint, 1), pX = _eventToPoint2[0];
+      var vX = invert(xScale, pX);
+      var index = bisector(function(d) {
+        return d[x];
+      }).center(data, vX);
+      onClick(index, e);
+    }
   }, {
     key: "render",
     value: function render() {
       var _ref;
       var SLine = this.Element;
-      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, hide = _this$asProps4.hide, color = _this$asProps4.color, resolveColor = _this$asProps4.resolveColor, uid = _this$asProps4.uid, size = _this$asProps4.size, d3 = _this$asProps4.d3, duration = _this$asProps4.duration, x = _this$asProps4.x, y = _this$asProps4.y, transparent = _this$asProps4.transparent, patterns = _this$asProps4.patterns;
+      var _this$asProps5 = this.asProps, styles = _this$asProps5.styles, hide = _this$asProps5.hide, color = _this$asProps5.color, resolveColor = _this$asProps5.resolveColor, uid = _this$asProps5.uid, size = _this$asProps5.size, d3 = _this$asProps5.d3, duration = _this$asProps5.duration, x = _this$asProps5.x, y = _this$asProps5.y, transparent = _this$asProps5.transparent, patterns = _this$asProps5.patterns;
       var data = this.asProps.data.filter(function(item) {
         return item[y] !== interpolateValue;
       });
       this.asProps.dataHintsHandler.specifyDataRowFields(x, y);
       this.asProps.dataHintsHandler.establishDataType("time-series");
       var patternKey = color || getChartDefaultColorName(0);
-      return _ref = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SLine, _ref.cn("SLine", {
+      return _ref = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SLine, _ref.cn("SLine", {
         "aria-hidden": true,
         "clipPath": "url(#".concat(uid, ")"),
         "render": "path",
@@ -109,7 +122,9 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
         "transparent": transparent,
         "d": d3(data),
         "use:duration": "".concat(duration, "ms"),
-        "strokeDasharray": patterns ? resolvePatternDasharray(patternKey, patterns) : void 0
+        "strokeDasharray": patterns ? resolvePatternDasharray(patternKey, patterns) : void 0,
+        "onClickCapture": this.handlerOnClick.bind(this),
+        "pointerEvents": "stroke"
       })), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, _ref.cn("AnimatedClipPath", {
         "aria-hidden": true,
         "duration": duration,
@@ -121,8 +136,7 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       })));
     }
   }]);
-  return LineRoot2;
-}(Component);
+})(Component);
 _defineProperty(LineRoot, "displayName", "Line");
 _defineProperty(LineRoot, "style", style);
 _defineProperty(LineRoot, "enhance", [uniqueIDEnhancement()]);
@@ -141,7 +155,7 @@ _defineProperty(LineRoot, "defaultProps", function(_ref4) {
 function Null(props) {
   var _ref2;
   var SNull = props.Element, styles = props.styles, d3 = props.d3, data = props.data, hide = props.hide;
-  return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SNull, _ref2.cn("SNull", {
+  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SNull, _ref2.cn("SNull", {
     "render": "path",
     "d": d3(data),
     "hide": hide
@@ -176,7 +190,7 @@ function Area(props) {
     }).y1(function(data2) {
       return yScale(data2[y1]);
     });
-    return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLineArea, _ref3.cn("SLineArea", {
+    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineArea, _ref3.cn("SLineArea", {
       "key": "".concat(chunk.length, "-").concat(index),
       "aria-hidden": true,
       "clipPath": "url(#".concat(uid, ")"),

package/lib/esm/Pattern.mjs

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
+import propsForElement from "@semcore/core/lib/utils/propsForElement";
 import React from "react";
-import propsForElement from "@semcore/utils/lib/propsForElement";
 var _excluded = ["color", "patternKey", "patterns"];
 var defaultDasharrays = ["4 4", "8 8", "2 4", "4 8", "8 2", "8 4", "12 4", "2 2"];
 var defaultPatterns = {
@@ -503,7 +503,9 @@ var PatternSymbol = function PatternSymbol2(_ref3) {
         height,
         viewBox,
         strokeWidth: "1"
-      }, propsForElement(props2, "svg")), children);
+      }, propsForElement(props2, "svg"), {
+        "aria-hidden": true
+      }), children);
     };
   }, [patternKey, color, patterns]);
   return /* @__PURE__ */ React.createElement(DefaultSymbol, props);