feat(line): restore ability to animate line & line area

packages/nivo-line/src/canvas/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+export { default as LineCanvas } from './LineCanvas'
+export { default as LineAreaCanvas } from './LineAreaCanvas'

packages/nivo-line/src/index.js

@@ -6,16 +6,9 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-export { default as ResponsiveLine } from './ResponsiveLine'
 export * from './props'
-export { default as Scales } from './Scales'
-export { default as LinearScaleX } from './LinearScaleX'
-export { default as LinearScaleY } from './LinearScaleY'
 export { default as Lines } from './Lines'
-export { default as Line } from './Line'
 export { default as LineAreas } from './LineAreas'
-export { default as LineArea } from './LineArea'
-
 export { default as CanvasWrapper } from './canvas/CanvasWrapper'
-export { default as LineCanvas } from './canvas/LineCanvas'
-export { default as LineAreaCanvas } from './canvas/LineAreaCanvas'
+export * from './svg'
+export * from './canvas'

packages/nivo-line/src/svg/LineAreaSvg.js

@@ -0,0 +1,79 @@
+/*
+ * 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 from 'react'
+import PropTypes from 'prop-types'
+import pure from 'recompose/pure'
+import {
+    SmartMotion,
+    motionPropTypes,
+    defaultAnimate,
+    defaultMotionDamping,
+    defaultMotionStiffness,
+} from '@nivo/core'
+
+const LineArea = ({
+    data,
+    generator,
+    xScale,
+    yScale,
+    animate,
+    motionDamping,
+    motionStiffness,
+    ...props
+}) => {
+    const pathDef = generator(
+        data.map(d => ({
+            x: d.x !== null ? xScale(d.x) : null,
+            y: d.y !== null ? yScale(d.y) : null,
+        }))
+    )
+
+    if (animate !== true) {
+        return <path d={pathDef} fill="rgba(0, 0, 0, 0.2)" {...props} />
+    }
+
+    const springConfig = {
+        stiffness: motionStiffness,
+        damping: motionDamping,
+    }
+
+    return (
+        <SmartMotion
+            style={spring => ({
+                d: spring(pathDef, springConfig),
+            })}
+        >
+            {style => <path d={style.d} fill="rgba(0, 0, 0, 0.2)" {...props} />}
+        </SmartMotion>
+    )
+}
+
+LineArea.propTypes = {
+    data: PropTypes.arrayOf(
+        PropTypes.shape({
+            x: PropTypes.number,
+            y: PropTypes.number,
+        })
+    ),
+    generator: PropTypes.func.isRequired,
+    xScale: PropTypes.func.isRequired,
+    yScale: PropTypes.func.isRequired,
+
+    // motion
+    ...motionPropTypes,
+}
+
+LineArea.defaultProps = {
+    // motion
+    animate: defaultAnimate,
+    motionDamping: defaultMotionDamping,
+    motionStiffness: defaultMotionStiffness,
+}
+
+export default pure(LineArea)