feat(bump): add support for defs/fill properties to AreaBump (#926)

plouc · May 23, 2020 · c5d5d86 · c5d5d86
1 parent 07d2c3f
commit c5d5d86
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 4 deletions.
diff --git a/packages/bump/src/area-bump/AreaBump.js b/packages/bump/src/area-bump/AreaBump.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import React, { memo, useState, Fragment } from 'react'
-import { withContainer, useDimensions, SvgWrapper } from '@nivo/core'
+import { bindDefs, withContainer, useDimensions, SvgWrapper } from '@nivo/core'
 import { Grid, Axes } from '@nivo/axes'
 import { AreaBumpPropTypes, AreaBumpDefaultProps } from './props'
 import { useAreaBump } from './hooks'
@@ -34,6 +34,8 @@ const AreaBump = props => {
         fillOpacity,
         activeFillOpacity,
         inactiveFillOpacity,
+        defs,
+        fill,
         borderWidth,
         activeBorderWidth,
         inactiveBorderWidth,
@@ -92,6 +94,8 @@ const AreaBump = props => {
         current: currentSerie,
     })
 
+    const boundDefs = bindDefs(defs, series, fill, { targetKey: 'color' })
+
     const layerById = {
         grid: enableGridX && (
             <Grid key="grid" width={innerWidth} height={innerHeight} xScale={xScale} />
@@ -152,7 +156,7 @@ const AreaBump = 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 (

diff --git a/packages/bump/src/area-bump/props.js b/packages/bump/src/area-bump/props.js
@@ -40,6 +40,18 @@ const commonPropTypes = {
     fillOpacity: PropTypes.number.isRequired,
     activeFillOpacity: PropTypes.number.isRequired,
     inactiveFillOpacity: PropTypes.number.isRequired,
+    defs: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.string.isRequired,
+        })
+    ).isRequired,
+    fill: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.string,
+            match: PropTypes.oneOfType([PropTypes.oneOf(['*']), PropTypes.object, PropTypes.func])
+                .isRequired,
+        })
+    ).isRequired,
     borderWidth: PropTypes.number.isRequired,
     activeBorderWidth: PropTypes.number.isRequired,
     inactiveBorderWidth: PropTypes.number.isRequired,
@@ -88,6 +100,8 @@ const commonDefaultProps = {
     fillOpacity: 0.8,
     activeFillOpacity: 1,
     inactiveFillOpacity: 0.15,
+    defs: [],
+    fill: [],
     borderWidth: 1,
     activeBorderWidth: 1,
     inactiveBorderWidth: 0,

diff --git a/packages/bump/stories/bump.stories.js b/packages/bump/stories/bump.stories.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import range from 'lodash/range'
 import shuffle from 'lodash/shuffle'
-import { Bump } from '../src'
+import { AreaBump, Bump } from '../src'
 
 const generateData = () => {
     const years = range(2000, 2005)
@@ -132,3 +132,44 @@ stories.add('Missing data', () => (
         ]}
     />
 ))
+
+stories.add('Area with fill pattern', () => (
+    <AreaBump
+        {...commonProps}
+        indexBy="id"
+        defs={[
+            {
+                id: 'dots',
+                type: 'patternDots',
+                background: 'inherit',
+                color: '#38bcb2',
+                size: 4,
+                padding: 1,
+                stagger: true,
+            },
+            {
+                id: 'lines',
+                type: 'patternLines',
+                background: 'inherit',
+                color: '#eed312',
+                rotation: -45,
+                lineWidth: 6,
+                spacing: 10,
+            },
+        ]}
+        fill={[
+            {
+                match: {
+                    id: 'Serie 3',
+                },
+                id: 'lines',
+            },
+            {
+                match: {
+                    id: 'Serie 5',
+                },
+                id: 'dots',
+            },
+        ]}
+    />
+))
diff --git a/website/src/data/components/area-bump/props.js b/website/src/data/components/area-bump/props.js
@@ -7,7 +7,12 @@
  * file that was distributed with this source code.
  */
 import { AreaBumpDefaultProps as defaults } from '@nivo/bump'
-import { motionProperties, axesProperties, groupProperties } from '../../../lib/componentProperties'
+import {
+    axesProperties,
+    defsProperties,
+    groupProperties,
+    motionProperties,
+} from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -235,6 +240,7 @@ const props = [
         defaultValue: defaults.inactiveBorderOpacity,
         controlType: 'opacity',
     },
+    ...defsProperties('Style', ['svg']),
     {
         key: 'startLabel',
         group: 'Labels',

diff --git a/website/src/pages/area-bump/index.js b/website/src/pages/area-bump/index.js
@@ -9,6 +9,7 @@
 import React from 'react'
 import range from 'lodash/range'
 import random from 'lodash/random'
+import { patternDotsDef, patternLinesDef } from '@nivo/core'
 import { ResponsiveAreaBump, AreaBumpDefaultProps } from '@nivo/bump'
 import ComponentTemplate from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/area-bump/meta.yml'
@@ -48,6 +49,26 @@ const initialProperties = {
     fillOpacity: AreaBumpDefaultProps.fillOpacity,
     activeFillOpacity: AreaBumpDefaultProps.activeFillOpacity,
     inactiveFillOpacity: AreaBumpDefaultProps.inactiveFillOpacity,
+    defs: [
+        patternDotsDef('dots', {
+            background: 'inherit',
+            color: '#38bcb2',
+            size: 4,
+            padding: 1,
+            stagger: true,
+        }),
+        patternLinesDef('lines', {
+            background: 'inherit',
+            color: '#eed312',
+            rotation: -45,
+            lineWidth: 6,
+            spacing: 10,
+        }),
+    ],
+    fill: [
+        { match: { id: 'CoffeeScript' }, id: 'dots' },
+        { match: { id: 'TypeScript' }, id: 'lines' },
+    ],
     borderWidth: AreaBumpDefaultProps.borderWidth,
     activeBorderWidth: AreaBumpDefaultProps.activeBorderWidth,
     inactiveBorderWidth: AreaBumpDefaultProps.inactiveBorderWidth,