@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.8

package/lib/esm/Axis.mjs

@@ -1,58 +1,52 @@
 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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { sstyled, Component } from "@semcore/core";
 import React, { useState, useEffect } from "react";
 import createElement from "./createElement.mjs";
 import { scaleOfBandwidth } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/axis.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SAxis_1e44w_gg_{stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf)}.___SAxis_1e44w_gg_.__hide_1e44w_gg_,.___STick_1e44w_gg_.__hide_1e44w_gg_{display:none}.___STick_1e44w_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, #6c6e79)}.___SGrid_1e44w_gg_{fill:transparent;stroke:var(--intergalactic-border-secondary, #e0e1e9)}.___STitle_1e44w_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-text-hint, #6c6e79);transform-origin:var(--transform-origin_1e44w)}.___STitle_1e44w_gg_._position_top_1e44w_gg_{text-anchor:middle}.___STitle_1e44w_gg_._position_bottom_1e44w_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_1e44w_gg_._position_left_1e44w_gg_,.___STitle_1e44w_gg_._position_right_1e44w_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___STitle_1e44w_gg_._position_left_1e44w_gg_.__verticalWritingMode_1e44w_gg_,.___STitle_1e44w_gg_._position_right_1e44w_gg_.__verticalWritingMode_1e44w_gg_{writing-mode:vertical-rl;transform:none}.___STick_1e44w_gg_._position_top_1e44w_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_1e44w_gg_._position_bottom_1e44w_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_1e44w_gg_._position_bottom_1e44w_gg_ tspan{dominant-baseline:hanging}.___STick_1e44w_gg_._position_right_1e44w_gg_{transform:translateX(16px);text-anchor:start;dominant-baseline:middle}.___STick_1e44w_gg_._position_left_1e44w_gg_ tspan,.___STick_1e44w_gg_._position_right_1e44w_gg_ tspan{dominant-baseline:middle}.___STick_1e44w_gg_._position_left_1e44w_gg_.__multiline_1e44w_gg_,.___STick_1e44w_gg_._position_left_1e44w_gg_.__multiline_1e44w_gg_ tspan,.___STick_1e44w_gg_._position_right_1e44w_gg_.__multiline_1e44w_gg_,.___STick_1e44w_gg_._position_right_1e44w_gg_.__multiline_1e44w_gg_ tspan{dominant-baseline:auto}.___STick_1e44w_gg_._position_left_1e44w_gg_{transform:translateX(-16px);text-anchor:end;dominant-baseline:middle}.___STick_1e44w_gg_._position_custom_0_1e44w_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_1e44w_gg_._position_custom_0_1e44w_gg_ tspan{dominant-baseline:hanging}.___STick_1e44w_gg_._position_custom_1_1e44w_gg_{transform:translateX(-16px);text-anchor:end;dominant-baseline:middle}.___STick_1e44w_gg_._position_custom_1_1e44w_gg_ tspan{dominant-baseline:middle}",
+    ".___SAxis_yb2p1_gg_{stroke:var(--intergalactic-chart-grid-x-axis, #c4c7cf)}.___SAxis_yb2p1_gg_.__hide_yb2p1_gg_{display:none}.___STick_yb2p1_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-chart-grid-text-label, #6c6e79)}.___STick_yb2p1_gg_.__primaryText_yb2p1_gg_{fill:var(--intergalactic-text-primary, #191b23)}.___STick_yb2p1_gg_.__hide_yb2p1_gg_{display:none}.___SGrid_yb2p1_gg_{fill:transparent;stroke:var(--intergalactic-border-secondary, #e0e1e9)}.___STitle_yb2p1_gg_{font-size:var(--intergalactic-fs-100, 12px);fill:var(--intergalactic-text-hint, #6c6e79);transform-origin:var(--transform-origin_yb2p1)}.___STitle_yb2p1_gg_._position_top_yb2p1_gg_{text-anchor:middle}.___STitle_yb2p1_gg_._position_bottom_yb2p1_gg_{text-anchor:middle;dominant-baseline:hanging}.___STitle_yb2p1_gg_._position_left_yb2p1_gg_,.___STitle_yb2p1_gg_._position_right_yb2p1_gg_{transform:rotate(-90deg);text-anchor:middle;dominant-baseline:middle}.___STitle_yb2p1_gg_._position_left_yb2p1_gg_.__verticalWritingMode_yb2p1_gg_,.___STitle_yb2p1_gg_._position_right_yb2p1_gg_.__verticalWritingMode_yb2p1_gg_{writing-mode:vertical-rl;transform:none}.___STick_yb2p1_gg_._position_top_yb2p1_gg_{transform:translateY(-12px);text-anchor:middle}.___STick_yb2p1_gg_._position_bottom_yb2p1_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_yb2p1_gg_._position_bottom_yb2p1_gg_ tspan{dominant-baseline:hanging}.___STick_yb2p1_gg_._position_right_yb2p1_gg_{transform:translateX(16px);text-anchor:start;dominant-baseline:middle}.___STick_yb2p1_gg_._position_left_yb2p1_gg_ tspan,.___STick_yb2p1_gg_._position_right_yb2p1_gg_ tspan{dominant-baseline:middle}.___STick_yb2p1_gg_._position_left_yb2p1_gg_.__multiline_yb2p1_gg_,.___STick_yb2p1_gg_._position_left_yb2p1_gg_.__multiline_yb2p1_gg_ tspan,.___STick_yb2p1_gg_._position_right_yb2p1_gg_.__multiline_yb2p1_gg_,.___STick_yb2p1_gg_._position_right_yb2p1_gg_.__multiline_yb2p1_gg_ tspan{dominant-baseline:auto}.___STick_yb2p1_gg_._position_left_yb2p1_gg_{transform:translateX(-16px);text-anchor:end;dominant-baseline:middle}.___STick_yb2p1_gg_._position_custom_0_yb2p1_gg_{transform:translateY(12px);text-anchor:middle;dominant-baseline:hanging}.___STick_yb2p1_gg_._position_custom_0_yb2p1_gg_ tspan{dominant-baseline:hanging}.___STick_yb2p1_gg_._position_custom_1_yb2p1_gg_{transform:translateX(-16px);text-anchor:end;dominant-baseline:middle}.___STick_yb2p1_gg_._position_custom_1_yb2p1_gg_ tspan{dominant-baseline:middle}",
     /*__inner_css_end__*/
-    "1e44w_gg_"
+    "yb2p1_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SAxis": "___SAxis_1e44w_gg_",
-    "_hide": "__hide_1e44w_gg_",
-    "__STick": "___STick_1e44w_gg_",
-    "__SGrid": "___SGrid_1e44w_gg_",
-    "__STitle": "___STitle_1e44w_gg_",
-    "--transform-origin": "--transform-origin_1e44w",
-    "_position_top": "_position_top_1e44w_gg_",
-    "_position_bottom": "_position_bottom_1e44w_gg_",
-    "_position_right": "_position_right_1e44w_gg_",
-    "_position_left": "_position_left_1e44w_gg_",
-    "_verticalWritingMode": "__verticalWritingMode_1e44w_gg_",
-    "_multiline": "__multiline_1e44w_gg_",
-    "_position_custom_0": "_position_custom_0_1e44w_gg_",
-    "_position_custom_1": "_position_custom_1_1e44w_gg_"
+    "__SAxis": "___SAxis_yb2p1_gg_",
+    "_hide": "__hide_yb2p1_gg_",
+    "__STick": "___STick_yb2p1_gg_",
+    "_primaryText": "__primaryText_yb2p1_gg_",
+    "__SGrid": "___SGrid_yb2p1_gg_",
+    "__STitle": "___STitle_yb2p1_gg_",
+    "--transform-origin": "--transform-origin_yb2p1",
+    "_position_top": "_position_top_yb2p1_gg_",
+    "_position_bottom": "_position_bottom_yb2p1_gg_",
+    "_position_right": "_position_right_yb2p1_gg_",
+    "_position_left": "_position_left_yb2p1_gg_",
+    "_verticalWritingMode": "__verticalWritingMode_yb2p1_gg_",
+    "_multiline": "__multiline_yb2p1_gg_",
+    "_position_custom_0": "_position_custom_0_yb2p1_gg_",
+    "_position_custom_1": "_position_custom_1_yb2p1_gg_"
   })
 );
-var CUSTOM_0 = Symbol("custom_0");
-var CUSTOM_1 = Symbol("custom_1");
-var MAP_INDEX_SCALE_SYMBOL = {
+const CUSTOM_0 = Symbol("custom_0");
+const CUSTOM_1 = Symbol("custom_1");
+const MAP_INDEX_SCALE_SYMBOL = {
   0: CUSTOM_0,
   1: CUSTOM_1
 };
-var MAP_POSITION_REVERT = {
+const MAP_POSITION_REVERT = {
   top: "bottom",
   right: "left",
   bottom: "top",
   left: "right"
 };
-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();
-    var yRange = yScale.range();
+const MAP_POSITION_AXIS = {
+  top: ([xScale, yScale]) => {
+    const xRange = xScale.range();
+    const yRange = yScale.range();
     return {
       x1: xRange[0],
       y1: yRange[1],
@@ -60,10 +54,9 @@ var MAP_POSITION_AXIS = _defineProperty(_defineProperty({
       y2: yRange[1]
     };
   },
-  bottom: function bottom(_ref7) {
-    var _ref8 = _slicedToArray(_ref7, 2), xScale = _ref8[0], yScale = _ref8[1];
-    var xRange = xScale.range();
-    var yRange = yScale.range();
+  bottom: ([xScale, yScale]) => {
+    const xRange = xScale.range();
+    const yRange = yScale.range();
     return {
       x1: xRange[0],
       y1: yRange[0],
@@ -71,10 +64,9 @@ var MAP_POSITION_AXIS = _defineProperty(_defineProperty({
       y2: yRange[0]
     };
   },
-  right: function right(_ref9) {
-    var _ref0 = _slicedToArray(_ref9, 2), xScale = _ref0[0], yScale = _ref0[1];
-    var xRange = xScale.range();
-    var yRange = yScale.range();
+  right: ([xScale, yScale]) => {
+    const xRange = xScale.range();
+    const yRange = yScale.range();
     return {
       x1: xRange[1],
       y1: yRange[0],
@@ -82,87 +74,81 @@ var MAP_POSITION_AXIS = _defineProperty(_defineProperty({
       y2: yRange[1]
     };
   },
-  left: function left(_ref1) {
-    var _ref10 = _slicedToArray(_ref1, 2), xScale = _ref10[0], yScale = _ref10[1];
-    var xRange = xScale.range();
-    var yRange = yScale.range();
+  left: ([xScale, yScale]) => {
+    const xRange = xScale.range();
+    const yRange = yScale.range();
     return {
       x1: xRange[0],
       y1: yRange[0],
       x2: xRange[0],
       y2: yRange[1]
     };
+  },
+  [CUSTOM_0]: ([xScale, yScale], pos) => {
+    const xRange = xScale.range();
+    return {
+      x1: xRange[0],
+      y1: scaleOfBandwidth(yScale, pos),
+      x2: xRange[1],
+      y2: scaleOfBandwidth(yScale, pos)
+    };
+  },
+  [CUSTOM_1]: ([xScale, yScale], pos) => {
+    const yRange = yScale.range();
+    return {
+      x1: scaleOfBandwidth(xScale, pos),
+      y1: yRange[0],
+      x2: scaleOfBandwidth(xScale, pos),
+      y2: yRange[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],
-    y1: scaleOfBandwidth(yScale, pos),
-    x2: xRange[1],
-    y2: scaleOfBandwidth(yScale, pos)
-  };
-}), 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),
-    y1: yRange[0],
-    x2: scaleOfBandwidth(xScale, pos),
-    y2: yRange[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();
+};
+const MAP_POSITION_TICK = {
+  top: ([xScale, yScale], value) => {
+    const yRange = yScale.range();
     return {
       x: scaleOfBandwidth(xScale, value),
       y: yRange[1]
     };
   },
-  bottom: function bottom2(_ref17, value) {
-    var _ref18 = _slicedToArray(_ref17, 2), xScale = _ref18[0], yScale = _ref18[1];
-    var yRange = yScale.range();
+  bottom: ([xScale, yScale], value) => {
+    const yRange = yScale.range();
     return {
       x: scaleOfBandwidth(xScale, value),
       y: yRange[0]
     };
   },
-  right: function right2(_ref19, value) {
-    var _ref20 = _slicedToArray(_ref19, 2), xScale = _ref20[0], yScale = _ref20[1];
-    var xRange = xScale.range();
+  right: ([xScale, yScale], value) => {
+    const xRange = xScale.range();
     return {
       x: xRange[1],
       y: scaleOfBandwidth(yScale, value)
     };
   },
-  left: function left2(_ref21, value) {
-    var _ref22 = _slicedToArray(_ref21, 2), xScale = _ref22[0], yScale = _ref22[1];
-    var xRange = xScale.range();
+  left: ([xScale, yScale], value) => {
+    const xRange = xScale.range();
     return {
       x: xRange[0],
       y: scaleOfBandwidth(yScale, value)
     };
+  },
+  [CUSTOM_0]: ([xScale, yScale], value, pos) => {
+    return {
+      x: scaleOfBandwidth(xScale, value),
+      y: scaleOfBandwidth(yScale, pos)
+    };
+  },
+  [CUSTOM_1]: ([xScale, yScale], value, pos) => {
+    return {
+      x: scaleOfBandwidth(xScale, pos),
+      y: scaleOfBandwidth(yScale, value)
+    };
   }
-}, 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)
-  };
-}), 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)
-  };
-});
-var MAP_POSITION_GRID = {
-  0: function _(_ref27, value) {
-    var _ref28 = _slicedToArray(_ref27, 2), xScale = _ref28[0], yScale = _ref28[1];
-    var yRange = yScale.range();
-    var x = scaleOfBandwidth(xScale, value);
+};
+const MAP_POSITION_GRID = {
+  0: ([xScale, yScale], value) => {
+    const yRange = yScale.range();
+    const x = scaleOfBandwidth(xScale, value);
     return {
       x1: x,
       y1: yRange[0],
@@ -170,10 +156,9 @@ var MAP_POSITION_GRID = {
       y2: yRange[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);
+  1: ([xScale, yScale], value) => {
+    const xRange = xScale.range();
+    const y = scaleOfBandwidth(yScale, value);
     return {
       x1: xRange[0],
       y1: y,
@@ -182,37 +167,31 @@ var MAP_POSITION_GRID = {
     };
   }
 };
-var OFFSET_TITLE = 10;
-var MAP_POSITION_TITlE = {
-  top: function top3(_ref31) {
-    var _ref32 = _slicedToArray(_ref31, 1), xScale = _ref32[0];
-    var xRange = xScale.range();
+const OFFSET_TITLE = 10;
+const MAP_POSITION_TITlE = {
+  top: ([xScale]) => {
+    const xRange = xScale.range();
     return {
       x: (xRange[1] + xRange[0]) / 2,
       y: OFFSET_TITLE
     };
   },
-  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();
+  bottom: ([xScale], [, height]) => {
+    const xRange = xScale.range();
     return {
       x: (xRange[1] + xRange[0]) / 2,
       y: height - OFFSET_TITLE
     };
   },
-  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();
+  right: ([, yScale], [width]) => {
+    const yRange = yScale.range();
     return {
       x: width - OFFSET_TITLE,
       y: (yRange[0] + yRange[1]) / 2
     };
   },
-  left: function left3(_ref41) {
-    var _ref42 = _slicedToArray(_ref41, 2), yScale = _ref42[1];
-    var yRange = yScale.range();
+  left: ([, yScale]) => {
+    const yRange = yScale.range();
     return {
       x: OFFSET_TITLE,
       y: (yRange[0] + yRange[1]) / 2
@@ -227,15 +206,13 @@ function renderValue(value) {
 }
 function splitTextByWidth(root, text, maxWidth) {
   if (!text || !maxWidth || maxWidth <= 0) return [];
-  var words = text.split(/\s+/).filter(function(word) {
-    return word.length > 0;
-  });
+  const words = text.split(/\s+/).filter((word) => 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);
+  const lines = [];
+  let currentLine = words[0];
+  for (let i = 1; i < words.length; i++) {
+    const testLine = `${currentLine} ${words[i]}`.trim();
+    const testWidth = measureTextWidth(root, testLine);
     if (testWidth <= maxWidth) {
       currentLine = testLine;
     } else {
@@ -254,99 +231,111 @@ function splitTextByWidth(root, text, maxWidth) {
   }
   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");
+function measureTextWidth(rootRef, text, fontSize = 12) {
+  const 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();
+  const width = textEl.getComputedTextLength();
   rootRef.removeChild(textEl);
   return width;
 }
-var AxisRoot = /* @__PURE__ */ (function(_Component) {
-  function AxisRoot2() {
-    _classCallCheck(this, AxisRoot2);
-    return _callSuper(this, AxisRoot2, arguments);
+class AxisRoot extends Component {
+  get ticks() {
+    var _a, _b;
+    const {
+      ticks,
+      indexScale,
+      scale
+    } = this.asProps;
+    const scl = scale[indexScale];
+    return ticks || ((_a = scl.ticks) == null ? void 0 : _a.call(scl)) || ((_b = scl.domain) == null ? void 0 : _b.call(scl)) || [];
   }
-  _inherits(AxisRoot2, _Component);
-  return _createClass(AxisRoot2, [{
-    key: "ticks",
-    get: function get() {
-      var _scl$ticks, _scl$domain;
-      var _this$asProps = this.asProps, ticks = _this$asProps.ticks, indexScale = _this$asProps.indexScale, scale = _this$asProps.scale;
-      var scl = scale[indexScale];
-      return ticks || ((_scl$ticks = scl.ticks) === null || _scl$ticks === void 0 ? void 0 : _scl$ticks.call(scl)) || ((_scl$domain = scl.domain) === null || _scl$domain === void 0 ? void 0 : _scl$domain.call(scl)) || [];
-    }
-  }, {
-    key: "getTitleProps",
-    value: function getTitleProps() {
-      var _this$asProps2 = this.asProps, position = _this$asProps2.position, locale = _this$asProps2.locale;
-      return {
-        position: MAP_POSITION_REVERT[position],
-        verticalWritingMode: ["zh", "ja"].includes(locale)
-      };
-    }
-  }, {
-    key: "getTicksProps",
-    value: function getTicksProps() {
-      var _this$asProps3 = this.asProps, position = _this$asProps3.position, indexScale = _this$asProps3.indexScale;
-      return {
-        ticks: this.ticks,
-        indexScale,
-        position
-      };
-    }
-  }, {
-    key: "getGridProps",
-    value: function getGridProps() {
-      var indexScale = this.asProps.indexScale;
-      return {
-        ticks: this.ticks,
-        indexScale
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref, _MAP_POSITION_AXIS$po;
-      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(styles), /* @__PURE__ */ React.createElement(SAxis, _ref.cn("SAxis", _objectSpread({
-        "render": "line",
-        "hide": hide
-      }, pos(scale, position))));
-    }
-  }]);
-})(Component);
+  getTitleProps() {
+    const {
+      position,
+      locale
+    } = this.asProps;
+    return {
+      position: MAP_POSITION_REVERT[position],
+      verticalWritingMode: ["zh", "ja"].includes(locale)
+    };
+  }
+  getTicksProps() {
+    const {
+      position,
+      indexScale
+    } = this.asProps;
+    return {
+      ticks: this.ticks,
+      indexScale,
+      position
+    };
+  }
+  getGridProps() {
+    const {
+      indexScale
+    } = this.asProps;
+    return {
+      ticks: this.ticks,
+      indexScale
+    };
+  }
+  render() {
+    var _ref;
+    const SAxis = this.Element;
+    const {
+      styles,
+      position,
+      scale,
+      hide,
+      indexScale
+    } = this.asProps;
+    const pos = MAP_POSITION_AXIS[position] ?? MAP_POSITION_AXIS[MAP_INDEX_SCALE_SYMBOL[indexScale]];
+    return _ref = sstyled(styles), /* @__PURE__ */ React.createElement(SAxis, _ref.cn("SAxis", {
+      "render": "line",
+      "hide": hide,
+      ...pos(scale, position)
+    }));
+  }
+}
 _defineProperty(AxisRoot, "displayName", "Axis");
 _defineProperty(AxisRoot, "style", style);
 _defineProperty(AxisRoot, "defaultProps", {});
 function Ticks(props) {
-  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() {
+  var _a, _b;
+  const {
+    Element: STick,
+    styles,
+    scale,
+    ticks,
+    position,
+    hide,
+    indexScale,
+    dataHintsHandler,
+    children,
+    childrenPosition = "inside",
+    rootRef,
+    multiline
+  } = props;
+  const [rootRefElement, setRootRefElement] = useState(null);
+  useEffect(() => {
     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);
+  const tickBandwidth = (_b = (_a = scale[indexScale]) == null ? void 0 : _a.bandwidth) == null ? void 0 : _b.call(_a);
+  const ticksWithLines = ticks.map((tick) => ({
+    tick,
+    lines: typeof tick === "string" && multiline && rootRefElement ? splitTextByWidth(rootRefElement, tick, tickBandwidth) : []
+  }));
+  const pos = MAP_POSITION_TICK[position] ?? MAP_POSITION_TICK[MAP_INDEX_SCALE_SYMBOL[indexScale]];
+  const positionClass = MAP_POSITION_TICK[position] ? position : `custom_${indexScale}`;
   if (typeof children === "function") {
-    var labelGetter = function labelGetter2(value) {
-      var _result$value;
-      var result = children({
+    const labelGetter = (value) => {
+      const result = children({
         value
       });
-      return (_result$value = result.value) !== null && _result$value !== void 0 ? _result$value : result.children;
+      return result.value ?? result.children;
     };
     if (position === "left" || position === "right") {
       dataHintsHandler.addKeyLabelGetter("vertical", labelGetter);
@@ -354,11 +343,13 @@ function Ticks(props) {
       dataHintsHandler.addKeyLabelGetter("horizontal", labelGetter);
     }
   }
-  return ticksWithLines.map(function(_ref43, i) {
+  return ticksWithLines.map(({
+    tick: value,
+    lines
+  }, i) => {
     var _ref2;
-    var value = _ref43.tick, lines = _ref43.lines;
-    var displayValue = typeof children === "function" ? void 0 : renderValue(value);
-    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STick, _ref2.cn("STick", _objectSpread({
+    const displayValue = typeof children === "function" ? void 0 : renderValue(value);
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(STick, _ref2.cn("STick", {
       "aria-hidden": true,
       "key": i,
       "render": "text",
@@ -368,18 +359,24 @@ function Ticks(props) {
       "index": i,
       "position": positionClass,
       "hide": hide,
-      "multiline": multiline
-    }, 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);
+      "multiline": multiline,
+      "primaryText": props.primaryText,
+      ...pos(scale, value, position)
+    }), lines.length > 1 ? lines.map((line, lineIndex) => /* @__PURE__ */ React.createElement("tspan", _extends({
+      key: line
+    }, pos(scale, value, position), {
+      dy: lineIndex * 15
+    }), line)) : displayValue);
   });
 }
 function Grid(props) {
-  var SGrid = props.Element, styles = props.styles, scale = props.scale, ticks = props.ticks, indexScale = props.indexScale;
+  const {
+    Element: SGrid,
+    styles,
+    scale,
+    ticks,
+    indexScale
+  } = props;
   if (ticks.length >= 2) {
     if (indexScale === 1) {
       props.dataHintsHandler.setupGrid("vertical", Math.abs(ticks[1] - ticks[0]));
@@ -387,26 +384,38 @@ function Grid(props) {
       props.dataHintsHandler.setupGrid("horizontal", Math.abs(ticks[1] - ticks[0]));
     }
   }
-  return ticks.map(function(value, i) {
+  return ticks.map((value, i) => {
     var _ref3;
-    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SGrid, _ref3.cn("SGrid", _objectSpread({
+    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SGrid, _ref3.cn("SGrid", {
       "key": i,
-      "render": "line"
-    }, MAP_POSITION_GRID[indexScale](scale, value))));
+      "render": "line",
+      ...MAP_POSITION_GRID[indexScale](scale, value)
+    }));
   });
 }
 function Title(props) {
   var _ref4;
-  var STitle = props.Element, styles = props.styles, scale = props.scale, position = props.position, size = props.size, children = props.children, verticalWritingMode = props.verticalWritingMode;
-  var _MAP_POSITION_TITlE$p = MAP_POSITION_TITlE[position](scale, size), x = _MAP_POSITION_TITlE$p.x, y = _MAP_POSITION_TITlE$p.y;
+  const {
+    Element: STitle,
+    styles,
+    scale,
+    position,
+    size,
+    children,
+    verticalWritingMode
+  } = props;
+  const {
+    x,
+    y
+  } = MAP_POSITION_TITlE[position](scale, size);
   if (position === "left" || position === "right") {
     props.dataHintsHandler.setTitle("vertical", children);
   } else if (position === "top" || position === "bottom") {
     props.dataHintsHandler.setTitle("horizontal", children);
   }
-  var sstyles = sstyled(styles);
-  var sTitleStyles = sstyles.cn("STitle", {
-    "transform-origin": "".concat(x.toFixed(2), "px ").concat(y.toFixed(2), "px")
+  const sstyles = sstyled(styles);
+  const sTitleStyles = sstyles.cn("STitle", {
+    "transform-origin": `${x.toFixed(2)}px ${y.toFixed(2)}px`
   });
   return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(STitle, _ref4.cn("STitle", {
     "aria-hidden": true,
@@ -420,37 +429,27 @@ function Title(props) {
     "y": y
   }));
 }
-var XAxisRoot = /* @__PURE__ */ (function(_AxisRoot2) {
-  function XAxisRoot2() {
-    _classCallCheck(this, XAxisRoot2);
-    return _callSuper(this, XAxisRoot2, arguments);
-  }
-  _inherits(XAxisRoot2, _AxisRoot2);
-  return _createClass(XAxisRoot2);
-})(AxisRoot);
-_defineProperty(XAxisRoot, "defaultProps", _objectSpread(_objectSpread({}, AxisRoot.defaultProps), {}, {
+class XAxisRoot extends AxisRoot {
+}
+_defineProperty(XAxisRoot, "defaultProps", {
+  ...AxisRoot.defaultProps,
   indexScale: 0,
   position: "bottom"
-}));
-var XAxis = createElement(XAxisRoot, {
+});
+const XAxis = createElement(XAxisRoot, {
   Ticks,
   Grid,
   Title
 });
-var YAxisRoot = /* @__PURE__ */ (function(_AxisRoot3) {
-  function YAxisRoot2() {
-    _classCallCheck(this, YAxisRoot2);
-    return _callSuper(this, YAxisRoot2, arguments);
-  }
-  _inherits(YAxisRoot2, _AxisRoot3);
-  return _createClass(YAxisRoot2);
-})(AxisRoot);
-_defineProperty(YAxisRoot, "defaultProps", _objectSpread(_objectSpread({}, AxisRoot.defaultProps), {}, {
+class YAxisRoot extends AxisRoot {
+}
+_defineProperty(YAxisRoot, "defaultProps", {
+  ...AxisRoot.defaultProps,
   indexScale: 1,
   position: "left",
   hide: true
-}));
-var YAxis = createElement(YAxisRoot, {
+});
+const YAxis = createElement(YAxisRoot, {
   Ticks,
   Grid,
   Title