From 7e68a4231f34ce1d8d62f3c109fd3e2e28318333 Mon Sep 17 00:00:00 2001 From: francescocretti Date: Mon, 11 Jul 2022 15:35:07 +0200 Subject: [PATCH 1/4] enable defs and fill in choropleth map --- packages/geo/src/Choropleth.js | 12 +++++++++++- packages/geo/src/GeoMapFeature.js | 2 +- packages/geo/src/props.js | 3 +++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/geo/src/Choropleth.js b/packages/geo/src/Choropleth.js index d46a0f7a7a..9aba75c5a5 100644 --- a/packages/geo/src/Choropleth.js +++ b/packages/geo/src/Choropleth.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import { memo, Fragment, useCallback } from 'react' -import { SvgWrapper, withContainer, useDimensions, useTheme } from '@nivo/core' +import { SvgWrapper, withContainer, useDimensions, useTheme, bindDefs } from '@nivo/core' import { BoxLegendSvg } from '@nivo/legends' import { useTooltip } from '@nivo/tooltip' import { ChoroplethPropTypes, ChoroplethDefaultProps } from './props' @@ -44,6 +44,10 @@ const Choropleth = memo( onClick, tooltip: Tooltip, role, + + defs = ChoroplethDefaultProps.defs, + fill = ChoroplethDefaultProps.fill + }) => { const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin) const { graticule, path, getBorderWidth, getBorderColor } = useGeoMap({ @@ -71,6 +75,11 @@ const Choropleth = memo( const theme = useTheme() + const boundDefs = bindDefs(defs, boundFeatures, fill, { + dataKey: 'data', + targetKey: 'fill', + }) + const { showTooltipFromEvent, hideTooltip } = useTooltip() const handleClick = useCallback( (feature, event) => isInteractive && onClick && onClick(feature, event), @@ -101,6 +110,7 @@ const Choropleth = memo( height={outerHeight} margin={margin} theme={theme} + defs={boundDefs} role={role} > {layers.map((layer, i) => { diff --git a/packages/geo/src/GeoMapFeature.js b/packages/geo/src/GeoMapFeature.js index dd89fc0f7e..54b4d905dc 100644 --- a/packages/geo/src/GeoMapFeature.js +++ b/packages/geo/src/GeoMapFeature.js @@ -24,7 +24,7 @@ const GeoMapFeature = memo( return ( Date: Mon, 11 Jul 2022 15:35:17 +0200 Subject: [PATCH 2/4] update website example --- website/src/pages/choropleth/index.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/website/src/pages/choropleth/index.tsx b/website/src/pages/choropleth/index.tsx index fdd9d9a229..cc427f1c9e 100644 --- a/website/src/pages/choropleth/index.tsx +++ b/website/src/pages/choropleth/index.tsx @@ -1,5 +1,6 @@ import React from 'react' import omit from 'lodash/omit' +import { patternDotsDef, patternLinesDef } from '@nivo/core' import { ResponsiveChoropleth, ChoroplethDefaultProps } from '@nivo/geo' import { ComponentTemplate } from '../../components/components/ComponentTemplate' import meta from '../../data/components/choropleth/meta.yml' @@ -45,6 +46,28 @@ const initialProperties = { 'custom tooltip example': false, tooltip: null, + 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: 'CAN' }, id: 'dots' }, + { match: { id: 'CHN' }, id: 'lines' }, + ], + legends: [ { anchor: 'bottom-left', From be727666cd2598759f32b94b768e51673c5f5e4d Mon Sep 17 00:00:00 2001 From: francescocretti Date: Mon, 11 Jul 2022 15:42:11 +0200 Subject: [PATCH 3/4] add gradient example --- website/src/pages/choropleth/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/website/src/pages/choropleth/index.tsx b/website/src/pages/choropleth/index.tsx index cc427f1c9e..c8b9840ae0 100644 --- a/website/src/pages/choropleth/index.tsx +++ b/website/src/pages/choropleth/index.tsx @@ -1,6 +1,6 @@ import React from 'react' import omit from 'lodash/omit' -import { patternDotsDef, patternLinesDef } from '@nivo/core' +import { patternDotsDef, patternLinesDef, linearGradientDef } from '@nivo/core' import { ResponsiveChoropleth, ChoroplethDefaultProps } from '@nivo/geo' import { ComponentTemplate } from '../../components/components/ComponentTemplate' import meta from '../../data/components/choropleth/meta.yml' @@ -61,11 +61,16 @@ const initialProperties = { lineWidth: 6, spacing: 10, }), + linearGradientDef('gradient', [ + { offset: 0, color: '#000' }, + { offset: 100, color: 'inherit' }, + ]) ], fill:[ { match: { id: 'CAN' }, id: 'dots' }, { match: { id: 'CHN' }, id: 'lines' }, + { match: { id: 'ATA' }, id: 'gradient' }, ], legends: [ From ed38ef05ea4336f03cc08f739ae805872df99893 Mon Sep 17 00:00:00 2001 From: francescocretti Date: Mon, 11 Jul 2022 15:43:56 +0200 Subject: [PATCH 4/4] lint and format --- packages/geo/src/Choropleth.js | 4 +--- packages/geo/src/props.js | 2 +- website/src/pages/choropleth/index.tsx | 8 ++++---- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/geo/src/Choropleth.js b/packages/geo/src/Choropleth.js index 9aba75c5a5..80ab7eb7f7 100644 --- a/packages/geo/src/Choropleth.js +++ b/packages/geo/src/Choropleth.js @@ -44,10 +44,8 @@ const Choropleth = memo( onClick, tooltip: Tooltip, role, - defs = ChoroplethDefaultProps.defs, - fill = ChoroplethDefaultProps.fill - + fill = ChoroplethDefaultProps.fill, }) => { const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin) const { graticule, path, getBorderWidth, getBorderColor } = useGeoMap({ diff --git a/packages/geo/src/props.js b/packages/geo/src/props.js index e959dd86f5..632a390b19 100644 --- a/packages/geo/src/props.js +++ b/packages/geo/src/props.js @@ -106,7 +106,7 @@ const commonDefaultProps = { legends: [], fill: [], - defs: [] + defs: [], } export const GeoMapDefaultProps = { diff --git a/website/src/pages/choropleth/index.tsx b/website/src/pages/choropleth/index.tsx index c8b9840ae0..82a74886d0 100644 --- a/website/src/pages/choropleth/index.tsx +++ b/website/src/pages/choropleth/index.tsx @@ -64,14 +64,14 @@ const initialProperties = { linearGradientDef('gradient', [ { offset: 0, color: '#000' }, { offset: 100, color: 'inherit' }, - ]) - ], + ]), + ], - fill:[ + fill: [ { match: { id: 'CAN' }, id: 'dots' }, { match: { id: 'CHN' }, id: 'lines' }, { match: { id: 'ATA' }, id: 'gradient' }, - ], + ], legends: [ {