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

package/lib/es6/Axis.js

@@ -1,54 +1,46 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { sstyled as _sstyled } from "@semcore/core";
 import { Component, sstyled } from '@semcore/core';
 import React, { useState, useEffect } from 'react';
 import createElement from './createElement';
 /*!__reshadow-styles__:"./style/axis.shadow.css"*/
-var 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}", /*__inner_css_end__*/"1e44w_gg_"),
+const style = (/*__reshadow_css_start__*/_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_"
 });
 import { scaleOfBandwidth } from './utils';
-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],
@@ -56,12 +48,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],
@@ -69,12 +58,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,107 +68,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 top(_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 bottom(_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 right(_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 left(_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],
@@ -190,12 +150,9 @@ var MAP_POSITION_GRID = {
       y2: yRange[1]
     };
   },
-  1: function _(_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,
@@ -204,43 +161,31 @@ var MAP_POSITION_GRID = {
     };
   }
 };
-var OFFSET_TITLE = 10;
-var MAP_POSITION_TITlE = {
-  top: function top(_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 bottom(_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 right(_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 left(_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
@@ -255,15 +200,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 {
@@ -282,126 +225,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() {
-    _classCallCheck(this, AxisRoot);
-    return _callSuper(this, AxisRoot, arguments);
+class AxisRoot extends Component {
+  get ticks() {
+    const {
+      ticks,
+      indexScale,
+      scale
+    } = this.asProps;
+    const scl = scale[indexScale];
+    return ticks || scl.ticks?.() || scl.domain?.() || [];
   }
-  _inherits(AxisRoot, _Component);
-  return _createClass(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 = 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 () {
+  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: 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);
@@ -409,12 +335,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 = sstyled(styles), /*#__PURE__*/React.createElement(STick, _ref2.cn("STick", _objectSpread({
+    const displayValue = typeof children === 'function' ? undefined : renderValue(value);
+    return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(STick, _ref2.cn("STick", {
       "aria-hidden": true,
       "key": i,
       "render": 'text',
@@ -424,22 +351,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]));
@@ -447,34 +376,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,
@@ -488,40 +421,28 @@ function Title(props) {
     "y": y
   }));
 }
-var XAxisRoot = /*#__PURE__*/function (_AxisRoot2) {
-  function XAxisRoot() {
-    _classCallCheck(this, XAxisRoot);
-    return _callSuper(this, XAxisRoot, arguments);
-  }
-  _inherits(XAxisRoot, _AxisRoot2);
-  return _createClass(XAxisRoot);
-}(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, {
-  Ticks: Ticks,
-  Grid: Grid,
-  Title: Title
 });
-var YAxisRoot = /*#__PURE__*/function (_AxisRoot3) {
-  function YAxisRoot() {
-    _classCallCheck(this, YAxisRoot);
-    return _callSuper(this, YAxisRoot, arguments);
-  }
-  _inherits(YAxisRoot, _AxisRoot3);
-  return _createClass(YAxisRoot);
-}(AxisRoot);
-_defineProperty(YAxisRoot, "defaultProps", _objectSpread(_objectSpread({}, AxisRoot.defaultProps), {}, {
+const XAxis = createElement(XAxisRoot, {
+  Ticks,
+  Grid,
+  Title
+});
+class YAxisRoot extends AxisRoot {}
+_defineProperty(YAxisRoot, "defaultProps", {
+  ...AxisRoot.defaultProps,
   indexScale: 1,
   position: 'left',
   hide: true
-}));
-var YAxis = createElement(YAxisRoot, {
-  Ticks: Ticks,
-  Grid: Grid,
-  Title: Title
+});
+const YAxis = createElement(YAxisRoot, {
+  Ticks,
+  Grid,
+  Title
 });
 export { XAxis, YAxis };
 //# sourceMappingURL=Axis.js.map