@rlvt/axes - npm Package Compare versions

Comparing version 0.62.0 to 0.62.1

dist/nivo-axes.cjs.js

@@ -9,52 +9,12 @@ 'use strict';
 var React__default = _interopDefault(React);
-var reactSpring = require('react-spring');
+var PropTypes = _interopDefault(require('prop-types'));
+var reactMotion = require('react-motion');
 var core = require('@nivo/core');
+var isNumber = _interopDefault(require('lodash/isNumber'));
 var d3Time = require('d3-time');
 var d3TimeFormat = require('d3-time-format');
 var d3Format = require('d3-format');
-var PropTypes = _interopDefault(require('prop-types'));
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      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 = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var centerScale = function centerScale(scale) {
@@ -90,5 +50,2 @@ var bandwidth = scale.bandwidth();
 var timeIntervalRegexp = new RegExp("^every\\s*(\\d+)?\\s*(".concat(timeTypes.join('|'), ")s?(, no first day)?$"), 'i');
-var isInteger = function isInteger(value) {
-  return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
-};
 var getScaleTicks = function getScaleTicks(scale, spec) {
@@ -102,3 +59,3 @@ if (Array.isArray(spec)) {
     }
-    if (isInteger(spec)) {
+    if (isNumber(spec)) {
       return scale.ticks(spec);
@@ -188,6 +145,6 @@ }
   var ticks = values.map(function (value) {
-    return _objectSpread2(_objectSpread2(_objectSpread2({
+    return _objectSpread({
       key: value,
       value: value
-    }, translate(value)), line), text);
+    }, translate(value), line, text);
   });
@@ -217,3 +174,3 @@ return {
   var lineValues = Array.isArray(_values) ? _values : undefined;
-  var lineCount = isInteger(_values) ? _values : undefined;
+  var lineCount = isNumber(_values) ? _values : undefined;
   var values = lineValues || getScaleTicks(scale, lineCount);
@@ -256,9 +213,13 @@ var position = scale.bandwidth ? centerScale(scale) : scale;
   legendPosition: PropTypes.oneOf(['start', 'middle', 'end']),
-  legendOffset: PropTypes.number,
-  ariaHidden: PropTypes.bool
+  legendOffset: PropTypes.number
 };
 var axisPropType = PropTypes.shape(axisPropTypes);
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var AxisTick = function AxisTick(_ref) {
   var _value = _ref.value,
+      x = _ref.x,
+      y = _ref.y,
+      opacity = _ref.opacity,
+      rotate = _ref.rotate,
       format = _ref.format,
@@ -268,5 +229,6 @@ lineX = _ref.lineX,
       _onClick = _ref.onClick,
+      textX = _ref.textX,
+      textY = _ref.textY,
       textBaseline = _ref.textBaseline,
-      textAnchor = _ref.textAnchor,
-      animatedProps = _ref.animatedProps;
+      textAnchor = _ref.textAnchor;
   var theme = core.useTheme();
@@ -278,3 +240,3 @@ var value = _value;
   var gStyle = {
-    opacity: animatedProps.opacity
+    opacity: opacity
   };
@@ -284,4 +246,4 @@ if (_onClick) {
   }
-  return React__default.createElement(reactSpring.animated.g, Object.assign({
-    transform: animatedProps.transform
+  return React__default.createElement("g", _extends({
+    transform: "translate(".concat(x, ",").concat(y, ")")
   }, _onClick ? {
@@ -299,9 +261,24 @@ onClick: function onClick(e) {
     style: theme.axis.ticks.line
-  }), React__default.createElement(reactSpring.animated.text, {
+  }), React__default.createElement("text", {
     dominantBaseline: textBaseline,
     textAnchor: textAnchor,
-    transform: animatedProps.textTransform,
+    transform: "translate(".concat(textX, ",").concat(textY, ") rotate(").concat(rotate, ")"),
     style: theme.axis.ticks.text
   }, value));
 };
+AxisTick.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
+  format: PropTypes.func,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  lineX: PropTypes.number.isRequired,
+  lineY: PropTypes.number.isRequired,
+  textX: PropTypes.number.isRequired,
+  textY: PropTypes.number.isRequired,
+  textBaseline: PropTypes.string.isRequired,
+  textAnchor: PropTypes.string.isRequired,
+  opacity: PropTypes.number.isRequired,
+  rotate: PropTypes.number.isRequired,
+  onClick: PropTypes.func
+};
 AxisTick.defaultProps = {
@@ -313,24 +290,51 @@ opacity: 1,
 
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } return target; }
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var willEnter = function willEnter() {
+  return {
+    rotate: 0,
+    opacity: 0,
+    x: 0,
+    y: 0
+  };
+};
+var willLeave = function willLeave(springConfig) {
+  return function (_ref) {
+    var _ref$style = _ref.style,
+        x = _ref$style.x,
+        y = _ref$style.y,
+        rotate = _ref$style.rotate;
+    return {
+      rotate: rotate,
+      opacity: reactMotion.spring(0, springConfig),
+      x: reactMotion.spring(x.val, springConfig),
+      y: reactMotion.spring(y.val, springConfig)
+    };
+  };
+};
 var defaultTickRenderer = function defaultTickRenderer(props) {
   return React__default.createElement(AxisTick$1, props);
 };
-var Axis = function Axis(_ref) {
-  var axis = _ref.axis,
-      scale = _ref.scale,
-      x = _ref.x,
-      y = _ref.y,
-      length = _ref.length,
-      ticksPosition = _ref.ticksPosition,
-      tickValues = _ref.tickValues,
-      tickSize = _ref.tickSize,
-      tickPadding = _ref.tickPadding,
-      tickRotation = _ref.tickRotation,
-      format = _ref.format,
-      renderTick = _ref.renderTick,
-      legend = _ref.legend,
-      legendPosition = _ref.legendPosition,
-      legendOffset = _ref.legendOffset,
-      onClick = _ref.onClick,
-      ariaHidden = _ref.ariaHidden;
+var Axis = function Axis(_ref2) {
+  var axis = _ref2.axis,
+      scale = _ref2.scale,
+      x = _ref2.x,
+      y = _ref2.y,
+      length = _ref2.length,
+      ticksPosition = _ref2.ticksPosition,
+      tickValues = _ref2.tickValues,
+      tickSize = _ref2.tickSize,
+      tickPadding = _ref2.tickPadding,
+      tickRotation = _ref2.tickRotation,
+      format = _ref2.format,
+      renderTick = _ref2.renderTick,
+      legend = _ref2.legend,
+      legendPosition = _ref2.legendPosition,
+      legendOffset = _ref2.legendOffset,
+      onClick = _ref2.onClick;
   var theme = core.useTheme();
+  var _useMotionConfig = core.useMotionConfig(),
+      animate = _useMotionConfig.animate,
+      springConfig = _useMotionConfig.springConfig;
   var formatValue = React.useMemo(function () {
@@ -384,3 +388,3 @@ return getFormatter(format, scale);
       textAnchor: textAnchor,
-      style: _objectSpread2({
+      style: _objectSpread$1({
         dominantBaseline: 'central'
@@ -390,76 +394,91 @@ }, theme.axis.legend.text)
   }
-  var _useMotionConfig = core.useMotionConfig(),
-      animate = _useMotionConfig.animate,
-      springConfig = _useMotionConfig.config;
-  var animatedProps = reactSpring.useSpring({
-    transform: "translate(".concat(x, ",").concat(y, ")"),
-    lineX2: axis === 'x' ? length : 0,
-    lineY2: axis === 'x' ? 0 : length,
-    config: springConfig,
-    immediate: !animate
+  if (animate !== true) {
+    return React__default.createElement("g", {
+      transform: "translate(".concat(x, ",").concat(y, ")")
+    }, ticks.map(function (tick, tickIndex) {
+      return React__default.createElement(renderTick, _objectSpread$1({
+        tickIndex: tickIndex,
+        format: formatValue,
+        rotate: tickRotation,
+        textBaseline: textBaseline,
+        textAnchor: textAlign
+      }, tick, onClick ? {
+        onClick: onClick
+      } : {}));
+    }), React__default.createElement("line", {
+      style: theme.axis.domain.line,
+      x1: 0,
+      x2: axis === 'x' ? length : 0,
+      y1: 0,
+      y2: axis === 'x' ? 0 : length
+    }), legendNode);
+  }
+  return React__default.createElement(reactMotion.Motion, {
+    style: {
+      x: reactMotion.spring(x, springConfig),
+      y: reactMotion.spring(y, springConfig)
+    }
+  }, function (xy) {
+    return React__default.createElement("g", {
+      transform: "translate(".concat(xy.x, ",").concat(xy.y, ")")
+    }, React__default.createElement(reactMotion.TransitionMotion, {
+      willEnter: willEnter,
+      willLeave: willLeave(springConfig),
+      styles: ticks.map(function (tick) {
+        return {
+          key: "".concat(tick.key),
+          data: tick,
+          style: {
+            opacity: reactMotion.spring(1, springConfig),
+            x: reactMotion.spring(tick.x, springConfig),
+            y: reactMotion.spring(tick.y, springConfig),
+            rotate: reactMotion.spring(tickRotation, springConfig)
+          }
+        };
+      })
+    }, function (interpolatedStyles) {
+      return React__default.createElement(React.Fragment, null, interpolatedStyles.map(function (_ref3, tickIndex) {
+        var style = _ref3.style,
+            tick = _ref3.data;
+        return React__default.createElement(renderTick, _objectSpread$1({
+          tickIndex: tickIndex,
+          format: formatValue,
+          textBaseline: textBaseline,
+          textAnchor: textAlign
+        }, tick, style, onClick ? {
+          onClick: onClick
+        } : {}));
+      }));
+    }), React__default.createElement(reactMotion.Motion, {
+      style: {
+        x2: reactMotion.spring(axis === 'x' ? length : 0, springConfig),
+        y2: reactMotion.spring(axis === 'x' ? 0 : length, springConfig)
+      }
+    }, function (values) {
+      return React__default.createElement("line", _extends$1({
+        style: theme.axis.domain.line,
+        x1: 0,
+        y1: 0
+      }, values));
+    }), legendNode);
   });
-  var transitions = reactSpring.useTransition(ticks, function (tick) {
-    return tick.key;
-  }, {
-    initial: function initial(tick) {
-      return {
-        opacity: 1,
-        transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"),
-        textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")")
-      };
-    },
-    from: function from(tick) {
-      return {
-        opacity: 0,
-        transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"),
-        textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")")
-      };
-    },
-    enter: function enter(tick) {
-      return {
-        opacity: 1,
-        transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"),
-        textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")")
-      };
-    },
-    update: function update(tick) {
-      return {
-        opacity: 1,
-        transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"),
-        textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")")
-      };
-    },
-    leave: {
-      opacity: 0
-    },
-    config: springConfig,
-    immediate: !animate
-  });
-  return React__default.createElement(reactSpring.animated.g, {
-    transform: animatedProps.transform,
-    "aria-hidden": ariaHidden
-  }, transitions.map(function (_ref2, tickIndex) {
-    var tick = _ref2.item,
-        transitionProps = _ref2.props,
-        key = _ref2.key;
-    return React__default.createElement(renderTick, _objectSpread2(_objectSpread2(_objectSpread2({
-      tickIndex: tickIndex,
-      format: formatValue,
-      rotate: tickRotation,
-      textBaseline: textBaseline,
-      textAnchor: textAlign,
-      animatedProps: transitionProps
-    }, tick), onClick ? {
-      onClick: onClick
-    } : {}), {}, {
-      key: key
-    }));
-  }), React__default.createElement(reactSpring.animated.line, {
-    style: theme.axis.domain.line,
-    x1: 0,
-    x2: animatedProps.lineX2,
-    y1: 0,
-    y2: animatedProps.lineY2
-  }), legendNode);
 };
+Axis.propTypes = {
+  axis: PropTypes.oneOf(['x', 'y']).isRequired,
+  scale: PropTypes.func.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  length: PropTypes.number.isRequired,
+  ticksPosition: PropTypes.oneOf(['before', 'after']).isRequired,
+  tickValues: axisPropTypes.tickValues,
+  tickSize: PropTypes.number.isRequired,
+  tickPadding: PropTypes.number.isRequired,
+  tickRotation: PropTypes.number.isRequired,
+  format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  renderTick: PropTypes.func.isRequired,
+  legend: PropTypes.node,
+  legendPosition: PropTypes.oneOf(['start', 'middle', 'end']).isRequired,
+  legendOffset: PropTypes.number.isRequired,
+  onClick: PropTypes.func
+};
 Axis.defaultProps = {
@@ -477,2 +496,3 @@ x: 0,
 
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var positions = ['top', 'right', 'bottom', 'left'];
@@ -499,3 +519,3 @@ var Axes = function Axes(_ref) {
     var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after';
-    return React__default.createElement(Axis$1, Object.assign({
+    return React__default.createElement(Axis$1, _extends$2({
       key: position
@@ -512,9 +532,23 @@ }, axis, {
 };
+Axes.propTypes = {
+  xScale: PropTypes.func,
+  yScale: PropTypes.func,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  top: axisPropType,
+  right: axisPropType,
+  bottom: axisPropType,
+  left: axisPropType
+};
 var Axes$1 = React.memo(Axes);
 
-var GridLine = function GridLine(_ref) {
-  var animatedProps = _ref.animatedProps;
-  var theme = core.useTheme();
-  return React__default.createElement(reactSpring.animated.line, Object.assign({}, animatedProps, theme.grid.line));
+var GridLine = function GridLine(props) {
+  return React__default.createElement("line", props);
 };
+GridLine.propTypes = {
+  x1: PropTypes.number.isRequired,
+  x2: PropTypes.number.isRequired,
+  y1: PropTypes.number.isRequired,
+  y2: PropTypes.number.isRequired
+};
 GridLine.defaultProps = {
@@ -528,62 +562,76 @@ x1: 0,
 
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var GridLines = function GridLines(_ref) {
-  var lines = _ref.lines;
+  var type = _ref.type,
+      lines = _ref.lines;
+  var theme = core.useTheme();
   var _useMotionConfig = core.useMotionConfig(),
       animate = _useMotionConfig.animate,
-      springConfig = _useMotionConfig.config;
-  var transitions = reactSpring.useTransition(lines, function (line) {
-    return line.key;
-  }, {
-    initial: function initial(line) {
+      springConfig = _useMotionConfig.springConfig;
+  var lineWillEnter = React.useMemo(function () {
+    return function (_ref2) {
+      var style = _ref2.style;
       return {
-        opacity: 1,
-        x1: line.x1,
-        x2: line.x2,
-        y1: line.y1,
-        y2: line.y2
-      };
-    },
-    from: function from(line) {
-      return {
         opacity: 0,
-        x1: line.x1,
-        x2: line.x2,
-        y1: line.y1,
-        y2: line.y2
+        x1: type === 'x' ? 0 : style.x1.val,
+        x2: type === 'x' ? 0 : style.x2.val,
+        y1: type === 'y' ? 0 : style.y1.val,
+        y2: type === 'y' ? 0 : style.y2.val
       };
-    },
-    enter: function enter(line) {
+    };
+  }, [type]);
+  var lineWillLeave = React.useMemo(function () {
+    return function (_ref3) {
+      var style = _ref3.style;
       return {
-        opacity: 1,
-        x1: line.x1,
-        x2: line.x2,
-        y1: line.y1,
-        y2: line.y2
+        opacity: reactMotion.spring(0, springConfig),
+        x1: reactMotion.spring(style.x1.val, springConfig),
+        x2: reactMotion.spring(style.x2.val, springConfig),
+        y1: reactMotion.spring(style.y1.val, springConfig),
+        y2: reactMotion.spring(style.y2.val, springConfig)
       };
-    },
-    update: function update(line) {
+    };
+  }, [springConfig]);
+  if (!animate) {
+    return React__default.createElement("g", null, lines.map(function (line) {
+      return React__default.createElement(GridLine$1, _extends$3({
+        key: line.key
+      }, line, theme.grid.line));
+    }));
+  }
+  return React__default.createElement(reactMotion.TransitionMotion, {
+    willEnter: lineWillEnter,
+    willLeave: lineWillLeave,
+    styles: lines.map(function (line) {
       return {
-        opacity: 1,
-        x1: line.x1,
-        x2: line.x2,
-        y1: line.y1,
-        y2: line.y2
+        key: line.key,
+        style: {
+          opacity: reactMotion.spring(1, springConfig),
+          x1: reactMotion.spring(line.x1 || 0, springConfig),
+          x2: reactMotion.spring(line.x2 || 0, springConfig),
+          y1: reactMotion.spring(line.y1 || 0, springConfig),
+          y2: reactMotion.spring(line.y2 || 0, springConfig)
+        }
       };
-    },
-    leave: {
-      opacity: 0
-    },
-    config: springConfig,
-    immediate: !animate
+    })
+  }, function (interpolatedStyles) {
+    return React__default.createElement("g", null, interpolatedStyles.map(function (interpolatedStyle) {
+      var key = interpolatedStyle.key,
+          style = interpolatedStyle.style;
+      return React__default.createElement(GridLine$1, _extends$3({
+        key: key
+      }, theme.grid.line, style));
+    }));
   });
-  return React__default.createElement("g", null, transitions.map(function (_ref2) {
-    var line = _ref2.item,
-        animatedProps = _ref2.props,
-        key = _ref2.key;
-    return React__default.createElement(GridLine$1, Object.assign({}, line, {
-      key: key,
-      animatedProps: animatedProps
-    }));
-  }));
 };
+GridLines.propTypes = {
+  type: PropTypes.oneOf(['x', 'y']).isRequired,
+  lines: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    x1: PropTypes.number,
+    x2: PropTypes.number,
+    y1: PropTypes.number,
+    y2: PropTypes.number
+  })).isRequired
+};
 var GridLines$1 = React.memo(GridLines);
@@ -623,2 +671,10 @@
 };
+Grid.propTypes = {
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  xScale: PropTypes.func,
+  yScale: PropTypes.func,
+  xValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]),
+  yValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))])
+};
 var Grid$1 = React.memo(Grid);
@@ -630,2 +686,4 @@
 
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
+function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) {
@@ -762,3 +820,3 @@ var axis = _ref.axis,
     var format = getFormatter(axis.format, scale);
-    renderAxisToCanvas(ctx, _objectSpread2(_objectSpread2({}, axis), {}, {
+    renderAxisToCanvas(ctx, _objectSpread$2({}, axis, {
       axis: isXAxis ? 'x' : 'y',
@@ -804,2 +862,1 @@ x: position === 'right' ? width : 0,
 exports.renderGridLinesToCanvas = renderGridLinesToCanvas;
-//# sourceMappingURL=nivo-axes.cjs.js.map

dist/nivo-axes.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-spring'), require('@nivo/core'), require('d3-time'), require('d3-time-format'), require('d3-format'), require('prop-types')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-spring', '@nivo/core', 'd3-time', 'd3-time-format', 'd3-format', 'prop-types'], factory) :
-  (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global['react-spring'], global.nivo, global.d3, global.d3, global.d3, global.PropTypes));
-}(this, (function (exports, React, reactSpring, core, d3Time, d3TimeFormat, d3Format, PropTypes) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('react-motion'), require('@nivo/core'), require('lodash/isNumber'), require('d3-time'), require('d3-time-format'), require('d3-format')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'react-motion', '@nivo/core', 'lodash/isNumber', 'd3-time', 'd3-time-format', 'd3-format'], factory) :
+    (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.PropTypes, global.ReactMotion, global.nivo, global['lodash/isNumber'], global.d3, global.d3, global.d3));
+}(this, (function (exports, React, PropTypes, reactMotion, core, isNumber, d3Time, d3TimeFormat, d3Format) { 'use strict';
 
-  var React__default = 'default' in React ? React['default'] : React;
-  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
+    var React__default = 'default' in React ? React['default'] : React;
+    PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
+    isNumber = isNumber && isNumber.hasOwnProperty('default') ? isNumber['default'] : isNumber;
 
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-    return obj;
-  }
-
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
-    return keys;
-  }
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
+    function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+    function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    var centerScale = function centerScale(scale) {
+      var bandwidth = scale.bandwidth();
+      if (bandwidth === 0) return scale;
+      var offset = bandwidth / 2;
+      if (scale.round()) {
+        offset = Math.round(offset);
       }
-    }
-    return target;
-  }
-
-  var centerScale = function centerScale(scale) {
-    var bandwidth = scale.bandwidth();
-    if (bandwidth === 0) return scale;
-    var offset = bandwidth / 2;
-    if (scale.round()) {
-      offset = Math.round(offset);
-    }
-    return function (d) {
-      return scale(d) + offset;
+      return function (d) {
+        return scale(d) + offset;
+      };
     };
-  };
-  var timeByType = {
-    millisecond: [d3Time.timeMillisecond, d3Time.utcMillisecond],
-    second: [d3Time.timeSecond, d3Time.utcSecond],
-    minute: [d3Time.timeMinute, d3Time.utcMinute],
-    hour: [d3Time.timeHour, d3Time.utcHour],
-    day: [d3Time.timeDay, d3Time.utcDay],
-    week: [d3Time.timeWeek, d3Time.utcWeek],
-    sunday: [d3Time.timeSunday, d3Time.utcSunday],
-    monday: [d3Time.timeMonday, d3Time.utcMonday],
-    tuesday: [d3Time.timeTuesday, d3Time.utcTuesday],
-    wednesday: [d3Time.timeWednesday, d3Time.utcWednesday],
-    thursday: [d3Time.timeThursday, d3Time.utcThursday],
-    friday: [d3Time.timeFriday, d3Time.utcFriday],
-    saturday: [d3Time.timeSaturday, d3Time.utcSaturday],
-    month: [d3Time.timeMonth, d3Time.utcMonth],
-    year: [d3Time.timeYear, d3Time.utcYear]
-  };
-  var timeTypes = Object.keys(timeByType);
-  var timeIntervalRegexp = new RegExp("^every\\s*(\\d+)?\\s*(".concat(timeTypes.join('|'), ")s?(, no first day)?$"), 'i');
-  var isInteger = function isInteger(value) {
-    return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
-  };
-  var getScaleTicks = function getScaleTicks(scale, spec) {
-    if (Array.isArray(spec)) {
-      return spec;
-    }
-    if (scale.ticks) {
-      if (spec === undefined) {
-        return scale.ticks();
+    var timeByType = {
+      millisecond: [d3Time.timeMillisecond, d3Time.utcMillisecond],
+      second: [d3Time.timeSecond, d3Time.utcSecond],
+      minute: [d3Time.timeMinute, d3Time.utcMinute],
+      hour: [d3Time.timeHour, d3Time.utcHour],
+      day: [d3Time.timeDay, d3Time.utcDay],
+      week: [d3Time.timeWeek, d3Time.utcWeek],
+      sunday: [d3Time.timeSunday, d3Time.utcSunday],
+      monday: [d3Time.timeMonday, d3Time.utcMonday],
+      tuesday: [d3Time.timeTuesday, d3Time.utcTuesday],
+      wednesday: [d3Time.timeWednesday, d3Time.utcWednesday],
+      thursday: [d3Time.timeThursday, d3Time.utcThursday],
+      friday: [d3Time.timeFriday, d3Time.utcFriday],
+      saturday: [d3Time.timeSaturday, d3Time.utcSaturday],
+      month: [d3Time.timeMonth, d3Time.utcMonth],
+      year: [d3Time.timeYear, d3Time.utcYear]
+    };
+    var timeTypes = Object.keys(timeByType);
+    var timeIntervalRegexp = new RegExp("^every\\s*(\\d+)?\\s*(".concat(timeTypes.join('|'), ")s?(, no first day)?$"), 'i');
+    var getScaleTicks = function getScaleTicks(scale, spec) {
+      if (Array.isArray(spec)) {
+        return spec;
       }
-      if (isInteger(spec)) {
-        return scale.ticks(spec);
-      }
-      if (typeof spec === 'string') {
-        var matches = spec.match(timeIntervalRegexp);
-        if (matches) {
-          var timeType = timeByType[matches[2]][scale.useUTC ? 1 : 0];
-          if (matches[1] === undefined) {
-            return scale.ticks(timeType);
+      if (scale.ticks) {
+        if (spec === undefined) {
+          return scale.ticks();
+        }
+        if (isNumber(spec)) {
+          return scale.ticks(spec);
+        }
+        if (typeof spec === 'string') {
+          var matches = spec.match(timeIntervalRegexp);
+          if (matches) {
+            var timeType = timeByType[matches[2]][scale.useUTC ? 1 : 0];
+            if (matches[1] === undefined) {
+              return scale.ticks(timeType);
+            }
+            if (matches[3] !== undefined) {
+              return scale.ticks(timeType.filter(function (d) {
+                return timeType.count(0, d) % Number(matches[1]) === 0;
+              }));
+            }
+            return scale.ticks(timeType.every(Number(matches[1])));
           }
-          if (matches[3] !== undefined) {
-            return scale.ticks(timeType.filter(function (d) {
-              return timeType.count(0, d) % Number(matches[1]) === 0;
-            }));
-          }
-          return scale.ticks(timeType.every(Number(matches[1])));
+          throw new Error("Invalid tickValues: ".concat(spec));
         }
-        throw new Error("Invalid tickValues: ".concat(spec));
       }
-    }
-    return scale.domain();
-  };
-  var computeCartesianTicks = function computeCartesianTicks(_ref) {
-    var axis = _ref.axis,
-        scale = _ref.scale,
-        ticksPosition = _ref.ticksPosition,
-        tickValues = _ref.tickValues,
-        tickSize = _ref.tickSize,
-        tickPadding = _ref.tickPadding,
-        tickRotation = _ref.tickRotation,
-        _ref$engine = _ref.engine,
-        engine = _ref$engine === void 0 ? 'svg' : _ref$engine;
-    var values = getScaleTicks(scale, tickValues);
-    var textProps = core.textPropsByEngine[engine];
-    var position = scale.bandwidth ? centerScale(scale) : scale;
-    var line = {
-      lineX: 0,
-      lineY: 0
+      return scale.domain();
     };
-    var text = {
-      textX: 0,
-      textY: 0
-    };
-    var translate;
-    var textAlign = textProps.align.center;
-    var textBaseline = textProps.baseline.center;
-    if (axis === 'x') {
-      translate = function translate(d) {
-        return {
-          x: position(d),
-          y: 0
+    var computeCartesianTicks = function computeCartesianTicks(_ref) {
+      var axis = _ref.axis,
+          scale = _ref.scale,
+          ticksPosition = _ref.ticksPosition,
+          tickValues = _ref.tickValues,
+          tickSize = _ref.tickSize,
+          tickPadding = _ref.tickPadding,
+          tickRotation = _ref.tickRotation,
+          _ref$engine = _ref.engine,
+          engine = _ref$engine === void 0 ? 'svg' : _ref$engine;
+      var values = getScaleTicks(scale, tickValues);
+      var textProps = core.textPropsByEngine[engine];
+      var position = scale.bandwidth ? centerScale(scale) : scale;
+      var line = {
+        lineX: 0,
+        lineY: 0
+      };
+      var text = {
+        textX: 0,
+        textY: 0
+      };
+      var translate;
+      var textAlign = textProps.align.center;
+      var textBaseline = textProps.baseline.center;
+      if (axis === 'x') {
+        translate = function translate(d) {
+          return {
+            x: position(d),
+            y: 0
+          };
         };
-      };
-      line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1);
-      text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
-      if (ticksPosition === 'after') {
-        textBaseline = textProps.baseline.top;
+        line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1);
+        text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
+        if (ticksPosition === 'after') {
+          textBaseline = textProps.baseline.top;
+        } else {
+          textBaseline = textProps.baseline.bottom;
+        }
+        if (tickRotation === 0) {
+          textAlign = textProps.align.center;
+        } else if (ticksPosition === 'after' && tickRotation < 0 || ticksPosition === 'before' && tickRotation > 0) {
+          textAlign = textProps.align.right;
+          textBaseline = textProps.baseline.center;
+        } else if (ticksPosition === 'after' && tickRotation > 0 || ticksPosition === 'before' && tickRotation < 0) {
+          textAlign = textProps.align.left;
+          textBaseline = textProps.baseline.center;
+        }
       } else {
-        textBaseline = textProps.baseline.bottom;
+        translate = function translate(d) {
+          return {
+            x: 0,
+            y: position(d)
+          };
+        };
+        line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1);
+        text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
+        if (ticksPosition === 'after') {
+          textAlign = textProps.align.left;
+        } else {
+          textAlign = textProps.align.right;
+        }
       }
-      if (tickRotation === 0) {
-        textAlign = textProps.align.center;
-      } else if (ticksPosition === 'after' && tickRotation < 0 || ticksPosition === 'before' && tickRotation > 0) {
-        textAlign = textProps.align.right;
-        textBaseline = textProps.baseline.center;
-      } else if (ticksPosition === 'after' && tickRotation > 0 || ticksPosition === 'before' && tickRotation < 0) {
-        textAlign = textProps.align.left;
-        textBaseline = textProps.baseline.center;
+      var ticks = values.map(function (value) {
+        return _objectSpread({
+          key: value,
+          value: value
+        }, translate(value), line, text);
+      });
+      return {
+        ticks: ticks,
+        textAlign: textAlign,
+        textBaseline: textBaseline
+      };
+    };
+    var getFormatter = function getFormatter(format, scale) {
+      if (!format || typeof format === 'function') return format;
+      if (scale.type === 'time') {
+        var f = d3TimeFormat.timeFormat(format);
+        return function (d) {
+          return f(new Date(d));
+        };
       }
-    } else {
-      translate = function translate(d) {
-        return {
-          x: 0,
-          y: position(d)
-        };
+      return d3Format.format(format);
+    };
+    var computeGridLines = function computeGridLines(_ref2) {
+      var width = _ref2.width,
+          height = _ref2.height,
+          scale = _ref2.scale,
+          axis = _ref2.axis,
+          _values = _ref2.values;
+      var lineValues = Array.isArray(_values) ? _values : undefined;
+      var lineCount = isNumber(_values) ? _values : undefined;
+      var values = lineValues || getScaleTicks(scale, lineCount);
+      var position = scale.bandwidth ? centerScale(scale) : scale;
+      var lines;
+      if (axis === 'x') {
+        lines = values.map(function (v) {
+          return {
+            key: "".concat(v),
+            x1: position(v),
+            x2: position(v),
+            y1: 0,
+            y2: height
+          };
+        });
+      } else if (axis === 'y') {
+        lines = values.map(function (v) {
+          return {
+            key: "".concat(v),
+            x1: 0,
+            x2: width,
+            y1: position(v),
+            y2: position(v)
+          };
+        });
+      }
+      return lines;
+    };
+
+    var axisPropTypes = {
+      ticksPosition: PropTypes.oneOf(['before', 'after']),
+      tickValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])), PropTypes.string]),
+      tickSize: PropTypes.number,
+      tickPadding: PropTypes.number,
+      tickRotation: PropTypes.number,
+      format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+      renderTick: PropTypes.func,
+      legend: PropTypes.node,
+      legendPosition: PropTypes.oneOf(['start', 'middle', 'end']),
+      legendOffset: PropTypes.number
+    };
+    var axisPropType = PropTypes.shape(axisPropTypes);
+
+    function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+    var AxisTick = function AxisTick(_ref) {
+      var _value = _ref.value,
+          x = _ref.x,
+          y = _ref.y,
+          opacity = _ref.opacity,
+          rotate = _ref.rotate,
+          format = _ref.format,
+          lineX = _ref.lineX,
+          lineY = _ref.lineY,
+          _onClick = _ref.onClick,
+          textX = _ref.textX,
+          textY = _ref.textY,
+          textBaseline = _ref.textBaseline,
+          textAnchor = _ref.textAnchor;
+      var theme = core.useTheme();
+      var value = _value;
+      if (format !== undefined) {
+        value = format(value);
+      }
+      var gStyle = {
+        opacity: opacity
       };
-      line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1);
-      text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
-      if (ticksPosition === 'after') {
-        textAlign = textProps.align.left;
-      } else {
-        textAlign = textProps.align.right;
+      if (_onClick) {
+        gStyle['cursor'] = 'pointer';
       }
-    }
-    var ticks = values.map(function (value) {
-      return _objectSpread2(_objectSpread2(_objectSpread2({
-        key: value,
-        value: value
-      }, translate(value)), line), text);
-    });
-    return {
-      ticks: ticks,
-      textAlign: textAlign,
-      textBaseline: textBaseline
+      return React__default.createElement("g", _extends({
+        transform: "translate(".concat(x, ",").concat(y, ")")
+      }, _onClick ? {
+        onClick: function onClick(e) {
+          return _onClick(e, value);
+        }
+      } : {}, {
+        style: gStyle
+      }), React__default.createElement("line", {
+        x1: 0,
+        x2: lineX,
+        y1: 0,
+        y2: lineY,
+        style: theme.axis.ticks.line
+      }), React__default.createElement("text", {
+        dominantBaseline: textBaseline,
+        textAnchor: textAnchor,
+        transform: "translate(".concat(textX, ",").concat(textY, ") rotate(").concat(rotate, ")"),
+        style: theme.axis.ticks.text
+      }, value));
     };
-  };
-  var getFormatter = function getFormatter(format, scale) {
-    if (!format || typeof format === 'function') return format;
-    if (scale.type === 'time') {
-      var f = d3TimeFormat.timeFormat(format);
-      return function (d) {
-        return f(new Date(d));
+    AxisTick.propTypes = {
+      value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
+      format: PropTypes.func,
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired,
+      lineX: PropTypes.number.isRequired,
+      lineY: PropTypes.number.isRequired,
+      textX: PropTypes.number.isRequired,
+      textY: PropTypes.number.isRequired,
+      textBaseline: PropTypes.string.isRequired,
+      textAnchor: PropTypes.string.isRequired,
+      opacity: PropTypes.number.isRequired,
+      rotate: PropTypes.number.isRequired,
+      onClick: PropTypes.func
+    };
+    AxisTick.defaultProps = {
+      opacity: 1,
+      rotate: 0
+    };
+    var AxisTick$1 = React.memo(AxisTick);
+
+    function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+    function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } return target; }
+    function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    var willEnter = function willEnter() {
+      return {
+        rotate: 0,
+        opacity: 0,
+        x: 0,
+        y: 0
       };
-    }
-    return d3Format.format(format);
-  };
-  var computeGridLines = function computeGridLines(_ref2) {
-    var width = _ref2.width,
-        height = _ref2.height,
-        scale = _ref2.scale,
-        axis = _ref2.axis,
-        _values = _ref2.values;
-    var lineValues = Array.isArray(_values) ? _values : undefined;
-    var lineCount = isInteger(_values) ? _values : undefined;
-    var values = lineValues || getScaleTicks(scale, lineCount);
-    var position = scale.bandwidth ? centerScale(scale) : scale;
-    var lines;
-    if (axis === 'x') {
-      lines = values.map(function (v) {
+    };
+    var willLeave = function willLeave(springConfig) {
+      return function (_ref) {
+        var _ref$style = _ref.style,
+            x = _ref$style.x,
+            y = _ref$style.y,
+            rotate = _ref$style.rotate;
         return {
-          key: "".concat(v),
-          x1: position(v),
-          x2: position(v),
-          y1: 0,
-          y2: height
+          rotate: rotate,
+          opacity: reactMotion.spring(0, springConfig),
+          x: reactMotion.spring(x.val, springConfig),
+          y: reactMotion.spring(y.val, springConfig)
         };
-      });
-    } else if (axis === 'y') {
-      lines = values.map(function (v) {
-        return {
-          key: "".concat(v),
+      };
+    };
+    var defaultTickRenderer = function defaultTickRenderer(props) {
+      return React__default.createElement(AxisTick$1, props);
+    };
+    var Axis = function Axis(_ref2) {
+      var axis = _ref2.axis,
+          scale = _ref2.scale,
+          x = _ref2.x,
+          y = _ref2.y,
+          length = _ref2.length,
+          ticksPosition = _ref2.ticksPosition,
+          tickValues = _ref2.tickValues,
+          tickSize = _ref2.tickSize,
+          tickPadding = _ref2.tickPadding,
+          tickRotation = _ref2.tickRotation,
+          format = _ref2.format,
+          renderTick = _ref2.renderTick,
+          legend = _ref2.legend,
+          legendPosition = _ref2.legendPosition,
+          legendOffset = _ref2.legendOffset,
+          onClick = _ref2.onClick;
+      var theme = core.useTheme();
+      var _useMotionConfig = core.useMotionConfig(),
+          animate = _useMotionConfig.animate,
+          springConfig = _useMotionConfig.springConfig;
+      var formatValue = React.useMemo(function () {
+        return getFormatter(format, scale);
+      }, [format, scale]);
+      var _computeCartesianTick = computeCartesianTicks({
+        axis: axis,
+        scale: scale,
+        ticksPosition: ticksPosition,
+        tickValues: tickValues,
+        tickSize: tickSize,
+        tickPadding: tickPadding,
+        tickRotation: tickRotation
+      }),
+          ticks = _computeCartesianTick.ticks,
+          textAlign = _computeCartesianTick.textAlign,
+          textBaseline = _computeCartesianTick.textBaseline;
+      var legendNode = null;
+      if (legend !== undefined) {
+        var legendX = 0;
+        var legendY = 0;
+        var legendRotation = 0;
+        var textAnchor;
+        if (axis === 'y') {
+          legendRotation = -90;
+          legendX = legendOffset;
+          if (legendPosition === 'start') {
+            textAnchor = 'start';
+            legendY = length;
+          } else if (legendPosition === 'middle') {
+            textAnchor = 'middle';
+            legendY = length / 2;
+          } else if (legendPosition === 'end') {
+            textAnchor = 'end';
+          }
+        } else {
+          legendY = legendOffset;
+          if (legendPosition === 'start') {
+            textAnchor = 'start';
+          } else if (legendPosition === 'middle') {
+            textAnchor = 'middle';
+            legendX = length / 2;
+          } else if (legendPosition === 'end') {
+            textAnchor = 'end';
+            legendX = length;
+          }
+        }
+        legendNode = React__default.createElement("text", {
+          transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"),
+          textAnchor: textAnchor,
+          style: _objectSpread$1({
+            dominantBaseline: 'central'
+          }, theme.axis.legend.text)
+        }, legend);
+      }
+      if (animate !== true) {
+        return React__default.createElement("g", {
+          transform: "translate(".concat(x, ",").concat(y, ")")
+        }, ticks.map(function (tick, tickIndex) {
+          return React__default.createElement(renderTick, _objectSpread$1({
+            tickIndex: tickIndex,
+            format: formatValue,
+            rotate: tickRotation,
+            textBaseline: textBaseline,
+            textAnchor: textAlign
+          }, tick, onClick ? {
+            onClick: onClick
+          } : {}));
+        }), React__default.createElement("line", {
+          style: theme.axis.domain.line,
           x1: 0,
-          x2: width,
-          y1: position(v),
-          y2: position(v)
-        };
+          x2: axis === 'x' ? length : 0,
+          y1: 0,
+          y2: axis === 'x' ? 0 : length
+        }), legendNode);
+      }
+      return React__default.createElement(reactMotion.Motion, {
+        style: {
+          x: reactMotion.spring(x, springConfig),
+          y: reactMotion.spring(y, springConfig)
+        }
+      }, function (xy) {
+        return React__default.createElement("g", {
+          transform: "translate(".concat(xy.x, ",").concat(xy.y, ")")
+        }, React__default.createElement(reactMotion.TransitionMotion, {
+          willEnter: willEnter,
+          willLeave: willLeave(springConfig),
+          styles: ticks.map(function (tick) {
+            return {
+              key: "".concat(tick.key),
+              data: tick,
+              style: {
+                opacity: reactMotion.spring(1, springConfig),
+                x: reactMotion.spring(tick.x, springConfig),
+                y: reactMotion.spring(tick.y, springConfig),
+                rotate: reactMotion.spring(tickRotation, springConfig)
+              }
+            };
+          })
+        }, function (interpolatedStyles) {
+          return React__default.createElement(React.Fragment, null, interpolatedStyles.map(function (_ref3, tickIndex) {
+            var style = _ref3.style,
+                tick = _ref3.data;
+            return React__default.createElement(renderTick, _objectSpread$1({
+              tickIndex: tickIndex,
+              format: formatValue,
+              textBaseline: textBaseline,
+              textAnchor: textAlign
+            }, tick, style, onClick ? {
+              onClick: onClick
+            } : {}));
+          }));
+        }), React__default.createElement(reactMotion.Motion, {
+          style: {
+            x2: reactMotion.spring(axis === 'x' ? length : 0, springConfig),
+            y2: reactMotion.spring(axis === 'x' ? 0 : length, springConfig)
+          }
+        }, function (values) {
+          return React__default.createElement("line", _extends$1({
+            style: theme.axis.domain.line,
+            x1: 0,
+            y1: 0
+          }, values));
+        }), legendNode);
       });
-    }
-    return lines;
-  };
+    };
+    Axis.propTypes = {
+      axis: PropTypes.oneOf(['x', 'y']).isRequired,
+      scale: PropTypes.func.isRequired,
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired,
+      length: PropTypes.number.isRequired,
+      ticksPosition: PropTypes.oneOf(['before', 'after']).isRequired,
+      tickValues: axisPropTypes.tickValues,
+      tickSize: PropTypes.number.isRequired,
+      tickPadding: PropTypes.number.isRequired,
+      tickRotation: PropTypes.number.isRequired,
+      format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+      renderTick: PropTypes.func.isRequired,
+      legend: PropTypes.node,
+      legendPosition: PropTypes.oneOf(['start', 'middle', 'end']).isRequired,
+      legendOffset: PropTypes.number.isRequired,
+      onClick: PropTypes.func
+    };
+    Axis.defaultProps = {
+      x: 0,
+      y: 0,
+      tickSize: 5,
+      tickPadding: 5,
+      tickRotation: 0,
+      renderTick: defaultTickRenderer,
+      legendPosition: 'end',
+      legendOffset: 0
+    };
+    var Axis$1 = React.memo(Axis);
 
-  var axisPropTypes = {
-    ticksPosition: PropTypes.oneOf(['before', 'after']),
-    tickValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])), PropTypes.string]),
-    tickSize: PropTypes.number,
-    tickPadding: PropTypes.number,
-    tickRotation: PropTypes.number,
-    format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    renderTick: PropTypes.func,
-    legend: PropTypes.node,
-    legendPosition: PropTypes.oneOf(['start', 'middle', 'end']),
-    legendOffset: PropTypes.number,
-    ariaHidden: PropTypes.bool
-  };
-  var axisPropType = PropTypes.shape(axisPropTypes);
+    function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+    var positions = ['top', 'right', 'bottom', 'left'];
+    var Axes = function Axes(_ref) {
+      var xScale = _ref.xScale,
+          yScale = _ref.yScale,
+          width = _ref.width,
+          height = _ref.height,
+          top = _ref.top,
+          right = _ref.right,
+          bottom = _ref.bottom,
+          left = _ref.left;
+      var axes = {
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left
+      };
+      return positions.map(function (position) {
+        var axis = axes[position];
+        if (!axis) return null;
+        var isXAxis = position === 'top' || position === 'bottom';
+        var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after';
+        return React__default.createElement(Axis$1, _extends$2({
+          key: position
+        }, axis, {
+          axis: isXAxis ? 'x' : 'y',
+          x: position === 'right' ? width : 0,
+          y: position === 'bottom' ? height : 0,
+          scale: isXAxis ? xScale : yScale,
+          length: isXAxis ? width : height,
+          ticksPosition: ticksPosition
+        }));
+      });
+    };
+    Axes.propTypes = {
+      xScale: PropTypes.func,
+      yScale: PropTypes.func,
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+      top: axisPropType,
+      right: axisPropType,
+      bottom: axisPropType,
+      left: axisPropType
+    };
+    var Axes$1 = React.memo(Axes);
 
-  var AxisTick = function AxisTick(_ref) {
-    var _value = _ref.value,
-        format = _ref.format,
-        lineX = _ref.lineX,
-        lineY = _ref.lineY,
-        _onClick = _ref.onClick,
-        textBaseline = _ref.textBaseline,
-        textAnchor = _ref.textAnchor,
-        animatedProps = _ref.animatedProps;
-    var theme = core.useTheme();
-    var value = _value;
-    if (format !== undefined) {
-      value = format(value);
-    }
-    var gStyle = {
-      opacity: animatedProps.opacity
+    var GridLine = function GridLine(props) {
+      return React__default.createElement("line", props);
     };
-    if (_onClick) {
-      gStyle['cursor'] = 'pointer';
-    }
-    return React__default.createElement(reactSpring.animated.g, Object.assign({
-      transform: animatedProps.transform
-    }, _onClick ? {
-      onClick: function onClick(e) {
-        return _onClick(e, value);
-      }
-    } : {}, {
-      style: gStyle
-    }), React__default.createElement("line", {
+    GridLine.propTypes = {
+      x1: PropTypes.number.isRequired,
+      x2: PropTypes.number.isRequired,
+      y1: PropTypes.number.isRequired,
+      y2: PropTypes.number.isRequired
+    };
+    GridLine.defaultProps = {
       x1: 0,
-      x2: lineX,
+      x2: 0,
       y1: 0,
-      y2: lineY,
-      style: theme.axis.ticks.line
-    }), React__default.createElement(reactSpring.animated.text, {
-      dominantBaseline: textBaseline,
-      textAnchor: textAnchor,
-      transform: animatedProps.textTransform,
-      style: theme.axis.ticks.text
-    }, value));
-  };
-  AxisTick.defaultProps = {
-    opacity: 1,
-    rotate: 0
-  };
-  var AxisTick$1 = React.memo(AxisTick);
+      y2: 0
+    };
+    var GridLine$1 = React.memo(GridLine);
 
-  var defaultTickRenderer = function defaultTickRenderer(props) {
-    return React__default.createElement(AxisTick$1, props);
-  };
-  var Axis = function Axis(_ref) {
-    var axis = _ref.axis,
-        scale = _ref.scale,
-        x = _ref.x,
-        y = _ref.y,
-        length = _ref.length,
-        ticksPosition = _ref.ticksPosition,
-        tickValues = _ref.tickValues,
-        tickSize = _ref.tickSize,
-        tickPadding = _ref.tickPadding,
-        tickRotation = _ref.tickRotation,
-        format = _ref.format,
-        renderTick = _ref.renderTick,
-        legend = _ref.legend,
-        legendPosition = _ref.legendPosition,
-        legendOffset = _ref.legendOffset,
-        onClick = _ref.onClick,
-        ariaHidden = _ref.ariaHidden;
-    var theme = core.useTheme();
-    var formatValue = React.useMemo(function () {
-      return getFormatter(format, scale);
-    }, [format, scale]);
-    var _computeCartesianTick = computeCartesianTicks({
-      axis: axis,
-      scale: scale,
-      ticksPosition: ticksPosition,
-      tickValues: tickValues,
-      tickSize: tickSize,
-      tickPadding: tickPadding,
-      tickRotation: tickRotation
-    }),
-        ticks = _computeCartesianTick.ticks,
-        textAlign = _computeCartesianTick.textAlign,
-        textBaseline = _computeCartesianTick.textBaseline;
-    var legendNode = null;
-    if (legend !== undefined) {
-      var legendX = 0;
-      var legendY = 0;
-      var legendRotation = 0;
-      var textAnchor;
-      if (axis === 'y') {
-        legendRotation = -90;
-        legendX = legendOffset;
-        if (legendPosition === 'start') {
-          textAnchor = 'start';
-          legendY = length;
-        } else if (legendPosition === 'middle') {
-          textAnchor = 'middle';
-          legendY = length / 2;
-        } else if (legendPosition === 'end') {
-          textAnchor = 'end';
-        }
-      } else {
-        legendY = legendOffset;
-        if (legendPosition === 'start') {
-          textAnchor = 'start';
-        } else if (legendPosition === 'middle') {
-          textAnchor = 'middle';
-          legendX = length / 2;
-        } else if (legendPosition === 'end') {
-          textAnchor = 'end';
-          legendX = length;
-        }
-      }
-      legendNode = React__default.createElement("text", {
-        transform: "translate(".concat(legendX, ", ").concat(legendY, ") rotate(").concat(legendRotation, ")"),
-        textAnchor: textAnchor,
-        style: _objectSpread2({
-          dominantBaseline: 'central'
-        }, theme.axis.legend.text)
-      }, legend);
-    }
-    var _useMotionConfig = core.useMotionConfig(),
-        animate = _useMotionConfig.animate,
-        springConfig = _useMotionConfig.config;
-    var animatedProps = reactSpring.useSpring({
-      transform: "translate(".concat(x, ",").concat(y, ")"),
-      lineX2: axis === 'x' ? length : 0,
-      lineY2: axis === 'x' ? 0 : length,
-      config: springConfig,
-      immediate: !animate
-    });
-    var transitions = reactSpring.useTransition(ticks, function (tick) {
-      return tick.key;
-    }, {
-      initial: function initial(tick) {
-        return {
-          opacity: 1,
-          transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"),
-          textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")")
+    function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+    var GridLines = function GridLines(_ref) {
+      var type = _ref.type,
+          lines = _ref.lines;
+      var theme = core.useTheme();
+      var _useMotionConfig = core.useMotionConfig(),
+          animate = _useMotionConfig.animate,
+          springConfig = _useMotionConfig.springConfig;
+      var lineWillEnter = React.useMemo(function () {
+        return function (_ref2) {
+          var style = _ref2.style;
+          return {
+            opacity: 0,
+            x1: type === 'x' ? 0 : style.x1.val,
+            x2: type === 'x' ? 0 : style.x2.val,
+            y1: type === 'y' ? 0 : style.y1.val,
+            y2: type === 'y' ? 0 : style.y2.val
+          };
         };
-      },
-      from: function from(tick) {
-        return {
-          opacity: 0,
-          transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"),
-          textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")")
+      }, [type]);
+      var lineWillLeave = React.useMemo(function () {
+        return function (_ref3) {
+          var style = _ref3.style;
+          return {
+            opacity: reactMotion.spring(0, springConfig),
+            x1: reactMotion.spring(style.x1.val, springConfig),
+            x2: reactMotion.spring(style.x2.val, springConfig),
+            y1: reactMotion.spring(style.y1.val, springConfig),
+            y2: reactMotion.spring(style.y2.val, springConfig)
+          };
         };
-      },
-      enter: function enter(tick) {
-        return {
-          opacity: 1,
-          transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"),
-          textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")")
-        };
-      },
-      update: function update(tick) {
-        return {
-          opacity: 1,
-          transform: "translate(".concat(tick.x, ",").concat(tick.y, ")"),
-          textTransform: "translate(".concat(tick.textX, ",").concat(tick.textY, ") rotate(").concat(tickRotation, ")")
-        };
-      },
-      leave: {
-        opacity: 0
-      },
-      config: springConfig,
-      immediate: !animate
-    });
-    return React__default.createElement(reactSpring.animated.g, {
-      transform: animatedProps.transform,
-      "aria-hidden": ariaHidden
-    }, transitions.map(function (_ref2, tickIndex) {
-      var tick = _ref2.item,
-          transitionProps = _ref2.props,
-          key = _ref2.key;
-      return React__default.createElement(renderTick, _objectSpread2(_objectSpread2(_objectSpread2({
-        tickIndex: tickIndex,
-        format: formatValue,
-        rotate: tickRotation,
-        textBaseline: textBaseline,
-        textAnchor: textAlign,
-        animatedProps: transitionProps
-      }, tick), onClick ? {
-        onClick: onClick
-      } : {}), {}, {
-        key: key
-      }));
-    }), React__default.createElement(reactSpring.animated.line, {
-      style: theme.axis.domain.line,
-      x1: 0,
-      x2: animatedProps.lineX2,
-      y1: 0,
-      y2: animatedProps.lineY2
-    }), legendNode);
-  };
-  Axis.defaultProps = {
-    x: 0,
-    y: 0,
-    tickSize: 5,
-    tickPadding: 5,
-    tickRotation: 0,
-    renderTick: defaultTickRenderer,
-    legendPosition: 'end',
-    legendOffset: 0
-  };
-  var Axis$1 = React.memo(Axis);
-
-  var positions = ['top', 'right', 'bottom', 'left'];
-  var Axes = function Axes(_ref) {
-    var xScale = _ref.xScale,
-        yScale = _ref.yScale,
-        width = _ref.width,
-        height = _ref.height,
-        top = _ref.top,
-        right = _ref.right,
-        bottom = _ref.bottom,
-        left = _ref.left;
-    var axes = {
-      top: top,
-      right: right,
-      bottom: bottom,
-      left: left
+      }, [springConfig]);
+      if (!animate) {
+        return React__default.createElement("g", null, lines.map(function (line) {
+          return React__default.createElement(GridLine$1, _extends$3({
+            key: line.key
+          }, line, theme.grid.line));
+        }));
+      }
+      return React__default.createElement(reactMotion.TransitionMotion, {
+        willEnter: lineWillEnter,
+        willLeave: lineWillLeave,
+        styles: lines.map(function (line) {
+          return {
+            key: line.key,
+            style: {
+              opacity: reactMotion.spring(1, springConfig),
+              x1: reactMotion.spring(line.x1 || 0, springConfig),
+              x2: reactMotion.spring(line.x2 || 0, springConfig),
+              y1: reactMotion.spring(line.y1 || 0, springConfig),
+              y2: reactMotion.spring(line.y2 || 0, springConfig)
+            }
+          };
+        })
+      }, function (interpolatedStyles) {
+        return React__default.createElement("g", null, interpolatedStyles.map(function (interpolatedStyle) {
+          var key = interpolatedStyle.key,
+              style = interpolatedStyle.style;
+          return React__default.createElement(GridLine$1, _extends$3({
+            key: key
+          }, theme.grid.line, style));
+        }));
+      });
     };
-    return positions.map(function (position) {
-      var axis = axes[position];
-      if (!axis) return null;
-      var isXAxis = position === 'top' || position === 'bottom';
-      var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after';
-      return React__default.createElement(Axis$1, Object.assign({
-        key: position
-      }, axis, {
-        axis: isXAxis ? 'x' : 'y',
-        x: position === 'right' ? width : 0,
-        y: position === 'bottom' ? height : 0,
-        scale: isXAxis ? xScale : yScale,
-        length: isXAxis ? width : height,
-        ticksPosition: ticksPosition
-      }));
-    });
-  };
-  var Axes$1 = React.memo(Axes);
+    GridLines.propTypes = {
+      type: PropTypes.oneOf(['x', 'y']).isRequired,
+      lines: PropTypes.arrayOf(PropTypes.shape({
+        key: PropTypes.string.isRequired,
+        x1: PropTypes.number,
+        x2: PropTypes.number,
+        y1: PropTypes.number,
+        y2: PropTypes.number
+      })).isRequired
+    };
+    var GridLines$1 = React.memo(GridLines);
 
-  var GridLine = function GridLine(_ref) {
-    var animatedProps = _ref.animatedProps;
-    var theme = core.useTheme();
-    return React__default.createElement(reactSpring.animated.line, Object.assign({}, animatedProps, theme.grid.line));
-  };
-  GridLine.defaultProps = {
-    x1: 0,
-    x2: 0,
-    y1: 0,
-    y2: 0
-  };
-  var GridLine$1 = React.memo(GridLine);
-
-  var GridLines = function GridLines(_ref) {
-    var lines = _ref.lines;
-    var _useMotionConfig = core.useMotionConfig(),
-        animate = _useMotionConfig.animate,
-        springConfig = _useMotionConfig.config;
-    var transitions = reactSpring.useTransition(lines, function (line) {
-      return line.key;
-    }, {
-      initial: function initial(line) {
-        return {
-          opacity: 1,
-          x1: line.x1,
-          x2: line.x2,
-          y1: line.y1,
-          y2: line.y2
-        };
-      },
-      from: function from(line) {
-        return {
-          opacity: 0,
-          x1: line.x1,
-          x2: line.x2,
-          y1: line.y1,
-          y2: line.y2
-        };
-      },
-      enter: function enter(line) {
-        return {
-          opacity: 1,
-          x1: line.x1,
-          x2: line.x2,
-          y1: line.y1,
-          y2: line.y2
-        };
-      },
-      update: function update(line) {
-        return {
-          opacity: 1,
-          x1: line.x1,
-          x2: line.x2,
-          y1: line.y1,
-          y2: line.y2
-        };
-      },
-      leave: {
-        opacity: 0
-      },
-      config: springConfig,
-      immediate: !animate
-    });
-    return React__default.createElement("g", null, transitions.map(function (_ref2) {
-      var line = _ref2.item,
-          animatedProps = _ref2.props,
-          key = _ref2.key;
-      return React__default.createElement(GridLine$1, Object.assign({}, line, {
-        key: key,
-        animatedProps: animatedProps
-      }));
-    }));
-  };
-  var GridLines$1 = React.memo(GridLines);
-
-  var Grid = function Grid(_ref) {
-    var width = _ref.width,
-        height = _ref.height,
-        xScale = _ref.xScale,
-        yScale = _ref.yScale,
-        xValues = _ref.xValues,
-        yValues = _ref.yValues;
-    var xLines = React.useMemo(function () {
-      if (!xScale) return false;
-      return computeGridLines({
+    var Grid = function Grid(_ref) {
+      var width = _ref.width,
+          height = _ref.height,
+          xScale = _ref.xScale,
+          yScale = _ref.yScale,
+          xValues = _ref.xValues,
+          yValues = _ref.yValues;
+      var xLines = React.useMemo(function () {
+        if (!xScale) return false;
+        return computeGridLines({
+          width: width,
+          height: height,
+          scale: xScale,
+          axis: 'x',
+          values: xValues
+        });
+      }, [xScale, xValues]);
+      var yLines = yScale ? computeGridLines({
         width: width,
         height: height,
-        scale: xScale,
-        axis: 'x',
-        values: xValues
-      });
-    }, [xScale, xValues]);
-    var yLines = yScale ? computeGridLines({
-      width: width,
-      height: height,
-      scale: yScale,
-      axis: 'y',
-      values: yValues
-    }) : false;
-    return React__default.createElement(React__default.Fragment, null, xLines && React__default.createElement(GridLines$1, {
-      type: "x",
-      lines: xLines
-    }), yLines && React__default.createElement(GridLines$1, {
-      type: "y",
-      lines: yLines
-    }));
-  };
-  var Grid$1 = React.memo(Grid);
+        scale: yScale,
+        axis: 'y',
+        values: yValues
+      }) : false;
+      return React__default.createElement(React__default.Fragment, null, xLines && React__default.createElement(GridLines$1, {
+        type: "x",
+        lines: xLines
+      }), yLines && React__default.createElement(GridLines$1, {
+        type: "y",
+        lines: yLines
+      }));
+    };
+    Grid.propTypes = {
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+      xScale: PropTypes.func,
+      yScale: PropTypes.func,
+      xValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))]),
+      yValues: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)]))])
+    };
+    var Grid$1 = React.memo(Grid);
 
-  var degreesToRadians = function degreesToRadians(degrees) {
-    return degrees * Math.PI / 180;
-  };
+    var degreesToRadians = function degreesToRadians(degrees) {
+      return degrees * Math.PI / 180;
+    };
 
-  var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) {
-    var axis = _ref.axis,
-        scale = _ref.scale,
-        _ref$x = _ref.x,
-        x = _ref$x === void 0 ? 0 : _ref$x,
-        _ref$y = _ref.y,
-        y = _ref$y === void 0 ? 0 : _ref$y,
-        length = _ref.length,
-        ticksPosition = _ref.ticksPosition,
-        tickValues = _ref.tickValues,
-        _ref$tickSize = _ref.tickSize,
-        tickSize = _ref$tickSize === void 0 ? 5 : _ref$tickSize,
-        _ref$tickPadding = _ref.tickPadding,
-        tickPadding = _ref$tickPadding === void 0 ? 5 : _ref$tickPadding,
-        _ref$tickRotation = _ref.tickRotation,
-        tickRotation = _ref$tickRotation === void 0 ? 0 : _ref$tickRotation,
-        format = _ref.format,
-        legend = _ref.legend,
-        _ref$legendPosition = _ref.legendPosition,
-        legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition,
-        _ref$legendOffset = _ref.legendOffset,
-        legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset,
-        theme = _ref.theme;
-    var _computeCartesianTick = computeCartesianTicks({
-      axis: axis,
-      scale: scale,
-      ticksPosition: ticksPosition,
-      tickValues: tickValues,
-      tickSize: tickSize,
-      tickPadding: tickPadding,
-      tickRotation: tickRotation,
-      engine: 'canvas'
-    }),
-        ticks = _computeCartesianTick.ticks,
-        textAlign = _computeCartesianTick.textAlign,
-        textBaseline = _computeCartesianTick.textBaseline;
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.textAlign = textAlign;
-    ctx.textBaseline = textBaseline;
-    ctx.font = "".concat(theme.axis.ticks.text.fontSize, "px ").concat(theme.axis.ticks.text.fontFamily);
-    if (theme.axis.domain.line.strokeWidth > 0) {
-      ctx.lineWidth = theme.axis.domain.line.strokeWidth;
-      ctx.lineCap = 'square';
-      ctx.strokeStyle = theme.axis.domain.line.stroke;
-      ctx.beginPath();
-      ctx.moveTo(0, 0);
-      ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length);
-      ctx.stroke();
-    }
-    ticks.forEach(function (tick) {
-      if (theme.axis.ticks.line.strokeWidth > 0) {
-        ctx.lineWidth = theme.axis.ticks.line.strokeWidth;
+    function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(Object(source)); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } return target; }
+    function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    var renderAxisToCanvas = function renderAxisToCanvas(ctx, _ref) {
+      var axis = _ref.axis,
+          scale = _ref.scale,
+          _ref$x = _ref.x,
+          x = _ref$x === void 0 ? 0 : _ref$x,
+          _ref$y = _ref.y,
+          y = _ref$y === void 0 ? 0 : _ref$y,
+          length = _ref.length,
+          ticksPosition = _ref.ticksPosition,
+          tickValues = _ref.tickValues,
+          _ref$tickSize = _ref.tickSize,
+          tickSize = _ref$tickSize === void 0 ? 5 : _ref$tickSize,
+          _ref$tickPadding = _ref.tickPadding,
+          tickPadding = _ref$tickPadding === void 0 ? 5 : _ref$tickPadding,
+          _ref$tickRotation = _ref.tickRotation,
+          tickRotation = _ref$tickRotation === void 0 ? 0 : _ref$tickRotation,
+          format = _ref.format,
+          legend = _ref.legend,
+          _ref$legendPosition = _ref.legendPosition,
+          legendPosition = _ref$legendPosition === void 0 ? 'end' : _ref$legendPosition,
+          _ref$legendOffset = _ref.legendOffset,
+          legendOffset = _ref$legendOffset === void 0 ? 0 : _ref$legendOffset,
+          theme = _ref.theme;
+      var _computeCartesianTick = computeCartesianTicks({
+        axis: axis,
+        scale: scale,
+        ticksPosition: ticksPosition,
+        tickValues: tickValues,
+        tickSize: tickSize,
+        tickPadding: tickPadding,
+        tickRotation: tickRotation,
+        engine: 'canvas'
+      }),
+          ticks = _computeCartesianTick.ticks,
+          textAlign = _computeCartesianTick.textAlign,
+          textBaseline = _computeCartesianTick.textBaseline;
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.textAlign = textAlign;
+      ctx.textBaseline = textBaseline;
+      ctx.font = "".concat(theme.axis.ticks.text.fontSize, "px ").concat(theme.axis.ticks.text.fontFamily);
+      if (theme.axis.domain.line.strokeWidth > 0) {
+        ctx.lineWidth = theme.axis.domain.line.strokeWidth;
         ctx.lineCap = 'square';
-        ctx.strokeStyle = theme.axis.ticks.line.stroke;
+        ctx.strokeStyle = theme.axis.domain.line.stroke;
         ctx.beginPath();
-        ctx.moveTo(tick.x, tick.y);
-        ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY);
+        ctx.moveTo(0, 0);
+        ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length);
         ctx.stroke();
       }
-      var value = format !== undefined ? format(tick.value) : tick.value;
-      ctx.save();
-      ctx.translate(tick.x + tick.textX, tick.y + tick.textY);
-      ctx.rotate(degreesToRadians(tickRotation));
-      ctx.fillStyle = theme.axis.ticks.text.fill;
-      ctx.fillText(value, 0, 0);
-      ctx.restore();
-    });
-    if (legend !== undefined) {
-      var legendX = 0;
-      var legendY = 0;
-      var legendRotation = 0;
-      var _textAlign;
-      if (axis === 'y') {
-        legendRotation = -90;
-        legendX = legendOffset;
-        if (legendPosition === 'start') {
-          _textAlign = 'start';
-          legendY = length;
-        } else if (legendPosition === 'middle') {
-          _textAlign = 'center';
-          legendY = length / 2;
-        } else if (legendPosition === 'end') {
-          _textAlign = 'end';
+      ticks.forEach(function (tick) {
+        if (theme.axis.ticks.line.strokeWidth > 0) {
+          ctx.lineWidth = theme.axis.ticks.line.strokeWidth;
+          ctx.lineCap = 'square';
+          ctx.strokeStyle = theme.axis.ticks.line.stroke;
+          ctx.beginPath();
+          ctx.moveTo(tick.x, tick.y);
+          ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY);
+          ctx.stroke();
         }
-      } else {
-        legendY = legendOffset;
-        if (legendPosition === 'start') {
-          _textAlign = 'start';
-        } else if (legendPosition === 'middle') {
-          _textAlign = 'center';
-          legendX = length / 2;
-        } else if (legendPosition === 'end') {
-          _textAlign = 'end';
-          legendX = length;
+        var value = format !== undefined ? format(tick.value) : tick.value;
+        ctx.save();
+        ctx.translate(tick.x + tick.textX, tick.y + tick.textY);
+        ctx.rotate(degreesToRadians(tickRotation));
+        ctx.fillStyle = theme.axis.ticks.text.fill;
+        ctx.fillText(value, 0, 0);
+        ctx.restore();
+      });
+      if (legend !== undefined) {
+        var legendX = 0;
+        var legendY = 0;
+        var legendRotation = 0;
+        var _textAlign;
+        if (axis === 'y') {
+          legendRotation = -90;
+          legendX = legendOffset;
+          if (legendPosition === 'start') {
+            _textAlign = 'start';
+            legendY = length;
+          } else if (legendPosition === 'middle') {
+            _textAlign = 'center';
+            legendY = length / 2;
+          } else if (legendPosition === 'end') {
+            _textAlign = 'end';
+          }
+        } else {
+          legendY = legendOffset;
+          if (legendPosition === 'start') {
+            _textAlign = 'start';
+          } else if (legendPosition === 'middle') {
+            _textAlign = 'center';
+            legendX = length / 2;
+          } else if (legendPosition === 'end') {
+            _textAlign = 'end';
+            legendX = length;
+          }
         }
+        ctx.translate(legendX, legendY);
+        ctx.rotate(degreesToRadians(legendRotation));
+        ctx.font = "".concat(theme.axis.legend.text.fontWeight ? "".concat(theme.axis.legend.text.fontWeight, " ") : '').concat(theme.axis.legend.text.fontSize, "px ").concat(theme.axis.legend.text.fontFamily);
+        ctx.fillStyle = theme.axis.legend.text.fill;
+        ctx.textAlign = _textAlign;
+        ctx.textBaseline = 'middle';
+        ctx.fillText(legend, 0, 0);
       }
-      ctx.translate(legendX, legendY);
-      ctx.rotate(degreesToRadians(legendRotation));
-      ctx.font = "".concat(theme.axis.legend.text.fontWeight ? "".concat(theme.axis.legend.text.fontWeight, " ") : '').concat(theme.axis.legend.text.fontSize, "px ").concat(theme.axis.legend.text.fontFamily);
-      ctx.fillStyle = theme.axis.legend.text.fill;
-      ctx.textAlign = _textAlign;
-      ctx.textBaseline = 'middle';
-      ctx.fillText(legend, 0, 0);
-    }
-    ctx.restore();
-  };
-  var positions$1 = ['top', 'right', 'bottom', 'left'];
-  var renderAxesToCanvas = function renderAxesToCanvas(ctx, _ref2) {
-    var xScale = _ref2.xScale,
-        yScale = _ref2.yScale,
-        width = _ref2.width,
-        height = _ref2.height,
-        top = _ref2.top,
-        right = _ref2.right,
-        bottom = _ref2.bottom,
-        left = _ref2.left,
-        theme = _ref2.theme;
-    var axes = {
-      top: top,
-      right: right,
-      bottom: bottom,
-      left: left
+      ctx.restore();
     };
-    positions$1.forEach(function (position) {
-      var axis = axes[position];
-      if (!axis) return null;
-      var isXAxis = position === 'top' || position === 'bottom';
-      var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after';
-      var scale = isXAxis ? xScale : yScale;
-      var format = getFormatter(axis.format, scale);
-      renderAxisToCanvas(ctx, _objectSpread2(_objectSpread2({}, axis), {}, {
-        axis: isXAxis ? 'x' : 'y',
-        x: position === 'right' ? width : 0,
-        y: position === 'bottom' ? height : 0,
+    var positions$1 = ['top', 'right', 'bottom', 'left'];
+    var renderAxesToCanvas = function renderAxesToCanvas(ctx, _ref2) {
+      var xScale = _ref2.xScale,
+          yScale = _ref2.yScale,
+          width = _ref2.width,
+          height = _ref2.height,
+          top = _ref2.top,
+          right = _ref2.right,
+          bottom = _ref2.bottom,
+          left = _ref2.left,
+          theme = _ref2.theme;
+      var axes = {
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left
+      };
+      positions$1.forEach(function (position) {
+        var axis = axes[position];
+        if (!axis) return null;
+        var isXAxis = position === 'top' || position === 'bottom';
+        var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after';
+        var scale = isXAxis ? xScale : yScale;
+        var format = getFormatter(axis.format, scale);
+        renderAxisToCanvas(ctx, _objectSpread$2({}, axis, {
+          axis: isXAxis ? 'x' : 'y',
+          x: position === 'right' ? width : 0,
+          y: position === 'bottom' ? height : 0,
+          scale: scale,
+          format: format,
+          length: isXAxis ? width : height,
+          ticksPosition: ticksPosition,
+          theme: theme
+        }));
+      });
+    };
+    var renderGridLinesToCanvas = function renderGridLinesToCanvas(ctx, _ref3) {
+      var width = _ref3.width,
+          height = _ref3.height,
+          scale = _ref3.scale,
+          axis = _ref3.axis,
+          values = _ref3.values;
+      var lines = computeGridLines({
+        width: width,
+        height: height,
         scale: scale,
-        format: format,
-        length: isXAxis ? width : height,
-        ticksPosition: ticksPosition,
-        theme: theme
-      }));
-    });
-  };
-  var renderGridLinesToCanvas = function renderGridLinesToCanvas(ctx, _ref3) {
-    var width = _ref3.width,
-        height = _ref3.height,
-        scale = _ref3.scale,
-        axis = _ref3.axis,
-        values = _ref3.values;
-    var lines = computeGridLines({
-      width: width,
-      height: height,
-      scale: scale,
-      axis: axis,
-      values: values
-    });
-    lines.forEach(function (line) {
-      ctx.beginPath();
-      ctx.moveTo(line.x1, line.y1);
-      ctx.lineTo(line.x2, line.y2);
-      ctx.stroke();
-    });
-  };
+        axis: axis,
+        values: values
+      });
+      lines.forEach(function (line) {
+        ctx.beginPath();
+        ctx.moveTo(line.x1, line.y1);
+        ctx.lineTo(line.x2, line.y2);
+        ctx.stroke();
+      });
+    };
 
-  exports.Axes = Axes$1;
-  exports.Axis = Axis$1;
-  exports.Grid = Grid$1;
-  exports.axisPropType = axisPropType;
-  exports.axisPropTypes = axisPropTypes;
-  exports.renderAxesToCanvas = renderAxesToCanvas;
-  exports.renderAxisToCanvas = renderAxisToCanvas;
-  exports.renderGridLinesToCanvas = renderGridLinesToCanvas;
+    exports.Axes = Axes$1;
+    exports.Axis = Axis$1;
+    exports.Grid = Grid$1;
+    exports.axisPropType = axisPropType;
+    exports.axisPropTypes = axisPropTypes;
+    exports.renderAxesToCanvas = renderAxesToCanvas;
+    exports.renderAxisToCanvas = renderAxisToCanvas;
+    exports.renderGridLinesToCanvas = renderGridLinesToCanvas;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
+    Object.defineProperty(exports, '__esModule', { value: true });
 
 })));
-//# sourceMappingURL=nivo-axes.umd.js.map

index.d.ts

@@ -40,3 +40,2 @@ import * as React from 'react'
         legendOffset?: number
-        ariaHidden?: boolean
     }
@@ -43,0 +42,0 @@

package.json

 {
     "name": "@rlvt/axes",
-    "version": "0.62.0",
+    "version": "0.62.1",
     "license": "MIT",
@@ -16,3 +16,3 @@ "author": {
     "main": "./dist/nivo-axes.cjs.js",
-    "module": "./dist/nivo-axes.es.js",
+    "module": "./dist/nivo-axes.esm.js",
     "files": [
@@ -25,10 +25,11 @@ "README.md",
     "dependencies": {
+        "@nivo/core": "0.62.0",
         "@nivo/scales": "0.62.0",
-        "d3-format": "^1.4.4",
+        "d3-format": "^1.3.2",
         "d3-time": "^1.0.11",
         "d3-time-format": "^2.1.3",
-        "react-spring": "^8.0.27"
+        "lodash": "^4.17.11",
+        "react-motion": "^0.5.2"
     },
     "peerDependencies": {
-        "@nivo/core": "0.62.0",
         "prop-types": ">= 15.5.10 < 16.0.0",
@@ -35,0 +36,0 @@ "react": ">= 16.8.4 < 17.0.0"

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Lines of code

2530

increased by8.44%

Worsened metrics

Total package byte prevSize

96520

decreased by-62.04%

Dependency count

9

increased by12.5%

Number of package files

7

decreased by-30%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@nivo/core@0.62.0

• + Addedlodash@^4.17.11

• + Addedreact-motion@^0.5.2

• - Removedreact-spring@^8.0.27

• - Removedreact-spring@8.0.27(transitive)

• Updatedd3-format@^1.3.2