feat(line): new prop enableArea was added to Line chart (#82)

src/components/charts/line/Line.js

@@ -8,7 +8,7 @@
  */
 import React from 'react'
 import { sortBy } from 'lodash'
-import { line } from 'd3-shape'
+import { area, line } from 'd3-shape'
 import compose from 'recompose/compose'
 import pure from 'recompose/pure'
 import withPropsOnChange from 'recompose/withPropsOnChange'
@@ -27,6 +27,7 @@ import {
 import CartesianMarkers from '../../cartesian/markers/CartesianMarkers'
 import Axes from '../../axes/Axes'
 import Grid from '../../axes/Grid'
+import LineAreas from './LineAreas'
 import LineLines from './LineLines'
 import LineSlices from './LineSlices'
 import LineDots from './LineDots'
@@ -35,6 +36,7 @@ import { LinePropTypes, LineDefaultProps } from './props'
 const Line = ({
     lines,
     lineGenerator,
+    areaGenerator,
     xScale,
     yScale,
     slices,
@@ -55,6 +57,8 @@ const Line = ({
     enableGridY,
 
     lineWidth,
+    enableArea,
+    areaOpacity,
 
     // dots
     enableDots,
@@ -124,6 +128,14 @@ const Line = ({
                         left={axisLeft}
                         {...motionProps}
                     />
+                    {enableArea && (
+                        <LineAreas
+                            areaGenerator={areaGenerator}
+                            areaOpacity={areaOpacity}
+                            lines={lines}
+                            {...motionProps}
+                        />
+                    )}
                     <LineLines
                         lines={lines}
                         lineGenerator={lineGenerator}
@@ -171,7 +183,12 @@ const enhance = compose(
     withColors(),
     withDimensions(),
     withMotion(),
-    withPropsOnChange(['curve'], ({ curve }) => ({
+    withPropsOnChange(['curve', 'height'], ({ curve, height }) => ({
+        areaGenerator: area()
+            .x(d => d.x)
+            .y0(height)
+            .y1(d => d.y)
+            .curve(curveFromProp(curve)),
         lineGenerator: line()
             .defined(d => d.value !== null)
             .x(d => d.x)

src/components/charts/line/LineAreas.js

@@ -0,0 +1,77 @@
+/*
+ * 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 { motionPropTypes } from '../../../props'
+import SmartMotion from '../../SmartMotion'
+
+const LineAreas = ({
+    areaGenerator,
+    areaOpacity,
+    lines,
+
+    // motion
+    animate,
+    motionStiffness,
+    motionDamping,
+}) => {
+    if (animate !== true) {
+        return (
+            <g>
+                {lines.map(({ id, color: areaColor, points }) => (
+                    <path
+                        key={id}
+                        d={areaGenerator(points)}
+                        fill={areaColor}
+                        fillOpacity={areaOpacity}
+                        strokeWidth={0}
+                    />
+                ))}
+            </g>
+        )
+    }
+
+    const springConfig = {
+        stiffness: motionStiffness,
+        damping: motionDamping,
+    }
+
+    return (
+        <g>
+            {lines.map(({ id, color: areaColor, points }) => (
+                <SmartMotion
+                    key={id}
+                    style={spring => ({
+                        d: spring(areaGenerator(points), springConfig),
+                        fill: spring(areaColor, springConfig),
+                    })}
+                >
+                    {style => (
+                        <path
+                            key={id}
+                            d={style.d}
+                            fill={areaColor}
+                            fillOpacity={areaOpacity}
+                            strokeWidth={0}
+                        />
+                    )}
+                </SmartMotion>
+            ))}
+        </g>
+    )
+}
+
+LineAreas.propTypes = {
+    areaOpacity: PropTypes.number.isRequired,
+    // motion
+    ...motionPropTypes,
+}
+
+export default pure(LineAreas)

src/components/charts/line/props.js

@@ -25,6 +25,7 @@ export const LinePropTypes = {
 
     stacked: PropTypes.bool.isRequired,
     curve: lineCurvePropType.isRequired,
+    areaGenerator: PropTypes.func.isRequired,
     lineGenerator: PropTypes.func.isRequired,
 
     lines: PropTypes.array.isRequired,
@@ -65,6 +66,8 @@ export const LinePropTypes = {
 
     // styling
     getColor: PropTypes.func.isRequired,
+    enableArea: PropTypes.func.isRequired,
+    areaOpacity: PropTypes.number.isRequired,
     lineWidth: PropTypes.number.isRequired,
     defs: PropTypes.arrayOf(
         PropTypes.shape({
@@ -106,6 +109,8 @@ export const LineDefaultProps = {
     // styling
     colors: 'nivo',
     colorBy: 'id',
+    enableArea: false,
+    areaOpacity: 0.2,
     lineWidth: 2,
     defs: [],
 

stories/charts/line.stories.js

@@ -32,6 +32,36 @@ stories.add('with custom curve', () => (
     <Line {...commonProperties} stacked={true} curve="monotoneX" />
 ))
 
+stories.add('with area', () => (
+    <Line
+        {...commonProperties}
+        enableArea={true}
+        stacked={boolean('stacked', true)}
+        curve={select('curve', curveOptions, 'monotoneX')}
+        colorBy={d => d.color}
+        dotSize={8}
+        dotColor="#fff"
+        dotBorderWidth={2}
+        data={[
+            {
+                id: 'fake corp. A',
+                color: '#547687',
+                data: [0.4, 0.5, 0.7, 0.1, 0.2, 0.5, 0.6, 0.5].map((y, i) => ({ x: `#${i}`, y })),
+            },
+            {
+                id: 'fake corp. B',
+                color: '#7f98a5',
+                data: [0.5, 0.6, 0.8, 0.7, 0.8, 0.5, 0.2, 0.3].map((y, i) => ({ x: `#${i}`, y })),
+            },
+            {
+                id: 'fake corp. C',
+                color: '#a7bac3',
+                data: [0.9, 0.5, 0.6, 0.5, 0.4, 0.3, 0.1, 0.1].map((y, i) => ({ x: `#${i}`, y })),
+            },
+        ]}
+    />
+))
+
 stories.add('with dot label', () => (
     <Line
         {...commonProperties}