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

package/lib/cjs/Axis.js

@@ -1,61 +1,53 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.YAxis = exports.XAxis = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _core = require("@semcore/core");
 var _react = _interopRequireWildcard(require("react"));
 var _createElement = _interopRequireDefault(require("./createElement"));
 var _utils = require("./utils");
 /*!__reshadow-styles__:"./style/axis.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.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}", /*__inner_css_end__*/"1e44w_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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__*/"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 = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
-  top: function top(_ref5) {
-    var _ref6 = (0, _slicedToArray2["default"])(_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],
@@ -63,12 +55,9 @@ var MAP_POSITION_AXIS = (0, _defineProperty2["default"])((0, _defineProperty2["d
       y2: yRange[1]
     };
   },
-  bottom: function bottom(_ref7) {
-    var _ref8 = (0, _slicedToArray2["default"])(_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],
@@ -76,12 +65,9 @@ var MAP_POSITION_AXIS = (0, _defineProperty2["default"])((0, _defineProperty2["d
       y2: yRange[0]
     };
   },
-  right: function right(_ref9) {
-    var _ref0 = (0, _slicedToArray2["default"])(_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],
@@ -89,107 +75,81 @@ var MAP_POSITION_AXIS = (0, _defineProperty2["default"])((0, _defineProperty2["d
       y2: yRange[1]
     };
   },
-  left: function left(_ref1) {
-    var _ref10 = (0, _slicedToArray2["default"])(_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: (0, _utils.scaleOfBandwidth)(yScale, pos),
+      x2: xRange[1],
+      y2: (0, _utils.scaleOfBandwidth)(yScale, pos)
+    };
+  },
+  [CUSTOM_1]: ([xScale, yScale], pos) => {
+    const yRange = yScale.range();
+    return {
+      x1: (0, _utils.scaleOfBandwidth)(xScale, pos),
+      y1: yRange[0],
+      x2: (0, _utils.scaleOfBandwidth)(xScale, pos),
+      y2: yRange[1]
+    };
   }
-}, CUSTOM_0, function (_ref11, pos) {
-  var _ref12 = (0, _slicedToArray2["default"])(_ref11, 2),
-    xScale = _ref12[0],
-    yScale = _ref12[1];
-  var xRange = xScale.range();
-  return {
-    x1: xRange[0],
-    y1: (0, _utils.scaleOfBandwidth)(yScale, pos),
-    x2: xRange[1],
-    y2: (0, _utils.scaleOfBandwidth)(yScale, pos)
-  };
-}), CUSTOM_1, function (_ref13, pos) {
-  var _ref14 = (0, _slicedToArray2["default"])(_ref13, 2),
-    xScale = _ref14[0],
-    yScale = _ref14[1];
-  var yRange = yScale.range();
-  return {
-    x1: (0, _utils.scaleOfBandwidth)(xScale, pos),
-    y1: yRange[0],
-    x2: (0, _utils.scaleOfBandwidth)(xScale, pos),
-    y2: yRange[1]
-  };
-});
-var MAP_POSITION_TICK = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
-  top: function top(_ref15, value) {
-    var _ref16 = (0, _slicedToArray2["default"])(_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: (0, _utils.scaleOfBandwidth)(xScale, value),
       y: yRange[1]
     };
   },
-  bottom: function bottom(_ref17, value) {
-    var _ref18 = (0, _slicedToArray2["default"])(_ref17, 2),
-      xScale = _ref18[0],
-      yScale = _ref18[1];
-    var yRange = yScale.range();
+  bottom: ([xScale, yScale], value) => {
+    const yRange = yScale.range();
     return {
       x: (0, _utils.scaleOfBandwidth)(xScale, value),
       y: yRange[0]
     };
   },
-  right: function right(_ref19, value) {
-    var _ref20 = (0, _slicedToArray2["default"])(_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: (0, _utils.scaleOfBandwidth)(yScale, value)
     };
   },
-  left: function left(_ref21, value) {
-    var _ref22 = (0, _slicedToArray2["default"])(_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: (0, _utils.scaleOfBandwidth)(yScale, value)
     };
+  },
+  [CUSTOM_0]: ([xScale, yScale], value, pos) => {
+    return {
+      x: (0, _utils.scaleOfBandwidth)(xScale, value),
+      y: (0, _utils.scaleOfBandwidth)(yScale, pos)
+    };
+  },
+  [CUSTOM_1]: ([xScale, yScale], value, pos) => {
+    return {
+      x: (0, _utils.scaleOfBandwidth)(xScale, pos),
+      y: (0, _utils.scaleOfBandwidth)(yScale, value)
+    };
   }
-}, CUSTOM_0, function (_ref23, value, pos) {
-  var _ref24 = (0, _slicedToArray2["default"])(_ref23, 2),
-    xScale = _ref24[0],
-    yScale = _ref24[1];
-  return {
-    x: (0, _utils.scaleOfBandwidth)(xScale, value),
-    y: (0, _utils.scaleOfBandwidth)(yScale, pos)
-  };
-}), CUSTOM_1, function (_ref25, value, pos) {
-  var _ref26 = (0, _slicedToArray2["default"])(_ref25, 2),
-    xScale = _ref26[0],
-    yScale = _ref26[1];
-  return {
-    x: (0, _utils.scaleOfBandwidth)(xScale, pos),
-    y: (0, _utils.scaleOfBandwidth)(yScale, value)
-  };
-});
-var MAP_POSITION_GRID = {
-  0: function _(_ref27, value) {
-    var _ref28 = (0, _slicedToArray2["default"])(_ref27, 2),
-      xScale = _ref28[0],
-      yScale = _ref28[1];
-    var yRange = yScale.range();
-    var x = (0, _utils.scaleOfBandwidth)(xScale, value);
+};
+const MAP_POSITION_GRID = {
+  0: ([xScale, yScale], value) => {
+    const yRange = yScale.range();
+    const x = (0, _utils.scaleOfBandwidth)(xScale, value);
     return {
       x1: x,
       y1: yRange[0],
@@ -197,12 +157,9 @@ var MAP_POSITION_GRID = {
       y2: yRange[1]
     };
   },
-  1: function _(_ref29, value) {
-    var _ref30 = (0, _slicedToArray2["default"])(_ref29, 2),
-      xScale = _ref30[0],
-      yScale = _ref30[1];
-    var xRange = xScale.range();
-    var y = (0, _utils.scaleOfBandwidth)(yScale, value);
+  1: ([xScale, yScale], value) => {
+    const xRange = xScale.range();
+    const y = (0, _utils.scaleOfBandwidth)(yScale, value);
     return {
       x1: xRange[0],
       y1: y,
@@ -211,43 +168,31 @@ var MAP_POSITION_GRID = {
     };
   }
 };
-var OFFSET_TITLE = 10;
-var MAP_POSITION_TITlE = {
-  top: function top(_ref31) {
-    var _ref32 = (0, _slicedToArray2["default"])(_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 bottom(_ref33, _ref34) {
-    var _ref35 = (0, _slicedToArray2["default"])(_ref33, 1),
-      xScale = _ref35[0];
-    var _ref36 = (0, _slicedToArray2["default"])(_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 right(_ref37, _ref38) {
-    var _ref39 = (0, _slicedToArray2["default"])(_ref37, 2),
-      yScale = _ref39[1];
-    var _ref40 = (0, _slicedToArray2["default"])(_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 left(_ref41) {
-    var _ref42 = (0, _slicedToArray2["default"])(_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
@@ -262,15 +207,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 {
@@ -289,126 +232,109 @@ function splitTextByWidth(root, text, maxWidth) {
   }
   return lines;
 }
-function measureTextWidth(rootRef, text) {
-  var fontSize = arguments.length > 2 && arguments[2] !== undefined ? 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 AxisRoot() {
-    (0, _classCallCheck2["default"])(this, AxisRoot);
-    return (0, _callSuper2["default"])(this, AxisRoot, arguments);
+class AxisRoot extends _core.Component {
+  get ticks() {
+    const {
+      ticks,
+      indexScale,
+      scale
+    } = this.asProps;
+    const scl = scale[indexScale];
+    return ticks || scl.ticks?.() || scl.domain?.() || [];
   }
-  (0, _inherits2["default"])(AxisRoot, _Component);
-  return (0, _createClass2["default"])(AxisRoot, [{
-    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: indexScale,
-        position: position
-      };
-    }
-  }, {
-    key: "getGridProps",
-    value: function getGridProps() {
-      var indexScale = this.asProps.indexScale;
-      return {
-        ticks: this.ticks,
-        indexScale: 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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAxis, _ref.cn("SAxis", (0, _objectSpread2["default"])({
-        "render": 'line',
-        "hide": hide
-      }, pos(scale, position))));
-    }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(AxisRoot, "displayName", 'Axis');
-(0, _defineProperty2["default"])(AxisRoot, "style", style);
-(0, _defineProperty2["default"])(AxisRoot, "defaultProps", {});
+  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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SAxis, _ref.cn("SAxis", {
+      "render": 'line',
+      "hide": hide,
+      ...pos(scale, position)
+    }));
+  }
+}
+(0, _defineProperty2.default)(AxisRoot, "displayName", 'Axis');
+(0, _defineProperty2.default)(AxisRoot, "style", style);
+(0, _defineProperty2.default)(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 = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    rootRefElement = _useState2[0],
-    setRootRefElement = _useState2[1];
-  (0, _react.useEffect)(function () {
+  const {
+    Element: STick,
+    styles,
+    scale,
+    ticks,
+    position,
+    hide,
+    indexScale,
+    dataHintsHandler,
+    children,
+    childrenPosition = 'inside',
+    rootRef,
+    multiline
+  } = props;
+  const [rootRefElement, setRootRefElement] = (0, _react.useState)(null);
+  (0, _react.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: 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 = scale[indexScale]?.bandwidth?.();
+  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 labelGetter(value) {
-      var _result$value;
-      var result = children({
-        value: value
+    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);
@@ -416,12 +342,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' ? undefined : renderValue(value);
-    return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STick, _ref2.cn("STick", (0, _objectSpread2["default"])({
+    const displayValue = typeof children === 'function' ? undefined : renderValue(value);
+    return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(STick, _ref2.cn("STick", {
       "aria-hidden": true,
       "key": i,
       "render": 'text',
@@ -431,22 +358,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["default"].createElement("tspan", (0, _extends2["default"])({
-        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.default.createElement("tspan", (0, _extends2.default)({
+      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]));
@@ -454,36 +383,40 @@ 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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SGrid, _ref3.cn("SGrid", (0, _objectSpread2["default"])({
+    return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.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 = (0, _core.sstyled)(styles);
-  var sTitleStyles = sstyles.cn('STitle', {
-    'transform-origin': "".concat(x.toFixed(2), "px ").concat(y.toFixed(2), "px")
+  const sstyles = (0, _core.sstyled)(styles);
+  const sTitleStyles = sstyles.cn('STitle', {
+    'transform-origin': `${x.toFixed(2)}px ${y.toFixed(2)}px`
   });
-  return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STitle, _ref4.cn("STitle", {
+  return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(STitle, _ref4.cn("STitle", {
     "aria-hidden": true,
     "render": 'text',
     "childrenPosition": 'inside',
@@ -495,39 +428,27 @@ function Title(props) {
     "y": y
   }));
 }
-var XAxisRoot = /*#__PURE__*/function (_AxisRoot2) {
-  function XAxisRoot() {
-    (0, _classCallCheck2["default"])(this, XAxisRoot);
-    return (0, _callSuper2["default"])(this, XAxisRoot, arguments);
-  }
-  (0, _inherits2["default"])(XAxisRoot, _AxisRoot2);
-  return (0, _createClass2["default"])(XAxisRoot);
-}(AxisRoot);
-(0, _defineProperty2["default"])(XAxisRoot, "defaultProps", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, AxisRoot.defaultProps), {}, {
+class XAxisRoot extends AxisRoot {}
+(0, _defineProperty2.default)(XAxisRoot, "defaultProps", {
+  ...AxisRoot.defaultProps,
   indexScale: 0,
   position: 'bottom'
-}));
-var XAxis = exports.XAxis = (0, _createElement["default"])(XAxisRoot, {
-  Ticks: Ticks,
-  Grid: Grid,
-  Title: Title
 });
-var YAxisRoot = /*#__PURE__*/function (_AxisRoot3) {
-  function YAxisRoot() {
-    (0, _classCallCheck2["default"])(this, YAxisRoot);
-    return (0, _callSuper2["default"])(this, YAxisRoot, arguments);
-  }
-  (0, _inherits2["default"])(YAxisRoot, _AxisRoot3);
-  return (0, _createClass2["default"])(YAxisRoot);
-}(AxisRoot);
-(0, _defineProperty2["default"])(YAxisRoot, "defaultProps", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, AxisRoot.defaultProps), {}, {
+const XAxis = exports.XAxis = (0, _createElement.default)(XAxisRoot, {
+  Ticks,
+  Grid,
+  Title
+});
+class YAxisRoot extends AxisRoot {}
+(0, _defineProperty2.default)(YAxisRoot, "defaultProps", {
+  ...AxisRoot.defaultProps,
   indexScale: 1,
   position: 'left',
   hide: true
-}));
-var YAxis = exports.YAxis = (0, _createElement["default"])(YAxisRoot, {
-  Ticks: Ticks,
-  Grid: Grid,
-  Title: Title
+});
+const YAxis = exports.YAxis = (0, _createElement.default)(YAxisRoot, {
+  Ticks,
+  Grid,
+  Title
 });
 //# sourceMappingURL=Axis.js.map