feat(line): add gradient support to line areas (#844)

packages/core/index.d.ts

@@ -141,7 +141,7 @@ declare module '@nivo/core' {
         | 'stepAfter'
         | 'stepBefore'
 
-    type DataFormatter = (value: DatumValue) => string | number
+    export type DataFormatter = (value: DatumValue) => string | number
 
     export function useValueFormatter(formatter?: DataFormatter | string): DataFormatter
 }

packages/line/index.d.ts

@@ -13,6 +13,7 @@ import {
     Theme,
     MotionProps,
     CartesianMarkerProps,
+    SvgDefsAndFill,
     DataFormatter,
     DatumValue as CoreDatumValue,
 } from '@nivo/core'
@@ -193,7 +194,7 @@ declare module '@nivo/line' {
         legends?: LegendProps[]
     }
 
-    export interface LineSvgProps extends LineProps, MotionProps {
+    export interface LineSvgProps extends LineProps, MotionProps, SvgDefsAndFill<Datum> {
         enablePointLabel?: boolean
         pointLabel?: string
         pointLabelYOffset?: number

packages/line/src/Areas.js

@@ -19,11 +19,11 @@ const Areas = ({ areaGenerator, areaOpacity, areaBlendMode, lines }) => {
                 {lines
                     .slice(0)
                     .reverse()
-                    .map(({ id, data, color: areaColor }) => (
+                    .map(({ id, data, color: areaColor, fill }) => (
                         <path
                             key={id}
                             d={areaGenerator(data.map(d => d.position))}
-                            fill={areaColor}
+                            fill={fill ? fill : areaColor}
                             fillOpacity={areaOpacity}
                             strokeWidth={0}
                             style={{
@@ -40,7 +40,7 @@ const Areas = ({ areaGenerator, areaOpacity, areaBlendMode, lines }) => {
             {lines
                 .slice(0)
                 .reverse()
-                .map(({ id, data, color: areaColor }) => (
+                .map(({ id, data, color: areaColor, fill }) => (
                     <SmartMotion
                         key={id}
                         style={spring => ({
@@ -52,7 +52,7 @@ const Areas = ({ areaGenerator, areaOpacity, areaBlendMode, lines }) => {
                             <path
                                 key={id}
                                 d={style.d}
-                                fill={areaColor}
+                                fill={fill ? fill : areaColor}
                                 fillOpacity={areaOpacity}
                                 strokeWidth={0}
                                 style={{ mixBlendMode: areaBlendMode }}

packages/line/src/Line.js

@@ -7,7 +7,14 @@
  * file that was distributed with this source code.
  */
 import React, { Fragment, useState, useMemo } from 'react'
-import { withContainer, useDimensions, useTheme, SvgWrapper, CartesianMarkers } from '@nivo/core'
+import {
+    bindDefs,
+    withContainer,
+    useDimensions,
+    useTheme,
+    SvgWrapper,
+    CartesianMarkers,
+} from '@nivo/core'
 import { useInheritedColor } from '@nivo/colors'
 import { Axes, Grid } from '@nivo/axes'
 import { BoxLegendSvg } from '@nivo/legends'
@@ -62,6 +69,9 @@ const Line = props => {
         pointLabelFormat,
         pointLabelYOffset,
 
+        defs,
+        fill,
+
         markers,
 
         legends,
@@ -185,6 +195,8 @@ const Line = props => {
         )),
     }
 
+    const boundDefs = bindDefs(defs, series, fill)
+
     if (enableArea) {
         layerById.areas = (
             <Areas
@@ -278,7 +290,7 @@ const Line = props => {
     }
 
     return (
-        <SvgWrapper width={outerWidth} height={outerHeight} margin={margin}>
+        <SvgWrapper defs={boundDefs} width={outerWidth} height={outerHeight} margin={margin}>
             {layers.map((layer, i) => {
                 if (typeof layer === 'function') {
                     return (

packages/line/src/props.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
-import { lineCurvePropType, blendModePropType, motionPropTypes } from '@nivo/core'
+import { lineCurvePropType, blendModePropType, motionPropTypes, defsPropTypes } from '@nivo/core'
 import { ordinalColorsPropType } from '@nivo/colors'
 import { axisPropType } from '@nivo/axes'
 import { scalePropType } from '@nivo/scales'
@@ -112,11 +112,6 @@ const commonPropTypes = {
         PropTypes.instanceOf(Date),
     ]).isRequired,
     lineWidth: PropTypes.number.isRequired,
-    defs: PropTypes.arrayOf(
-        PropTypes.shape({
-            id: PropTypes.string.isRequired,
-        })
-    ).isRequired,
 
     legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
 
@@ -139,6 +134,7 @@ export const LinePropTypes = {
     enablePointLabel: PropTypes.bool.isRequired,
     useMesh: PropTypes.bool.isRequired,
     ...motionPropTypes,
+    ...defsPropTypes,
 }
 
 export const LineCanvasPropTypes = {
@@ -188,8 +184,6 @@ const commonDefaultProps = {
     areaBlendMode: 'normal',
     lineWidth: 2,
 
-    defs: [],
-
     legends: [],
 
     isInteractive: true,
@@ -209,6 +203,8 @@ export const LineDefaultProps = {
     animate: true,
     motionStiffness: 90,
     motionDamping: 15,
+    defs: [],
+    fill: [],
 }
 
 export const LineCanvasDefaultProps = {

packages/line/stories/line.stories.js

@@ -12,7 +12,7 @@ import last from 'lodash/last'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, boolean, select } from '@storybook/addon-knobs'
 import { generateDrinkStats } from '@nivo/generators'
-import { Defs } from '@nivo/core'
+import { Defs, linearGradientDef } from '@nivo/core'
 import { area, curveMonotoneX } from 'd3-shape'
 import * as time from 'd3-time'
 import { timeFormat } from 'd3-time-format'
@@ -110,7 +110,7 @@ stories.add(
                 By default, \`xScale\` is a point scale, but you can switch to linear using
                 the \`xScale.type\` property. It supports irregular intervals while \`point\`
                 scale doesn't.
-                
+
                 If you want missing datums to appear as holes instead of connecting defined ones,
                 you should set their y value to \`null\`.
             `,
@@ -526,7 +526,7 @@ stories.add(
             text: `
                 Please note that when using stacked y scale with variable length/data holes,
                 if one of the y value is \`null\` all subsequent values will be skipped
-                as we cannot properly compute the sum. 
+                as we cannot properly compute the sum.
             `,
         },
     }
@@ -1011,3 +1011,22 @@ stories.add(
         },
     }
 )
+
+stories.add('area gradients', () => (
+    <Line
+        {...commonProperties}
+        enableArea={true}
+        yScale={{
+            type: 'linear',
+            stacked: true,
+        }}
+        curve={select('curve', curveOptions, 'linear')}
+        defs={[
+            linearGradientDef('gradientA', [
+                { offset: 0, color: 'inherit' },
+                { offset: 100, color: 'inherit', opacity: 0 },
+            ]),
+        ]}
+        fill={[{ match: '*', id: 'gradientA' }]}
+    />
+))

website/src/data/components/line/meta.yml

@@ -40,6 +40,8 @@ Line:
       link: line--formatting-values
     - label: adding custom layers
       link: line--custom-layers
+    - label: area gradients
+      link: line--area-gradients
   description: |
     Line chart with stacking ability.
 

website/src/data/components/line/props.js

@@ -13,6 +13,7 @@ import {
     motionProperties,
     getLegendsProps,
     groupProperties,
+    defsProperties,
 } from '../../../lib/componentProperties'
 
 const props = [
@@ -277,6 +278,7 @@ const props = [
         controlType: 'blendMode',
         group: 'Style',
     },
+    ...defsProperties('Style', ['svg']),
     {
         key: 'layers',
         group: 'Customization',