@easyv/charts 1.4.22 → 1.4.24

package/.babelrc

@@ -1,8 +1,8 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
-  "plugins": [
-    "@babel/plugin-proposal-export-default-from",
-    "@babel/plugin-transform-runtime",
-    "@babel/plugin-proposal-class-properties"
-  ]
-}
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": [
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

package/.husky/commit-msg

@@ -1,4 +1,4 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
 yarn commitlint --edit $1

package/CHANGELOG.md

@@ -1,18 +1,18 @@
-# Changelog
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
-### [1.1.1](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/compare/v1.1.0...v1.1.1) (2022-04-13)
-
-## 1.1.0 (2022-04-02)
-
-
-### Features
-
-* 轴标签，label支持样式传入 ([749a595](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/749a595a96b95917dafdc1766f63efec73398d64))
-* axis轴标签支持点击触发回调 ([1f636e1](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1f636e1840f4f3b48c2b9765ce6087759d82fb17))
-
-
-### Bug Fixes
-
-* **band组件:** 修复foreignObject在Safari浏览器下的位置诡异偏离问题 ([1a65d54](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1a65d54abbcf6c9e84cc85cc8b6a9d28b24fa4c4))
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [1.1.1](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/compare/v1.1.0...v1.1.1) (2022-04-13)
+
+## 1.1.0 (2022-04-02)
+
+
+### Features
+
+* 轴标签，label支持样式传入 ([749a595](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/749a595a96b95917dafdc1766f63efec73398d64))
+* axis轴标签支持点击触发回调 ([1f636e1](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1f636e1840f4f3b48c2b9765ce6087759d82fb17))
+
+
+### Bug Fixes
+
+* **band组件:** 修复foreignObject在Safari浏览器下的位置诡异偏离问题 ([1a65d54](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1a65d54abbcf6c9e84cc85cc8b6a9d28b24fa4c4))

package/commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = {extends: ['@commitlint/config-conventional']}

package/lib/components/AnimateData.js

@@ -1,36 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _hooks = require("../hooks");
-
 var _excluded = ["dataAnimation"],
-    _excluded2 = ["data", "config"];
-
+  _excluded2 = ["data", "config"];
+/**
+ * 用来做图表数据改变（增长）动画（HOC）
+ */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var _default = function _default(Component) {
   return /*#__PURE__*/(0, _react.memo)(function (_ref) {
     var data = _ref.data,
-        _ref$config = _ref.config,
-        dataAnimation = _ref$config.dataAnimation,
-        config = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
-        rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
+      _ref$config = _ref.config,
+      dataAnimation = _ref$config.dataAnimation,
+      config = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
     return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, rest, {
       config: config,
       originData: data,
@@ -38,5 +31,4 @@ var _default = function _default(Component) {
     }));
   });
 };
-
 exports["default"] = _default;

package/lib/components/Axis.js

@@ -1,40 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _utils = require("../utils");
-
 var _context = require("../context");
-
 var _element = require("../element");
-
 var _TextOverflow = _interopRequireDefault(require("./TextOverflow"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             * x, y, z轴
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             */
 var defaultEvent = function defaultEvent() {};
-
 var defaultAppearance = {
   angle: 0,
   count: 6,
@@ -48,21 +34,17 @@ var defaultAlign = {
 };
 var defaultOrientation = "bottom";
 var defaultTickSize = 6;
-
 var defaultFormatter = function defaultFormatter(d, _ref) {
   var suffix = _ref.suffix;
   return d + suffix;
 };
-
 var getAxesPath = function getAxesPath(orientation, _ref2) {
   var width = _ref2.width,
-      height = _ref2.height;
-
+    height = _ref2.height;
   switch (orientation) {
     case "top":
     case "bottom":
       return "M-0.5, 0H" + width;
-
     case "left":
     case "right":
       return "M0, -0.5V" + (height + 0.5);
@@ -78,8 +60,6 @@ var getAxesPath = function getAxesPath(orientation, _ref2) {
  *    directionY
  * }
  */
-
-
 var getLayout = function getLayout(orientation, rotate) {
   switch (orientation) {
     case "top":
@@ -88,21 +68,18 @@ var getLayout = function getLayout(orientation, rotate) {
         directionX: 1,
         directionY: -1
       };
-
     case "bottom":
       return {
         transform: "translate(-50%,0) rotate(".concat(rotate, "deg)"),
         directionX: 1,
         directionY: 1
       };
-
     case "left":
       return {
         transform: "translate(-100%,-50%) rotate(".concat(rotate, "deg)"),
         directionX: -1,
         directionY: 1
       };
-
     case "right":
       return {
         transform: "translate(0,-50%) rotate(".concat(rotate, "deg)"),
@@ -111,23 +88,21 @@ var getLayout = function getLayout(orientation, rotate) {
       };
   }
 };
-
 var AxisLine = function AxisLine(_ref3) {
   var _ref3$orientation = _ref3.orientation,
-      orientation = _ref3$orientation === void 0 ? defaultOrientation : _ref3$orientation,
-      _ref3$config = _ref3.config,
-      show = _ref3$config.show,
-      color = _ref3$config.color,
-      lineWidth = _ref3$config.lineWidth,
-      _ref3$isClipAxis = _ref3.isClipAxis,
-      isClipAxis = _ref3$isClipAxis === void 0 ? false : _ref3$isClipAxis,
-      _ref3$clipAxisRange = _ref3.clipAxisRange,
-      clipAxisRange = _ref3$clipAxisRange === void 0 ? [] : _ref3$clipAxisRange;
+    orientation = _ref3$orientation === void 0 ? defaultOrientation : _ref3$orientation,
+    _ref3$config = _ref3.config,
+    show = _ref3$config.show,
+    color = _ref3$config.color,
+    lineWidth = _ref3$config.lineWidth,
+    _ref3$isClipAxis = _ref3.isClipAxis,
+    isClipAxis = _ref3$isClipAxis === void 0 ? false : _ref3$isClipAxis,
+    _ref3$clipAxisRange = _ref3.clipAxisRange,
+    clipAxisRange = _ref3$clipAxisRange === void 0 ? [] : _ref3$clipAxisRange;
   if (!show) return null;
   var context = (0, _react.useContext)(_context.chartContext);
   var width = context.width,
-      height = context.height;
-
+    height = context.height;
   if (isClipAxis) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, clipAxisRange.map(function (range, index) {
       return /*#__PURE__*/_react["default"].createElement("path", {
@@ -145,24 +120,23 @@ var AxisLine = function AxisLine(_ref3) {
     });
   }
 };
-
 var Unit = function Unit(_ref4) {
   var _ref4$config = _ref4.config,
-      show = _ref4$config.show,
-      text = _ref4$config.text,
-      _ref4$config$font = _ref4$config.font,
-      bold = _ref4$config$font.bold,
-      color = _ref4$config$font.color,
-      fontFamily = _ref4$config$font.fontFamily,
-      fontSize = _ref4$config$font.fontSize,
-      italic = _ref4$config$font.italic,
-      letterSpacing = _ref4$config$font.letterSpacing,
-      _ref4$config$translat = _ref4$config.translate,
-      translateX = _ref4$config$translat.x,
-      translateY = _ref4$config$translat.y,
-      _ref4$config$align = _ref4$config.align;
-  _ref4$config$align = _ref4$config$align === void 0 ? defaultAlign : _ref4$config$align;
-  var textAnchor = _ref4$config$align.textAnchor;
+    show = _ref4$config.show,
+    text = _ref4$config.text,
+    _ref4$config$font = _ref4$config.font,
+    bold = _ref4$config$font.bold,
+    color = _ref4$config$font.color,
+    fontFamily = _ref4$config$font.fontFamily,
+    fontSize = _ref4$config$font.fontSize,
+    italic = _ref4$config$font.italic,
+    letterSpacing = _ref4$config$font.letterSpacing,
+    _ref4$config$translat = _ref4$config.translate,
+    translateX = _ref4$config$translat.x,
+    translateY = _ref4$config$translat.y,
+    _ref4$config$align = _ref4$config.align,
+    _ref4$config$align2 = _ref4$config$align === void 0 ? defaultAlign : _ref4$config$align,
+    textAnchor = _ref4$config$align2.textAnchor;
   if (!show) return null;
   return /*#__PURE__*/_react["default"].createElement("text", {
     className: "__easyv-unit",
@@ -176,48 +150,42 @@ var Unit = function Unit(_ref4) {
     textAnchor: textAnchor
   }, text);
 };
-
 var Label = function Label(_ref5) {
   var className = _ref5.className,
-      _ref5$orientation = _ref5.orientation,
-      orientation = _ref5$orientation === void 0 ? defaultOrientation : _ref5$orientation,
-      label = _ref5.label,
-      coordinate = _ref5.coordinate,
-      _ref5$formatter = _ref5.formatter,
-      formatter = _ref5$formatter === void 0 ? defaultFormatter : _ref5$formatter,
-      tickSize = _ref5.tickSize,
-      _ref5$rotate = _ref5.rotate,
-      rotate = _ref5$rotate === void 0 ? 0 : _ref5$rotate,
-      config = _ref5.config,
-      _ref5$onClick = _ref5.onClick,
-      onClick = _ref5$onClick === void 0 ? defaultEvent : _ref5$onClick,
-      _ref5$config = _ref5.config,
-      show = _ref5$config.show,
-      style = _ref5$config.style,
-      _ref5$config$translat = _ref5$config.translate,
-      translateX = _ref5$config$translat.x,
-      translateY = _ref5$config$translat.y,
-      font = _ref5$config.font,
-      _ref5$config$appearan = _ref5$config.appearance;
-  _ref5$config$appearan = _ref5$config$appearan === void 0 ? defaultAppearance : _ref5$config$appearan;
-  var width = _ref5$config$appearan.width,
-      speed = _ref5$config$appearan.speed,
-      textOverflow = _ref5$config$appearan.textOverflow;
+    _ref5$orientation = _ref5.orientation,
+    orientation = _ref5$orientation === void 0 ? defaultOrientation : _ref5$orientation,
+    label = _ref5.label,
+    coordinate = _ref5.coordinate,
+    _ref5$formatter = _ref5.formatter,
+    formatter = _ref5$formatter === void 0 ? defaultFormatter : _ref5$formatter,
+    tickSize = _ref5.tickSize,
+    _ref5$rotate = _ref5.rotate,
+    rotate = _ref5$rotate === void 0 ? 0 : _ref5$rotate,
+    config = _ref5.config,
+    _ref5$onClick = _ref5.onClick,
+    onClick = _ref5$onClick === void 0 ? defaultEvent : _ref5$onClick,
+    _ref5$config = _ref5.config,
+    show = _ref5$config.show,
+    style = _ref5$config.style,
+    _ref5$config$translat = _ref5$config.translate,
+    translateX = _ref5$config$translat.x,
+    translateY = _ref5$config$translat.y,
+    font = _ref5$config.font,
+    _ref5$config$appearan = _ref5$config.appearance,
+    _ref5$config$appearan2 = _ref5$config$appearan === void 0 ? defaultAppearance : _ref5$config$appearan,
+    width = _ref5$config$appearan2.width,
+    speed = _ref5$config$appearan2.speed,
+    textOverflow = _ref5$config$appearan2.textOverflow;
   if (!show) return null;
-
   var _label = formatter(label, config);
-
   var _getLayout = getLayout(orientation, rotate),
-      transform = _getLayout.transform,
-      directionX = _getLayout.directionX,
-      directionY = _getLayout.directionY;
-
+    transform = _getLayout.transform,
+    directionX = _getLayout.directionX,
+    directionY = _getLayout.directionY;
   var isVertical = orientation == "left" || orientation == "right";
   var x = (isVertical ? tickSize * directionX : coordinate) + translateX * directionX;
   var y = (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
-
   var _style = style && ((0, _typeof2["default"])(style) == "object" ? style : style(_label));
-
   return /*#__PURE__*/_react["default"].createElement("foreignObject", {
     width: "1",
     height: "1",
@@ -245,47 +213,47 @@ var Label = function Label(_ref5) {
     }
   })));
 };
-
-var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
   var orientation = _ref6.orientation,
-      scaler = _ref6.scaler,
-      _ref6$tickSize = _ref6.tickSize,
-      tickSize = _ref6$tickSize === void 0 ? defaultTickSize : _ref6$tickSize,
-      ticks = _ref6.ticks,
-      formatter = _ref6.formatter,
-      rotate = _ref6.rotate,
-      triggerClick = _ref6.triggerClick,
-      _ref6$config = _ref6.config,
-      on = _ref6$config.on,
-      label = _ref6$config.label,
-      axisLine = _ref6$config.axisLine,
-      tickLine = _ref6$config.tickLine,
-      gridLine = _ref6$config.gridLine,
-      unit = _ref6$config.unit,
-      config = _ref6.config,
-      positions = _ref6.positions,
-      xLineRange = _ref6.xLineRange,
-      _ref6$isClipAxis = _ref6.isClipAxis,
-      isClipAxis = _ref6$isClipAxis === void 0 ? false : _ref6$isClipAxis,
-      yLineRange = _ref6.yLineRange,
-      clipAxisRange = _ref6.clipAxisRange;
+    scaler = _ref6.scaler,
+    _ref6$tickSize = _ref6.tickSize,
+    tickSize = _ref6$tickSize === void 0 ? defaultTickSize : _ref6$tickSize,
+    ticks = _ref6.ticks,
+    formatter = _ref6.formatter,
+    rotate = _ref6.rotate,
+    triggerClick = _ref6.triggerClick,
+    _ref6$config = _ref6.config,
+    on = _ref6$config.on,
+    label = _ref6$config.label,
+    axisLine = _ref6$config.axisLine,
+    tickLine = _ref6$config.tickLine,
+    gridLine = _ref6$config.gridLine,
+    unit = _ref6$config.unit,
+    config = _ref6.config,
+    positions = _ref6.positions,
+    xLineRange = _ref6.xLineRange,
+    range = _ref6.range,
+    axisType = _ref6.axisType,
+    _ref6$isClipAxis = _ref6.isClipAxis,
+    isClipAxis = _ref6$isClipAxis === void 0 ? false : _ref6$isClipAxis,
+    yLineRange = _ref6.yLineRange,
+    clipAxisRange = _ref6.clipAxisRange,
+    isControlChart = _ref6.isControlChart,
+    controlConfig = _ref6.controlConfig,
+    controlEnd = _ref6.controlEnd,
+    rawTicks = _ref6.rawTicks;
   if (!(on && ticks.length > 0)) return null;
-
   var _useContext = (0, _react.useContext)(_context.chartContext),
-      width = _useContext.width,
-      height = _useContext.height;
-
+    width = _useContext.width,
+    height = _useContext.height;
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height : 0;
-
-  function drawYAxisTickLine() {
+  function drawAxisTickLine() {
     var draw = function draw(ticks, scaler) {
       return ticks.map(function (tick, index) {
         var coordinate = scaler(tick);
         if (isNaN(coordinate)) return null;
-
         var _tickSize = tickLine.tickSize || tickSize;
-
         var gridCoord = (0, _utils.getGridCoord)({
           orientation: orientation,
           coordinate: coordinate,
@@ -304,7 +272,6 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
         })));
       });
     };
-
     if (isClipAxis) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ticks.map(function (ticks, index) {
         return draw(ticks, scaler[index]);
@@ -313,23 +280,20 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
     }
   }
-
   function drawLabel() {
     var draw = function draw(ticks, scaler) {
       return ticks.map(function (tick, index) {
         var coordinate = scaler(tick);
         if (isNaN(coordinate)) return null;
-
         var _tickSize = tickLine.tickSize || tickSize;
-
         var gridCoord = (0, _utils.getGridCoord)({
           orientation: orientation,
           coordinate: coordinate,
-          end: orientation == 'left' || orientation == 'right' ? width : height
+          end: orientation == "left" || orientation == "right" ? width : height
         });
         var x1 = gridCoord.x1;
         var y1 = gridCoord.y1;
-        return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement("g", {
+        return (!(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) || isControlChart) && /*#__PURE__*/_react["default"].createElement("g", {
           key: index
         }, label && /*#__PURE__*/_react["default"].createElement(Label, {
           className: "__easyv-label",
@@ -347,32 +311,30 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
         }, gridCoord)));
       });
     };
-
     if (isClipAxis) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ticks.map(function (ticks, index) {
         return draw(ticks, scaler[index]);
       }));
+    } else if (isControlChart && orientation == "bottom") {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(rawTicks, scaler));
     } else {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
     }
   }
-
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, axisLine && tickLine && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, axisLine && ( // 依据positions来区分x轴y轴，有position为x轴
-  positions && positions.length ? positions.map(function (_ref7, index) {
+  return /*#__PURE__*/_react["default"].createElement("g", null, axisLine && tickLine && /*#__PURE__*/_react["default"].createElement("g", null, axisLine && (positions && positions.length ? positions.map(function (_ref7, index) {
     var x = _ref7.x,
-        y = _ref7.y;
+      y = _ref7.y;
     return /*#__PURE__*/_react["default"].createElement("g", {
       key: index,
       transform: "translate(" + x + ", " + y + ")"
     }, /*#__PURE__*/_react["default"].createElement(AxisLine, {
       orientation: orientation,
-      config: axisLine
+      config: axisLine,
+      range: range
     }), tickLine && ticks.map(function (tick, index) {
       var coordinate = scaler(tick);
       if (isNaN(coordinate)) return null;
-
       var _tickSize = tickLine.tickSize || tickSize;
-
       var gridCoord = (0, _utils.getGridCoord)({
         orientation: orientation,
         coordinate: coordinate,
@@ -397,11 +359,17 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
     config: axisLine,
     isClipAxis: isClipAxis,
     clipAxisRange: clipAxisRange
-  }), tickLine && drawYAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("g", {
-    transform: 'translate(' + x + ', ' + y + ')'
+  }), tickLine && drawAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("svg", {
+    width: width,
+    style: {
+      overflow: axisType !== "x" && isControlChart ? "visible" : "hidden"
+    }
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(" + x + ", " + y + ")"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    ref: ref
   }, label && gridLine && drawLabel(), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
     config: unit
-  })));
-});
-
+  })))));
+}));
 exports["default"] = _default;

package/lib/components/Background.js

@@ -1,43 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _utils = require("../utils");
-
-/**
- * 轴类图背景
+/**
+ * 轴类图背景
  */
 var _default = function _default(_ref) {
   var _ref$axis = _ref.axis,
-      ticks = _ref$axis.ticks,
-      scaler = _ref$axis.scaler,
-      step = _ref$axis.step,
-      direction = _ref$axis.direction,
-      bandLength = _ref.bandLength,
-      _ref$config = _ref.config,
-      background = _ref$config.background,
-      paddingInner = _ref$config.seriesIntervalWidth,
-      paddingOuter = _ref$config.paddingInner,
-      length = _ref.length;
+    ticks = _ref$axis.ticks,
+    scaler = _ref$axis.scaler,
+    step = _ref$axis.step,
+    direction = _ref$axis.direction,
+    bandLength = _ref.bandLength,
+    _ref$config = _ref.config,
+    background = _ref$config.background,
+    paddingInner = _ref$config.seriesIntervalWidth,
+    paddingOuter = _ref$config.paddingInner,
+    length = _ref.length;
   var isVertical = direction === 'vertical';
-
   var _getSeriesInfo = (0, _utils.getSeriesInfo)({
-    step: step,
-    bandLength: bandLength,
-    paddingInner: paddingInner,
-    paddingOuter: paddingOuter
-  }),
-      bandwidth = _getSeriesInfo.width;
-
+      step: step,
+      bandLength: bandLength,
+      paddingInner: paddingInner,
+      paddingOuter: paddingOuter
+    }),
+    bandwidth = _getSeriesInfo.width;
   var size = isVertical ? {
     width: length,
     height: bandwidth
@@ -56,5 +49,4 @@ var _default = function _default(_ref) {
     }));
   });
 };
-
 exports["default"] = _default;