victory-chart 35.11.2 → 36.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-chart",
-  "version": "35.11.2",
+  "version": "36.1.0",
   "description": "Chart Component for Victory",
   "keywords": [
     "data visualization",
@@ -22,16 +22,17 @@
     "lodash": "^4.17.19",
     "prop-types": "^15.5.8",
     "react-fast-compare": "^2.0.0",
-    "victory-axis": "^35.11.2",
-    "victory-core": "^35.11.2",
-    "victory-polar-axis": "^35.11.2",
-    "victory-shared-events": "^35.11.2"
+    "victory-axis": "^36.1.0",
+    "victory-core": "^36.1.0",
+    "victory-polar-axis": "^36.1.0",
+    "victory-shared-events": "^36.1.0"
   },
   "peerDependencies": {
     "react": "^16.6.0 || ^17.0.0"
   },
   "scripts": {
-    "version": "nps build-libs && nps build-dists"
+    "version": "yarn run nps build-libs && nps build-dists"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "038cd9b70d9ce54ac6b861014165583760734c99"
 }

package/src/victory-chart.js

@@ -8,7 +8,9 @@ import {
   VictoryTheme,
   CommonProps,
   PropTypes as CustomPropTypes,
-  Wrapper
+  Wrapper,
+  usePreviousProps,
+  useAnimationState
 } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
 import { VictoryAxis } from "victory-axis";
@@ -27,78 +29,47 @@ const fallbackProps = {
   padding: 50
 };
 
-export default class VictoryChart extends React.Component {
-  static displayName = "VictoryChart";
-
-  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
-  };
-
-  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
-  };
-
-  static expectedComponents = ["groupComponent", "containerComponent"];
-
-  constructor(props) {
-    super(props);
-    this.state = {};
-    if (props.animate) {
-      this.state = {
-        nodesShouldLoad: false,
-        nodesDoneLoad: false,
-        animating: true
-      };
-      this.setAnimationState = Wrapper.setAnimationState.bind(this);
-    }
-  }
-
-  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 VictoryChart = (initialProps) => {
+  const role = "chart";
+  const { getAnimationProps, setAnimationState, getProps } =
+    useAnimationState();
+  const props = getProps(initialProps);
+
+  const modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
+  const {
+    eventKey,
+    containerComponent,
+    standalone,
+    groupComponent,
+    externalEventMutations,
+    width,
+    height,
+    theme,
+    polar,
+    name
+  } = modifiedProps;
+
+  const axes = props.polar
+    ? modifiedProps.defaultPolarAxes
+    : modifiedProps.defaultAxes;
+
+  const childComponents = React.useMemo(
+    () => getChildComponents(modifiedProps, axes),
+    [modifiedProps, axes]
+  );
+
+  const calculatedProps = React.useMemo(
+    () => getCalculatedProps(modifiedProps, childComponents),
+    [modifiedProps, childComponents]
+  );
+  const { domain, scale, style, origin, radius, horizontal } = 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
       );
       return React.cloneElement(child, childProps);
@@ -110,80 +81,127 @@ export default class VictoryChart extends React.Component {
         calculatedProps
       );
 
-      newChildren.unshift(backgroundComponent);
+      mappedChildren.unshift(backgroundComponent);
     }
 
-    return newChildren;
-  }
+    return mappedChildren;
+  }, [getAnimationProps, childComponents, props, calculatedProps]);
+
+  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
+  ]);
+
+  const container = React.useMemo(() => {
+    if (standalone) {
+      const defaultContainerProps = defaults(
+        {},
+        containerComponent.props,
+        containerProps
+      );
+      return React.cloneElement(containerComponent, defaultContainerProps);
+    }
+    return groupComponent;
+  }, [groupComponent, standalone, containerComponent, containerProps]);
 
-  renderContainer(containerComponent, props) {
-    const containerProps = defaults({}, containerComponent.props, props);
-    return React.cloneElement(containerComponent, containerProps);
-  }
+  const events = React.useMemo(() => {
+    return Wrapper.getAllEvents(props);
+  }, [props]);
 
-  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 previousProps = usePreviousProps(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
+  React.useEffect(() => {
+    // This is called before dismount to keep state in sync
+    return () => {
+      if (initialProps.animate) {
+        setAnimationState(previousProps, initialProps);
+      }
+    };
+  }, [setAnimationState, previousProps, initialProps]);
+
+  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);
-
-    if (!isEmpty(events)) {
-      return (
-        <VictorySharedEvents
-          container={container}
-          eventKey={eventKey}
-          events={events}
-          externalEventMutations={externalEventMutations}
-        >
-          {newChildren}
-        </VictorySharedEvents>
-      );
-    }
-    return React.cloneElement(container, container.props, newChildren);
   }
-}
+  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;