From c5d5d86f3cb04820a7de5629b38842d6100fa4ef Mon Sep 17 00:00:00 2001 From: Dave Perrett Date: Sat, 23 May 2020 13:31:29 +0900 Subject: [PATCH] feat(bump): add support for defs/fill properties to AreaBump (#926) --- packages/bump/src/area-bump/AreaBump.js | 8 +++- packages/bump/src/area-bump/props.js | 14 ++++++ packages/bump/stories/bump.stories.js | 43 ++++++++++++++++++- .../src/data/components/area-bump/props.js | 8 +++- website/src/pages/area-bump/index.js | 21 +++++++++ 5 files changed, 90 insertions(+), 4 deletions(-) diff --git a/packages/bump/src/area-bump/AreaBump.js b/packages/bump/src/area-bump/AreaBump.js index ecee9c1e0..fee130b85 100644 --- 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 && ( @@ -152,7 +156,7 @@ const AreaBump = props => { } return ( - + {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 index 57ff56dd1..20a48ee44 100644 --- 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 index 9c411b755..8f24e13da 100644 --- 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', () => ( + +)) diff --git a/website/src/data/components/area-bump/props.js b/website/src/data/components/area-bump/props.js index c49eb0164..14833d44e 100644 --- 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 index d8f6d259b..f868b394c 100644 --- 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,