feat(geo): add abillity to customize label & format value

packages/geo/package.json

@@ -25,6 +25,7 @@
   ],
   "dependencies": {
     "@nivo/core": "0.54.0",
+    "d3-format": "^1.3.2",
     "d3-geo": "^1.11.3",
     "lodash": "^4.17.4",
     "react-motion": "^0.5.2",

packages/geo/src/ChoroplethTooltip.js

@@ -13,7 +13,14 @@ import { BasicTooltip } from '@nivo/core'
 const ChoroplethTooltip = memo(({ feature }) => {
     if (feature.data === undefined) return null
 
-    return <BasicTooltip id={feature.id} color={feature.color} enableChip={true} />
+    return (
+        <BasicTooltip
+            id={feature.label}
+            color={feature.color}
+            enableChip={true}
+            value={feature.formattedValue}
+        />
+    )
 })
 
 ChoroplethTooltip.propTypes = {

packages/geo/src/hooks.js

@@ -8,6 +8,7 @@
  */
 import { useMemo } from 'react'
 import { isFunction, get } from 'lodash'
+import { format } from 'd3-format'
 import {
     geoPath,
     geoAzimuthalEqualArea,
@@ -89,7 +90,16 @@ export const useGeoMap = ({
     }
 }
 
-export const useChoropleth = ({ features, data, match, value, colors, unknownColor }) => {
+export const useChoropleth = ({
+    features,
+    data,
+    match,
+    label,
+    value,
+    valueFormat,
+    colors,
+    unknownColor,
+}) => {
     const findMatchingDatum = useMemo(() => {
         if (isFunction(match)) return match
         return (feature, datum) => {
@@ -99,9 +109,17 @@ export const useChoropleth = ({ features, data, match, value, colors, unknownCol
             return featureKey && featureKey === datumKey
         }
     }, [match])
+    const getLabel = useMemo(() => (isFunction(label) ? label : datum => get(datum, label)), [
+        label,
+    ])
     const getValue = useMemo(() => (isFunction(value) ? value : datum => get(datum, value)), [
         value,
     ])
+    const valueFormatter = useMemo(() => {
+        if (valueFormat === undefined) return d => d
+        if (isFunction(valueFormat)) return valueFormat
+        return format(valueFormat)
+    }, [valueFormat])
     const getFillColor = useMemo(() => {
         const colorScale = guessQuantizeColorScale(colors).domain([0, 1000000])
 
@@ -121,15 +139,17 @@ export const useChoropleth = ({ features, data, match, value, colors, unknownCol
                         ...feature,
                         data: datum,
                         value: datumValue,
+                        formattedValue: valueFormatter(datumValue),
                     }
                     featureWithData.color = getFillColor(featureWithData)
+                    featureWithData.label = getLabel(featureWithData)
 
                     return featureWithData
                 }
 
                 return feature
             }),
-        [features, data, findMatchingDatum, getValue, getFillColor]
+        [features, data, findMatchingDatum, getValue, valueFormatter, getFillColor]
     )
 
     return {

packages/geo/src/props.js

@@ -58,7 +58,9 @@ export const GeoMapCanvasPropTypes = {
 const commonChoroplethPropTypes = {
     data: PropTypes.arrayOf(PropTypes.object).isRequired,
     match: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    valueFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     colors: quantizeColorScalePropType.isRequired,
     unknownColor: PropTypes.string.isRequired,
 }
@@ -108,6 +110,7 @@ export const GeoMapCanvasDefaultProps = {
 
 const commonChoroplethDefaultProps = {
     match: 'id',
+    label: 'id',
     value: 'value',
     colors: 'PuBuGn',
     unknownColor: '#999',

website/src/components/charts/geo/Choropleth.js

@@ -36,6 +36,10 @@ const initialSettings = {
     colors: 'YlGnBu',
     unknownColor: '#152538',
 
+    label: 'properties.name',
+    value: 'value',
+    valueFormat: '.2s',
+
     projectionType: 'mercator',
     projectionScale: 100,
     projectionTranslation: [0.5, 0.5],

website/src/components/charts/geo/ChoroplethCanvas.js

@@ -36,6 +36,10 @@ const initialSettings = {
     colors: 'PiYG',
     unknownColor: '#101b42',
 
+    label: 'properties.name',
+    value: 'value',
+    valueFormat: '.2s',
+
     projectionType: 'mercator',
     projectionScale: 100,
     projectionTranslation: [0.5, 0.5],

website/src/components/charts/geo/props.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import React from 'react'
-import { GeoMapDefaultProps } from '@nivo/geo'
+import { GeoMapDefaultProps, ChoroplethDefaultProps } from '@nivo/geo'
 import { marginProperties, defsProperties } from '../../../lib/componentProperties'
 
 export default [
@@ -175,6 +175,67 @@ export default [
             max: 400,
         },
     },
+    {
+        key: 'layers',
+        scopes: ['Choropleth', 'ChoroplethCanvas'],
+        type: `Array<'graticule' | 'features' | Function>`,
+        required: false,
+        description: (
+            <div>
+                Defines the order of layers, available layers are:
+                <code>graticule</code>, <code>features</code>.<br />
+                You can also use this to insert extra layers to the chart, this extra layer must be
+                a function which will receive the chart computed data and must return a valid SVG
+                element for the SVG implementation or receive a Canvas 2d context for the canvas
+                one. Custom layers will also receive the computed data/projection.
+            </div>
+        ),
+        default: GeoMapDefaultProps.layers,
+    },
+    {
+        key: 'label',
+        scopes: ['Choropleth', 'ChoroplethCanvas'],
+        type: '{string|Function}',
+        required: false,
+        description: (
+            <div>
+                Accessor to label, if a string is provided, the value will be retrieved using it as
+                a key, if it's a function, it's its responsibility to return the label.
+            </div>
+        ),
+        default: ChoroplethDefaultProps.label,
+    },
+    {
+        key: 'value',
+        scopes: ['Choropleth', 'ChoroplethCanvas'],
+        type: '{string|Function}',
+        required: false,
+        description: (
+            <div>
+                Accessor to data value, if a string is provided, the value will be retrieved using
+                it as a key, if it's a function, it's its responsibility to return the value.
+            </div>
+        ),
+        default: ChoroplethDefaultProps.value,
+    },
+    {
+        key: 'valueFormat',
+        scopes: ['Choropleth', 'ChoroplethCanvas'],
+        type: '{string|Function}',
+        required: false,
+        description: (
+            <div>
+                Optional formatting of values, if provided, it will be used for labels/tooltips. You
+                can either pass a function which will receive the node's data and must return the
+                formatted value, or a string which will be used as a directive for{' '}
+                <a href="https://github.com/d3/d3-format" target="_blank" rel="noopener noreferrer">
+                    d3-format
+                </a>
+                .
+            </div>
+        ),
+        default: ChoroplethDefaultProps.value,
+    },
     {
         key: 'colors',
         scopes: ['Choropleth', 'ChoroplethCanvas'],