feat(axes): add ability to disable axes transitions

src/components/axes/Axes.js

@@ -8,6 +8,7 @@
  */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { motion as motionPropTypes } from '../../PropTypes'
 import Axis from './Axis'
 
 const horizontalPositions = ['top', 'bottom']
@@ -36,6 +37,9 @@ export default class Axes extends Component {
         }).isRequired,
 
         theme: PropTypes.object.isRequired,
+
+        // motion
+        ...motionPropTypes,
     }
 
     static defaultProps = {}

src/components/axes/Axis.js

@@ -9,12 +9,15 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { TransitionMotion, spring } from 'react-motion'
+import { motion as motionPropTypes } from '../../PropTypes'
 import Nivo from '../../Nivo'
 import AxisTick from './AxisTick'
 
 const center = scale => {
     let offset = scale.bandwidth() / 2
-    if (scale.round()) offset = Math.round(offset)
+    if (scale.round()) {
+        offset = Math.round(offset)
+    }
 
     return d => scale(d) + offset
 }
@@ -26,28 +29,31 @@ export default class Axis extends Component {
         orient: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
         position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired,
         scale: PropTypes.func.isRequired,
+
         // ticks
         tickSize: PropTypes.number.isRequired,
         tickPadding: PropTypes.number.isRequired,
         format: PropTypes.func,
+
         // legend
         legend: PropTypes.string,
         legendPosition: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
         legendOffset: PropTypes.number.isRequired,
         theme: PropTypes.object.isRequired,
+
         // motion
-        animate: PropTypes.bool.isRequired,
-        motionStiffness: PropTypes.number.isRequired,
-        motionDamping: PropTypes.number.isRequired,
+        ...motionPropTypes,
     }
 
     static defaultProps = {
         // ticks
         tickSize: 5,
         tickPadding: 5,
+
         // legend
         legendPosition: 'end',
         legendOffset: 0,
+
         // motion
         animate: true,
         motionStiffness: Nivo.defaults.motionStiffness,
@@ -62,9 +68,7 @@ export default class Axis extends Component {
         }
     }
 
-    willLeave(styleThatLeft) {
-        const { style } = styleThatLeft
-
+    willLeave({ style }) {
         return {
             opacity: spring(0),
             x: spring(style.x.val),
@@ -180,17 +184,33 @@ export default class Axis extends Component {
             ...translate(v),
         }))
 
-        const springConfig = {
-            stiffness: motionStiffness,
-            damping: motionDamping,
-        }
+        let tickElements
+        if (!animate) {
+            tickElements = (
+                <g>
+                    {ticks.map(tick =>
+                        <AxisTick
+                            key={tick.key}
+                            value={tick.key}
+                            format={format}
+                            tickLine={tickLine}
+                            textXY={textXY}
+                            textDY={textDY}
+                            textAnchor={textAnchor}
+                            theme={theme}
+                            x={tick.x}
+                            y={tick.y}
+                        />
+                    )}
+                </g>
+            )
+        } else {
+            const springConfig = {
+                stiffness: motionStiffness,
+                damping: motionDamping,
+            }
 
-        return (
-            <g
-                className={`nivo__axis nivo__axis--${_position}  nivo__axis--orient-${orient}`}
-                transform={`translate(${x},${y})`}
-            >
-                {legend}
+            tickElements = (
                 <TransitionMotion
                     willEnter={this.willEnter}
                     willLeave={this.willLeave}
@@ -208,24 +228,31 @@ export default class Axis extends Component {
                 >
                     {interpolatedStyles =>
                         <g>
-                            {interpolatedStyles.map(interpolatedStyle => {
-                                const { key, style } = interpolatedStyle
-                                return (
-                                    <AxisTick
-                                        key={key}
-                                        value={key}
-                                        format={format}
-                                        tickLine={tickLine}
-                                        textXY={textXY}
-                                        textDY={textDY}
-                                        textAnchor={textAnchor}
-                                        theme={theme}
-                                        {...style}
-                                    />
-                                )
-                            })}
+                            {interpolatedStyles.map(({ key, style }) =>
+                                <AxisTick
+                                    key={key}
+                                    value={key}
+                                    format={format}
+                                    tickLine={tickLine}
+                                    textXY={textXY}
+                                    textDY={textDY}
+                                    textAnchor={textAnchor}
+                                    theme={theme}
+                                    {...style}
+                                />
+                            )}
                         </g>}
                 </TransitionMotion>
+            )
+        }
+
+        return (
+            <g
+                className={`nivo__axis nivo__axis--${_position}  nivo__axis--orient-${orient}`}
+                transform={`translate(${x},${y})`}
+            >
+                {legend}
+                {tickElements}
             </g>
         )
     }

src/components/axes/AxisTick.js

@@ -13,15 +13,22 @@ export default class AxisTick extends Component {
     static propTypes = {
         format: PropTypes.func,
         theme: PropTypes.object.isRequired,
+        x: PropTypes.number.isRequired,
+        y: PropTypes.number.isRequired,
+        opacity: PropTypes.number.isRequired,
+    }
+
+    static defaultProps = {
+        opacity: 1,
     }
 
     render() {
         const {
             value: _value,
             x,
             y,
-            format,
             opacity,
+            format,
             tickLine,
             textXY,
             textDY,

src/components/charts/bars/Bar.js

@@ -1,9 +1,17 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { merge } from 'lodash'
 import { TransitionMotion, spring } from 'react-motion'
 import Nivo, { defaultTheme } from '../../../Nivo'
-import { margin as marginPropType } from '../../../PropTypes'
+import { margin as marginPropType, motion as motionPropTypes } from '../../../PropTypes'
 import { getColorRange } from '../../../ColorUtils'
 import { generateGroupedBars, generateStackedBars } from '../../../lib/charts/bar'
 import SvgWrapper from '../SvgWrapper'
@@ -49,9 +57,7 @@ export default class Bar extends Component {
         colors: PropTypes.any.isRequired,
 
         // motion
-        animate: PropTypes.bool.isRequired,
-        motionStiffness: PropTypes.number.isRequired,
-        motionDamping: PropTypes.number.isRequired,
+        ...motionPropTypes,
     }
 
     static defaultProps = {
@@ -179,6 +185,7 @@ export default class Bar extends Component {
                     width={width}
                     height={height}
                     theme={theme}
+                    {...motionProps}
                 />
                 {bars}
                 {enableLabels && result.bars.map(d => <BarItemLabel {...d} key={d.key} />)}

src/index.js

@@ -7,7 +7,9 @@
  * file that was distributed with this source code.
  */
 
-export { default as Nivo } from './Nivo'
+import Nivo from './Nivo'
+
+export default Nivo
 export * from './components/charts/bars/'
 export * from './components/charts/line/'
 export * from './components/charts/bubble/'