Radial Chart
diff --git a/showcase/treemap/dynamic-treemap.js b/showcase/treemap/dynamic-treemap.js index 444ed6ee3..c1b1fbe94 100644 --- a/showcase/treemap/dynamic-treemap.js +++ b/showcase/treemap/dynamic-treemap.js @@ -19,65 +19,63 @@ // THE SOFTWARE. import React from 'react'; -import window from 'global/window'; import Treemap from 'treemap'; -export default class DynamicTreemapExample extends React.Component { +function _getRandomData() { + const totalLeaves = Math.random() * 20; + const leaves = []; + let title; + for (let i = 0; i < totalLeaves; i++) { + title = Math.random(); + if (Math.random() > 0.5) { + title = ( + {title} + ); + } + leaves.push({ + title, + size: Math.random() * 1000, + color: Math.random() + }); + } + return { + title: '', + color: 1, + children: leaves + }; +} +export default class DynamicTreemapExample extends React.Component { state = { hoveredNode: false, - treemapData: this._getRandomData(), + treemapData: _getRandomData(), useCirclePacking: false } - componentDidMount() { - window.setInterval( - () => this.setState({treemapData: this._getRandomData()}), - 5000 - ); - } - - _getRandomData() { - const totalLeaves = Math.random() * 20; - const leaves = []; - let title; - for (let i = 0; i < totalLeaves; i++) { - title = Math.random(); - if (Math.random() > 0.5) { - title = ( - {title} - ); - } - leaves.push({ - title, - size: Math.random() * 1000, - color: Math.random() - }); - } - return { - title: '', - color: 1, - children: leaves - }; - } - render() { + const {hoveredNode, useCirclePacking} = this.state; const treeProps = { - animation: true, + animation: { + damping: 9, + stiffness: 300 + }, data: this.state.treemapData, onLeafMouseOver: x => this.setState({hoveredNode: x}), onLeafMouseOut: () => this.setState({hoveredNode: false}), - onLeafClick: () => this.setState({useCirclePacking: !this.state.useCirclePacking}), + onLeafClick: () => this.setState({treemapData: _getRandomData()}), height: 300, mode: this.state.useCirclePacking ? 'circlePack' : 'squarify', width: 350 }; return (
- click below!
+
);
}
diff --git a/src/animation.js b/src/animation.js
index 9026c65ff..e10fcedb0 100644
--- a/src/animation.js
+++ b/src/animation.js
@@ -1,18 +1,41 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
import {interpolate} from 'd3-interpolate';
-import {spring, Motion} from 'react-motion';
-
+import {spring, Motion, presets} from 'react-motion';
import PureRenderComponent from 'pure-render-component';
+const ANIMATION_PROPTYPES = PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.shape({
+ stiffness: PropTypes.number,
+ damping: PropTypes.number
+ }),
+ PropTypes.bool
+]);
+
const propTypes = {
- animatedProps: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
- onStart: React.PropTypes.func,
- onEnd: React.PropTypes.func,
- stiffness: React.PropTypes.number,
- damping: React.PropTypes.number,
- precision: React.PropTypes.number
+ animatedProps: PropTypes.arrayOf(PropTypes.string).isRequired,
+ animation: ANIMATION_PROPTYPES,
+ onStart: PropTypes.func,
+ onEnd: PropTypes.func
};
+/**
+ * Format the animation style object
+ * @param {Object|String} animationStyle - The animation style property, either the name of a
+ * presets are one of noWobble, gentle, wobbly, stiff
+ */
+function getAnimationStyle(animationStyle = presets.noWobble) {
+ if (typeof animationStyle === 'string') {
+ return presets[animationStyle] || presets.noWobble;
+ }
+ const {damping, stiffness} = animationStyle;
+ return {
+ damping: damping || presets.noWobble.damping,
+ stiffness: stiffness || presets.noWobble.stiffness,
+ ...animationStyle
+ };
+}
+
class Animation extends PureRenderComponent {
constructor(props) {
super(props);
@@ -87,8 +110,9 @@ class Animation extends PureRenderComponent {
}
render() {
+ const animationStyle = getAnimationStyle(this.props.animation);
const defaultStyle = {i: 0};
- const style = {i: spring(1)};
+ const style = {i: spring(1, animationStyle)};
// In order to make Motion re-run animations each time, the random key is
// always passed.
// TODO: find a better solution for the spring.
@@ -105,3 +129,5 @@ Animation.propTypes = propTypes;
Animation.displayName = 'Animation';
export default Animation;
+
+export const AnimationPropType = ANIMATION_PROPTYPES;
diff --git a/src/plot/circular-grid-lines.js b/src/plot/circular-grid-lines.js
index 4d6f50d2e..3ecc038a2 100644
--- a/src/plot/circular-grid-lines.js
+++ b/src/plot/circular-grid-lines.js
@@ -22,15 +22,13 @@ import React, {PropTypes} from 'react';
import PureRenderComponent from 'pure-render-component';
import {getAttributeScale} from 'utils/scales-utils';
-import Animation from 'animation';
+import Animation, {AnimationPropType} from 'animation';
import {
getTicksTotalFromSize,
getTickValues
} from '../utils/axis-utils';
-import {AnimationPropType} from '../utils/animation-utils';
-
const propTypes = {
centerX: PropTypes.number,
centerY: PropTypes.number,
diff --git a/src/plot/grid-lines.js b/src/plot/grid-lines.js
index e7e13aa9a..5af1ec9e6 100644
--- a/src/plot/grid-lines.js
+++ b/src/plot/grid-lines.js
@@ -22,7 +22,7 @@ import React from 'react';
import PureRenderComponent from 'pure-render-component';
import {getAttributeScale} from 'utils/scales-utils';
-import Animation from 'animation';
+import Animation, {AnimationPropType} from 'animation';
import {
getTicksTotalFromSize,
@@ -30,8 +30,6 @@ import {
DIRECTION
} from '../utils/axis-utils';
-import {AnimationPropType} from '../utils/animation-utils';
-
const {VERTICAL, HORIZONTAL} = DIRECTION;
const propTypes = {
diff --git a/src/plot/series/abstract-series.js b/src/plot/series/abstract-series.js
index 04356be06..03733eb8a 100644
--- a/src/plot/series/abstract-series.js
+++ b/src/plot/series/abstract-series.js
@@ -22,7 +22,7 @@ import React from 'react';
import {voronoi} from 'd3-voronoi';
import PureRenderComponent from 'pure-render-component';
-import {AnimationPropType} from 'utils/animation-utils';
+import {AnimationPropType} from 'animation';
import {
getAttributeFunctor,
getAttr0Functor,
diff --git a/src/plot/xy-plot.js b/src/plot/xy-plot.js
index 175ed27d0..841ff2801 100644
--- a/src/plot/xy-plot.js
+++ b/src/plot/xy-plot.js
@@ -24,7 +24,7 @@ import equal from 'deep-equal';
import {extractScalePropsFromProps, getMissingScaleProps} from 'utils/scales-utils';
import {getStackedData, getSeriesChildren, getSeriesPropsFromChildren} from 'utils/series-utils';
import {getInnerDimensions, MarginPropType} from 'utils/chart-utils';
-import {AnimationPropType} from 'utils/animation-utils';
+import {AnimationPropType} from 'animation';
import {CONTINUOUS_COLOR_RANGE, SIZE_RANGE, OPACITY_TYPE} from 'theme';
const ATTRIBUTES = [
diff --git a/src/radial-chart/index.js b/src/radial-chart/index.js
index 668ec344d..0562fc70d 100644
--- a/src/radial-chart/index.js
+++ b/src/radial-chart/index.js
@@ -21,9 +21,8 @@
import React, {PropTypes} from 'react';
import {arc as arcBuilder, pie as pieBuilder} from 'd3-shape';
-import Animation from 'animation';
+import Animation, {AnimationPropType} from 'animation';
import {getInnerDimensions, MarginPropType} from 'utils/chart-utils';
-import {AnimationPropType} from 'utils/animation-utils';
import {DEFAULT_OPACITY, OPACITY_TYPE, DISCRETE_COLOR_RANGE} from 'theme';
import {
getAttributeFunctor,
diff --git a/src/treemap/index.js b/src/treemap/index.js
index 45c35edc7..ef3229dfe 100644
--- a/src/treemap/index.js
+++ b/src/treemap/index.js
@@ -33,7 +33,7 @@ import {
} from 'd3-hierarchy';
import {CONTINUOUS_COLOR_RANGE, DEFAULT_COLOR, DEFAULT_OPACITY, OPACITY_TYPE} from 'theme';
-import {AnimationPropType} from 'utils/animation-utils';
+import {AnimationPropType} from 'animation';
import {getAttributeFunctor, getMissingScaleProps} from 'utils/scales-utils';
import TreemapLeaf from './treemap-leaf';
diff --git a/src/treemap/treemap-leaf.js b/src/treemap/treemap-leaf.js
index c5d2d7afc..bc3ef93fd 100644
--- a/src/treemap/treemap-leaf.js
+++ b/src/treemap/treemap-leaf.js
@@ -20,8 +20,7 @@
import React, {PropTypes} from 'react';
-import Animation from 'animation';
-import {AnimationPropType} from 'utils/animation-utils';
+import Animation, {AnimationPropType} from 'animation';
import {getFontColorFromBackground} from 'utils/scales-utils';
const ANIMATED_PROPS = [
@@ -66,6 +65,7 @@ class TreemapLeaf extends React.Component {
y0,
y1
} = this.props;
+
if (animation) {
return (