feat(choropleth): add defs and fill capabilities

[francescocretti]

Background

Event if it's in the documentation, the usage of defs and fill was missing its implementation in the Choropleth Map component.

This PR adds this features, addressing issues #2068 (and the old #864) and, with a little workaround, also the first question of #2064 (it's enough to define a gradient with the same starting and ending color to achieve what was asked).

Changelog

As was done in other components, now the Choropleth component read the defs and fill, uses the bindDefs method to bind them to the data, and pass them to the SvgWrapper component.
Then, each map features check is there's a fill property defined. If so it uses as fill color, otherwise it uses the calculated color.

Example

This PR also adds three example patterns to the Nivo Website:

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' },
]

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ed38ef0:

Sandbox	Source
nivo	Configuration

[plouc]

Thank you for your contribution @francescocretti !

[syengo254]

Hi Guys,
I am getting this Typescript compile error:
Property 'defs' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'. TS2769

Seems the defs property was not defined in the ChoroplethCommonProps

[officiallyakshay]

Hi @plouc, I was able to create a workaround for this, but my builds fail. Can you explain how to execute this the intended way since the website only shows the outdated way? Thank you.

[bpinazmul18]

Hi Guys, I am getting this Typescript compile error: Property 'defs' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'. TS2769

Seems the defs property was not defined in the ChoroplethCommonProps

any solution here for TypeScript? I've have also facing same issue in TypeScript.