victory-core 30.6.1 → 31.2.0

package/src/victory-theme/material.js

@@ -9,14 +9,7 @@ const lime300 = "#DCE775";
 const lightGreen500 = "#8BC34A";
 const teal700 = "#00796B";
 const cyan900 = "#006064";
-const colors = [
-  deepOrange600,
-  yellow200,
-  lime300,
-  lightGreen500,
-  teal700,
-  cyan900
-];
+const colors = [deepOrange600, yellow200, lime300, lightGreen500, teal700, cyan900];
 const blueGrey50 = "#ECEFF1";
 const blueGrey300 = "#90A4AE";
 const blueGrey700 = "#455A64";
@@ -58,101 +51,122 @@ const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
 export default {
-  area: assign({
-    style: {
-      data: {
-        fill: grey900
-      },
-      labels: centeredLabelStyles
-    }
-  }, baseProps),
-  axis: assign({
-    style: {
-      axis: {
-        fill: "transparent",
-        stroke: blueGrey300,
-        strokeWidth: 2,
-        strokeLinecap,
-        strokeLinejoin
-      },
-      axisLabel: assign({}, centeredLabelStyles, {
-        padding,
-        stroke: "transparent"
-      }),
-      grid: {
-        fill: "none",
-        stroke: blueGrey50,
-        strokeDasharray,
-        strokeLinecap,
-        strokeLinejoin,
-        pointerEvents: "painted"
-      },
-      ticks: {
-        fill: "transparent",
-        size: 5,
-        stroke: blueGrey300,
-        strokeWidth: 1,
-        strokeLinecap,
-        strokeLinejoin
-      },
-      tickLabels: assign({}, baseLabelStyles, {
-        fill: blueGrey700
-      })
-    }
-  }, baseProps),
-  bar: assign({
-    style: {
-      data: {
-        fill: blueGrey700,
-        padding,
-        strokeWidth: 0
+  area: assign(
+    {
+      style: {
+        data: {
+          fill: grey900
+        },
+        labels: centeredLabelStyles
+      }
+    },
+    baseProps
+  ),
+  axis: assign(
+    {
+      style: {
+        axis: {
+          fill: "transparent",
+          stroke: blueGrey300,
+          strokeWidth: 2,
+          strokeLinecap,
+          strokeLinejoin
+        },
+        axisLabel: assign({}, centeredLabelStyles, {
+          padding,
+          stroke: "transparent"
+        }),
+        grid: {
+          fill: "none",
+          stroke: blueGrey50,
+          strokeDasharray,
+          strokeLinecap,
+          strokeLinejoin,
+          pointerEvents: "painted"
+        },
+        ticks: {
+          fill: "transparent",
+          size: 5,
+          stroke: blueGrey300,
+          strokeWidth: 1,
+          strokeLinecap,
+          strokeLinejoin
+        },
+        tickLabels: assign({}, baseLabelStyles, {
+          fill: blueGrey700
+        })
+      }
+    },
+    baseProps
+  ),
+  bar: assign(
+    {
+      style: {
+        data: {
+          fill: blueGrey700,
+          padding,
+          strokeWidth: 0
+        },
+        labels: baseLabelStyles
+      }
+    },
+    baseProps
+  ),
+  boxplot: assign(
+    {
+      style: {
+        max: { padding, stroke: blueGrey700, strokeWidth: 1 },
+        maxLabels: baseLabelStyles,
+        median: { padding, stroke: blueGrey700, strokeWidth: 1 },
+        medianLabels: baseLabelStyles,
+        min: { padding, stroke: blueGrey700, strokeWidth: 1 },
+        minLabels: baseLabelStyles,
+        q1: { padding, fill: blueGrey700 },
+        q1Labels: baseLabelStyles,
+        q3: { padding, fill: blueGrey700 },
+        q3Labels: baseLabelStyles
       },
-      labels: baseLabelStyles
-    }
-  }, baseProps),
-  boxplot: assign({
-    style: {
-      max: { padding, stroke: blueGrey700, strokeWidth: 1 },
-      maxLabels: baseLabelStyles,
-      median: { padding, stroke: blueGrey700, strokeWidth: 1 },
-      medianLabels: baseLabelStyles,
-      min: { padding, stroke: blueGrey700, strokeWidth: 1 },
-      minLabels: baseLabelStyles,
-      q1: { padding, fill: blueGrey700 },
-      q1Labels: baseLabelStyles,
-      q3: { padding, fill: blueGrey700 },
-      q3Labels: baseLabelStyles
+      boxWidth: 20
     },
-    boxWidth: 20
-  }, baseProps),
-  candlestick: assign({
-    style: {
-      data: {
-        stroke: blueGrey700
+    baseProps
+  ),
+  candlestick: assign(
+    {
+      style: {
+        data: {
+          stroke: blueGrey700
+        },
+        labels: centeredLabelStyles
       },
-      labels: centeredLabelStyles
+      candleColors: {
+        positive: "#ffffff",
+        negative: blueGrey700
+      }
     },
-    candleColors: {
-      positive: "#ffffff",
-      negative: blueGrey700
-    }
-  }, baseProps),
+    baseProps
+  ),
   chart: baseProps,
-  errorbar: assign({
-    borderWidth: 8,
-    style: {
-      data: {
-        fill: "transparent",
-        opacity: 1,
-        stroke: blueGrey700,
-        strokeWidth: 2
-      },
-      labels: centeredLabelStyles
-    }
-  }, baseProps),
-  group: assign({
-    colorScale: colors
-  }, baseProps),
+  errorbar: assign(
+    {
+      borderWidth: 8,
+      style: {
+        data: {
+          fill: "transparent",
+          opacity: 1,
+          stroke: blueGrey700,
+          strokeWidth: 2
+        },
+        labels: centeredLabelStyles
+      }
+    },
+    baseProps
+  ),
+  group: assign(
+    {
+      colorScale: colors
+    },
+    baseProps
+  ),
   legend: {
     colorScale: colors,
     gutter: 10,
@@ -166,42 +180,54 @@ export default {
       title: assign({}, baseLabelStyles, { padding: 5 })
     }
   },
-  line: assign({
-    style: {
-      data: {
-        fill: "transparent",
-        opacity: 1,
-        stroke: blueGrey700,
-        strokeWidth: 2
-      },
-      labels: centeredLabelStyles
-    }
-  }, baseProps),
-  pie: assign({
-    colorScale: colors,
-    style: {
-      data: {
-        padding,
-        stroke: blueGrey50,
-        strokeWidth: 1
-      },
-      labels: assign({}, baseLabelStyles, { padding: 20 })
-    }
-  }, baseProps),
-  scatter: assign({
-    style: {
-      data: {
-        fill: blueGrey700,
-        opacity: 1,
-        stroke: "transparent",
-        strokeWidth: 0
-      },
-      labels: centeredLabelStyles
-    }
-  }, baseProps),
-  stack: assign({
-    colorScale: colors
-  }, baseProps),
+  line: assign(
+    {
+      style: {
+        data: {
+          fill: "transparent",
+          opacity: 1,
+          stroke: blueGrey700,
+          strokeWidth: 2
+        },
+        labels: centeredLabelStyles
+      }
+    },
+    baseProps
+  ),
+  pie: assign(
+    {
+      colorScale: colors,
+      style: {
+        data: {
+          padding,
+          stroke: blueGrey50,
+          strokeWidth: 1
+        },
+        labels: assign({}, baseLabelStyles, { padding: 20 })
+      }
+    },
+    baseProps
+  ),
+  scatter: assign(
+    {
+      style: {
+        data: {
+          fill: blueGrey700,
+          opacity: 1,
+          stroke: "transparent",
+          strokeWidth: 0
+        },
+        labels: centeredLabelStyles
+      }
+    },
+    baseProps
+  ),
+  stack: assign(
+    {
+      colorScale: colors
+    },
+    baseProps
+  ),
   tooltip: {
     style: assign({}, centeredLabelStyles, { padding: 5, pointerEvents: "none" }),
     flyoutStyle: {
@@ -213,20 +239,23 @@ export default {
     cornerRadius: 5,
     pointerLength: 10
   },
-  voronoi: assign({
-    style: {
-      data: {
-        fill: "transparent",
-        stroke: "transparent",
-        strokeWidth: 0
-      },
-      labels: assign({}, centeredLabelStyles, { padding: 5, pointerEvents: "none" }),
-      flyout: {
-        stroke: grey900,
-        strokeWidth: 1,
-        fill: "#f0f0f0",
-        pointerEvents: "none"
+  voronoi: assign(
+    {
+      style: {
+        data: {
+          fill: "transparent",
+          stroke: "transparent",
+          strokeWidth: 0
+        },
+        labels: assign({}, centeredLabelStyles, { padding: 5, pointerEvents: "none" }),
+        flyout: {
+          stroke: grey900,
+          strokeWidth: 1,
+          fill: "#f0f0f0",
+          pointerEvents: "none"
+        }
       }
-    }
-  }, baseProps)
+    },
+    baseProps
+  )
 };

package/src/victory-transition/victory-transition.js

@@ -6,6 +6,7 @@ import Helpers from "../victory-util/helpers";
 import Timer from "../victory-util/timer";
 import Transitions from "../victory-util/transitions";
 import { defaults, isFunction, pick, isObject } from "lodash";
+import isEqual from "react-fast-compare";
 
 export default class VictoryTransition extends React.Component {
   static displayName = "VictoryTransition";
@@ -33,11 +34,14 @@ export default class VictoryTransition extends React.Component {
     this.setState({ nodesShouldLoad: true }); //eslint-disable-line react/no-did-mount-set-state
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.getTimer().bypassAnimation();
-    this.setState(
-      this.getTransitionState(this.props, nextProps), () => this.getTimer().resumeAnimation()
-    );
+  shouldComponentUpdate(nextProps) {
+    if (!isEqual(this.props, nextProps)) {
+      this.getTimer().bypassAnimation();
+      this.setState(this.getTransitionState(this.props, nextProps), () =>
+        this.getTimer().resumeAnimation()
+      );
+    }
+    return true;
   }
 
   componentWillUnmount() {
@@ -97,14 +101,16 @@ export default class VictoryTransition extends React.Component {
 
     const child = React.Children.toArray(props.children)[0];
     const childProps = child.props || {};
-    const domain = Array.isArray(childProps.domain) ?
-      childProps.domain : childProps.domain && childProps.domain[axis];
+    const domain = Array.isArray(childProps.domain)
+      ? childProps.domain
+      : childProps.domain && childProps.domain[axis];
     if (!childProps.children && domain) {
       return domain;
     } else {
       const childDomains = getChildDomains([child]);
-      return childDomains.length === 0 ?
-        [0, 1] : [Collection.getMinValue(childDomains), Collection.getMaxValue(childDomains)];
+      return childDomains.length === 0
+        ? [0, 1]
+        : [Collection.getMinValue(childDomains), Collection.getMaxValue(childDomains)];
     }
   }
 
@@ -118,8 +124,9 @@ export default class VictoryTransition extends React.Component {
   pickDomainProps(props) {
     const parentState = isObject(props.animate) && props.animate.parentState;
     if (parentState && parentState.nodesWillExit) {
-      return this.continous || parentState.continuous ?
-        parentState.nextProps || this.state.nextProps || props : props;
+      return this.continous || parentState.continuous
+        ? parentState.nextProps || this.state.nextProps || props
+        : props;
     }
     return this.continuous && this.state.nodesWillExit ? this.state.nextProps || props : props;
   }
@@ -135,13 +142,12 @@ export default class VictoryTransition extends React.Component {
 
   render() {
     const props = this.pickProps();
-    const getTransitionProps = isObject(this.props.animate) && this.props.animate.getTransitions ?
-      this.props.animate.getTransitions :
-      Transitions.getTransitionPropsFactory(
-        props,
-        this.state,
-        (newState) => this.setState(newState)
-      );
+    const getTransitionProps =
+      isObject(this.props.animate) && this.props.animate.getTransitions
+        ? this.props.animate.getTransitions
+        : Transitions.getTransitionPropsFactory(props, this.state, (newState) =>
+            this.setState(newState)
+          );
     const child = React.Children.toArray(props.children)[0];
     const transitionProps = getTransitionProps(child);
     this.transitionProps = transitionProps;
@@ -158,19 +164,19 @@ export default class VictoryTransition extends React.Component {
       <VictoryAnimation {...combinedProps.animate} data={propsToAnimate}>
         {(newProps) => {
           if (child.props.groupComponent) {
-            const groupComponent = this.continuous ?
-              React.cloneElement(
-                child.props.groupComponent,
-                { clipWidth: newProps.clipWidth || 0 }
-              ) :
-              child.props.groupComponent;
+            const groupComponent = this.continuous
+              ? React.cloneElement(child.props.groupComponent, {
+                  clipWidth: newProps.clipWidth || 0
+                })
+              : child.props.groupComponent;
             return React.cloneElement(
               child,
               defaults({ animate: null, animating: true, groupComponent }, newProps, combinedProps)
             );
           }
           return React.cloneElement(
-            child, defaults({ animate: null, animating: true }, newProps, combinedProps)
+            child,
+            defaults({ animate: null, animating: true }, newProps, combinedProps)
           );
         }}
       </VictoryAnimation>