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

package/lib/esm/Area.mjs

@@ -1,53 +1,53 @@
 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 findComponent from "@semcore/core/lib/utils/findComponent";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import { bisector } from "d3-array";
+import { curveLinear, line, area } from "d3-shape";
 import React from "react";
-import { area, line, curveLinear } from "d3-shape";
-import { sstyled as sstyled$1, Component } from "@semcore/core";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
-import findComponent from "@semcore/utils/lib/findComponent";
-import Dots from "./Dots.mjs";
-import createElement from "./createElement.mjs";
-import { definedData, scaleOfBandwidth, interpolateValue, getNullData, definedNullData } from "./utils.mjs";
 import AnimatedClipPath from "./AnimatedClipPath.mjs";
+import { SvgElement } from "./component/SvgElement.mjs";
+import createElement from "./createElement.mjs";
+import Dots from "./Dots.mjs";
 import { PatternFill } from "./Pattern.mjs";
+import { interpolateValue, getNullData, definedNullData, eventToPoint, invert, definedData, scaleOfBandwidth } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/area.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SArea_oqey3_gg_{fill:var(--intergalactic-chart-palette-order-1, #2bb3ff);fill-opacity:.2}.___SArea_oqey3_gg_.__color_oqey3_gg_{fill:var(--color_oqey3)}.___SArea_oqey3_gg_.__pattern_oqey3_gg_{fill:var(--pattern_oqey3);fill-opacity:.7}.___SArea_oqey3_gg_.__transparent_oqey3_gg_{opacity:.3}.___SAreaLine_oqey3_gg_{stroke:var(--intergalactic-chart-palette-order-1, #2bb3ff);stroke-width:3;fill:transparent}.___SAreaLine_oqey3_gg_.__color_oqey3_gg_{stroke:var(--color_oqey3)}.___SAreaLine_oqey3_gg_.__transparent_oqey3_gg_{opacity:.3}.___SAreaLine_oqey3_gg_,.___SArea_oqey3_gg_{transition-property:d;transition-duration:var(--duration_oqey3);transition-timing-function:ease-in-out}.___SNull_oqey3_gg_{fill:transparent;stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf);stroke-dasharray:4}.___SNull_oqey3_gg_.__hide_oqey3_gg_{display:none}",
+    ".___SArea_vwe36_gg_{fill:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210));fill-opacity:.2}.___SArea_vwe36_gg_.__color_vwe36_gg_{fill:var(--color_vwe36)}.___SArea_vwe36_gg_.__pattern_vwe36_gg_{fill:var(--pattern_vwe36);fill-opacity:.7}.___SArea_vwe36_gg_.__transparent_vwe36_gg_{opacity:.3}.___SAreaLine_vwe36_gg_{stroke:var(--intergalactic-chart-palette-order-1, rgb(104, 109, 210));stroke-width:3;fill:transparent}.___SAreaLine_vwe36_gg_.__color_vwe36_gg_{stroke:var(--color_vwe36)}.___SAreaLine_vwe36_gg_.__transparent_vwe36_gg_{opacity:.3}.___SAreaLine_vwe36_gg_,.___SArea_vwe36_gg_{transition-property:d;transition-duration:var(--duration_vwe36);transition-timing-function:ease-in-out}.___SNull_vwe36_gg_{fill:transparent;stroke:var(--intergalactic-chart-grid-x-axis, rgb(214, 216, 215));stroke-dasharray:4}.___SNull_vwe36_gg_.__hide_vwe36_gg_{display:none}",
     /*__inner_css_end__*/
-    "oqey3_gg_"
+    "vwe36_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SArea": "___SArea_oqey3_gg_",
-    "_color": "__color_oqey3_gg_",
-    "--color": "--color_oqey3",
-    "_pattern": "__pattern_oqey3_gg_",
-    "--pattern": "--pattern_oqey3",
-    "_transparent": "__transparent_oqey3_gg_",
-    "__SAreaLine": "___SAreaLine_oqey3_gg_",
-    "--duration": "--duration_oqey3",
-    "__SNull": "___SNull_oqey3_gg_",
-    "_hide": "__hide_oqey3_gg_"
+    "__SArea": "___SArea_vwe36_gg_",
+    "_color": "__color_vwe36_gg_",
+    "--color": "--color_vwe36",
+    "_pattern": "__pattern_vwe36_gg_",
+    "--pattern": "--pattern_vwe36",
+    "_transparent": "__transparent_vwe36_gg_",
+    "__SAreaLine": "___SAreaLine_vwe36_gg_",
+    "--duration": "--duration_vwe36",
+    "__SNull": "___SNull_vwe36_gg_",
+    "_hide": "__hide_vwe36_gg_"
   })
 );
-var AreaRoot = /* @__PURE__ */ function(_Component) {
-  _inherits(AreaRoot2, _Component);
-  var _super = _createSuper(AreaRoot2);
+var AreaRoot = /* @__PURE__ */ (function(_Component) {
   function AreaRoot2() {
     _classCallCheck(this, AreaRoot2);
-    return _super.apply(this, arguments);
+    return _callSuper(this, AreaRoot2, arguments);
   }
-  _createClass(AreaRoot2, [{
+  _inherits(AreaRoot2, _Component);
+  return _createClass(AreaRoot2, [{
     key: "getDotsProps",
     value: function getDotsProps() {
-      var _this$asProps = this.asProps, x = _this$asProps.x, y = _this$asProps.y, color = _this$asProps.color, d3Line = _this$asProps.d3Line, transparent = _this$asProps.transparent, resolveColor = _this$asProps.resolveColor, patterns = _this$asProps.patterns;
+      var _this$asProps = this.asProps, x = _this$asProps.x, y = _this$asProps.y, color = _this$asProps.color, d3Line = _this$asProps.d3Line, transparent = _this$asProps.transparent, resolveColor = _this$asProps.resolveColor, patterns = _this$asProps.patterns, onClick = _this$asProps.onClick;
       var data = this.asProps.data.filter(function(item) {
         return item[y] !== interpolateValue;
       });
@@ -59,7 +59,8 @@ var AreaRoot = /* @__PURE__ */ function(_Component) {
         color,
         resolveColor,
         transparent,
-        patterns
+        patterns,
+        onClick
       };
     }
   }, {
@@ -89,20 +90,34 @@ var AreaRoot = /* @__PURE__ */ function(_Component) {
         duration
       };
     }
+  }, {
+    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 SArea = this.Element;
-      var SAreaLine = "path";
-      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, hide = _this$asProps4.hide, d3 = _this$asProps4.d3, d3Line = _this$asProps4.d3Line, color = _this$asProps4.color, uid = _this$asProps4.uid, size = _this$asProps4.size, duration = _this$asProps4.duration, x = _this$asProps4.x, y = _this$asProps4.y, Children = _this$asProps4.Children, transparent = _this$asProps4.transparent, forcedAdvancedMode = _this$asProps4.forcedAdvancedMode, resolveColor = _this$asProps4.resolveColor, patterns = _this$asProps4.patterns;
+      var SAreaLine = SvgElement;
+      var _this$asProps5 = this.asProps, styles = _this$asProps5.styles, hide = _this$asProps5.hide, d3 = _this$asProps5.d3, d3Line = _this$asProps5.d3Line, color = _this$asProps5.color, uid = _this$asProps5.uid, size = _this$asProps5.size, duration = _this$asProps5.duration, x = _this$asProps5.x, y = _this$asProps5.y, Children = _this$asProps5.Children, transparent = _this$asProps5.transparent, forcedAdvancedMode = _this$asProps5.forcedAdvancedMode, resolveColor = _this$asProps5.resolveColor, patterns = _this$asProps5.patterns;
       var advancedMode = forcedAdvancedMode || !!findComponent(Children, [Area.Line.displayName]);
       var data = this.asProps.data.filter(function(item) {
         return item[y] !== interpolateValue;
       });
       this.asProps.dataHintsHandler.specifyDataRowFields(x, y);
       this.asProps.dataHintsHandler.establishDataType("time-series");
-      return _ref = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, !advancedMode && /* @__PURE__ */ React.createElement(SAreaLine, _ref.cn("SAreaLine", {
+      return _ref = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, !advancedMode && /* @__PURE__ */ React.createElement(SAreaLine, _ref.cn("SAreaLine", {
+        "tag": "path",
         "aria-hidden": true,
         "clipPath": "url(#".concat(uid, "-animation)"),
         "d": d3Line(data),
@@ -118,7 +133,8 @@ var AreaRoot = /* @__PURE__ */ function(_Component) {
         "pattern": patterns ? "url(#".concat(uid, "-pattern)") : void 0,
         "color": resolveColor(color),
         "use:duration": "".concat(duration, "ms"),
-        "transparent": transparent
+        "transparent": transparent,
+        "onClickCapture": this.handlerOnClick.bind(this)
       })), duration && /* @__PURE__ */ React.createElement(AnimatedClipPath, _ref.cn("AnimatedClipPath", {
         "duration": duration,
         "id": uid,
@@ -132,8 +148,7 @@ var AreaRoot = /* @__PURE__ */ function(_Component) {
       })));
     }
   }]);
-  return AreaRoot2;
-}(Component);
+})(Component);
 _defineProperty(AreaRoot, "displayName", "Area");
 _defineProperty(AreaRoot, "style", style);
 _defineProperty(AreaRoot, "enhance", [uniqueIDEnhancement()]);
@@ -160,7 +175,7 @@ _defineProperty(AreaRoot, "defaultProps", function(_ref4) {
 function Line(props) {
   var _ref2;
   var SAreaLine = props.Element, styles = props.styles, d3 = props.d3, data = props.data, color = props.color, resolveColor = props.resolveColor, duration = props.duration, uid = props.uid, transparent = props.transparent;
-  return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAreaLine, _ref2.cn("SAreaLine", {
+  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SAreaLine, _ref2.cn("SAreaLine", {
     "render": "path",
     "clipPath": "url(#".concat(uid, ")"),
     "d": d3(data),
@@ -172,7 +187,7 @@ function Line(props) {
 function Null(props) {
   var _ref3;
   var SNull = props.Element, styles = props.styles, d3 = props.d3, data = props.data, hide = props.hide, color = props.color, resolveColor = props.resolveColor;
-  return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SNull, _ref3.cn("SNull", {
+  return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SNull, _ref3.cn("SNull", {
     "render": "path",
     "d": d3(data),
     "hide": hide,

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_1qpxf_gg_{stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf)}.___SAxis_1qpxf_gg_.__hide_1qpxf_gg_,.___STick_1qpxf_gg_.__hide_1qpxf_gg_{display:none}.___STick_1qpxf_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, #6c6e79)}.___SGrid_1qpxf_gg_{fill:transparent;stroke:var(--intergalactic-border-secondary, #e0e1e9)}.___STitle_1qpxf_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-text-hint, #6c6e79);transform-origin:var(--transform-origin_1qpxf)}.___STitle_1qpxf_gg_._position_top_1qpxf_gg_{text-anchor:middle}.___STitle_1qpxf_gg_._position_bottom_1qpxf_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_1qpxf_gg_._position_left_1qpxf_gg_,.___STitle_1qpxf_gg_._position_right_1qpxf_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___STitle_1qpxf_gg_._position_left_1qpxf_gg_.__verticalWritingMode_1qpxf_gg_,.___STitle_1qpxf_gg_._position_right_1qpxf_gg_.__verticalWritingMode_1qpxf_gg_{writing-mode:vertical-rl;transform:none}.___STick_1qpxf_gg_._position_top_1qpxf_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_1qpxf_gg_._position_bottom_1qpxf_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_1qpxf_gg_._position_right_1qpxf_gg_{transform:translateX(16px);text-anchor:start;dominant-baseline:middle}.___STick_1qpxf_gg_._position_left_1qpxf_gg_{transform:translateX(-16px);text-anchor:end;dominant-baseline:middle}.___STick_1qpxf_gg_._position_custom_0_1qpxf_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_1qpxf_gg_._position_custom_1_1qpxf_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__*/
-    "1qpxf_gg_"
+    "1t54u_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SAxis": "___SAxis_1qpxf_gg_",
-    "_hide": "__hide_1qpxf_gg_",
-    "__STick": "___STick_1qpxf_gg_",
-    "__SGrid": "___SGrid_1qpxf_gg_",
-    "__STitle": "___STitle_1qpxf_gg_",
-    "--transform-origin": "--transform-origin_1qpxf",
-    "_position_top": "_position_top_1qpxf_gg_",
-    "_position_bottom": "_position_bottom_1qpxf_gg_",
-    "_position_right": "_position_right_1qpxf_gg_",
-    "_position_left": "_position_left_1qpxf_gg_",
-    "_verticalWritingMode": "__verticalWritingMode_1qpxf_gg_",
-    "_position_custom_0": "_position_custom_0_1qpxf_gg_",
-    "_position_custom_1": "_position_custom_1_1qpxf_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",