victory-core 30.6.1 → 31.2.0

package/src/victory-animation/util.js

@@ -1,40 +1,40 @@
 import { interpolate } from "d3-interpolate";
 import { isPlainObject, orderBy } from "lodash";
 
-export const isInterpolatable = function (obj) {
+export const isInterpolatable = function(obj) {
   // d3 turns null into 0 and undefined into NaN, which we don't want.
   if (obj !== null) {
     switch (typeof obj) {
-    case "undefined":
-      return false;
-    case "number":
-      // The standard `isNaN` is fine in this case since we already know the
-      // type is number.
-      return !isNaN(obj) && obj !== Number.POSITIVE_INFINITY && obj !== Number.NEGATIVE_INFINITY;
-    case "string":
-      // d3 might not *actually* be able to interpolate the string, but it
-      // won't cause any issues to let it try.
-      return true;
-    case "boolean":
-      // d3 turns Booleans into integers, which we don't want. Sure, we could
-      // interpolate from 0 -> 1, but we'd be sending a non-Boolean to
-      // something expecting a Boolean.
-      return false;
-    case "object":
-      // Don't try to interpolate class instances (except Date or Array).
-      return obj instanceof Date || Array.isArray(obj) || isPlainObject(obj);
-    case "function":
-      // Careful! There may be extra properties on function objects that the
-      // component expects to access - for instance, it may be a `d3.scale()`
-      // function, which has its own methods attached. We don't know if the
-      // component is only going to call the function (in which case it's
-      // safely interpolatable) or if it's going to access special properties
-      // (in which case our function generated from `interpolateFunction` will
-      // most likely cause an error. We could check for enumerable properties
-      // on the function object here to see if it's a "plain" function, but
-      // let's just require that components prevent such function props from
-      // being animated in the first place.
-      return true;
+      case "undefined":
+        return false;
+      case "number":
+        // The standard `isNaN` is fine in this case since we already know the
+        // type is number.
+        return !isNaN(obj) && obj !== Number.POSITIVE_INFINITY && obj !== Number.NEGATIVE_INFINITY;
+      case "string":
+        // d3 might not *actually* be able to interpolate the string, but it
+        // won't cause any issues to let it try.
+        return true;
+      case "boolean":
+        // d3 turns Booleans into integers, which we don't want. Sure, we could
+        // interpolate from 0 -> 1, but we'd be sending a non-Boolean to
+        // something expecting a Boolean.
+        return false;
+      case "object":
+        // Don't try to interpolate class instances (except Date or Array).
+        return obj instanceof Date || Array.isArray(obj) || isPlainObject(obj);
+      case "function":
+        // Careful! There may be extra properties on function objects that the
+        // component expects to access - for instance, it may be a `d3.scale()`
+        // function, which has its own methods attached. We don't know if the
+        // component is only going to call the function (in which case it's
+        // safely interpolatable) or if it's going to access special properties
+        // (in which case our function generated from `interpolateFunction` will
+        // most likely cause an error. We could check for enumerable properties
+        // on the function object here to see if it's a "plain" function, but
+        // let's just require that components prevent such function props from
+        // being animated in the first place.
+        return true;
     }
   }
   return false;
@@ -55,9 +55,9 @@ export const isInterpolatable = function (obj) {
  * @param {Number} when - Step value (0 to 1) at which to jump to `b`.
  * @returns {Function} An interpolation function.
  */
-export const interpolateImmediate = function (a, b, when = 0) {
-  return function (t) {
-    return (t < when) ? a : b;
+export const interpolateImmediate = function(a, b, when = 0) {
+  return function(t) {
+    return t < when ? a : b;
   };
 };
 
@@ -73,15 +73,15 @@ export const interpolateImmediate = function (a, b, when = 0) {
  * @param {any} b - End value.
  * @returns {Function} An interpolation function.
  */
-export const interpolateFunction = function (a, b) {
-  return function (t) {
+export const interpolateFunction = function(a, b) {
+  return function(t) {
     if (t >= 1) {
       return b;
     }
-    return function () {
+    return function() {
       /* eslint-disable no-invalid-this */
-      const aval = (typeof a === "function") ? a.apply(this, arguments) : a;
-      const bval = (typeof b === "function") ? b.apply(this, arguments) : b;
+      const aval = typeof a === "function" ? a.apply(this, arguments) : a;
+      const bval = typeof b === "function" ? b.apply(this, arguments) : b;
       return interpolate(aval, bval)(t);
     };
   };
@@ -97,7 +97,7 @@ export const interpolateFunction = function (a, b) {
  * @param {any} b - End value.
  * @returns {Function} An interpolation function.
  */
-export const interpolateObject = function (a, b) {
+export const interpolateObject = function(a, b) {
   const interpolateTypes = (x, y) => {
     if (x === y || !isInterpolatable(x) || !isInterpolatable(y)) {
       return interpolateImmediate(x, y);
@@ -105,7 +105,10 @@ export const interpolateObject = function (a, b) {
     if (typeof x === "function" || typeof y === "function") {
       return interpolateFunction(x, y);
     }
-    if (typeof x === "object" && isPlainObject(x) || typeof y === "object" && isPlainObject(y)) {
+    if (
+      (typeof x === "object" && isPlainObject(x)) ||
+      (typeof y === "object" && isPlainObject(y))
+    ) {
       return interpolateObject(x, y);
     }
     return interpolate(x, y);
@@ -136,7 +139,7 @@ export const interpolateObject = function (a, b) {
     }
   }
 
-  return function (t) {
+  return function(t) {
     for (k in i) {
       c[k] = i[k](t);
     }
@@ -144,7 +147,7 @@ export const interpolateObject = function (a, b) {
   };
 };
 
-export const interpolateString = function (a, b) {
+export const interpolateString = function(a, b) {
   const format = (val) => {
     return typeof val === "string" ? val.replace(/,/g, "") : val;
   };
@@ -175,7 +178,7 @@ export const interpolateString = function (a, b) {
  * @param {any} b - End value.
  * @returns {Function|undefined} An interpolation function, if necessary.
  */
-export const victoryInterpolator = function (a, b) {
+export const victoryInterpolator = function(a, b) {
   // If the values are strictly equal, or either value is not interpolatable,
   // just use either the start value `a` or end value `b` at every step, as
   // there is no reasonable in-between value.
@@ -193,4 +196,3 @@ export const victoryInterpolator = function (a, b) {
   }
   return interpolate(a, b);
 };
-

package/src/victory-animation/victory-animation.js

@@ -4,29 +4,57 @@ import PropTypes from "prop-types";
 import * as d3Ease from "d3-ease";
 import { victoryInterpolator } from "./util";
 import Timer from "../victory-util/timer";
+import isEqual from "react-fast-compare";
 
 export default class VictoryAnimation extends React.Component {
   static displayName = "VictoryAnimation";
 
   static propTypes = {
     children: PropTypes.func,
-    data: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.array
-    ]),
+    data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     delay: PropTypes.number,
     duration: PropTypes.number,
     easing: PropTypes.oneOf([
-      "back", "backIn", "backOut", "backInOut",
-      "bounce", "bounceIn", "bounceOut", "bounceInOut",
-      "circle", "circleIn", "circleOut", "circleInOut",
-      "linear", "linearIn", "linearOut", "linearInOut",
-      "cubic", "cubicIn", "cubicOut", "cubicInOut",
-      "elastic", "elasticIn", "elasticOut", "elasticInOut",
-      "exp", "expIn", "expOut", "expInOut",
-      "poly", "polyIn", "polyOut", "polyInOut",
-      "quad", "quadIn", "quadOut", "quadInOut",
-      "sin", "sinIn", "sinOut", "sinInOut"
+      "back",
+      "backIn",
+      "backOut",
+      "backInOut",
+      "bounce",
+      "bounceIn",
+      "bounceOut",
+      "bounceInOut",
+      "circle",
+      "circleIn",
+      "circleOut",
+      "circleInOut",
+      "linear",
+      "linearIn",
+      "linearOut",
+      "linearInOut",
+      "cubic",
+      "cubicIn",
+      "cubicOut",
+      "cubicInOut",
+      "elastic",
+      "elasticIn",
+      "elasticOut",
+      "elasticInOut",
+      "exp",
+      "expIn",
+      "expOut",
+      "expInOut",
+      "poly",
+      "polyIn",
+      "polyOut",
+      "polyInOut",
+      "quad",
+      "quadIn",
+      "quadOut",
+      "quadInOut",
+      "sin",
+      "sinIn",
+      "sinOut",
+      "sinInOut"
     ]),
     onEnd: PropTypes.func
   };
@@ -46,16 +74,14 @@ export default class VictoryAnimation extends React.Component {
     super(props);
     /* defaults */
     this.state = {
-      data: Array.isArray(this.props.data) ?
-        this.props.data[0] : this.props.data,
+      data: Array.isArray(this.props.data) ? this.props.data[0] : this.props.data,
       animationInfo: {
         progress: 0,
         animating: false
       }
     };
     this.interpolator = null;
-    this.queue = Array.isArray(this.props.data) ?
-      this.props.data.slice(1) : [];
+    this.queue = Array.isArray(this.props.data) ? this.props.data.slice(1) : [];
     /* build easing function */
     this.ease = d3Ease[this.toNewName(this.props.easing)];
     /*
@@ -73,24 +99,27 @@ export default class VictoryAnimation extends React.Component {
     }
   }
 
-  /* lifecycle */
-  componentWillReceiveProps(nextProps) {
-    /* cancel existing loop if it exists */
-    this.getTimer().unsubscribe(this.loopID);
+  shouldComponentUpdate(nextProps, nextState) {
+    const equalProps = isEqual(this.props, nextProps);
+    if (!equalProps) {
+      /* cancel existing loop if it exists */
+      this.getTimer().unsubscribe(this.loopID);
 
-    /* If an object was supplied */
-    if (!Array.isArray(nextProps.data)) {
-      // Replace the tween queue. Could set `this.queue = [nextProps.data]`,
-      // but let's reuse the same array.
-      this.queue.length = 0;
-      this.queue.push(nextProps.data);
-    /* If an array was supplied */
-    } else {
-      /* Extend the tween queue */
-      this.queue.push(...nextProps.data);
+      /* If an object was supplied */
+      if (!Array.isArray(nextProps.data)) {
+        // Replace the tween queue. Could set `this.queue = [nextProps.data]`,
+        // but let's reuse the same array.
+        this.queue.length = 0;
+        this.queue.push(nextProps.data);
+        /* If an array was supplied */
+      } else {
+        /* Extend the tween queue */
+        this.queue.push(...nextProps.data);
+      }
+      /* Start traversing the tween queue */
+      this.traverseQueue();
     }
-    /* Start traversing the tween queue */
-    this.traverseQueue();
+    return nextState.animationInfo.animating || !equalProps;
   }
 
   componentWillUnmount() {
@@ -128,13 +157,12 @@ export default class VictoryAnimation extends React.Component {
       if (this.props.delay) {
         setTimeout(() => {
           this.loopID = this.getTimer().subscribe(
-            this.functionToBeRunEachFrame, this.props.duration
+            this.functionToBeRunEachFrame,
+            this.props.duration
           );
         }, this.props.delay);
       } else {
-        this.loopID = this.getTimer().subscribe(
-          this.functionToBeRunEachFrame, this.props.duration
-        );
+        this.loopID = this.getTimer().subscribe(this.functionToBeRunEachFrame, this.props.duration);
       }
     } else if (this.props.onEnd) {
       this.props.onEnd();

package/src/victory-clip-container/victory-clip-container.js

@@ -11,17 +11,16 @@ export default class VictoryClipContainer extends React.Component {
   static displayName = "VictoryClipContainer";
   static role = "container";
   static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]),
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     circleComponent: PropTypes.element,
     className: PropTypes.string,
     clipHeight: CustomPropTypes.nonNegative,
     clipId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     clipPadding: PropTypes.shape({
-      top: PropTypes.number, bottom: PropTypes.number,
-      left: PropTypes.number, right: PropTypes.number
+      top: PropTypes.number,
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number
     }),
     clipPathComponent: PropTypes.element,
     clipWidth: CustomPropTypes.nonNegative,
@@ -34,25 +33,23 @@ export default class VictoryClipContainer extends React.Component {
     transform: PropTypes.string,
     translateX: PropTypes.number,
     translateY: PropTypes.number
-  }
+  };
 
   static defaultProps = {
-    circleComponent: <Circle/>,
-    rectComponent: <Rect/>,
-    clipPathComponent: <ClipPath/>,
-    groupComponent: <g/>
-  }
+    circleComponent: <Circle />,
+    rectComponent: <Rect />,
+    clipPathComponent: <ClipPath />,
+    groupComponent: <g />
+  };
 
   constructor(props) {
     super(props);
-    this.clipId = !isObject(props) || props.clipId === undefined ?
-      uniqueId("victory-clip-") : props.clipId;
+    this.clipId =
+      !isObject(props) || props.clipId === undefined ? uniqueId("victory-clip-") : props.clipId;
   }
 
   calculateAttributes(props) {
-    const {
-      polar, origin, clipWidth = 0, clipHeight = 0, translateX = 0, translateY = 0
-    } = props;
+    const { polar, origin, clipWidth = 0, clipHeight = 0, translateX = 0, translateY = 0 } = props;
     const clipPadding = Helpers.getPadding({ padding: props.clipPadding });
     const radius = props.radius || Helpers.getRadius(props);
     return {
@@ -66,43 +63,59 @@ export default class VictoryClipContainer extends React.Component {
   renderClippedGroup(props, clipId) {
     const { style, events, transform, children, className, groupComponent } = props;
     const clipComponent = this.renderClipComponent(props, clipId);
-    const groupProps = assign({
-      className, style, transform, key: `clipped-group-${clipId}`, clipPath: `url(#${clipId})`
-    }, events);
-    return React.cloneElement(
-      groupComponent,
-      groupProps,
-      [clipComponent, ...React.Children.toArray(children)]
+    const groupProps = assign(
+      {
+        className,
+        style,
+        transform,
+        key: `clipped-group-${clipId}`,
+        clipPath: `url(#${clipId})`
+      },
+      events
     );
+    return React.cloneElement(groupComponent, groupProps, [
+      clipComponent,
+      ...React.Children.toArray(children)
+    ]);
   }
 
   renderGroup(props) {
     const { style, events, transform, children, className, groupComponent } = props;
     return React.cloneElement(
-      groupComponent, assign({ className, style, transform }, events), children
+      groupComponent,
+      assign({ className, style, transform }, events),
+      children
     );
   }
 
   renderClipComponent(props, clipId) {
     const {
-      polar, origin, clipWidth = 0, clipHeight = 0, translateX = 0, translateY = 0,
-      circleComponent, rectComponent, clipPathComponent
+      polar,
+      origin,
+      clipWidth = 0,
+      clipHeight = 0,
+      translateX = 0,
+      translateY = 0,
+      circleComponent,
+      rectComponent,
+      clipPathComponent
     } = props;
     const { top, bottom, left, right } = Helpers.getPadding({ padding: props.clipPadding });
     let child;
     if (polar) {
       const radius = props.radius || Helpers.getRadius(props);
       const circleProps = {
-        r: Math.max((radius + left + right), (radius + top + bottom), 0),
+        r: Math.max(radius + left + right, radius + top + bottom, 0),
         cx: origin.x - left,
         cy: origin.y - top
       };
       child = React.cloneElement(circleComponent, circleProps);
     } else {
       const rectProps = {
-        x: translateX - left, y: translateY - top,
-        width: Math.max((clipWidth + left + right), 0),
-        height: Math.max((clipHeight + top + bottom), 0)
+        x: translateX - left,
+        y: translateY - top,
+        width: Math.max(clipWidth + left + right, 0),
+        height: Math.max(clipHeight + top + bottom, 0)
       };
       child = React.cloneElement(rectComponent, rectProps);
     }

package/src/victory-container/victory-container.js

@@ -10,10 +10,7 @@ export default class VictoryContainer extends React.Component {
   static displayName = "VictoryContainer";
   static role = "container";
   static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]),
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     className: PropTypes.string,
     containerId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     containerRef: PropTypes.func,
@@ -30,31 +27,33 @@ export default class VictoryContainer extends React.Component {
     theme: PropTypes.object,
     title: PropTypes.string,
     width: CustomPropTypes.nonNegative
-  }
+  };
 
   static defaultProps = {
     className: "VictoryContainer",
-    portalComponent: <Portal/>,
+    portalComponent: <Portal />,
     portalZIndex: 99,
     responsive: true
-  }
+  };
 
   static contextTypes = {
     getTimer: PropTypes.func
-  }
+  };
 
   static childContextTypes = {
     portalUpdate: PropTypes.func,
     portalRegister: PropTypes.func,
     portalDeregister: PropTypes.func,
     getTimer: PropTypes.func
-  }
+  };
 
   constructor(props) {
     super(props);
     this.getTimer = this.getTimer.bind(this);
-    this.containerId = !isObject(props) || props.containerId === undefined ?
-      uniqueId("victory-container-") : props.containerId;
+    this.containerId =
+      !isObject(props) || props.containerId === undefined
+        ? uniqueId("victory-container-")
+        : props.containerId;
     this.savePortalRef = (portal) => {
       this.portalRef = portal;
       return portal;
@@ -100,20 +99,32 @@ export default class VictoryContainer extends React.Component {
 
   renderContainer(props, svgProps, style) {
     const {
-      title, desc, portalComponent, className, width, height, portalZIndex, responsive
+      title,
+      desc,
+      portalComponent,
+      className,
+      width,
+      height,
+      portalZIndex,
+      responsive
     } = props;
     const children = this.getChildren(props);
     const dimensions = responsive ? { width: "100%", height: "100%" } : { width, height };
     const divStyle = assign(
-      { pointerEvents: "none", touchAction: "none", position: "relative" }, dimensions
+      { pointerEvents: "none", touchAction: "none", position: "relative" },
+      dimensions
     );
     const portalDivStyle = assign(
-      { zIndex: portalZIndex, position: "absolute", top: 0, left: 0 }, dimensions
+      { zIndex: portalZIndex, position: "absolute", top: 0, left: 0 },
+      dimensions
     );
     const svgStyle = assign({ pointerEvents: "all" }, dimensions);
     const portalSvgStyle = assign({ overflow: "visible" }, dimensions);
     const portalProps = {
-      width, height, viewBox: svgProps.viewBox, style: portalSvgStyle
+      width,
+      height,
+      viewBox: svgProps.viewBox,
+      style: portalSvgStyle
     };
     return (
       <div style={defaults({}, style, divStyle)} className={className} ref={props.containerRef}>
@@ -122,20 +133,23 @@ export default class VictoryContainer extends React.Component {
           {desc ? <desc id={this.getIdForElement("desc")}>{desc}</desc> : null}
           {children}
         </svg>
-          <div style={portalDivStyle}>
-            {React.cloneElement(portalComponent, { ...portalProps, ref: this.savePortalRef })}
-          </div>
+        <div style={portalDivStyle}>
+          {React.cloneElement(portalComponent, { ...portalProps, ref: this.savePortalRef })}
         </div>
+      </div>
     );
   }
 
   render() {
     const { width, height, responsive, events } = this.props;
-    const style = responsive ?
-      this.props.style : Helpers.omit(this.props.style, ["height", "width"]);
+    const style = responsive
+      ? this.props.style
+      : Helpers.omit(this.props.style, ["height", "width"]);
     const svgProps = assign(
       {
-        width, height, role: "img",
+        width,
+        height,
+        role: "img",
         "aria-labelledby": `${this.getIdForElement("title")} ${this.getIdForElement("desc")}`,
         viewBox: responsive ? `0 0 ${width} ${height}` : undefined
       },