feat(line): add ability to animate line chart lines

plouc · Aug 8, 2017 · 1918772 · 1918772
1 parent 40d8bc6
commit 1918772
Show file tree

Hide file tree

Showing 7 changed files with 658 additions and 584 deletions.
diff --git a/src/components/axes/Axes.js b/src/components/axes/Axes.js
@@ -6,80 +6,92 @@
  * 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 React from 'react'
 import PropTypes from 'prop-types'
+import { isEqual } from 'lodash'
+import shouldUpdate from 'recompose/shouldUpdate'
 import { motionPropTypes } from '../../props'
 import Axis, { axisPropType } from './Axis'
 
 const horizontalPositions = ['top', 'bottom']
 const verticalPositions = ['left', 'right']
 const positions = [...horizontalPositions, ...verticalPositions]
 
-export default class Axes extends Component {
-    static propTypes = {
-        xScale: PropTypes.func.isRequired,
-        yScale: PropTypes.func.isRequired,
+const Axes = ({
+    xScale,
+    yScale,
+    width,
+    height,
+    top,
+    right,
+    bottom,
+    left,
+    theme,
+    animate,
+    motionStiffness,
+    motionDamping,
+}) => {
+    const axes = { top, right, bottom, left }
 
-        width: PropTypes.number.isRequired,
-        height: PropTypes.number.isRequired,
+    return (
+        <g>
+            {positions.map(position => {
+                if (!axes[position]) return null
 
-        top: axisPropType,
-        right: axisPropType,
-        bottom: axisPropType,
-        left: axisPropType,
+                const axis = axes[position]
+                if (axis.enabled !== undefined && axis.enabled === false) return null
 
-        theme: PropTypes.object.isRequired,
+                const scale = horizontalPositions.includes(position) ? xScale : yScale
 
-        // motion
-        ...motionPropTypes,
-    }
-
-    static defaultProps = {}
-
-    render() {
-        const {
-            xScale,
-            yScale,
-            width,
-            height,
-            top,
-            right,
-            bottom,
-            left,
-            theme,
-            animate,
-            motionStiffness,
-            motionDamping,
-        } = this.props
+                return (
+                    <Axis
+                        theme={theme}
+                        {...axis}
+                        key={position}
+                        width={width}
+                        height={height}
+                        position={position}
+                        scale={scale}
+                        animate={animate}
+                        motionDamping={motionDamping}
+                        motionStiffness={motionStiffness}
+                    />
+                )
+            })}
+        </g>
+    )
+}
 
-        const axes = { top, right, bottom, left }
+Axes.propTypes = {
+    xScale: PropTypes.func.isRequired,
+    yScale: PropTypes.func.isRequired,
 
-        return (
-            <g>
-                {positions.map(position => {
-                    if (!axes[position]) return null
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
 
-                    const axis = axes[position]
-                    if (axis.enabled !== undefined && axis.enabled === false) return null
+    top: axisPropType,
+    right: axisPropType,
+    bottom: axisPropType,
+    left: axisPropType,
 
-                    const scale = horizontalPositions.includes(position) ? xScale : yScale
+    theme: PropTypes.object.isRequired,
 
-                    return (
-                        <Axis
-                            theme={theme}
-                            {...axis}
-                            key={position}
-                            width={width}
-                            height={height}
-                            position={position}
-                            scale={scale}
-                            animate={animate}
-                            motionDamping={motionDamping}
-                            motionStiffness={motionStiffness}
-                        />
-                    )
-                })}
-            </g>
-        )
-    }
+    // motion
+    ...motionPropTypes,
 }
+
+export default shouldUpdate(
+    (props, nextProps) =>
+        props.xScale !== nextProps.xScale ||
+        props.yScale !== nextProps.yScale ||
+        props.width !== nextProps.width ||
+        props.height !== nextProps.height ||
+        props.theme !== nextProps.theme ||
+        props.animate !== nextProps.animate ||
+        props.motionDamping !== nextProps.motionDamping ||
+        props.motionStiffness !== nextProps.motionStiffness ||
+        !isEqual(props.top, nextProps.top) ||
+        !isEqual(props.right, nextProps.right) ||
+        !isEqual(props.bottom, nextProps.bottom) ||
+        !isEqual(props.left, nextProps.left)
+)(Axes)