@semcore/d3-chart 16.0.2-prerelease.4 → 16.0.3-prerelease.0

package/lib/esm/Dots.mjs

@@ -1,28 +1,28 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { sstyled } from "@semcore/core";
+import trottle from "@semcore/core/lib/utils/rafTrottle";
 import { bisector } from "d3-array";
 import React from "react";
-import trottle from "@semcore/core/lib/utils/rafTrottle";
 import createElement from "./createElement.mjs";
-import { interpolateValue, eventToPoint, invert, getChartDefaultColorName } from "./utils.mjs";
 import { getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
+import { interpolateValue, eventToPoint, invert, getChartDefaultColorName } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/dot.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SDots_1lpsb_gg_ .___SDot_1lpsb_gg_{transition-duration:var(--duration_1lpsb)}.___SDot_1lpsb_gg_{stroke-width:1px;stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:cx,cy,x,y;transition-timing-function:ease-in-out}.___SDot_1lpsb_gg_.__hide_1lpsb_gg_{display:none}.___SDot_1lpsb_gg_.__color_1lpsb_gg_{fill:var(--color_1lpsb)}.___SDot_1lpsb_gg_.__transparent_1lpsb_gg_{opacity:.3}",
+    ".___SDots_1odhs_gg_ .___SDot_1odhs_gg_{transition-duration:var(--duration_1odhs)}.___SDot_1odhs_gg_{stroke-width:1px;stroke:var(--intergalactic-chart-grid-border, #ffffff);fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:cx,cy,x,y;transition-timing-function:ease-in-out}.___SDot_1odhs_gg_.__hide_1odhs_gg_{display:none}.___SDot_1odhs_gg_.__color_1odhs_gg_{fill:var(--color_1odhs)}.___SDot_1odhs_gg_.__transparent_1odhs_gg_{opacity:.3}",
     /*__inner_css_end__*/
-    "1lpsb_gg_"
+    "1odhs_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SDot": "___SDot_1lpsb_gg_",
-    "_hide": "__hide_1lpsb_gg_",
-    "_color": "__color_1lpsb_gg_",
-    "--color": "--color_1lpsb",
-    "_transparent": "__transparent_1lpsb_gg_",
-    "__SDots": "___SDots_1lpsb_gg_",
-    "--duration": "--duration_1lpsb"
+    "__SDot": "___SDot_1odhs_gg_",
+    "_hide": "__hide_1odhs_gg_",
+    "_color": "__color_1odhs_gg_",
+    "--color": "--color_1odhs",
+    "_transparent": "__transparent_1odhs_gg_",
+    "__SDots": "___SDots_1odhs_gg_",
+    "--duration": "--duration_1odhs"
   })
 );
 function Dots(props) {
@@ -32,6 +32,8 @@ function Dots(props) {
     return d[x];
   }).center;
   var _React$useState = React.useState(null), _React$useState2 = _slicedToArray(_React$useState, 2), activeIndex = _React$useState2[0], setActiveIndex = _React$useState2[1];
+  var patternKey = color || getChartDefaultColorName(0);
+  var svgPatternId = "template_".concat(patternKey);
   var data = React.useMemo(function() {
     return props.data.filter(function(item) {
       return item[y] !== interpolateValue;
@@ -57,6 +59,10 @@ function Dots(props) {
       unsubscribeMouseLeaveRoot();
     };
   }, [eventEmitter, scale, data, x, y]);
+  var _getPatternSymbolSize = getPatternSymbolSize({
+    patternKey,
+    patterns
+  }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
   var dots = data.reduce(function(acc, d, i) {
     var isPrev = d3.defined()(data[i - 1] || {});
     var isNext = d3.defined()(data[i + 1] || {});
@@ -65,11 +71,6 @@ function Dots(props) {
     var radius = radiusBase * (active ? 5 / 4 : 1);
     if (!d3.defined()(d)) return acc;
     if (!visible) return acc;
-    var patternKey = color || getChartDefaultColorName(0);
-    var _getPatternSymbolSize = getPatternSymbolSize({
-      patternKey,
-      patterns
-    }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
     if (!patterns) {
       var _ref;
       acc.push((_ref = sstyled(styles), /* @__PURE__ */ React.createElement(SDot, _ref.cn("SDot", {
@@ -90,19 +91,17 @@ function Dots(props) {
     } else {
       var _ref2;
       acc.push((_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDot, _ref2.cn("SDot", {
-        "render": PatternSymbol,
-        "color": resolveColor(color),
-        "patternKey": patternKey,
-        "patterns": patterns,
-        "key": "".concat(i),
+        "key": i,
+        "render": "use",
+        "href": "#".concat(svgPatternId),
+        "x": width + (d3.x()(d) - width / 2),
+        "y": d3.y()(d) - height / 2,
         "value": d,
+        "transparent": transparent,
+        "radius": radius,
         "visible": visible,
         "active": active,
-        "hide": hide,
-        "transparent": transparent,
-        "x": d3.x()(d) - width / 2,
-        "y": d3.y()(d) - height / 2,
-        "radius": radius
+        "hide": hide
       }))));
     }
     return acc;
@@ -110,7 +109,13 @@ function Dots(props) {
   var SDots = "g";
   return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SDots, _ref3.cn("SDots", {
     "duration": "".concat(duration, "ms")
-  }), dots);
+  }), /* @__PURE__ */ React.createElement(PatternSymbol, _ref3.cn("PatternSymbol", {
+    "color": resolveColor(color),
+    "patternKey": color,
+    "id": svgPatternId,
+    "patterns": patterns,
+    "x": -1 * width
+  })), dots);
 }
 Dots.style = style;
 const Dots$1 = createElement(Dots);

package/lib/esm/GroupBar.mjs

@@ -1,24 +1,28 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 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 React from "react";
 import { Component } from "@semcore/core";
 import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
-import createElement from "./createElement.mjs";
+import { scaleBand } from "d3-scale";
+import React from "react";
 import Bar from "./Bar.mjs";
+import createElement from "./createElement.mjs";
 import HorizontalBar from "./HorizontalBar.mjs";
-import { scaleBand } from "d3-scale";
 import { scaleToBand, getChartDefaultColorName } from "./utils.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 var GroupBarRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(GroupBarRoot2, _Component);
-  var _super = _createSuper(GroupBarRoot2);
   function GroupBarRoot2() {
     _classCallCheck(this, GroupBarRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, GroupBarRoot2, arguments);
   }
-  _createClass(GroupBarRoot2, [{
+  _inherits(GroupBarRoot2, _Component);
+  return _createClass(GroupBarRoot2, [{
     key: "getScaleGroup",
     value: function getScaleGroup() {
       var _this$asProps = this.asProps, Children = _this$asProps.Children, scale = _this$asProps.scale, scaleGroup = _this$asProps.scaleGroup, x = _this$asProps.x;
@@ -39,7 +43,7 @@ var GroupBarRoot = /* @__PURE__ */ function(_Component) {
     key: "getBarProps",
     value: function getBarProps(_ref, index) {
       var y = _ref.y;
-      var _this$asProps2 = this.asProps, x = _this$asProps2.x, _this$asProps2$maxBar = _this$asProps2.maxBarSize, maxBarSize = _this$asProps2$maxBar === void 0 ? Infinity : _this$asProps2$maxBar, patterns = _this$asProps2.patterns;
+      var _this$asProps2 = this.asProps, x = _this$asProps2.x, _this$asProps2$maxBar = _this$asProps2.maxBarSize, maxBarSize = _this$asProps2$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps2$maxBar, patterns = _this$asProps2.patterns;
       var bandWidth = this.scaleGroup.bandwidth();
       var width = Math.min(bandWidth, maxBarSize);
       var offsetX = this.scaleGroup(y) + bandWidth / 2 - width / 2;
@@ -56,7 +60,7 @@ var GroupBarRoot = /* @__PURE__ */ function(_Component) {
     key: "getHorizontalBarProps",
     value: function getHorizontalBarProps(_ref2, index) {
       var x = _ref2.x;
-      var _this$asProps3 = this.asProps, y = _this$asProps3.y, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Infinity : _this$asProps3$maxBar;
+      var _this$asProps3 = this.asProps, y = _this$asProps3.y, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps3$maxBar;
       var bandWidth = this.scaleGroup.bandwidth();
       var height = Math.min(bandWidth, maxBarSize);
       var offsetY = this.scaleGroup(x) + bandWidth / 2 - height / 2;
@@ -82,7 +86,6 @@ var GroupBarRoot = /* @__PURE__ */ function(_Component) {
       });
     }
   }]);
-  return GroupBarRoot2;
 }(Component);
 _defineProperty(GroupBarRoot, "displayName", "GroupBar");
 var GroupBar = createElement(GroupBarRoot, {

package/lib/esm/HorizontalBar.mjs

@@ -1,41 +1,46 @@
 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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 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, Component } from "@semcore/core";
-import React from "react";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
-import createElement from "./createElement.mjs";
+import React from "react";
 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";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"./style/bar.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBar_1q4d3_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1q4d3);transition-timing-function:ease-in-out}.___SBar_1q4d3_gg_.__color_1q4d3_gg_{fill:var(--color_1q4d3)}.___SBar_1q4d3_gg_.__pattern_1q4d3_gg_.__color_1q4d3_gg_{fill:var(--pattern_1q4d3);stroke:var(--color_1q4d3);stroke-width:1px}.___SBar_1q4d3_gg_.__hide_1q4d3_gg_{display:none}.___SBar_1q4d3_gg_.__transparent_1q4d3_gg_{opacity:.3}.___SBackground_1q4d3_gg_.__onClick_1q4d3_gg_,.___SBar_1q4d3_gg_.__onClick_1q4d3_gg_{cursor:pointer}.___SBackground_1q4d3_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1q4d3_gg_{display:flex;justify-content:space-between}.___SBarLabel_1q4d3_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1q4d3_gg_,.___SBarPercent_1q4d3_gg_,.___SBarValue_1q4d3_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1q4d3_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1q4d3_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1q4d3_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SBar_1e83s_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:height,width,y;transition-duration:var(--duration_1e83s);transition-timing-function:ease-in-out}.___SBar_1e83s_gg_.__color_1e83s_gg_{fill:var(--color_1e83s)}.___SBar_1e83s_gg_.__pattern_1e83s_gg_.__color_1e83s_gg_{fill:var(--pattern_1e83s);stroke:var(--color_1e83s);stroke-width:1px}.___SBar_1e83s_gg_.__hide_1e83s_gg_{display:none}.___SBar_1e83s_gg_.__transparent_1e83s_gg_{opacity:.3}.___SBackground_1e83s_gg_.__onClick_1e83s_gg_,.___SBar_1e83s_gg_.__onClick_1e83s_gg_{cursor:pointer}.___SBackground_1e83s_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9)}.___SBarAnnotation_1e83s_gg_{display:flex;justify-content:space-between}.___SBarLabel_1e83s_gg_{color:var(--intergalactic-text-primary, #191b23);margin-right:auto}.___SBarLabel_1e83s_gg_,.___SBarPercent_1e83s_gg_,.___SBarValue_1e83s_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarPercent_1e83s_gg_{color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBarValue_1e83s_gg_{min-width:52px;display:flex;justify-content:flex-end;color:var(--intergalactic-text-primary, #191b23);text-align:right}.___SCompactHorizontalBarHoverRect_1e83s_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
     /*__inner_css_end__*/
-    "1q4d3_gg_"
+    "1e83s_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBar": "___SBar_1q4d3_gg_",
-    "--duration": "--duration_1q4d3",
-    "_color": "__color_1q4d3_gg_",
-    "--color": "--color_1q4d3",
-    "_pattern": "__pattern_1q4d3_gg_",
-    "--pattern": "--pattern_1q4d3",
-    "_hide": "__hide_1q4d3_gg_",
-    "_transparent": "__transparent_1q4d3_gg_",
-    "_onClick": "__onClick_1q4d3_gg_",
-    "__SBackground": "___SBackground_1q4d3_gg_",
-    "__SBarAnnotation": "___SBarAnnotation_1q4d3_gg_",
-    "__SBarLabel": "___SBarLabel_1q4d3_gg_",
-    "__SBarPercent": "___SBarPercent_1q4d3_gg_",
-    "__SBarValue": "___SBarValue_1q4d3_gg_",
-    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1q4d3_gg_"
+    "__SBar": "___SBar_1e83s_gg_",
+    "--duration": "--duration_1e83s",
+    "_color": "__color_1e83s_gg_",
+    "--color": "--color_1e83s",
+    "_pattern": "__pattern_1e83s_gg_",
+    "--pattern": "--pattern_1e83s",
+    "_hide": "__hide_1e83s_gg_",
+    "_transparent": "__transparent_1e83s_gg_",
+    "_onClick": "__onClick_1e83s_gg_",
+    "__SBackground": "___SBackground_1e83s_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_1e83s_gg_",
+    "__SBarLabel": "___SBarLabel_1e83s_gg_",
+    "__SBarPercent": "___SBarPercent_1e83s_gg_",
+    "__SBarValue": "___SBarValue_1e83s_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_1e83s_gg_"
   })
 );
 var MIN_WIDTH = 2;
@@ -46,13 +51,12 @@ 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);
   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;
@@ -66,7 +70,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)));
@@ -136,7 +140,6 @@ var HorizontalBarRoot = /* @__PURE__ */ function(_Component) {
       }));
     }
   }]);
-  return HorizontalBarRoot2;
 }(Component);
 _defineProperty(HorizontalBarRoot, "displayName", "HorizontalBar");
 _defineProperty(HorizontalBarRoot, "enhance", [uniqueIDEnhancement()]);

package/lib/esm/Hover.mjs

@@ -2,47 +2,49 @@ 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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 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, Component, assignProps } from "@semcore/core";
-import React from "react";
+import { sstyled, assignProps, Component } from "@semcore/core";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
 import trottle from "@semcore/core/lib/utils/rafTrottle";
+import React from "react";
 import createElement from "./createElement.mjs";
-import { eventToPoint, invert, getIndexFromData, scaleOfBandwidth, scaleToBand } from "./utils.mjs";
 import Tooltip from "./Tooltip.mjs";
+import { scaleOfBandwidth, scaleToBand, eventToPoint, invert, getIndexFromData } from "./utils.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"./style/hover.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SHoverLine_k4963_gg_,.___SHoverLine_k4963_gg_:focus-visible{outline:0;stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf)}.___SHoverRect_k4963_gg_,.___SHoverRect_k4963_gg_:focus-visible{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
+    ".___SHoverLine_1s6xw_gg_,.___SHoverLine_1s6xw_gg_:focus-visible{outline:0;stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf)}.___SHoverRect_1s6xw_gg_,.___SHoverRect_1s6xw_gg_:focus-visible{outline:0;fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(196, 199, 207, 0.3))}",
     /*__inner_css_end__*/
-    "k4963_gg_"
+    "1s6xw_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHoverLine": "___SHoverLine_k4963_gg_",
-    "__SHoverRect": "___SHoverRect_k4963_gg_"
+    "__SHoverLine": "___SHoverLine_1s6xw_gg_",
+    "__SHoverRect": "___SHoverRect_1s6xw_gg_"
   })
 );
 var Hover = /* @__PURE__ */ function(_Component) {
-  _inherits(Hover2, _Component);
-  var _super = _createSuper(Hover2);
   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) {
+    _defineProperty(_this, "virtualElement", canUseDOM() ? document.createElement("div") : {});
+    _defineProperty(_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;
       var clientX = e.clientX, clientY = e.clientY;
       var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
@@ -62,7 +64,7 @@ var Hover = /* @__PURE__ */ function(_Component) {
         eventEmitter.emit("setTooltipVisible", xIndex !== null || yIndex !== null);
       });
     }));
-    _defineProperty(_assertThisInitialized(_this), "handlerMouseLeaveRoot", trottle(function() {
+    _defineProperty(_this, "handlerMouseLeaveRoot", trottle(function() {
       var state = {
         xIndex: null,
         yIndex: null,
@@ -74,7 +76,8 @@ var Hover = /* @__PURE__ */ function(_Component) {
     }));
     return _this;
   }
-  _createClass(Hover2, [{
+  _inherits(Hover2, _Component);
+  return _createClass(Hover2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
@@ -96,17 +99,15 @@ var Hover = /* @__PURE__ */ function(_Component) {
       }
     }
   }]);
-  return Hover2;
 }(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;
@@ -141,17 +142,15 @@ var HoverLineRoot = /* @__PURE__ */ function(_Hover) {
       })) : null);
     }
   }]);
-  return HoverLineRoot2;
 }(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;
@@ -185,7 +184,6 @@ var HoverRectRoot = /* @__PURE__ */ function(_Hover2) {
       })) : null);
     }
   }]);
-  return HoverRectRoot2;
 }(Hover);
 _defineProperty(HoverRectRoot, "displayName", "HoverRect");
 var HoverLineTooltip = function HoverLineTooltip2(props) {

package/lib/esm/Line.mjs

@@ -1,46 +1,50 @@
 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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 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, Component } from "@semcore/core";
-import React from "react";
-import { line, curveLinear, area, curveCardinal } from "d3-shape";
 import uniqueIDEnhancement, { useUID } from "@semcore/core/lib/utils/uniqueID";
+import { area, curveCardinal, line, curveLinear } from "d3-shape";
+import React from "react";
+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, definedData, definedNullData, getChartDefaultColorName, scaleOfBandwidth } from "./utils.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"./style/line.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SLine_1g5i1_gg_{fill:transparent;stroke-width:3;stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:d;transition-duration:var(--duration_1g5i1);transition-timing-function:ease-in-out}.___SLine_1g5i1_gg_.__color_1g5i1_gg_{stroke:var(--color_1g5i1)}.___SLine_1g5i1_gg_.__hide_1g5i1_gg_{display:none}.___SLine_1g5i1_gg_.__transparent_1g5i1_gg_{opacity:.3}.___SNull_1g5i1_gg_{fill:transparent;stroke:var(--intergalactic-border-primary, #c4c7cf);stroke-dasharray:4}.___SNull_1g5i1_gg_.__hide_1g5i1_gg_{display:none}.___SLineArea_1g5i1_gg_{transition-property:d;transition-duration:var(--duration_1g5i1);transition-timing-function:ease-in-out;opacity:.3;fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLineArea_1g5i1_gg_.__color_1g5i1_gg_{fill:var(--color_1g5i1)}",
+    ".___SLine_h7ktk_gg_{fill:transparent;stroke-width:3;stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);transition-property:d;transition-duration:var(--duration_h7ktk);transition-timing-function:ease-in-out}.___SLine_h7ktk_gg_.__color_h7ktk_gg_{stroke:var(--color_h7ktk)}.___SLine_h7ktk_gg_.__hide_h7ktk_gg_{display:none}.___SLine_h7ktk_gg_.__transparent_h7ktk_gg_{opacity:.3}.___SNull_h7ktk_gg_{fill:transparent;stroke:var(--intergalactic-border-primary, #c4c7cf);stroke-dasharray:4}.___SNull_h7ktk_gg_.__hide_h7ktk_gg_{display:none}.___SLineArea_h7ktk_gg_{transition-property:d;transition-duration:var(--duration_h7ktk);transition-timing-function:ease-in-out;opacity:.3;fill:var(--intergalactic-chart-palette-order-1, #2bb3ff)}.___SLineArea_h7ktk_gg_.__color_h7ktk_gg_{fill:var(--color_h7ktk)}",
     /*__inner_css_end__*/
-    "1g5i1_gg_"
+    "h7ktk_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLine": "___SLine_1g5i1_gg_",
-    "--duration": "--duration_1g5i1",
-    "_color": "__color_1g5i1_gg_",
-    "--color": "--color_1g5i1",
-    "_hide": "__hide_1g5i1_gg_",
-    "_transparent": "__transparent_1g5i1_gg_",
-    "__SNull": "___SNull_1g5i1_gg_",
-    "__SLineArea": "___SLineArea_1g5i1_gg_"
+    "__SLine": "___SLine_h7ktk_gg_",
+    "--duration": "--duration_h7ktk",
+    "_color": "__color_h7ktk_gg_",
+    "--color": "--color_h7ktk",
+    "_hide": "__hide_h7ktk_gg_",
+    "_transparent": "__transparent_h7ktk_gg_",
+    "__SNull": "___SNull_h7ktk_gg_",
+    "__SLineArea": "___SLineArea_h7ktk_gg_"
   })
 );
 var LineRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(LineRoot2, _Component);
-  var _super = _createSuper(LineRoot2);
   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;
@@ -120,7 +124,6 @@ var LineRoot = /* @__PURE__ */ function(_Component) {
       })));
     }
   }]);
-  return LineRoot2;
 }(Component);
 _defineProperty(LineRoot, "displayName", "Line");
 _defineProperty(LineRoot, "style", style);

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 React from "react";
 import propsForElement from "@semcore/core/lib/utils/propsForElement";
+import React from "react";
 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 = {

package/lib/esm/Plot.mjs

@@ -2,47 +2,49 @@ 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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 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 EventEmitter from "@semcore/core/lib/utils/eventEmitter";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import keyboardFocusEnhance from "@semcore/core/lib/utils/enhances/keyboardFocusEnhance";
-import { uniqueId, eventToPoint } from "./utils.mjs";
-import { PlotA11yModule } from "./a11y/PlotA11yModule.mjs";
-import { makeDataHintsContainer, makeDataHintsHandlers } from "./a11y/hints.mjs";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import EventEmitter from "@semcore/core/lib/utils/eventEmitter";
+import { Box } from "@semcore/flex-box";
+import React from "react";
+import { makeDataHintsContainer, makeDataHintsHandlers } from "./a11y/hints.mjs";
+import { PlotA11yModule } from "./a11y/PlotA11yModule.mjs";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
-import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { uniqueId, eventToPoint } from "./utils.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 /*!__reshadow-styles__:"./style/plot.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPlot_l5rai_gg_{overflow:hidden}.___SPlot_l5rai_gg_:active,.___SPlot_l5rai_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}foreignObject[data-aria-only]{pointer-events:none}.___SPlot_l5rai_gg_.__keyboardFocused_l5rai_gg_{border:1px solid var(--intergalactic-chart-palette-order-9, #008ff8);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}",
+    ".___SPlot_15k93_gg_{overflow:hidden}.___SPlot_15k93_gg_:active,.___SPlot_15k93_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}foreignObject[data-aria-only]{pointer-events:none}.___SPlot_15k93_gg_.__keyboardFocused_15k93_gg_{border:1px solid var(--intergalactic-chart-palette-order-9, #008ff8);box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}",
     /*__inner_css_end__*/
-    "l5rai_gg_"
+    "15k93_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SPlot": "___SPlot_l5rai_gg_",
-    "_keyboardFocused": "__keyboardFocused_l5rai_gg_"
+    "__SPlot": "___SPlot_15k93_gg_",
+    "_keyboardFocused": "__keyboardFocused_15k93_gg_"
   })
 );
 var PlotRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(PlotRoot2, _Component);
-  var _super = _createSuper(PlotRoot2);
   function PlotRoot2(props) {
     var _this;
     _classCallCheck(this, PlotRoot2);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "plotId", uniqueId());
-    _defineProperty(_assertThisInitialized(_this), "rootRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "dataStructureHints", _this.props.dataHints || makeDataHintsContainer());
-    _defineProperty(_assertThisInitialized(_this), "dataHintsHandler", makeDataHintsHandlers(_this.dataStructureHints));
-    _defineProperty(_assertThisInitialized(_this), "handlerMouseMove", function(e) {
+    _this = _callSuper(this, PlotRoot2, [props]);
+    _defineProperty(_this, "plotId", uniqueId());
+    _defineProperty(_this, "rootRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "dataStructureHints", _this.props.dataHints || makeDataHintsContainer());
+    _defineProperty(_this, "dataHintsHandler", makeDataHintsHandlers(_this.dataStructureHints));
+    _defineProperty(_this, "handlerMouseMove", function(e) {
       var scale = _this.asProps.scale;
       _this.eventEmitter.emit("onMouseMoveRoot", e);
       if (scale && scale.length >= 2) {
@@ -57,19 +59,20 @@ var PlotRoot = /* @__PURE__ */ function(_Component) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handlerMouseLeave", function(e) {
+    _defineProperty(_this, "handlerMouseLeave", function(e) {
       _this.eventEmitter.emit("onMouseLeaveRoot", e);
       _this.eventEmitter.emit("onMouseLeaveChart", e);
     });
     _this.eventEmitter = props.eventEmitter || new EventEmitter();
     return _this;
   }
-  _createClass(PlotRoot2, [{
+  _inherits(PlotRoot2, _Component);
+  return _createClass(PlotRoot2, [{
     key: "setContext",
     value: function setContext() {
       var _scale$, _scale$$domain;
       var _this$asProps = this.asProps, scale = _this$asProps.scale, data = _this$asProps.data, width = _this$asProps.width, height = _this$asProps.height, locale = _this$asProps.locale, resolveColor = _this$asProps.resolveColor, patterns = _this$asProps.patterns, duration = _this$asProps.duration;
-      var yScaleDomain = scale === null || scale === void 0 ? void 0 : (_scale$ = scale[1]) === null || _scale$ === void 0 ? void 0 : (_scale$$domain = _scale$.domain) === null || _scale$$domain === void 0 ? void 0 : _scale$$domain.call(_scale$);
+      var yScaleDomain = scale === null || scale === void 0 || (_scale$ = scale[1]) === null || _scale$ === void 0 || (_scale$$domain = _scale$.domain) === null || _scale$$domain === void 0 ? void 0 : _scale$$domain.call(_scale$);
       if (yScaleDomain !== null && yScaleDomain !== void 0 && yScaleDomain.length && data !== null && data !== void 0 && data.length) {
         this.dataHintsHandler.setPointsDensity(data.length / width, Math.abs(yScaleDomain[1] - yScaleDomain[0]) / height);
       }
@@ -119,7 +122,6 @@ var PlotRoot = /* @__PURE__ */ function(_Component) {
       }))));
     }
   }]);
-  return PlotRoot2;
 }(Component);
 _defineProperty(PlotRoot, "displayName", "Plot");
 _defineProperty(PlotRoot, "style", style);