@semcore/d3-chart 3.61.0-prerelease.4 → 3.61.0-prerelease.5

package/lib/esm/Axis.mjs

@@ -1,43 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 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 _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 _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 { sstyled, Component } from "@semcore/core";
+import React, { useState, useEffect } from "react";
 import createElement from "./createElement.mjs";
 import { scaleOfBandwidth } from "./utils.mjs";
-var _MAP_POSITION_AXIS, _MAP_POSITION_TICK;
 /*!__reshadow-styles__:"./style/axis.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SAxis_tudrd_gg_{stroke:var(--intergalactic-chart-grid-x-axis, rgb(214, 216, 215))}.___SAxis_tudrd_gg_.__hide_tudrd_gg_,.___STick_tudrd_gg_.__hide_tudrd_gg_{display:none}.___STick_tudrd_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0)){.___STick_tudrd_gg_{fill:var(--intergalactic-chart-grid-text-label, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STick_tudrd_gg_{fill:var(--intergalactic-chart-grid-text-label, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SGrid_tudrd_gg_{fill:transparent;stroke:var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@supports (color:color(display-p3 0 0 0)){.___SGrid_tudrd_gg_{stroke:var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SGrid_tudrd_gg_{stroke:var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___STitle_tudrd_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583));transform-origin:var(--transform-origin_tudrd)}@supports (color:color(display-p3 0 0 0)){.___STitle_tudrd_gg_{fill:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STitle_tudrd_gg_{fill:var(--intergalactic-text-hint, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STitle_tudrd_gg_._position_top_tudrd_gg_{text-anchor:middle}.___STitle_tudrd_gg_._position_bottom_tudrd_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_tudrd_gg_._position_left_tudrd_gg_,.___STitle_tudrd_gg_._position_right_tudrd_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___STitle_tudrd_gg_._position_left_tudrd_gg_.__verticalWritingMode_tudrd_gg_,.___STitle_tudrd_gg_._position_right_tudrd_gg_.__verticalWritingMode_tudrd_gg_{writing-mode:vertical-rl;transform:none}.___STick_tudrd_gg_._position_top_tudrd_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_tudrd_gg_._position_bottom_tudrd_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_tudrd_gg_._position_right_tudrd_gg_{transform:translateX(16px);text-anchor:start;dominant-baseline:middle}.___STick_tudrd_gg_._position_left_tudrd_gg_{transform:translateX(-16px);text-anchor:end;dominant-baseline:middle}.___STick_tudrd_gg_._position_custom_0_tudrd_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_tudrd_gg_._position_custom_1_tudrd_gg_{transform:translateX(-16px);text-anchor:end;dominant-baseline:middle}",
+    ".___SAxis_1t54u_gg_{stroke:var(--intergalactic-chart-grid-x-axis, rgb(214, 216, 215))}.___SAxis_1t54u_gg_.__hide_1t54u_gg_{display:none}.___STick_1t54u_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___STick_1t54u_gg_{fill:var(--intergalactic-chart-grid-text-label, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STick_1t54u_gg_{fill:var(--intergalactic-chart-grid-text-label, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STick_1t54u_gg_.__primaryText_1t54u_gg_{fill:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___STick_1t54u_gg_.__hide_1t54u_gg_{display:none}.___SGrid_1t54u_gg_{fill:transparent;stroke:var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@supports (color:color(display-p3 0 0 0%)){.___SGrid_1t54u_gg_{stroke:var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SGrid_1t54u_gg_{stroke:var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___STitle_1t54u_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583));transform-origin:var(--transform-origin_1t54u)}@supports (color:color(display-p3 0 0 0%)){.___STitle_1t54u_gg_{fill:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STitle_1t54u_gg_{fill:var(--intergalactic-text-hint, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STitle_1t54u_gg_._position_top_1t54u_gg_{text-anchor:middle}.___STitle_1t54u_gg_._position_bottom_1t54u_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_1t54u_gg_._position_left_1t54u_gg_,.___STitle_1t54u_gg_._position_right_1t54u_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___STitle_1t54u_gg_._position_left_1t54u_gg_.__verticalWritingMode_1t54u_gg_,.___STitle_1t54u_gg_._position_right_1t54u_gg_.__verticalWritingMode_1t54u_gg_{writing-mode:vertical-rl;transform:none}.___STick_1t54u_gg_._position_top_1t54u_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_1t54u_gg_._position_bottom_1t54u_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_1t54u_gg_._position_bottom_1t54u_gg_ tspan{dominant-baseline:hanging}.___STick_1t54u_gg_._position_right_1t54u_gg_{transform:translateX(16px);dominant-baseline:middle}.___STick_1t54u_gg_._position_left_1t54u_gg_ tspan,.___STick_1t54u_gg_._position_right_1t54u_gg_ tspan{dominant-baseline:middle}.___STick_1t54u_gg_._position_left_1t54u_gg_.__multiline_1t54u_gg_,.___STick_1t54u_gg_._position_left_1t54u_gg_.__multiline_1t54u_gg_ tspan,.___STick_1t54u_gg_._position_right_1t54u_gg_.__multiline_1t54u_gg_,.___STick_1t54u_gg_._position_right_1t54u_gg_.__multiline_1t54u_gg_ tspan{dominant-baseline:auto}.___STick_1t54u_gg_._position_left_1t54u_gg_{transform:translateX(-16px);text-anchor:end;dominant-baseline:middle}.___STick_1t54u_gg_._position_custom_0_1t54u_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_1t54u_gg_._position_custom_0_1t54u_gg_ tspan{dominant-baseline:hanging}.___STick_1t54u_gg_._position_custom_1_1t54u_gg_{transform:translateX(-16px);text-anchor:end;dominant-baseline:middle}.___STick_1t54u_gg_._position_custom_1_1t54u_gg_ tspan{dominant-baseline:middle}",
     /*__inner_css_end__*/
-    "tudrd_gg_"
+    "1t54u_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SAxis": "___SAxis_tudrd_gg_",
-    "_hide": "__hide_tudrd_gg_",
-    "__STick": "___STick_tudrd_gg_",
-    "__SGrid": "___SGrid_tudrd_gg_",
-    "__STitle": "___STitle_tudrd_gg_",
-    "--transform-origin": "--transform-origin_tudrd",
-    "_position_top": "_position_top_tudrd_gg_",
-    "_position_bottom": "_position_bottom_tudrd_gg_",
-    "_position_right": "_position_right_tudrd_gg_",
-    "_position_left": "_position_left_tudrd_gg_",
-    "_verticalWritingMode": "__verticalWritingMode_tudrd_gg_",
-    "_position_custom_0": "_position_custom_0_tudrd_gg_",
-    "_position_custom_1": "_position_custom_1_tudrd_gg_"
+    "__SAxis": "___SAxis_1t54u_gg_",
+    "_hide": "__hide_1t54u_gg_",
+    "__STick": "___STick_1t54u_gg_",
+    "_primaryText": "__primaryText_1t54u_gg_",
+    "__SGrid": "___SGrid_1t54u_gg_",
+    "__STitle": "___STitle_1t54u_gg_",
+    "--transform-origin": "--transform-origin_1t54u",
+    "_position_top": "_position_top_1t54u_gg_",
+    "_position_bottom": "_position_bottom_1t54u_gg_",
+    "_position_right": "_position_right_1t54u_gg_",
+    "_position_left": "_position_left_1t54u_gg_",
+    "_verticalWritingMode": "__verticalWritingMode_1t54u_gg_",
+    "_multiline": "__multiline_1t54u_gg_",
+    "_position_custom_0": "_position_custom_0_1t54u_gg_",
+    "_position_custom_1": "_position_custom_1_1t54u_gg_"
   })
 );
-var CUSTOM_0 = Symbol("custom_0");
-var CUSTOM_1 = Symbol("custom_1");
+var CUSTOM_0 = /* @__PURE__ */ Symbol("custom_0");
+var CUSTOM_1 = /* @__PURE__ */ Symbol("custom_1");
 var MAP_INDEX_SCALE_SYMBOL = {
   0: CUSTOM_0,
   1: CUSTOM_1
@@ -48,7 +49,7 @@ var MAP_POSITION_REVERT = {
   bottom: "top",
   left: "right"
 };
-var MAP_POSITION_AXIS = (_MAP_POSITION_AXIS = {
+var MAP_POSITION_AXIS = _defineProperty(_defineProperty({
   top: function top(_ref5) {
     var _ref6 = _slicedToArray(_ref5, 2), xScale = _ref6[0], yScale = _ref6[1];
     var xRange = xScale.range();
@@ -72,7 +73,7 @@ var MAP_POSITION_AXIS = (_MAP_POSITION_AXIS = {
     };
   },
   right: function right(_ref9) {
-    var _ref10 = _slicedToArray(_ref9, 2), xScale = _ref10[0], yScale = _ref10[1];
+    var _ref0 = _slicedToArray(_ref9, 2), xScale = _ref0[0], yScale = _ref0[1];
     var xRange = xScale.range();
     var yRange = yScale.range();
     return {
@@ -82,8 +83,8 @@ var MAP_POSITION_AXIS = (_MAP_POSITION_AXIS = {
       y2: yRange[1]
     };
   },
-  left: function left(_ref11) {
-    var _ref12 = _slicedToArray(_ref11, 2), xScale = _ref12[0], yScale = _ref12[1];
+  left: function left(_ref1) {
+    var _ref10 = _slicedToArray(_ref1, 2), xScale = _ref10[0], yScale = _ref10[1];
     var xRange = xScale.range();
     var yRange = yScale.range();
     return {
@@ -93,8 +94,8 @@ var MAP_POSITION_AXIS = (_MAP_POSITION_AXIS = {
       y2: yRange[1]
     };
   }
-}, _defineProperty(_MAP_POSITION_AXIS, CUSTOM_0, function(_ref13, pos) {
-  var _ref14 = _slicedToArray(_ref13, 2), xScale = _ref14[0], yScale = _ref14[1];
+}, CUSTOM_0, function(_ref11, pos) {
+  var _ref12 = _slicedToArray(_ref11, 2), xScale = _ref12[0], yScale = _ref12[1];
   var xRange = xScale.range();
   return {
     x1: xRange[0],
@@ -102,8 +103,8 @@ var MAP_POSITION_AXIS = (_MAP_POSITION_AXIS = {
     x2: xRange[1],
     y2: scaleOfBandwidth(yScale, pos)
   };
-}), _defineProperty(_MAP_POSITION_AXIS, CUSTOM_1, function(_ref15, pos) {
-  var _ref16 = _slicedToArray(_ref15, 2), xScale = _ref16[0], yScale = _ref16[1];
+}), CUSTOM_1, function(_ref13, pos) {
+  var _ref14 = _slicedToArray(_ref13, 2), xScale = _ref14[0], yScale = _ref14[1];
   var yRange = yScale.range();
   return {
     x1: scaleOfBandwidth(xScale, pos),
@@ -111,56 +112,56 @@ var MAP_POSITION_AXIS = (_MAP_POSITION_AXIS = {
     x2: scaleOfBandwidth(xScale, pos),
     y2: yRange[1]
   };
-}), _MAP_POSITION_AXIS);
-var MAP_POSITION_TICK = (_MAP_POSITION_TICK = {
-  top: function top2(_ref17, value) {
-    var _ref18 = _slicedToArray(_ref17, 2), xScale = _ref18[0], yScale = _ref18[1];
+});
+var MAP_POSITION_TICK = _defineProperty(_defineProperty({
+  top: function top2(_ref15, value) {
+    var _ref16 = _slicedToArray(_ref15, 2), xScale = _ref16[0], yScale = _ref16[1];
     var yRange = yScale.range();
     return {
       x: scaleOfBandwidth(xScale, value),
       y: yRange[1]
     };
   },
-  bottom: function bottom2(_ref19, value) {
-    var _ref20 = _slicedToArray(_ref19, 2), xScale = _ref20[0], yScale = _ref20[1];
+  bottom: function bottom2(_ref17, value) {
+    var _ref18 = _slicedToArray(_ref17, 2), xScale = _ref18[0], yScale = _ref18[1];
     var yRange = yScale.range();
     return {
       x: scaleOfBandwidth(xScale, value),
       y: yRange[0]
     };
   },
-  right: function right2(_ref21, value) {
-    var _ref22 = _slicedToArray(_ref21, 2), xScale = _ref22[0], yScale = _ref22[1];
+  right: function right2(_ref19, value) {
+    var _ref20 = _slicedToArray(_ref19, 2), xScale = _ref20[0], yScale = _ref20[1];
     var xRange = xScale.range();
     return {
       x: xRange[1],
       y: scaleOfBandwidth(yScale, value)
     };
   },
-  left: function left2(_ref23, value) {
-    var _ref24 = _slicedToArray(_ref23, 2), xScale = _ref24[0], yScale = _ref24[1];
+  left: function left2(_ref21, value) {
+    var _ref22 = _slicedToArray(_ref21, 2), xScale = _ref22[0], yScale = _ref22[1];
     var xRange = xScale.range();
     return {
       x: xRange[0],
       y: scaleOfBandwidth(yScale, value)
     };
   }
-}, _defineProperty(_MAP_POSITION_TICK, CUSTOM_0, function(_ref25, value, pos) {
-  var _ref26 = _slicedToArray(_ref25, 2), xScale = _ref26[0], yScale = _ref26[1];
+}, CUSTOM_0, function(_ref23, value, pos) {
+  var _ref24 = _slicedToArray(_ref23, 2), xScale = _ref24[0], yScale = _ref24[1];
   return {
     x: scaleOfBandwidth(xScale, value),
     y: scaleOfBandwidth(yScale, pos)
   };
-}), _defineProperty(_MAP_POSITION_TICK, CUSTOM_1, function(_ref27, value, pos) {
-  var _ref28 = _slicedToArray(_ref27, 2), xScale = _ref28[0], yScale = _ref28[1];
+}), CUSTOM_1, function(_ref25, value, pos) {
+  var _ref26 = _slicedToArray(_ref25, 2), xScale = _ref26[0], yScale = _ref26[1];
   return {
     x: scaleOfBandwidth(xScale, pos),
     y: scaleOfBandwidth(yScale, value)
   };
-}), _MAP_POSITION_TICK);
+});
 var MAP_POSITION_GRID = {
-  0: function _(_ref29, value) {
-    var _ref30 = _slicedToArray(_ref29, 2), xScale = _ref30[0], yScale = _ref30[1];
+  0: function _(_ref27, value) {
+    var _ref28 = _slicedToArray(_ref27, 2), xScale = _ref28[0], yScale = _ref28[1];
     var yRange = yScale.range();
     var x = scaleOfBandwidth(xScale, value);
     return {
@@ -170,8 +171,8 @@ var MAP_POSITION_GRID = {
       y2: yRange[1]
     };
   },
-  1: function _2(_ref31, value) {
-    var _ref32 = _slicedToArray(_ref31, 2), xScale = _ref32[0], yScale = _ref32[1];
+  1: function _2(_ref29, value) {
+    var _ref30 = _slicedToArray(_ref29, 2), xScale = _ref30[0], yScale = _ref30[1];
     var xRange = xScale.range();
     var y = scaleOfBandwidth(yScale, value);
     return {
@@ -184,34 +185,34 @@ var MAP_POSITION_GRID = {
 };
 var OFFSET_TITLE = 10;
 var MAP_POSITION_TITlE = {
-  top: function top3(_ref33) {
-    var _ref34 = _slicedToArray(_ref33, 1), xScale = _ref34[0];
+  top: function top3(_ref31) {
+    var _ref32 = _slicedToArray(_ref31, 1), xScale = _ref32[0];
     var xRange = xScale.range();
     return {
       x: (xRange[1] + xRange[0]) / 2,
       y: OFFSET_TITLE
     };
   },
-  bottom: function bottom3(_ref35, _ref36) {
-    var _ref37 = _slicedToArray(_ref35, 1), xScale = _ref37[0];
-    var _ref38 = _slicedToArray(_ref36, 2), height = _ref38[1];
+  bottom: function bottom3(_ref33, _ref34) {
+    var _ref35 = _slicedToArray(_ref33, 1), xScale = _ref35[0];
+    var _ref36 = _slicedToArray(_ref34, 2), height = _ref36[1];
     var xRange = xScale.range();
     return {
       x: (xRange[1] + xRange[0]) / 2,
       y: height - OFFSET_TITLE
     };
   },
-  right: function right3(_ref39, _ref40) {
-    var _ref41 = _slicedToArray(_ref39, 2), yScale = _ref41[1];
-    var _ref42 = _slicedToArray(_ref40, 1), width = _ref42[0];
+  right: function right3(_ref37, _ref38) {
+    var _ref39 = _slicedToArray(_ref37, 2), yScale = _ref39[1];
+    var _ref40 = _slicedToArray(_ref38, 1), width = _ref40[0];
     var yRange = yScale.range();
     return {
       x: width - OFFSET_TITLE,
       y: (yRange[0] + yRange[1]) / 2
     };
   },
-  left: function left3(_ref43) {
-    var _ref44 = _slicedToArray(_ref43, 2), yScale = _ref44[1];
+  left: function left3(_ref41) {
+    var _ref42 = _slicedToArray(_ref41, 2), yScale = _ref42[1];
     var yRange = yScale.range();
     return {
       x: OFFSET_TITLE,
@@ -225,14 +226,53 @@ function renderValue(value) {
   }
   return value;
 }
-var AxisRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(AxisRoot2, _Component);
-  var _super = _createSuper(AxisRoot2);
+function splitTextByWidth(root, text, maxWidth) {
+  if (!text || !maxWidth || maxWidth <= 0) return [];
+  var words = text.split(/\s+/).filter(function(word) {
+    return word.length > 0;
+  });
+  if (words.length === 0) return [];
+  var lines = [];
+  var currentLine = words[0];
+  for (var i = 1; i < words.length; i++) {
+    var testLine = "".concat(currentLine, " ").concat(words[i]).trim();
+    var testWidth = measureTextWidth(root, testLine);
+    if (testWidth <= maxWidth) {
+      currentLine = testLine;
+    } else {
+      if (currentLine) {
+        lines.push(currentLine);
+      }
+      currentLine = words[i];
+      if (measureTextWidth(root, currentLine) > maxWidth) {
+        lines.push(currentLine);
+        currentLine = "";
+      }
+    }
+  }
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return lines;
+}
+function measureTextWidth(rootRef, text) {
+  var fontSize = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 12;
+  var textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+  textEl.setAttribute("font-size", fontSize);
+  textEl.setAttribute("visibility", "hidden");
+  textEl.textContent = text;
+  rootRef.appendChild(textEl);
+  var width = textEl.getComputedTextLength();
+  rootRef.removeChild(textEl);
+  return width;
+}
+var AxisRoot = /* @__PURE__ */ (function(_Component) {
   function AxisRoot2() {
     _classCallCheck(this, AxisRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, AxisRoot2, arguments);
   }
-  _createClass(AxisRoot2, [{
+  _inherits(AxisRoot2, _Component);
+  return _createClass(AxisRoot2, [{
     key: "ticks",
     get: function get() {
       var _scl$ticks, _scl$domain;
@@ -275,20 +315,30 @@ var AxisRoot = /* @__PURE__ */ function(_Component) {
       var SAxis = this.Element;
       var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, position = _this$asProps4.position, scale = _this$asProps4.scale, hide = _this$asProps4.hide, indexScale = _this$asProps4.indexScale;
       var pos = (_MAP_POSITION_AXIS$po = MAP_POSITION_AXIS[position]) !== null && _MAP_POSITION_AXIS$po !== void 0 ? _MAP_POSITION_AXIS$po : MAP_POSITION_AXIS[MAP_INDEX_SCALE_SYMBOL[indexScale]];
-      return _ref = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAxis, _ref.cn("SAxis", _objectSpread({
+      return _ref = sstyled(styles), /* @__PURE__ */ React.createElement(SAxis, _ref.cn("SAxis", _objectSpread({
         "render": "line",
         "hide": hide
       }, pos(scale, position))));
     }
   }]);
-  return AxisRoot2;
-}(Component);
+})(Component);
 _defineProperty(AxisRoot, "displayName", "Axis");
 _defineProperty(AxisRoot, "style", style);
 _defineProperty(AxisRoot, "defaultProps", {});
 function Ticks(props) {
-  var _MAP_POSITION_TICK$po;
-  var STick = props.Element, styles = props.styles, scale = props.scale, ticks = props.ticks, position = props.position, hide = props.hide, indexScale = props.indexScale, dataHintsHandler = props.dataHintsHandler, children = props.children, _props$childrenPositi = props.childrenPosition, childrenPosition = _props$childrenPositi === void 0 ? "inside" : _props$childrenPositi;
+  var _scale$indexScale, _scale$indexScale$ban, _MAP_POSITION_TICK$po;
+  var STick = props.Element, styles = props.styles, scale = props.scale, ticks = props.ticks, position = props.position, hide = props.hide, indexScale = props.indexScale, dataHintsHandler = props.dataHintsHandler, children = props.children, _props$childrenPositi = props.childrenPosition, childrenPosition = _props$childrenPositi === void 0 ? "inside" : _props$childrenPositi, rootRef = props.rootRef, multiline = props.multiline;
+  var _useState = useState(null), _useState2 = _slicedToArray(_useState, 2), rootRefElement = _useState2[0], setRootRefElement = _useState2[1];
+  useEffect(function() {
+    if (rootRef.current) setRootRefElement(rootRef.current);
+  }, []);
+  var tickBandwidth = (_scale$indexScale = scale[indexScale]) === null || _scale$indexScale === void 0 || (_scale$indexScale$ban = _scale$indexScale.bandwidth) === null || _scale$indexScale$ban === void 0 ? void 0 : _scale$indexScale$ban.call(_scale$indexScale);
+  var ticksWithLines = ticks.map(function(tick) {
+    return {
+      tick,
+      lines: typeof tick === "string" && multiline && rootRefElement ? splitTextByWidth(rootRefElement, tick, tickBandwidth) : []
+    };
+  });
   var pos = (_MAP_POSITION_TICK$po = MAP_POSITION_TICK[position]) !== null && _MAP_POSITION_TICK$po !== void 0 ? _MAP_POSITION_TICK$po : MAP_POSITION_TICK[MAP_INDEX_SCALE_SYMBOL[indexScale]];
   var positionClass = MAP_POSITION_TICK[position] ? position : "custom_".concat(indexScale);
   if (typeof children === "function") {
@@ -305,10 +355,11 @@ function Ticks(props) {
       dataHintsHandler.addKeyLabelGetter("horizontal", labelGetter);
     }
   }
-  return ticks.map(function(value, i) {
+  return ticksWithLines.map(function(_ref43, i) {
     var _ref2;
+    var value = _ref43.tick, lines = _ref43.lines;
     var displayValue = typeof children === "function" ? void 0 : renderValue(value);
-    return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STick, _ref2.cn("STick", _objectSpread({
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STick, _ref2.cn("STick", _objectSpread({
       "aria-hidden": true,
       "key": i,
       "render": "text",
@@ -317,8 +368,16 @@ function Ticks(props) {
       "value": value,
       "index": i,
       "position": positionClass,
-      "hide": hide
-    }, pos(scale, value, position))), displayValue);
+      "hide": hide,
+      "multiline": multiline,
+      "primaryText": props.primaryText
+    }, pos(scale, value, position))), lines.length > 1 ? lines.map(function(line, lineIndex) {
+      return /* @__PURE__ */ React.createElement("tspan", _extends({
+        key: line
+      }, pos(scale, value, position), {
+        dy: lineIndex * 15
+      }), line);
+    }) : displayValue);
   });
 }
 function Grid(props) {
@@ -332,7 +391,7 @@ function Grid(props) {
   }
   return ticks.map(function(value, i) {
     var _ref3;
-    return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SGrid, _ref3.cn("SGrid", _objectSpread({
+    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SGrid, _ref3.cn("SGrid", _objectSpread({
       "key": i,
       "render": "line"
     }, MAP_POSITION_GRID[indexScale](scale, value))));
@@ -347,11 +406,11 @@ function Title(props) {
   } else if (position === "top" || position === "bottom") {
     props.dataHintsHandler.setTitle("horizontal", children);
   }
-  var sstyles = sstyled$1(styles);
+  var sstyles = sstyled(styles);
   var sTitleStyles = sstyles.cn("STitle", {
     "transform-origin": "".concat(x.toFixed(2), "px ").concat(y.toFixed(2), "px")
   });
-  return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STitle, _ref4.cn("STitle", {
+  return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(STitle, _ref4.cn("STitle", {
     "aria-hidden": true,
     "render": "text",
     "childrenPosition": "inside",
@@ -363,15 +422,14 @@ function Title(props) {
     "y": y
   }));
 }
-var XAxisRoot = /* @__PURE__ */ function(_AxisRoot) {
-  _inherits(XAxisRoot2, _AxisRoot);
-  var _super2 = _createSuper(XAxisRoot2);
+var XAxisRoot = /* @__PURE__ */ (function(_AxisRoot2) {
   function XAxisRoot2() {
     _classCallCheck(this, XAxisRoot2);
-    return _super2.apply(this, arguments);
+    return _callSuper(this, XAxisRoot2, arguments);
   }
+  _inherits(XAxisRoot2, _AxisRoot2);
   return _createClass(XAxisRoot2);
-}(AxisRoot);
+})(AxisRoot);
 _defineProperty(XAxisRoot, "defaultProps", _objectSpread(_objectSpread({}, AxisRoot.defaultProps), {}, {
   indexScale: 0,
   position: "bottom"
@@ -381,15 +439,14 @@ var XAxis = createElement(XAxisRoot, {
   Grid,
   Title
 });
-var YAxisRoot = /* @__PURE__ */ function(_AxisRoot2) {
-  _inherits(YAxisRoot2, _AxisRoot2);
-  var _super3 = _createSuper(YAxisRoot2);
+var YAxisRoot = /* @__PURE__ */ (function(_AxisRoot3) {
   function YAxisRoot2() {
     _classCallCheck(this, YAxisRoot2);
-    return _super3.apply(this, arguments);
+    return _callSuper(this, YAxisRoot2, arguments);
   }
+  _inherits(YAxisRoot2, _AxisRoot3);
   return _createClass(YAxisRoot2);
-}(AxisRoot);
+})(AxisRoot);
 _defineProperty(YAxisRoot, "defaultProps", _objectSpread(_objectSpread({}, AxisRoot.defaultProps), {}, {
   indexScale: 1,
   position: "left",

package/lib/esm/Bar.mjs

@@ -1,43 +1,42 @@
 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 React from "react";
+import { sstyled, Component } from "@semcore/core";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { transition } from "d3-transition";
-import { sstyled as sstyled$1, Component } from "@semcore/core";
-import uniqueIDEnhancement from "@semcore/utils/lib/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";
 /*!__reshadow-styles__:"./style/bar.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBar_of1l0_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219));transition-property:height,width,y;transition-duration:var(--duration_of1l0);transition-timing-function:ease-in-out}.___SBar_of1l0_gg_.__color_of1l0_gg_{fill:var(--color_of1l0)}.___SBar_of1l0_gg_.__pattern_of1l0_gg_.__color_of1l0_gg_{fill:var(--pattern_of1l0);stroke:var(--color_of1l0);stroke-width:1px}.___SBar_of1l0_gg_.__hide_of1l0_gg_{display:none}.___SBar_of1l0_gg_.__transparent_of1l0_gg_{opacity:.3}.___SBackground_of1l0_gg_.__onClick_of1l0_gg_,.___SBar_of1l0_gg_.__onClick_of1l0_gg_{cursor:pointer}.___SBackground_of1l0_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242))}.___SBarAnnotation_of1l0_gg_{display:flex;justify-content:space-between}.___SBarLabel_of1l0_gg_,.___SBarPercent_of1l0_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarLabel_of1l0_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:auto}.___SBarPercent_of1l0_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_of1l0_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBarPercent_of1l0_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SBarValue_of1l0_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_of1l0_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(0, 22, 16, 0.028))}",
+    ".___SBar_3jzeq_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(102, 107, 219));transition-property:height,width,y;transition-duration:var(--duration_3jzeq);transition-timing-function:ease-in-out}.___SBar_3jzeq_gg_.__color_3jzeq_gg_{fill:var(--color_3jzeq)}.___SBar_3jzeq_gg_.__pattern_3jzeq_gg_.__color_3jzeq_gg_{fill:var(--pattern_3jzeq);stroke:var(--color_3jzeq);stroke-width:1px}.___SBar_3jzeq_gg_.__hide_3jzeq_gg_{display:none}.___SBar_3jzeq_gg_.__transparent_3jzeq_gg_{opacity:.3}.___SBackground_3jzeq_gg_.__onClick_3jzeq_gg_,.___SBar_3jzeq_gg_.__onClick_3jzeq_gg_{cursor:pointer}.___SBackground_3jzeq_gg_{fill:var(--intergalactic-chart-grid-bar-chart-base-bg, rgb(241, 242, 242))}.___SBarAnnotation_3jzeq_gg_{display:flex;justify-content:space-between}.___SBarLabel_3jzeq_gg_,.___SBarPercent_3jzeq_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBarLabel_3jzeq_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));margin-right:auto}.___SBarPercent_3jzeq_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_3jzeq_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBarPercent_3jzeq_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SBarValue_3jzeq_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_3jzeq_gg_{fill:var(--intergalactic-chart-grid-bar-chart-hover, rgba(0, 22, 16, 0.028))}",
     /*__inner_css_end__*/
-    "of1l0_gg_"
+    "3jzeq_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBar": "___SBar_of1l0_gg_",
-    "--duration": "--duration_of1l0",
-    "_color": "__color_of1l0_gg_",
-    "--color": "--color_of1l0",
-    "_pattern": "__pattern_of1l0_gg_",
-    "--pattern": "--pattern_of1l0",
-    "_hide": "__hide_of1l0_gg_",
-    "_transparent": "__transparent_of1l0_gg_",
-    "_onClick": "__onClick_of1l0_gg_",
-    "__SBackground": "___SBackground_of1l0_gg_",
-    "__SBarAnnotation": "___SBarAnnotation_of1l0_gg_",
-    "__SBarLabel": "___SBarLabel_of1l0_gg_",
-    "__SBarPercent": "___SBarPercent_of1l0_gg_",
-    "__SBarValue": "___SBarValue_of1l0_gg_",
-    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_of1l0_gg_"
+    "__SBar": "___SBar_3jzeq_gg_",
+    "--duration": "--duration_3jzeq",
+    "_color": "__color_3jzeq_gg_",
+    "--color": "--color_3jzeq",
+    "_pattern": "__pattern_3jzeq_gg_",
+    "--pattern": "--pattern_3jzeq",
+    "_hide": "__hide_3jzeq_gg_",
+    "_transparent": "__transparent_3jzeq_gg_",
+    "_onClick": "__onClick_3jzeq_gg_",
+    "__SBackground": "___SBackground_3jzeq_gg_",
+    "__SBarAnnotation": "___SBarAnnotation_3jzeq_gg_",
+    "__SBarLabel": "___SBarLabel_3jzeq_gg_",
+    "__SBarPercent": "___SBarPercent_3jzeq_gg_",
+    "__SBarValue": "___SBarValue_3jzeq_gg_",
+    "__SCompactHorizontalBarHoverRect": "___SCompactHorizontalBarHoverRect_3jzeq_gg_"
   })
 );
 var MIN_HEIGHT = 2;
@@ -47,14 +46,13 @@ var calcPartBarY = function calcPartBarY2(y, minHeight, height) {
   }
   return height <= minHeight ? minHeight : 0;
 };
-var BarRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(BarRoot2, _Component);
-  var _super = _createSuper(BarRoot2);
+var BarRoot = /* @__PURE__ */ (function(_Component) {
   function BarRoot2() {
     _classCallCheck(this, BarRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, BarRoot2, arguments);
   }
-  _createClass(BarRoot2, [{
+  _inherits(BarRoot2, _Component);
+  return _createClass(BarRoot2, [{
     key: "getBackgroundProps",
     value: function getBackgroundProps(_props, index) {
       var _this$asProps = this.asProps, x = _this$asProps.x, data = _this$asProps.data;
@@ -88,7 +86,7 @@ var BarRoot = /* @__PURE__ */ function(_Component) {
     value: function renderBar(d, i) {
       var _ref, _d$y, _d$y2, _d$y3;
       var SBar = this.Element;
-      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, color = _this$asProps3.color, resolveColor = _this$asProps3.resolveColor, x = _this$asProps3.x, y = _this$asProps3.y, y0 = _this$asProps3.y0, scale = _this$asProps3.scale, hide = _this$asProps3.hide, offsetProps = _this$asProps3.offset, duration = _this$asProps3.duration, uid = _this$asProps3.uid, r = _this$asProps3.r, hMin = _this$asProps3.hMin, widthProps = _this$asProps3.width, groupKey = _this$asProps3.groupKey, onClick = _this$asProps3.onClick, transparent = _this$asProps3.transparent, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Infinity : _this$asProps3$maxBar, patterns = _this$asProps3.patterns, dataHintsHandler = _this$asProps3.dataHintsHandler;
+      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, color = _this$asProps3.color, resolveColor = _this$asProps3.resolveColor, x = _this$asProps3.x, y = _this$asProps3.y, y0 = _this$asProps3.y0, scale = _this$asProps3.scale, hide = _this$asProps3.hide, offsetProps = _this$asProps3.offset, duration = _this$asProps3.duration, uid = _this$asProps3.uid, r = _this$asProps3.r, hMin = _this$asProps3.hMin, widthProps = _this$asProps3.width, groupKey = _this$asProps3.groupKey, onClick = _this$asProps3.onClick, transparent = _this$asProps3.transparent, _this$asProps3$maxBar = _this$asProps3.maxBarSize, maxBarSize = _this$asProps3$maxBar === void 0 ? Number.POSITIVE_INFINITY : _this$asProps3$maxBar, patterns = _this$asProps3.patterns, dataHintsHandler = _this$asProps3.dataHintsHandler;
       var offset = typeof offsetProps === "function" ? offsetProps(i) : offsetProps;
       var _scale = _slicedToArray(scale, 2), xScale = _scale[0], yScale = _scale[1];
       var absHeight = Math.abs(yScale(d[y]) - Math.min(yScale(yScale.domain()[0]), yScale((_d$y = d[y0]) !== null && _d$y !== void 0 ? _d$y : 0)));
@@ -116,7 +114,7 @@ var BarRoot = /* @__PURE__ */ function(_Component) {
       }
       return /* @__PURE__ */ React.createElement(React.Fragment, {
         key: "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, ")"),
@@ -157,8 +155,7 @@ var BarRoot = /* @__PURE__ */ function(_Component) {
       }));
     }
   }]);
-  return BarRoot2;
-}(Component);
+})(Component);
 _defineProperty(BarRoot, "displayName", "Bar");
 _defineProperty(BarRoot, "style", style);
 _defineProperty(BarRoot, "enhance", [uniqueIDEnhancement()]);
@@ -173,7 +170,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 yRange = yScale.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",