Merge pull request #37 from FormidableLabs/yankAnimation

yank animation up a level

README.md

@@ -5,12 +5,12 @@ VictoryPie
 
 `VictoryPie` is a reusable pie chart component for [React](https://github.com/facebook/react). Styles and data can be customized by passing in your own values as properties to the component. Data changes are animated with [victory-animation](https://github.com/FormidableLabs/victory-animation).
 
-Detailed documentation and interactive examples can be found [here](https://formidablelabs.github.io/victory-pie)
+Detailed documentation and interactive examples can be found [here](https://victory.formidable.com/victory-pie)
 
 IMPORTANT
 =========
 
-This project is in a pre-release state. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes! 
+This project is in a pre-release state. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes!
 
 
 ## Development
@@ -23,4 +23,3 @@ Please see [CONTRIBUTING](CONTRIBUTING.md)
 
 [trav_img]: https://api.travis-ci.org/FormidableLabs/victory-pie.svg
 [trav_site]: https://travis-ci.org/FormidableLabs/victory-pie
-

package.json

@@ -23,9 +23,9 @@
     "builder": "~2.2.2",
     "builder-victory-component": "~0.0.5",
     "d3-shape": "^0.2.0",
-    "victory-animation": "^0.0.12",
-    "victory-label": "^0.1.6",
-    "victory-util": "^2.0.2"
+    "victory-animation": "^0.0.13",
+    "victory-label": "^0.1.8",
+    "victory-util": "^2.0.3"
   },
   "devDependencies": {
     "builder-victory-component-dev": "~0.0.5",

src/components/slice-label.jsx

@@ -1,14 +1,12 @@
 import _ from "lodash";
 import React, { PropTypes } from "react";
 import Radium from "radium";
-import {VictoryAnimation} from "victory-animation";
 import {VictoryLabel} from "victory-label";
 
 
 @Radium
 export default class SliceLabel extends React.Component {
   static propTypes = {
-    animate: PropTypes.object,
     labelComponent: PropTypes.any,
     positionFunction: PropTypes.func,
     slice: PropTypes.object,
@@ -68,19 +66,7 @@ export default class SliceLabel extends React.Component {
   }
 
   render() {
-    if (this.props.animate) {
-      // Do less work by having `VictoryAnimation` tween only values that
-      // make sense to tween. In the future, allow customization of animated
-      // prop whitelist/blacklist?
-      const animateData = _.pick(this.props, ["style", "slice"]);
-      return (
-        <VictoryAnimation {...this.props.animate} data={animateData}>
-          {(props) => <SliceLabel {...this.props} {...props} animate={null}/>}
-        </VictoryAnimation>
-      );
-    } else {
-      this.getCalculatedValues(this.props);
-    }
+    this.getCalculatedValues(this.props);
     return this.renderLabel(this.props);
   }
 }

src/components/slice.jsx

@@ -1,12 +1,10 @@
 import _ from "lodash";
 import React, { PropTypes } from "react";
 import Radium from "radium";
-import {VictoryAnimation} from "victory-animation";
 
 @Radium
 export default class Slice extends React.Component {
   static propTypes = {
-    animate: PropTypes.object,
     slice: PropTypes.object,
     pathFunction: PropTypes.func,
     style: PropTypes.object
@@ -33,17 +31,6 @@ export default class Slice extends React.Component {
   }
 
   render() {
-    if (this.props.animate) {
-      // Do less work by having `VictoryAnimation` tween only values that
-      // make sense to tween. In the future, allow customization of animated
-      // prop whitelist/blacklist?
-      const animateData = _.pick(this.props, ["style", "slice"]);
-      return (
-        <VictoryAnimation {...this.props.animate} data={animateData}>
-          {(props) => <Slice {...this.props} {...props} animate={null}/>}
-        </VictoryAnimation>
-      );
-    }
     return this.renderSlice(this.props);
   }
 }

src/components/victory-pie.jsx

@@ -5,7 +5,7 @@ import d3Shape from "d3-shape";
 import Util from "victory-util";
 import Slice from "./slice";
 import SliceLabel from "./slice-label";
-
+import {VictoryAnimation} from "victory-animation";
 
 const defaultStyles = {
   data: {
@@ -221,13 +221,11 @@ export default class VictoryPie extends React.Component {
       return (
         <g key={index}>
           <Slice
-            animate={this.props.animate}
             slice={slice}
             pathFunction={this.slice}
             style={style}
           />
           <SliceLabel
-            animate={this.props.animate}
             labelComponent={this.props.labelComponent}
             style={this.style.labels}
             positionFunction={this.labelPosition.centroid}
@@ -241,7 +239,22 @@ export default class VictoryPie extends React.Component {
   }
 
   render() {
-    this.getCalculatedValues(this.props);
+    if (this.props.animate) {
+      // Do less work by having `VictoryAnimation` tween only values that
+      // make sense to tween. In the future, allow customization of animated
+      // prop whitelist/blacklist?
+      const animateData = _.pick(this.props, [
+        "data", "endAngle", "height", "innerRadius", "padAngle", "padding",
+        "colorScale", "startAngle", "style", "width"
+      ]);
+      return (
+        <VictoryAnimation {...this.props.animate} data={animateData}>
+          {(props) => <VictoryPie {...this.props} {...props} animate={null}/>}
+        </VictoryAnimation>
+      );
+    } else {
+      this.getCalculatedValues(this.props);
+    }
     const style = this.style.parent;
     const xOffset = this.radius + this.padding.left;
     const yOffset = this.radius + this.padding.top;