victory-chart 30.6.1 → 31.2.0

package/es/helper-methods.js

@@ -5,7 +5,7 @@ import _defaults from "lodash/defaults";
 
 /* eslint-disable no-use-before-define */
 import React from "react";
-import { Log, Helpers, Scale, Axis, Wrapper } from "victory-core";
+import { Helpers, Scale, Axis, Wrapper } from "victory-core";
 
 function getAxisProps(child, props, calculatedProps) {
   var domain = calculatedProps.domain,
@@ -24,7 +24,8 @@ function getAxisProps(child, props, calculatedProps) {
   var crossAxis = childProps.crossAxis === false ? false : true;
   var orientation = Axis.getOrientation(child, axis, originSign[otherAxis]);
   return {
-    stringMap: stringMap[currentAxis],
+    stringMap: stringMap,
+    horizontal: horizontal,
     categories: categories[currentAxis],
     startAngle: props.startAngle,
     endAngle: props.endAngle,
@@ -72,14 +73,8 @@ function getCalculatedProps(props, childComponents) {
   var style = getStyles(props);
   var horizontal = Helpers.isHorizontal(props); // TODO: check
 
-  var categories = {
-    x: Wrapper.getCategories(props, "x", childComponents),
-    y: Wrapper.getCategories(props, "y", childComponents)
-  };
-  var stringMap = {
-    x: createStringMap(props, "x", childComponents),
-    y: createStringMap(props, "y", childComponents)
-  };
+  var categories = Wrapper.getCategories(props, childComponents);
+  var stringMap = createStringMap(props, childComponents);
   var axisComponents = {
     x: Axis.getAxisComponent(childComponents, "x"),
     y: Axis.getAxisComponent(childComponents, "y")
@@ -181,22 +176,7 @@ var getChildComponents = function (props, defaultAxes) {
     return childComponents.concat([defaultAxes.independent, defaultAxes.dependent]);
   }
 
-  var axisCount = 0;
-  return childComponents.filter(function (child) {
-    var role = child.type && child.type.role;
-    var childProps = child.props || {};
-
-    if (role !== "axis" || childProps.dependentAxis) {
-      return true;
-    } else if (axisCount < 1) {
-      axisCount++;
-      return true;
-    } else {
-      var msg = "Only one independent VictoryAxis component is allowed when " + "using the VictoryChart wrapper. Only the first axis will be used. Please compose " + "multi-axis charts manually";
-      Log.warn(msg);
-      return false;
-    }
-  });
+  return childComponents;
 };
 
 var getDefaultDomainPadding = function (childComponents, horizontal) {
@@ -265,12 +245,20 @@ var getAxisOffset = function (props, calculatedProps) {
   };
 };
 
-var createStringMap = function (props, axis, childComponents) {
-  var allStrings = Wrapper.getStringsFromChildren(props, axis, childComponents);
-  return allStrings.length === 0 ? null : allStrings.reduce(function (memo, string, index) {
+var createStringMap = function (props, childComponents) {
+  var allStrings = Wrapper.getStringsFromChildren(props, childComponents);
+  var x = !allStrings.x || allStrings.x.length === 0 ? null : allStrings.x.reduce(function (memo, string, index) {
+    memo[string] = index + 1;
+    return memo;
+  }, {});
+  var y = !allStrings.y || allStrings.y.length === 0 ? null : allStrings.y.reduce(function (memo, string, index) {
     memo[string] = index + 1;
     return memo;
   }, {});
+  return {
+    x: x,
+    y: y
+  };
 };
 
 export { getChildren, getCalculatedProps, getChildComponents };

package/es/victory-chart.js

@@ -1,3 +1,4 @@
+import _isEmpty from "lodash/isEmpty";
 import _assign from "lodash/assign";
 import _defaults from "lodash/defaults";
 
@@ -24,6 +25,7 @@ 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";
 var fallbackProps = {
   width: 450,
   height: 300,
@@ -49,28 +51,24 @@ function (_React$Component) {
         nodesDoneLoad: false,
         animating: true
       };
+      _this.setAnimationState = Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
     }
 
-    _this.setAnimationState = Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
-    _this.events = Wrapper.getAllEvents(props);
     return _this;
   }
 
   _createClass(VictoryChart, [{
-    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) {
@@ -137,12 +135,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

@@ -41,7 +41,8 @@ function getAxisProps(child, props, calculatedProps) {
   var orientation = _victoryCore.Axis.getOrientation(child, axis, originSign[otherAxis]);
 
   return {
-    stringMap: stringMap[currentAxis],
+    stringMap: stringMap,
+    horizontal: horizontal,
     categories: categories[currentAxis],
     startAngle: props.startAngle,
     endAngle: props.endAngle,
@@ -91,14 +92,9 @@ function getCalculatedProps(props, childComponents) {
   var horizontal = _victoryCore.Helpers.isHorizontal(props); // TODO: check
 
 
-  var categories = {
-    x: _victoryCore.Wrapper.getCategories(props, "x", childComponents),
-    y: _victoryCore.Wrapper.getCategories(props, "y", childComponents)
-  };
-  var stringMap = {
-    x: createStringMap(props, "x", childComponents),
-    y: createStringMap(props, "y", childComponents)
-  };
+  var categories = _victoryCore.Wrapper.getCategories(props, childComponents);
+
+  var stringMap = createStringMap(props, childComponents);
   var axisComponents = {
     x: _victoryCore.Axis.getAxisComponent(childComponents, "x"),
     y: _victoryCore.Axis.getAxisComponent(childComponents, "y")
@@ -200,24 +196,7 @@ var getChildComponents = function (props, defaultAxes) {
     return childComponents.concat([defaultAxes.independent, defaultAxes.dependent]);
   }
 
-  var axisCount = 0;
-  return childComponents.filter(function (child) {
-    var role = child.type && child.type.role;
-    var childProps = child.props || {};
-
-    if (role !== "axis" || childProps.dependentAxis) {
-      return true;
-    } else if (axisCount < 1) {
-      axisCount++;
-      return true;
-    } else {
-      var msg = "Only one independent VictoryAxis component is allowed when " + "using the VictoryChart wrapper. Only the first axis will be used. Please compose " + "multi-axis charts manually";
-
-      _victoryCore.Log.warn(msg);
-
-      return false;
-    }
-  });
+  return childComponents;
 };
 
 exports.getChildComponents = getChildComponents;
@@ -291,11 +270,19 @@ var getAxisOffset = function (props, calculatedProps) {
   };
 };
 
-var createStringMap = function (props, axis, childComponents) {
-  var allStrings = _victoryCore.Wrapper.getStringsFromChildren(props, axis, childComponents);
+var createStringMap = function (props, childComponents) {
+  var allStrings = _victoryCore.Wrapper.getStringsFromChildren(props, childComponents);
 
-  return allStrings.length === 0 ? null : allStrings.reduce(function (memo, string, index) {
+  var x = !allStrings.x || allStrings.x.length === 0 ? null : allStrings.x.reduce(function (memo, string, index) {
     memo[string] = index + 1;
     return memo;
   }, {});
+  var y = !allStrings.y || allStrings.y.length === 0 ? null : allStrings.y.reduce(function (memo, string, index) {
+    memo[string] = index + 1;
+    return memo;
+  }, {});
+  return {
+    x: x,
+    y: y
+  };
 };

package/lib/victory-chart.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
+
 var _assign2 = _interopRequireDefault(require("lodash/assign"));
 
 var _defaults2 = _interopRequireDefault(require("lodash/defaults"));
@@ -23,6 +25,8 @@ var _victoryPolarAxis = require("victory-polar-axis");
 
 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; }
@@ -66,28 +70,24 @@ function (_React$Component) {
         nodesDoneLoad: false,
         animating: true
       };
+      _this.setAnimationState = _victoryCore.Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
     }
 
-    _this.setAnimationState = _victoryCore.Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
-    _this.events = _victoryCore.Wrapper.getAllEvents(props);
     return _this;
   }
 
   _createClass(VictoryChart, [{
-    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) {
@@ -157,11 +157,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-chart",
-  "version": "30.6.1",
+  "version": "31.2.0",
   "description": "Chart Component for Victory",
   "keywords": [
     "data visualization",
@@ -22,10 +22,10 @@
     "lodash": "^4.17.5",
     "prop-types": "^15.5.8",
     "react-fast-compare": "^2.0.0",
-    "victory-axis": "^30.6.1",
-    "victory-core": "^30.6.1",
-    "victory-polar-axis": "^30.6.1",
-    "victory-shared-events": "^30.6.1"
+    "victory-axis": "^31.2.0",
+    "victory-core": "^31.2.0",
+    "victory-polar-axis": "^31.2.0",
+    "victory-shared-events": "^31.2.0"
   },
   "scripts": {
     "version": "nps build-libs && nps build-dists"

package/src/helper-methods.js

@@ -2,7 +2,7 @@
 /* eslint-disable no-use-before-define */
 
 import React from "react";
-import { Log, Helpers, Scale, Axis, Wrapper } from "victory-core";
+import { Helpers, Scale, Axis, Wrapper } from "victory-core";
 import { defaults, assign } from "lodash";
 
 function getAxisProps(child, props, calculatedProps) {
@@ -17,7 +17,8 @@ function getAxisProps(child, props, calculatedProps) {
   const crossAxis = childProps.crossAxis === false ? false : true;
   const orientation = Axis.getOrientation(child, axis, originSign[otherAxis]);
   return {
-    stringMap: stringMap[currentAxis],
+    stringMap,
+    horizontal,
     categories: categories[currentAxis],
     startAngle: props.startAngle,
     endAngle: props.endAngle,
@@ -43,29 +44,22 @@ function getChildProps(child, props, calculatedProps) {
 function getStyles(props) {
   const styleProps = props.style && props.style.parent;
   return {
-    parent: defaults(
-      {},
-      styleProps,
-      {
-        height: "100%",
-        width: "100%",
-        userSelect: "none"
-      }
-  ) };
+    parent: defaults({}, styleProps, {
+      height: "100%",
+      width: "100%",
+      userSelect: "none"
+    })
+  };
 }
 
 function getCalculatedProps(props, childComponents) {
   const style = getStyles(props);
   const horizontal = Helpers.isHorizontal(props);
   // TODO: check
-  const categories = {
-    x: Wrapper.getCategories(props, "x", childComponents),
-    y: Wrapper.getCategories(props, "y", childComponents)
-  };
-  const stringMap = {
-    x: createStringMap(props, "x", childComponents),
-    y: createStringMap(props, "y", childComponents)
-  };
+  const categories = Wrapper.getCategories(props, childComponents);
+
+  const stringMap = createStringMap(props, childComponents);
+
   const axisComponents = {
     x: Axis.getAxisComponent(childComponents, "x"),
     y: Axis.getAxisComponent(childComponents, "y")
@@ -79,11 +73,13 @@ function getCalculatedProps(props, childComponents) {
     y: Helpers.getRange(props, "y")
   };
   const baseScale = {
-    x: Scale.getScaleFromProps(props, "x") ||
-      axisComponents.x && axisComponents.x.type.getScale(axisComponents.x.props) ||
+    x:
+      Scale.getScaleFromProps(props, "x") ||
+      (axisComponents.x && axisComponents.x.type.getScale(axisComponents.x.props)) ||
       Scale.getDefaultScale(),
-    y: Scale.getScaleFromProps(props, "y") ||
-      axisComponents.y && axisComponents.y.type.getScale(axisComponents.y.props) ||
+    y:
+      Scale.getScaleFromProps(props, "y") ||
+      (axisComponents.y && axisComponents.y.type.getScale(axisComponents.y.props)) ||
       Scale.getDefaultScale()
   };
   const scale = {
@@ -103,8 +99,18 @@ function getCalculatedProps(props, childComponents) {
   const padding = Helpers.getPadding(props);
 
   return {
-    axisComponents, categories, domain, range, horizontal, scale, stringMap,
-    style, origin, originSign, defaultDomainPadding, padding
+    axisComponents,
+    categories,
+    domain,
+    range,
+    horizontal,
+    scale,
+    stringMap,
+    style,
+    origin,
+    originSign,
+    defaultDomainPadding,
+    padding
   };
 }
 
@@ -117,19 +123,27 @@ function getChildren(props, childComponents, calculatedProps) {
   const parentName = props.name || "chart";
   return childComponents.map((child, index) => {
     const role = child.type && child.type.role;
-    const style = Array.isArray(child.props.style) ?
-      child.props.style :
-      defaults({}, child.props.style, { parent: baseStyle });
+    const style = Array.isArray(child.props.style)
+      ? child.props.style
+      : defaults({}, child.props.style, { parent: baseStyle });
     const childProps = getChildProps(child, props, calculatedProps);
     const name = child.props.name || `${parentName}-${role}-${index}`;
-    const newProps = defaults({
-      horizontal,
-      height, polar, theme, width, style, name,
-      origin: polar ? origin : undefined,
-      padding: calculatedProps.padding,
-      key: `${name}-key-${index}`,
-      standalone: false
-    }, childProps);
+    const newProps = defaults(
+      {
+        horizontal,
+        height,
+        polar,
+        theme,
+        width,
+        style,
+        name,
+        origin: polar ? origin : undefined,
+        padding: calculatedProps.padding,
+        key: `${name}-key-${index}`,
+        standalone: false
+      },
+      childProps
+    );
 
     return React.cloneElement(child, newProps);
   });
@@ -149,24 +163,7 @@ const getChildComponents = (props, defaultAxes) => {
   if (axisComponents.dependent.length === 0 && axisComponents.independent.length === 0) {
     return childComponents.concat([defaultAxes.independent, defaultAxes.dependent]);
   }
-
-  let axisCount = 0;
-  return childComponents.filter((child) => {
-    const role = child.type && child.type.role;
-    const childProps = child.props || {};
-    if (role !== "axis" || childProps.dependentAxis) {
-      return true;
-    } else if (axisCount < 1) {
-      axisCount++;
-      return true;
-    } else {
-      const msg = "Only one independent VictoryAxis component is allowed when " +
-        "using the VictoryChart wrapper. Only the first axis will be used. Please compose " +
-        "multi-axis charts manually";
-      Log.warn(msg);
-      return false;
-    }
-  });
+  return childComponents;
 };
 
 const getDefaultDomainPadding = (childComponents, horizontal) => {
@@ -179,9 +176,7 @@ const getDefaultDomainPadding = (childComponents, horizontal) => {
   }
 
   const { offset, children } = groupComponent[0].props;
-  return horizontal ?
-    { y: (offset * children.length) / 2 } :
-    { x: (offset * children.length) / 2 };
+  return horizontal ? { y: (offset * children.length) / 2 } : { x: (offset * children.length) / 2 };
 };
 
 const getDomain = (props, axis, childComponents) => {
@@ -219,24 +214,37 @@ const getAxisOffset = (props, calculatedProps) => {
   };
 
   return {
-    x: axisComponents.x && axisComponents.x.offsetX !== undefined ?
-      axisComponents.x.offsetX : calculatedOffset.x,
-    y: axisComponents.y && axisComponents.y.offsetY !== undefined ?
-      axisComponents.y.offsetY : calculatedOffset.y
+    x:
+      axisComponents.x && axisComponents.x.offsetX !== undefined
+        ? axisComponents.x.offsetX
+        : calculatedOffset.x,
+    y:
+      axisComponents.y && axisComponents.y.offsetY !== undefined
+        ? axisComponents.y.offsetY
+        : calculatedOffset.y
   };
 };
 
-const createStringMap = (props, axis, childComponents) => {
-  const allStrings = Wrapper.getStringsFromChildren(props, axis, childComponents);
-  return allStrings.length === 0 ? null :
-    allStrings.reduce((memo, string, index) => {
-      memo[string] = index + 1;
-      return memo;
-    }, {});
+const createStringMap = (props, childComponents) => {
+  const allStrings = Wrapper.getStringsFromChildren(props, childComponents);
+
+  const x =
+    !allStrings.x || allStrings.x.length === 0
+      ? null
+      : allStrings.x.reduce((memo, string, index) => {
+          memo[string] = index + 1;
+          return memo;
+        }, {});
+
+  const y =
+    !allStrings.y || allStrings.y.length === 0
+      ? null
+      : allStrings.y.reduce((memo, string, index) => {
+          memo[string] = index + 1;
+          return memo;
+        }, {});
+
+  return { x, y };
 };
 
-export {
-  getChildren,
-  getCalculatedProps,
-  getChildComponents
-};
+export { getChildren, getCalculatedProps, getChildComponents };