victory-chart 30.6.1 → 31.2.0

package/src/victory-chart.js

@@ -1,13 +1,19 @@
-import { defaults, assign } from "lodash";
+import { defaults, assign, isEmpty } from "lodash";
 import PropTypes from "prop-types";
 import React from "react";
 import {
-  Helpers, VictoryContainer, VictoryTheme, CommonProps, PropTypes as CustomPropTypes, Wrapper
+  Helpers,
+  VictoryContainer,
+  VictoryTheme,
+  CommonProps,
+  PropTypes as CustomPropTypes,
+  Wrapper
 } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
 import { VictoryAxis } from "victory-axis";
 import { VictoryPolarAxis } from "victory-polar-axis";
 import { getChildComponents, getCalculatedProps, getChildren } from "./helper-methods";
+import isEqual from "react-fast-compare";
 
 const fallbackProps = {
   width: 450,
@@ -20,10 +26,7 @@ export default class VictoryChart extends React.Component {
 
   static propTypes = {
     ...CommonProps.baseProps,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]),
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     defaultAxes: PropTypes.shape({
       independent: PropTypes.element,
       dependent: PropTypes.element
@@ -38,23 +41,21 @@ export default class VictoryChart extends React.Component {
   };
 
   static defaultProps = {
-    containerComponent: <VictoryContainer/>,
+    containerComponent: <VictoryContainer />,
     defaultAxes: {
-      independent: <VictoryAxis/>,
-      dependent: <VictoryAxis dependentAxis/>
+      independent: <VictoryAxis />,
+      dependent: <VictoryAxis dependentAxis />
     },
     defaultPolarAxes: {
-      independent: <VictoryPolarAxis/>,
-      dependent: <VictoryPolarAxis dependentAxis/>
+      independent: <VictoryPolarAxis />,
+      dependent: <VictoryPolarAxis dependentAxis />
     },
-    groupComponent: <g/>,
+    groupComponent: <g />,
     standalone: true,
     theme: VictoryTheme.grayscale
   };
 
-  static expectedComponents = [
-    "groupComponent", "containerComponent"
-  ];
+  static expectedComponents = ["groupComponent", "containerComponent"];
 
   constructor(props) {
     super(props);
@@ -65,23 +66,20 @@ export default class VictoryChart extends React.Component {
         nodesDoneLoad: false,
         animating: true
       };
+      this.setAnimationState = Wrapper.setAnimationState.bind(this);
     }
-    this.setAnimationState = Wrapper.setAnimationState.bind(this);
-    this.events = Wrapper.getAllEvents(props);
   }
 
-  componentWillMount() {
-    this.events = Wrapper.getAllEvents(this.props);
-  }
-
-  componentWillReceiveProps(nextProps) {
+  shouldComponentUpdate(nextProps) {
     if (this.props.animate) {
-      this.setAnimationState(this.props, nextProps);
+      if (!isEqual(this.props, nextProps)) {
+        this.setAnimationState(this.props, nextProps);
+        return false;
+      }
     }
-    this.events = Wrapper.getAllEvents(nextProps);
+    return true;
   }
 
-  // the old ones were bad
   getNewChildren(props, childComponents, calculatedProps) {
     const children = getChildren(props, childComponents, calculatedProps);
     const getAnimationProps = Wrapper.getAnimationProps.bind(this);
@@ -100,31 +98,47 @@ export default class VictoryChart extends React.Component {
     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
+      domain,
+      scale,
+      width,
+      height,
+      standalone,
+      theme,
+      style: style.parent,
+      horizontal,
+      name,
+      polar,
+      radius,
+      origin: polar ? origin : undefined
     };
   }
 
   render() {
-    const props = this.state && this.state.nodesWillExit ?
-      this.state.oldProps || this.props : this.props;
+    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
+      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);
     const containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {};
-    const container = standalone ?
-      this.renderContainer(containerComponent, containerProps) : groupComponent;
-    if (this.events) {
+    const container = standalone
+      ? this.renderContainer(containerComponent, containerProps)
+      : groupComponent;
+    const events = Wrapper.getAllEvents(props);
+    if (!isEmpty(events)) {
       return (
         <VictorySharedEvents
           container={container}
           eventKey={eventKey}
-          events={this.events}
+          events={events}
           externalEventMutations={externalEventMutations}
         >
           {newChildren}