feat(choropleth): add support for defs and fill to the choropleth (#2072)

* enable defs and fill in choropleth map

* update website example

* add gradient example

* lint and format

Author: francescocretti

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,8 @@ 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 +73,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 +108,7 @@ const Choropleth = memo(
                 height={outerHeight}
                 margin={margin}
                 theme={theme}
+                defs={boundDefs}
                 role={role}
             >
                 {layers.map((layer, i) => {

packages/geo/src/GeoMapFeature.js

@@ -24,7 +24,7 @@ const GeoMapFeature = memo(
         return (
             <path
                 key={feature.id}
-                fill={fillColor}
+                fill={feature?.fill ?? fillColor}
                 strokeWidth={borderWidth}
                 stroke={borderColor}
                 strokeLinejoin="bevel"

packages/geo/src/props.js

@@ -104,6 +104,9 @@ const commonDefaultProps = {
 
     layers: ['graticule', 'features'],
     legends: [],
+
+    fill: [],
+    defs: [],
 }
 
 export const GeoMapDefaultProps = {

website/src/pages/choropleth/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import omit from 'lodash/omit'
+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'
@@ -45,6 +46,33 @@ 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,
+        }),
+        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: [
         {
             anchor: 'bottom-left',