victory-stack 30.6.1 → 31.2.0

package/es/helper-methods.js

@@ -117,10 +117,7 @@ function getCalculatedProps(props, childComponents) {
   var horizontal = props.horizontal || childComponents.every(function (component) {
     return component.props.horizontal;
   });
-  var categories = {
-    x: Wrapper.getCategories(props, "x"),
-    y: Wrapper.getCategories(props, "y")
-  };
+  var categories = Wrapper.getCategories(props, childComponents);
   var datasets = stackData(props);
   var children = childComponents.map(function (c, i) {
     return React.cloneElement(c, {

package/es/victory-stack.js

@@ -1,3 +1,4 @@
+import _isEmpty from "lodash/isEmpty";
 import _defaults from "lodash/defaults";
 import _assign from "lodash/assign";
 
@@ -22,6 +23,7 @@ import React from "react";
 import { Helpers, VictoryContainer, VictoryTheme, CommonProps, Wrapper } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
 import { getChildren, getCalculatedProps } from "./helper-methods";
+import isEqual from "react-fast-compare";
 var fallbackProps = {
   width: 450,
   height: 300,
@@ -47,27 +49,23 @@ function (_React$Component) {
         animating: true
       };
       _this.setAnimationState = Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
-      _this.events = Wrapper.getAllEvents(props);
     }
 
     return _this;
   }
 
   _createClass(VictoryStack, [{
-    key: "componentWillMount",
-    value: function componentWillMount() {
-      this.events = Wrapper.getAllEvents(this.props);
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "shouldComponentUpdate",
+    value: function 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);
-    } // the old ones were bad
-
+      return true;
+    }
   }, {
     key: "getNewChildren",
     value: function getNewChildren(props, childComponents, calculatedProps) {
@@ -132,12 +130,13 @@ function (_React$Component) {
       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 (this.events) {
+      if (!_isEmpty(events)) {
         return React.createElement(VictorySharedEvents, {
           container: container,
           eventKey: eventKey,
-          events: this.events,
+          events: events,
           externalEventMutations: externalEventMutations
         }, newChildren);
       }

package/lib/helper-methods.js

@@ -132,10 +132,9 @@ function getCalculatedProps(props, childComponents) {
   var horizontal = props.horizontal || childComponents.every(function (component) {
     return component.props.horizontal;
   });
-  var categories = {
-    x: _victoryCore.Wrapper.getCategories(props, "x"),
-    y: _victoryCore.Wrapper.getCategories(props, "y")
-  };
+
+  var categories = _victoryCore.Wrapper.getCategories(props, childComponents);
+
   var datasets = stackData(props);
   var children = childComponents.map(function (c, i) {
     return _react.default.cloneElement(c, {

package/lib/victory-stack.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
+
 var _defaults2 = _interopRequireDefault(require("lodash/defaults"));
 
 var _assign2 = _interopRequireDefault(require("lodash/assign"));
@@ -19,6 +21,8 @@ var _victorySharedEvents = require("victory-shared-events");
 
 var _helperMethods = require("./helper-methods");
 
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(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; }
@@ -62,27 +66,23 @@ function (_React$Component) {
         animating: true
       };
       _this.setAnimationState = _victoryCore.Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
-      _this.events = _victoryCore.Wrapper.getAllEvents(props);
     }
 
     return _this;
   }
 
   _createClass(VictoryStack, [{
-    key: "componentWillMount",
-    value: function componentWillMount() {
-      this.events = _victoryCore.Wrapper.getAllEvents(this.props);
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
       if (this.props.animate) {
-        this.setAnimationState(this.props, nextProps);
+        if (!(0, _reactFastCompare.default)(this.props, nextProps)) {
+          this.setAnimationState(this.props, nextProps);
+          return false;
+        }
       }
 
-      this.events = _victoryCore.Wrapper.getAllEvents(nextProps);
-    } // the old ones were bad
-
+      return true;
+    }
   }, {
     key: "getNewChildren",
     value: function getNewChildren(props, childComponents, calculatedProps) {
@@ -152,11 +152,13 @@ function (_React$Component) {
       var containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {};
       var container = standalone ? this.renderContainer(containerComponent, containerProps) : groupComponent;
 
-      if (this.events) {
+      var events = _victoryCore.Wrapper.getAllEvents(props);
+
+      if (!(0, _isEmpty2.default)(events)) {
         return _react.default.createElement(_victorySharedEvents.VictorySharedEvents, {
           container: container,
           eventKey: eventKey,
-          events: this.events,
+          events: events,
           externalEventMutations: externalEventMutations
         }, newChildren);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-stack",
-  "version": "30.6.1",
+  "version": "31.2.0",
   "description": "Stack Layout Component for Victory",
   "keywords": [
     "data visualization",
@@ -21,7 +21,8 @@
   "dependencies": {
     "lodash": "^4.17.5",
     "prop-types": "^15.5.8",
-    "victory-core": "^30.6.1"
+    "react-fast-compare": "^2.0.0",
+    "victory-core": "^31.2.0"
   },
   "scripts": {
     "version": "nps build-libs && nps build-dists"

package/src/helper-methods.js

@@ -57,17 +57,22 @@ function getY0(datum, index, datasets) {
   const y = datum._y;
   const previousDatasets = datasets.slice(0, index);
   const previousPoints = previousDatasets.reduce((prev, dataset) => {
-    return prev.concat(dataset
-      .filter((previousDatum) => datum._x instanceof Date
-        ? previousDatum._x.getTime() === datum._x.getTime()
-        : previousDatum._x === datum._x)
-      .map((previousDatum) => previousDatum._y || 0)
+    return prev.concat(
+      dataset
+        .filter((previousDatum) =>
+          datum._x instanceof Date
+            ? previousDatum._x.getTime() === datum._x.getTime()
+            : previousDatum._x === datum._x
+        )
+        .map((previousDatum) => previousDatum._y || 0)
     );
   }, []);
-  const y0 = previousPoints.length && previousPoints.reduce((memo, value) => {
-    const sameSign = (y < 0 && value < 0) || (y >= 0 && value >= 0);
-    return sameSign ? +value + memo : memo;
-  }, 0);
+  const y0 =
+    previousPoints.length &&
+    previousPoints.reduce((memo, value) => {
+      const sameSign = (y < 0 && value < 0) || (y >= 0 && value >= 0);
+      return sameSign ? +value + memo : memo;
+    }, 0);
   return previousPoints.some((point) => point instanceof Date) ? new Date(y0) : y0;
 }
 
@@ -77,15 +82,19 @@ function addLayoutData(props, datasets, index) {
   return datasets[index].map((datum) => {
     const yOffset = getY0(datum, index, datasets) || 0;
     return assign({}, datum, {
-      _y0: !(datum._y instanceof Date) ? yOffset : (
-        yOffset ? new Date(yOffset) : datum._y
-      ),
-      _y1: datum._y === null ? null : (
-        datum._y instanceof Date ? new Date(+datum._y + +yOffset) : datum._y + yOffset
-      ),
-      _x1: datum._x === null ? null : (
-        datum._x instanceof Date ? new Date(+datum._x + +xOffset) : datum._x + xOffset
-      )
+      _y0: !(datum._y instanceof Date) ? yOffset : yOffset ? new Date(yOffset) : datum._y,
+      _y1:
+        datum._y === null
+          ? null
+          : datum._y instanceof Date
+          ? new Date(+datum._y + +yOffset)
+          : datum._y + yOffset,
+      _x1:
+        datum._x === null
+          ? null
+          : datum._x instanceof Date
+          ? new Date(+datum._x + +xOffset)
+          : datum._x + xOffset
     });
   });
 }
@@ -101,13 +110,9 @@ function getCalculatedProps(props, childComponents) {
   childComponents = childComponents || React.Children.toArray(props.children);
   const role = "stack";
   const style = Wrapper.getStyle(props.theme, props.style, role);
-  const horizontal = props.horizontal || childComponents.every(
-    (component) => component.props.horizontal
-  );
-  const categories = {
-    x: Wrapper.getCategories(props, "x"),
-    y: Wrapper.getCategories(props, "y")
-  };
+  const horizontal =
+    props.horizontal || childComponents.every((component) => component.props.horizontal);
+  const categories = Wrapper.getCategories(props, childComponents);
   const datasets = stackData(props);
   const children = childComponents.map((c, i) => {
     return React.cloneElement(c, { data: datasets[i] });
@@ -163,8 +168,7 @@ function getColorScale(props, child) {
   if (role !== "group" && role !== "stack") {
     return undefined;
   }
-  return props.theme ? colorScaleOptions || props.theme.props.colorScale
-  : colorScaleOptions;
+  return props.theme ? colorScaleOptions || props.theme.props.colorScale : colorScaleOptions;
 }
 
 function getChildren(props, childComponents, calculatedProps) {
@@ -180,20 +184,25 @@ function getChildren(props, childComponents, calculatedProps) {
     const style = Wrapper.getChildStyle(child, index, calculatedProps);
     const labels = props.labels ? getLabels(props, datasets, index) : child.props.labels;
     const name = child.props.name || `${parentName}-${role}-${index}`;
-    return React.cloneElement(child, assign({
-      key: `${name}-key-${index}`,
-      labels,
-      name,
-      domainPadding: child.props.domainPadding || props.domainPadding,
-      theme: props.theme,
-      labelComponent: props.labelComponent || child.props.labelComponent,
-      style,
-      colorScale: getColorScale(props, child),
-      data,
-      polar: props.polar
-    }, childProps));
+    return React.cloneElement(
+      child,
+      assign(
+        {
+          key: `${name}-key-${index}`,
+          labels,
+          name,
+          domainPadding: child.props.domainPadding || props.domainPadding,
+          theme: props.theme,
+          labelComponent: props.labelComponent || child.props.labelComponent,
+          style,
+          colorScale: getColorScale(props, child),
+          data,
+          polar: props.polar
+        },
+        childProps
+      )
+    );
   });
 }
 
-
 export { getChildren, getCalculatedProps };

package/src/victory-stack.js

@@ -1,9 +1,10 @@
-import { assign, defaults } from "lodash";
+import { assign, defaults, isEmpty } from "lodash";
 import PropTypes from "prop-types";
 import React from "react";
 import { Helpers, VictoryContainer, VictoryTheme, CommonProps, Wrapper } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
 import { getChildren, getCalculatedProps } from "./helper-methods";
+import isEqual from "react-fast-compare";
 
 const fallbackProps = {
   width: 450,
@@ -21,40 +22,46 @@ export default class VictoryStack extends React.Component {
     categories: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.string),
       PropTypes.shape({
-        x: PropTypes.arrayOf(PropTypes.string), y: PropTypes.arrayOf(PropTypes.string)
+        x: PropTypes.arrayOf(PropTypes.string),
+        y: PropTypes.arrayOf(PropTypes.string)
       })
     ]),
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node), PropTypes.node
-    ]),
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     colorScale: PropTypes.oneOfType([
       PropTypes.arrayOf(PropTypes.string),
       PropTypes.oneOf([
-        "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"
+        "grayscale",
+        "qualitative",
+        "heatmap",
+        "warm",
+        "cool",
+        "red",
+        "green",
+        "blue"
       ])
     ]),
     fillInMissingData: PropTypes.bool,
     horizontal: PropTypes.bool,
     labelComponent: PropTypes.element,
-    labels: PropTypes.oneOfType([ PropTypes.func, PropTypes.array ]),
+    labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
     style: PropTypes.shape({
-      parent: PropTypes.object, data: PropTypes.object, labels: PropTypes.object
+      parent: PropTypes.object,
+      data: PropTypes.object,
+      labels: PropTypes.object
     }),
     xOffset: PropTypes.number
   };
 
   static defaultProps = {
-    containerComponent: <VictoryContainer/>,
-    groupComponent: <g/>,
+    containerComponent: <VictoryContainer />,
+    groupComponent: <g />,
     scale: "linear",
     standalone: true,
-    theme: VictoryTheme. grayscale,
+    theme: VictoryTheme.grayscale,
     fillInMissingData: true
   };
 
-  static expectedComponents = [
-    "groupComponent", "containerComponent", "labelComponent"
-  ];
+  static expectedComponents = ["groupComponent", "containerComponent", "labelComponent"];
 
   static getChildren = getChildren;
 
@@ -67,22 +74,19 @@ export default class VictoryStack extends React.Component {
         animating: true
       };
       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);
@@ -101,31 +105,46 @@ export default class VictoryStack extends React.Component {
     const { width, height, standalone, theme, polar, horizontal, name } = props;
     const { domain, scale, style, origin } = calculatedProps;
     return {
-      domain, scale, width, height, standalone, theme, style: style.parent, horizontal,
-      polar, origin, name
+      domain,
+      scale,
+      width,
+      height,
+      standalone,
+      theme,
+      style: style.parent,
+      horizontal,
+      polar,
+      origin,
+      name
     };
   }
 
   render() {
     const { role } = this.constructor;
-    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, role);
     const {
-      eventKey, containerComponent, standalone, groupComponent, externalEventMutations
+      eventKey,
+      containerComponent,
+      standalone,
+      groupComponent,
+      externalEventMutations
     } = modifiedProps;
     const childComponents = React.Children.toArray(modifiedProps.children);
     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}