victory-chart - npm Package Compare versions

Comparing version 35.10.1 to 35.11.0

es/victory-chart.js

@@ -9,17 +9,5 @@ import _isEmpty from "lodash/isEmpty";
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 import PropTypes from "prop-types";
 import React from "react";
-import { Background, Helpers, VictoryContainer, VictoryTheme, CommonProps, PropTypes as CustomPropTypes, Wrapper } from "victory-core";
+import { Background, Helpers, VictoryContainer, VictoryTheme, CommonProps, PropTypes as CustomPropTypes, Wrapper, usePreviousProps, useAnimationState } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
@@ -36,81 +24,54 @@ import { VictoryAxis } from "victory-axis";
 
-var VictoryChart =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(VictoryChart, _React$Component);
+var VictoryChart = function (initialProps) {
+  var role = "chart";
 
-  function VictoryChart(props) {
-    var _this;
+  var _useAnimationState = useAnimationState(),
+      getAnimationProps = _useAnimationState.getAnimationProps,
+      setAnimationState = _useAnimationState.setAnimationState,
+      getProps = _useAnimationState.getProps;
 
-    _classCallCheck(this, VictoryChart);
+  var props = getProps(initialProps);
+  var modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
+  var eventKey = modifiedProps.eventKey,
+      containerComponent = modifiedProps.containerComponent,
+      standalone = modifiedProps.standalone,
+      groupComponent = modifiedProps.groupComponent,
+      externalEventMutations = modifiedProps.externalEventMutations,
+      width = modifiedProps.width,
+      height = modifiedProps.height,
+      theme = modifiedProps.theme,
+      polar = modifiedProps.polar,
+      name = modifiedProps.name;
+  var axes = props.polar ? modifiedProps.defaultPolarAxes : modifiedProps.defaultAxes;
+  var childComponents = React.useMemo(function () {
+    return getChildComponents(modifiedProps, axes);
+  }, [modifiedProps, axes]);
+  var calculatedProps = React.useMemo(function () {
+    return getCalculatedProps(modifiedProps, childComponents);
+  }, [modifiedProps, childComponents]);
+  var domain = calculatedProps.domain,
+      scale = calculatedProps.scale,
+      style = calculatedProps.style,
+      origin = calculatedProps.origin,
+      radius = calculatedProps.radius,
+      horizontal = calculatedProps.horizontal;
+  var newChildren = React.useMemo(function () {
+    var children = getChildren(props, childComponents, calculatedProps);
+    var mappedChildren = children.map(function (child, index) {
+      var childProps = _assign({
+        animate: getAnimationProps(props, child, index, "victory chart")
+      }, child.props);
 
-    _this = _possibleConstructorReturn(this, (VictoryChart.__proto__ || Object.getPrototypeOf(VictoryChart)).call(this, props));
-    _this.state = {};
+      return React.cloneElement(child, childProps);
+    });
 
-    if (props.animate) {
-      _this.state = {
-        nodesShouldLoad: false,
-        nodesDoneLoad: false,
-        animating: true
-      };
-      _this.setAnimationState = Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
+    if (props.style && props.style.background) {
+      var backgroundComponent = getBackgroundWithProps(props, calculatedProps);
+      mappedChildren.unshift(backgroundComponent);
     }
 
-    return _this;
-  }
-
-  _createClass(VictoryChart, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      if (this.props.animate) {
-        if (!isEqual(this.props, nextProps)) {
-          this.setAnimationState(this.props, nextProps);
-          return false;
-        }
-      }
-
-      return true;
-    }
-  }, {
-    key: "getNewChildren",
-    value: function getNewChildren(props, childComponents, calculatedProps) {
-      var children = getChildren(props, childComponents, calculatedProps);
-      var getAnimationProps = Wrapper.getAnimationProps.bind(this);
-      var newChildren = children.map(function (child, index) {
-        var childProps = _assign({
-          animate: getAnimationProps(props, child, index)
-        }, child.props);
-
-        return React.cloneElement(child, childProps);
-      });
-
-      if (props.style && props.style.background) {
-        var backgroundComponent = getBackgroundWithProps(props, calculatedProps);
-        newChildren.unshift(backgroundComponent);
-      }
-
-      return newChildren;
-    }
-  }, {
-    key: "renderContainer",
-    value: function renderContainer(containerComponent, props) {
-      var containerProps = _defaults({}, containerComponent.props, props);
-
-      return React.cloneElement(containerComponent, containerProps);
-    }
-  }, {
-    key: "getContainerProps",
-    value: function getContainerProps(props, calculatedProps) {
-      var width = props.width,
-          height = props.height,
-          standalone = props.standalone,
-          theme = props.theme,
-          polar = props.polar,
-          name = props.name;
-      var domain = calculatedProps.domain,
-          scale = calculatedProps.scale,
-          style = calculatedProps.style,
-          origin = calculatedProps.origin,
-          radius = calculatedProps.radius,
-          horizontal = calculatedProps.horizontal;
+    return mappedChildren;
+  }, [getAnimationProps, childComponents, props, calculatedProps]);
+  var containerProps = React.useMemo(function () {
+    if (standalone) {
       return {
@@ -131,93 +92,77 @@ domain: domain,
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var props = this.state && this.state.nodesWillExit ? this.state.oldProps || this.props : this.props;
-      var modifiedProps = Helpers.modifyProps(props, fallbackProps, "chart");
-      var eventKey = modifiedProps.eventKey,
-          containerComponent = modifiedProps.containerComponent,
-          groupComponent = modifiedProps.groupComponent,
-          standalone = modifiedProps.standalone,
-          externalEventMutations = modifiedProps.externalEventMutations;
-      var axes = props.polar ? modifiedProps.defaultPolarAxes : modifiedProps.defaultAxes;
-      var childComponents = getChildComponents(modifiedProps, axes);
-      var calculatedProps = getCalculatedProps(modifiedProps, childComponents);
-      var newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps);
-      var containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {};
-      var container = standalone ? this.renderContainer(containerComponent, containerProps) : groupComponent;
-      var events = Wrapper.getAllEvents(props);
 
-      if (!_isEmpty(events)) {
-        return React.createElement(VictorySharedEvents, {
-          container: container,
-          eventKey: eventKey,
-          events: events,
-          externalEventMutations: externalEventMutations
-        }, newChildren);
-      }
+    return {};
+  }, [domain, scale, width, height, standalone, theme, style, horizontal, name, polar, radius, origin]);
+  var container = React.useMemo(function () {
+    if (standalone) {
+      var defaultContainerProps = _defaults({}, containerComponent.props, containerProps);
 
-      return React.cloneElement(container, container.props, newChildren);
+      return React.cloneElement(containerComponent, defaultContainerProps);
     }
-  }]);
 
-  return VictoryChart;
-}(React.Component);
+    return groupComponent;
+  }, [groupComponent, standalone, containerComponent, containerProps]);
+  var events = React.useMemo(function () {
+    return Wrapper.getAllEvents(props);
+  }, [props]);
+  var previousProps = usePreviousProps(initialProps);
+  React.useEffect(function () {
+    // This is called before dismount to keep state in sync
+    return function () {
+      if (initialProps.animate) {
+        setAnimationState(previousProps, initialProps);
+      }
+    };
+  }, [setAnimationState, previousProps, initialProps]);
 
-Object.defineProperty(VictoryChart, "displayName", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: "VictoryChart"
-});
-Object.defineProperty(VictoryChart, "propTypes", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: _objectSpread({}, CommonProps.baseProps, {
-    backgroundComponent: PropTypes.element,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    defaultAxes: PropTypes.shape({
-      independent: PropTypes.element,
-      dependent: PropTypes.element
-    }),
-    defaultPolarAxes: PropTypes.shape({
-      independent: PropTypes.element,
-      dependent: PropTypes.element
-    }),
-    endAngle: PropTypes.number,
-    innerRadius: CustomPropTypes.nonNegative,
-    prependDefaultAxes: PropTypes.bool,
-    startAngle: PropTypes.number
-  })
-});
-Object.defineProperty(VictoryChart, "defaultProps", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: {
-    backgroundComponent: React.createElement(Background, null),
-    containerComponent: React.createElement(VictoryContainer, null),
-    defaultAxes: {
-      independent: React.createElement(VictoryAxis, null),
-      dependent: React.createElement(VictoryAxis, {
-        dependentAxis: true
-      })
-    },
-    defaultPolarAxes: {
-      independent: React.createElement(VictoryPolarAxis, null),
-      dependent: React.createElement(VictoryPolarAxis, {
-        dependentAxis: true
-      })
-    },
-    groupComponent: React.createElement("g", null),
-    standalone: true,
-    theme: VictoryTheme.grayscale
+  if (!_isEmpty(events)) {
+    return React.createElement(VictorySharedEvents, {
+      container: container,
+      eventKey: eventKey,
+      events: events,
+      externalEventMutations: externalEventMutations
+    }, newChildren);
   }
+
+  return React.cloneElement(container, container.props, newChildren);
+};
+
+VictoryChart.propTypes = _objectSpread({}, CommonProps.baseProps, {
+  backgroundComponent: PropTypes.element,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  defaultAxes: PropTypes.shape({
+    independent: PropTypes.element,
+    dependent: PropTypes.element
+  }),
+  defaultPolarAxes: PropTypes.shape({
+    independent: PropTypes.element,
+    dependent: PropTypes.element
+  }),
+  endAngle: PropTypes.number,
+  innerRadius: CustomPropTypes.nonNegative,
+  prependDefaultAxes: PropTypes.bool,
+  startAngle: PropTypes.number
 });
-Object.defineProperty(VictoryChart, "expectedComponents", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: ["groupComponent", "containerComponent"]
-});
-export { VictoryChart as default };
+VictoryChart.defaultProps = {
+  backgroundComponent: React.createElement(Background, null),
+  containerComponent: React.createElement(VictoryContainer, null),
+  defaultAxes: {
+    independent: React.createElement(VictoryAxis, null),
+    dependent: React.createElement(VictoryAxis, {
+      dependentAxis: true
+    })
+  },
+  defaultPolarAxes: {
+    independent: React.createElement(VictoryPolarAxis, null),
+    dependent: React.createElement(VictoryPolarAxis, {
+      dependentAxis: true
+    })
+  },
+  groupComponent: React.createElement("g", null),
+  standalone: true,
+  theme: VictoryTheme.grayscale
+};
+var VictoryChartMemo = React.memo(VictoryChart, isEqual);
+VictoryChartMemo.displayName = "VictoryChart";
+VictoryChartMemo.expectedComponents = ["groupComponent", "containerComponent"];
+export default VictoryChartMemo;

lib/victory-chart.js

@@ -36,14 +36,2 @@ "use strict";
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 var fallbackProps = {
@@ -55,81 +43,60 @@ width: 450,
 
-var VictoryChart =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(VictoryChart, _React$Component);
+var VictoryChart = function (initialProps) {
+  var role = "chart";
 
-  function VictoryChart(props) {
-    var _this;
+  var _useAnimationState = (0, _victoryCore.useAnimationState)(),
+      getAnimationProps = _useAnimationState.getAnimationProps,
+      setAnimationState = _useAnimationState.setAnimationState,
+      getProps = _useAnimationState.getProps;
 
-    _classCallCheck(this, VictoryChart);
+  var props = getProps(initialProps);
 
-    _this = _possibleConstructorReturn(this, (VictoryChart.__proto__ || Object.getPrototypeOf(VictoryChart)).call(this, props));
-    _this.state = {};
+  var modifiedProps = _victoryCore.Helpers.modifyProps(props, fallbackProps, role);
 
-    if (props.animate) {
-      _this.state = {
-        nodesShouldLoad: false,
-        nodesDoneLoad: false,
-        animating: true
-      };
-      _this.setAnimationState = _victoryCore.Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
-    }
+  var eventKey = modifiedProps.eventKey,
+      containerComponent = modifiedProps.containerComponent,
+      standalone = modifiedProps.standalone,
+      groupComponent = modifiedProps.groupComponent,
+      externalEventMutations = modifiedProps.externalEventMutations,
+      width = modifiedProps.width,
+      height = modifiedProps.height,
+      theme = modifiedProps.theme,
+      polar = modifiedProps.polar,
+      name = modifiedProps.name;
+  var axes = props.polar ? modifiedProps.defaultPolarAxes : modifiedProps.defaultAxes;
 
-    return _this;
-  }
+  var childComponents = _react.default.useMemo(function () {
+    return (0, _helperMethods.getChildComponents)(modifiedProps, axes);
+  }, [modifiedProps, axes]);
 
-  _createClass(VictoryChart, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      if (this.props.animate) {
-        if (!(0, _reactFastCompare.default)(this.props, nextProps)) {
-          this.setAnimationState(this.props, nextProps);
-          return false;
-        }
-      }
+  var calculatedProps = _react.default.useMemo(function () {
+    return (0, _helperMethods.getCalculatedProps)(modifiedProps, childComponents);
+  }, [modifiedProps, childComponents]);
 
-      return true;
-    }
-  }, {
-    key: "getNewChildren",
-    value: function getNewChildren(props, childComponents, calculatedProps) {
-      var children = (0, _helperMethods.getChildren)(props, childComponents, calculatedProps);
+  var domain = calculatedProps.domain,
+      scale = calculatedProps.scale,
+      style = calculatedProps.style,
+      origin = calculatedProps.origin,
+      radius = calculatedProps.radius,
+      horizontal = calculatedProps.horizontal;
 
-      var getAnimationProps = _victoryCore.Wrapper.getAnimationProps.bind(this);
+  var newChildren = _react.default.useMemo(function () {
+    var children = (0, _helperMethods.getChildren)(props, childComponents, calculatedProps);
+    var mappedChildren = children.map(function (child, index) {
+      var childProps = (0, _assign2.default)({
+        animate: getAnimationProps(props, child, index, "victory chart")
+      }, child.props);
+      return _react.default.cloneElement(child, childProps);
+    });
 
-      var newChildren = children.map(function (child, index) {
-        var childProps = (0, _assign2.default)({
-          animate: getAnimationProps(props, child, index)
-        }, child.props);
-        return _react.default.cloneElement(child, childProps);
-      });
+    if (props.style && props.style.background) {
+      var backgroundComponent = (0, _helperMethods.getBackgroundWithProps)(props, calculatedProps);
+      mappedChildren.unshift(backgroundComponent);
+    }
 
-      if (props.style && props.style.background) {
-        var backgroundComponent = (0, _helperMethods.getBackgroundWithProps)(props, calculatedProps);
-        newChildren.unshift(backgroundComponent);
-      }
+    return mappedChildren;
+  }, [getAnimationProps, childComponents, props, calculatedProps]);
 
-      return newChildren;
-    }
-  }, {
-    key: "renderContainer",
-    value: function renderContainer(containerComponent, props) {
-      var containerProps = (0, _defaults2.default)({}, containerComponent.props, props);
-      return _react.default.cloneElement(containerComponent, containerProps);
-    }
-  }, {
-    key: "getContainerProps",
-    value: function getContainerProps(props, calculatedProps) {
-      var width = props.width,
-          height = props.height,
-          standalone = props.standalone,
-          theme = props.theme,
-          polar = props.polar,
-          name = props.name;
-      var domain = calculatedProps.domain,
-          scale = calculatedProps.scale,
-          style = calculatedProps.style,
-          origin = calculatedProps.origin,
-          radius = calculatedProps.radius,
-          horizontal = calculatedProps.horizontal;
+  var containerProps = _react.default.useMemo(function () {
+    if (standalone) {
       return {
@@ -150,96 +117,83 @@ domain: domain,
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var props = this.state && this.state.nodesWillExit ? this.state.oldProps || this.props : this.props;
 
-      var modifiedProps = _victoryCore.Helpers.modifyProps(props, fallbackProps, "chart");
+    return {};
+  }, [domain, scale, width, height, standalone, theme, style, horizontal, name, polar, radius, origin]);
 
-      var eventKey = modifiedProps.eventKey,
-          containerComponent = modifiedProps.containerComponent,
-          groupComponent = modifiedProps.groupComponent,
-          standalone = modifiedProps.standalone,
-          externalEventMutations = modifiedProps.externalEventMutations;
-      var axes = props.polar ? modifiedProps.defaultPolarAxes : modifiedProps.defaultAxes;
-      var childComponents = (0, _helperMethods.getChildComponents)(modifiedProps, axes);
-      var calculatedProps = (0, _helperMethods.getCalculatedProps)(modifiedProps, childComponents);
-      var newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps);
-      var containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {};
-      var container = standalone ? this.renderContainer(containerComponent, containerProps) : groupComponent;
+  var container = _react.default.useMemo(function () {
+    if (standalone) {
+      var defaultContainerProps = (0, _defaults2.default)({}, containerComponent.props, containerProps);
+      return _react.default.cloneElement(containerComponent, defaultContainerProps);
+    }
 
-      var events = _victoryCore.Wrapper.getAllEvents(props);
+    return groupComponent;
+  }, [groupComponent, standalone, containerComponent, containerProps]);
 
-      if (!(0, _isEmpty2.default)(events)) {
-        return _react.default.createElement(_victorySharedEvents.VictorySharedEvents, {
-          container: container,
-          eventKey: eventKey,
-          events: events,
-          externalEventMutations: externalEventMutations
-        }, newChildren);
+  var events = _react.default.useMemo(function () {
+    return _victoryCore.Wrapper.getAllEvents(props);
+  }, [props]);
+
+  var previousProps = (0, _victoryCore.usePreviousProps)(initialProps);
+
+  _react.default.useEffect(function () {
+    // This is called before dismount to keep state in sync
+    return function () {
+      if (initialProps.animate) {
+        setAnimationState(previousProps, initialProps);
       }
+    };
+  }, [setAnimationState, previousProps, initialProps]);
 
-      return _react.default.cloneElement(container, container.props, newChildren);
-    }
-  }]);
+  if (!(0, _isEmpty2.default)(events)) {
+    return _react.default.createElement(_victorySharedEvents.VictorySharedEvents, {
+      container: container,
+      eventKey: eventKey,
+      events: events,
+      externalEventMutations: externalEventMutations
+    }, newChildren);
+  }
 
-  return VictoryChart;
-}(_react.default.Component);
+  return _react.default.cloneElement(container, container.props, newChildren);
+};
 
-exports.default = VictoryChart;
-Object.defineProperty(VictoryChart, "displayName", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: "VictoryChart"
+VictoryChart.propTypes = _objectSpread({}, _victoryCore.CommonProps.baseProps, {
+  backgroundComponent: _propTypes.default.element,
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
+  defaultAxes: _propTypes.default.shape({
+    independent: _propTypes.default.element,
+    dependent: _propTypes.default.element
+  }),
+  defaultPolarAxes: _propTypes.default.shape({
+    independent: _propTypes.default.element,
+    dependent: _propTypes.default.element
+  }),
+  endAngle: _propTypes.default.number,
+  innerRadius: _victoryCore.PropTypes.nonNegative,
+  prependDefaultAxes: _propTypes.default.bool,
+  startAngle: _propTypes.default.number
 });
-Object.defineProperty(VictoryChart, "propTypes", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: _objectSpread({}, _victoryCore.CommonProps.baseProps, {
-    backgroundComponent: _propTypes.default.element,
-    children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
-    defaultAxes: _propTypes.default.shape({
-      independent: _propTypes.default.element,
-      dependent: _propTypes.default.element
-    }),
-    defaultPolarAxes: _propTypes.default.shape({
-      independent: _propTypes.default.element,
-      dependent: _propTypes.default.element
-    }),
-    endAngle: _propTypes.default.number,
-    innerRadius: _victoryCore.PropTypes.nonNegative,
-    prependDefaultAxes: _propTypes.default.bool,
-    startAngle: _propTypes.default.number
-  })
-});
-Object.defineProperty(VictoryChart, "defaultProps", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: {
-    backgroundComponent: _react.default.createElement(_victoryCore.Background, null),
-    containerComponent: _react.default.createElement(_victoryCore.VictoryContainer, null),
-    defaultAxes: {
-      independent: _react.default.createElement(_victoryAxis.VictoryAxis, null),
-      dependent: _react.default.createElement(_victoryAxis.VictoryAxis, {
-        dependentAxis: true
-      })
-    },
-    defaultPolarAxes: {
-      independent: _react.default.createElement(_victoryPolarAxis.VictoryPolarAxis, null),
-      dependent: _react.default.createElement(_victoryPolarAxis.VictoryPolarAxis, {
-        dependentAxis: true
-      })
-    },
-    groupComponent: _react.default.createElement("g", null),
-    standalone: true,
-    theme: _victoryCore.VictoryTheme.grayscale
-  }
-});
-Object.defineProperty(VictoryChart, "expectedComponents", {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  value: ["groupComponent", "containerComponent"]
-});
+VictoryChart.defaultProps = {
+  backgroundComponent: _react.default.createElement(_victoryCore.Background, null),
+  containerComponent: _react.default.createElement(_victoryCore.VictoryContainer, null),
+  defaultAxes: {
+    independent: _react.default.createElement(_victoryAxis.VictoryAxis, null),
+    dependent: _react.default.createElement(_victoryAxis.VictoryAxis, {
+      dependentAxis: true
+    })
+  },
+  defaultPolarAxes: {
+    independent: _react.default.createElement(_victoryPolarAxis.VictoryPolarAxis, null),
+    dependent: _react.default.createElement(_victoryPolarAxis.VictoryPolarAxis, {
+      dependentAxis: true
+    })
+  },
+  groupComponent: _react.default.createElement("g", null),
+  standalone: true,
+  theme: _victoryCore.VictoryTheme.grayscale
+};
+
+var VictoryChartMemo = _react.default.memo(VictoryChart, _reactFastCompare.default);
+
+VictoryChartMemo.displayName = "VictoryChart";
+VictoryChartMemo.expectedComponents = ["groupComponent", "containerComponent"];
+var _default = VictoryChartMemo;
+exports.default = _default;

package.json

 {
   "name": "victory-chart",
-  "version": "35.10.1",
+  "version": "35.11.0",
   "description": "Chart Component for Victory",
@@ -25,6 +25,6 @@ "keywords": [
     "react-fast-compare": "^2.0.0",
-    "victory-axis": "^35.10.1",
-    "victory-core": "^35.10.1",
-    "victory-polar-axis": "^35.10.1",
-    "victory-shared-events": "^35.10.1"
+    "victory-axis": "^35.11.0",
+    "victory-core": "^35.11.0",
+    "victory-polar-axis": "^35.11.0",
+    "victory-shared-events": "^35.11.0"
   },
@@ -31,0 +31,0 @@ "peerDependencies": {

src/victory-chart.js

@@ -11,3 +11,5 @@ import { defaults, assign, isEmpty } from "lodash";
   PropTypes as CustomPropTypes,
-  Wrapper
+  Wrapper,
+  usePreviousProps,
+  useAnimationState
 } from "victory-core";
@@ -31,74 +33,43 @@ import { VictorySharedEvents } from "victory-shared-events";
 
-export default class VictoryChart extends React.Component {
-  static displayName = "VictoryChart";
+const VictoryChart = (initialProps) => {
+  const role = "chart";
+  const { getAnimationProps, setAnimationState, getProps } =
+    useAnimationState();
+  const props = getProps(initialProps);
 
-  static propTypes = {
-    ...CommonProps.baseProps,
-    backgroundComponent: PropTypes.element,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]),
-    defaultAxes: PropTypes.shape({
-      independent: PropTypes.element,
-      dependent: PropTypes.element
-    }),
-    defaultPolarAxes: PropTypes.shape({
-      independent: PropTypes.element,
-      dependent: PropTypes.element
-    }),
-    endAngle: PropTypes.number,
-    innerRadius: CustomPropTypes.nonNegative,
-    prependDefaultAxes: PropTypes.bool,
-    startAngle: PropTypes.number
-  };
+  const modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
+  const {
+    eventKey,
+    containerComponent,
+    standalone,
+    groupComponent,
+    externalEventMutations,
+    width,
+    height,
+    theme,
+    polar,
+    name
+  } = modifiedProps;
 
-  static defaultProps = {
-    backgroundComponent: <Background />,
-    containerComponent: <VictoryContainer />,
-    defaultAxes: {
-      independent: <VictoryAxis />,
-      dependent: <VictoryAxis dependentAxis />
-    },
-    defaultPolarAxes: {
-      independent: <VictoryPolarAxis />,
-      dependent: <VictoryPolarAxis dependentAxis />
-    },
-    groupComponent: <g />,
-    standalone: true,
-    theme: VictoryTheme.grayscale
-  };
+  const axes = props.polar
+    ? modifiedProps.defaultPolarAxes
+    : modifiedProps.defaultAxes;
 
-  static expectedComponents = ["groupComponent", "containerComponent"];
+  const childComponents = React.useMemo(
+    () => getChildComponents(modifiedProps, axes),
+    [modifiedProps, axes]
+  );
 
-  constructor(props) {
-    super(props);
-    this.state = {};
-    if (props.animate) {
-      this.state = {
-        nodesShouldLoad: false,
-        nodesDoneLoad: false,
-        animating: true
-      };
-      this.setAnimationState = Wrapper.setAnimationState.bind(this);
-    }
-  }
+  const calculatedProps = React.useMemo(
+    () => getCalculatedProps(modifiedProps, childComponents),
+    [modifiedProps, childComponents]
+  );
+  const { domain, scale, style, origin, radius, horizontal } = calculatedProps;
 
-  shouldComponentUpdate(nextProps) {
-    if (this.props.animate) {
-      if (!isEqual(this.props, nextProps)) {
-        this.setAnimationState(this.props, nextProps);
-        return false;
-      }
-    }
-    return true;
-  }
-
-  getNewChildren(props, childComponents, calculatedProps) {
+  const newChildren = React.useMemo(() => {
     const children = getChildren(props, childComponents, calculatedProps);
-    const getAnimationProps = Wrapper.getAnimationProps.bind(this);
 
-    const newChildren = children.map((child, index) => {
+    const mappedChildren = children.map((child, index) => {
       const childProps = assign(
-        { animate: getAnimationProps(props, child, index) },
+        { animate: getAnimationProps(props, child, index, "victory chart") },
         child.props
@@ -115,78 +86,125 @@ );
 
-      newChildren.unshift(backgroundComponent);
+      mappedChildren.unshift(backgroundComponent);
     }
 
-    return newChildren;
-  }
+    return mappedChildren;
+  }, [getAnimationProps, childComponents, props, calculatedProps]);
 
-  renderContainer(containerComponent, props) {
-    const containerProps = defaults({}, containerComponent.props, props);
-    return React.cloneElement(containerComponent, containerProps);
-  }
+  const containerProps = React.useMemo(() => {
+    if (standalone) {
+      return {
+        domain,
+        scale,
+        width,
+        height,
+        standalone,
+        theme,
+        style: style.parent,
+        horizontal,
+        name,
+        polar,
+        radius,
+        origin: polar ? origin : undefined
+      };
+    }
+    return {};
+  }, [
+    domain,
+    scale,
+    width,
+    height,
+    standalone,
+    theme,
+    style,
+    horizontal,
+    name,
+    polar,
+    radius,
+    origin
+  ]);
 
-  getContainerProps(props, calculatedProps) {
-    const { width, height, standalone, theme, polar, name } = props;
-    const { domain, scale, style, origin, radius, horizontal } =
-      calculatedProps;
-    return {
-      domain,
-      scale,
-      width,
-      height,
-      standalone,
-      theme,
-      style: style.parent,
-      horizontal,
-      name,
-      polar,
-      radius,
-      origin: polar ? origin : undefined
+  const container = React.useMemo(() => {
+    if (standalone) {
+      const defaultContainerProps = defaults(
+        {},
+        containerComponent.props,
+        containerProps
+      );
+      return React.cloneElement(containerComponent, defaultContainerProps);
+    }
+    return groupComponent;
+  }, [groupComponent, standalone, containerComponent, containerProps]);
+
+  const events = React.useMemo(() => {
+    return Wrapper.getAllEvents(props);
+  }, [props]);
+
+  const previousProps = usePreviousProps(initialProps);
+
+  React.useEffect(() => {
+    // This is called before dismount to keep state in sync
+    return () => {
+      if (initialProps.animate) {
+        setAnimationState(previousProps, initialProps);
+      }
     };
-  }
+  }, [setAnimationState, previousProps, initialProps]);
 
-  render() {
-    const props =
-      this.state && this.state.nodesWillExit
-        ? this.state.oldProps || this.props
-        : this.props;
-    const modifiedProps = Helpers.modifyProps(props, fallbackProps, "chart");
-    const {
-      eventKey,
-      containerComponent,
-      groupComponent,
-      standalone,
-      externalEventMutations
-    } = modifiedProps;
-    const axes = props.polar
-      ? modifiedProps.defaultPolarAxes
-      : modifiedProps.defaultAxes;
-    const childComponents = getChildComponents(modifiedProps, axes);
-    const calculatedProps = getCalculatedProps(modifiedProps, childComponents);
-    const newChildren = this.getNewChildren(
-      modifiedProps,
-      childComponents,
-      calculatedProps
+  if (!isEmpty(events)) {
+    return (
+      <VictorySharedEvents
+        container={container}
+        eventKey={eventKey}
+        events={events}
+        externalEventMutations={externalEventMutations}
+      >
+        {newChildren}
+      </VictorySharedEvents>
     );
-    const containerProps = standalone
-      ? this.getContainerProps(modifiedProps, calculatedProps)
-      : {};
-    const container = standalone
-      ? this.renderContainer(containerComponent, containerProps)
-      : groupComponent;
-    const events = Wrapper.getAllEvents(props);
+  }
+  return React.cloneElement(container, container.props, newChildren);
+};
 
-    if (!isEmpty(events)) {
-      return (
-        <VictorySharedEvents
-          container={container}
-          eventKey={eventKey}
-          events={events}
-          externalEventMutations={externalEventMutations}
-        >
-          {newChildren}
-        </VictorySharedEvents>
-      );
-    }
-    return React.cloneElement(container, container.props, newChildren);
-  }
-}
+VictoryChart.propTypes = {
+  ...CommonProps.baseProps,
+  backgroundComponent: PropTypes.element,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]),
+  defaultAxes: PropTypes.shape({
+    independent: PropTypes.element,
+    dependent: PropTypes.element
+  }),
+  defaultPolarAxes: PropTypes.shape({
+    independent: PropTypes.element,
+    dependent: PropTypes.element
+  }),
+  endAngle: PropTypes.number,
+  innerRadius: CustomPropTypes.nonNegative,
+  prependDefaultAxes: PropTypes.bool,
+  startAngle: PropTypes.number
+};
+
+VictoryChart.defaultProps = {
+  backgroundComponent: <Background />,
+  containerComponent: <VictoryContainer />,
+  defaultAxes: {
+    independent: <VictoryAxis />,
+    dependent: <VictoryAxis dependentAxis />
+  },
+  defaultPolarAxes: {
+    independent: <VictoryPolarAxis />,
+    dependent: <VictoryPolarAxis dependentAxis />
+  },
+  groupComponent: <g />,
+  standalone: true,
+  theme: VictoryTheme.grayscale
+};
+
+const VictoryChartMemo = React.memo(VictoryChart, isEqual);
+
+VictoryChartMemo.displayName = "VictoryChart";
+VictoryChartMemo.expectedComponents = ["groupComponent", "containerComponent"];
+
+export default VictoryChartMemo;

No alert changes

Improved metrics

Total package byte prevSize

1301760

increased by0.17%

Lines of code

23065

increased by0.03%

Dependency changes

• Updatedvictory-axis@^35.11.0

• Updatedvictory-core@^35.11.0

• Updatedvictory-polar-axis@^35.11.0

• Updatedvictory-shared-events@^35.11.0