feat(heatmap): allow label formatting

packages/heatmap/index.d.ts

@@ -15,6 +15,8 @@ declare module '@nivo/heatmap' {
 
     export type IndexByFunc = (datum: HeatMapDatum) => string | number
 
+    export type LabelFormatter = (datum: HeatMapDatum, key: string) => string | number
+
     export type ValueFormatter = (value: number) => string | number
 
     export interface HeatMapData {
@@ -46,6 +48,7 @@ declare module '@nivo/heatmap' {
             enableGridY: boolean
 
             enableLabels: boolean
+            label: LabelFormatter
             labelTextColor: InheritedColorConfig<HeatMapDatumWithColor>
 
             isInteractive: boolean

packages/heatmap/src/HeatMap.js

@@ -40,6 +40,7 @@ const HeatMap = ({
     enableGridX,
     enableGridY,
     enableLabels,
+    label,
     labelTextColor,
     colors,
     nanColor,
@@ -82,6 +83,7 @@ const HeatMap = ({
         nanColor,
         cellOpacity,
         cellBorderColor,
+        label,
         labelTextColor,
         hoverTarget,
         cellHoverOpacity,

packages/heatmap/src/HeatMapCanvas.js

@@ -41,6 +41,7 @@ const HeatMapCanvas = ({
     axisBottom,
     axisLeft,
     enableLabels,
+    label,
     labelTextColor,
     colors,
     nanColor,
@@ -77,6 +78,7 @@ const HeatMapCanvas = ({
             nanColor,
             cellOpacity,
             cellBorderColor,
+            label,
             labelTextColor,
             hoverTarget,
             cellHoverOpacity,
@@ -137,6 +139,8 @@ const HeatMapCanvas = ({
         axisRight,
         axisBottom,
         axisLeft,
+        xScale,
+        yScale,
         theme,
         enableLabels,
         pixelRatio,
@@ -179,6 +183,7 @@ const HeatMapCanvas = ({
             showTooltipFromEvent,
             hideTooltip,
             tooltip,
+            tooltipFormat,
         ]
     )
 

packages/heatmap/src/HeatMapCellCircle.js

@@ -13,7 +13,7 @@ import { useTheme, useMotionConfig } from '@nivo/core'
 
 const HeatMapCellCircle = ({
     data,
-    value,
+    label,
     x,
     y,
     width,
@@ -70,7 +70,7 @@ const HeatMapCellCircle = ({
                     }}
                     fillOpacity={animatedProps.opacity}
                 >
-                    {value}
+                    {label}
                 </animated.text>
             )}
         </animated.g>
@@ -79,7 +79,7 @@ const HeatMapCellCircle = ({
 
 HeatMapCellCircle.propTypes = {
     data: PropTypes.object.isRequired,
-    value: PropTypes.number.isRequired,
+    label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
     width: PropTypes.number.isRequired,

packages/heatmap/src/HeatMapCellRect.js

@@ -13,7 +13,7 @@ import { useMotionConfig, useTheme } from '@nivo/core'
 
 const HeatMapCellRect = ({
     data,
-    value,
+    label,
     x,
     y,
     width,
@@ -76,7 +76,7 @@ const HeatMapCellRect = ({
                     }}
                     fillOpacity={animatedProps.opacity}
                 >
-                    {value}
+                    {label}
                 </animated.text>
             )}
         </animated.g>
@@ -85,7 +85,7 @@ const HeatMapCellRect = ({
 
 HeatMapCellRect.propTypes = {
     data: PropTypes.object.isRequired,
-    value: PropTypes.number.isRequired,
+    label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
     width: PropTypes.number.isRequired,

packages/heatmap/src/HeatMapCells.js

@@ -23,7 +23,7 @@ const HeatMapCells = ({
         React.createElement(cellComponent, {
             key: cell.id,
             data: cell,
-            value: cell.value,
+            label: cell.label,
             x: cell.x,
             y: cell.y,
             width: cell.width,

packages/heatmap/src/canvas.js

@@ -19,12 +19,12 @@
  * @param {string}  color
  * @param {number}  opacity
  * @param {string}  labelTextColor
- * @param {number}  value
+ * @param {number | string}  label
  */
 export const renderRect = (
     ctx,
     { enableLabels, theme },
-    { x, y, width, height, color, opacity, labelTextColor, value }
+    { x, y, width, height, color, opacity, labelTextColor, label }
 ) => {
     ctx.save()
     ctx.globalAlpha = opacity
@@ -35,7 +35,7 @@ export const renderRect = (
     if (enableLabels === true) {
         ctx.fillStyle = labelTextColor
         ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily}`
-        ctx.fillText(value, x, y)
+        ctx.fillText(label, x, y)
     }
 
     ctx.restore()
@@ -53,12 +53,12 @@ export const renderRect = (
  * @param {string}  color
  * @param {number}  opacity
  * @param {string}  labelTextColor
- * @param {number}  value
+ * @param {number | string}  label
  */
 export const renderCircle = (
     ctx,
     { enableLabels, theme },
-    { x, y, width, height, color, opacity, labelTextColor, value }
+    { x, y, width, height, color, opacity, labelTextColor, label }
 ) => {
     ctx.save()
     ctx.globalAlpha = opacity
@@ -73,7 +73,7 @@ export const renderCircle = (
     if (enableLabels === true) {
         ctx.fillStyle = labelTextColor
         ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily}`
-        ctx.fillText(value, x, y)
+        ctx.fillText(label, x, y)
     }
 
     ctx.restore()

packages/heatmap/src/hooks.js

@@ -1,6 +1,11 @@
 import { useState, useMemo } from 'react'
 import { scaleOrdinal, scaleLinear } from 'd3-scale'
-import { useTheme, usePropertyAccessor, guessQuantizeColorScale } from '@nivo/core'
+import {
+    useTheme,
+    usePropertyAccessor,
+    guessQuantizeColorScale,
+    getLabelGenerator,
+} from '@nivo/core'
 import { useInheritedColor } from '@nivo/colors'
 
 const computeX = (column, cellWidth, padding) => {
@@ -29,12 +34,14 @@ const computeCells = ({
     cellHeight,
     colorScale,
     nanColor,
+    getLabel,
     getLabelTextColor,
 }) => {
     const cells = []
     data.forEach(datum => {
         keys.forEach(key => {
             const value = datum[key]
+            const label = getLabel(datum, key)
             const index = getIndex(datum)
             const sizeMultiplier = sizeScale ? sizeScale(value) : 1
             const width = sizeMultiplier * cellWidth
@@ -49,6 +56,7 @@ const computeCells = ({
                 width,
                 height,
                 value,
+                label,
                 color: isNaN(value) ? nanColor : colorScale(value),
                 opacity: cellOpacity,
             }
@@ -76,6 +84,7 @@ export const useHeatMap = ({
     nanColor,
     cellOpacity,
     cellBorderColor,
+    label,
     labelTextColor,
     hoverTarget,
     cellHoverOpacity,
@@ -85,6 +94,7 @@ export const useHeatMap = ({
 
     const getIndex = usePropertyAccessor(indexBy)
     const indices = useMemo(() => data.map(getIndex), [data, getIndex])
+    const getLabel = useMemo(() => getLabelGenerator(label), [label])
 
     const layoutConfig = useMemo(() => {
         const columns = keys.length
@@ -169,6 +179,7 @@ export const useHeatMap = ({
                 cellHeight: layoutConfig.cellHeight,
                 colorScale,
                 nanColor,
+                getLabel,
                 getLabelTextColor,
             }),
         [
@@ -181,6 +192,7 @@ export const useHeatMap = ({
             layoutConfig,
             colorScale,
             nanColor,
+            getLabel,
             getLabelTextColor,
         ]
     )

packages/heatmap/src/props.js

@@ -38,6 +38,7 @@ export const HeatMapPropTypes = {
     enableGridY: PropTypes.bool.isRequired,
 
     enableLabels: PropTypes.bool.isRequired,
+    label: PropTypes.func.isRequired,
     labelTextColor: inheritedColorPropType.isRequired,
 
     colors: quantizeColorScalePropType.isRequired,
@@ -83,6 +84,7 @@ export const HeatMapDefaultProps = {
 
     // labels
     enableLabels: true,
+    label: (datum, key) => datum[key],
     labelTextColor: { from: 'color', modifiers: [['darker', 1.4]] },
 
     // theming

packages/heatmap/stories/heatmap.stories.js

@@ -121,6 +121,17 @@ stories.add('with formatted values', () => (
     />
 ))
 
+stories.add('with formatted labels', () => (
+    <HeatMap
+        {...commonProperties}
+        label={(datum, key) =>
+            `${Number(datum[key]).toLocaleString('ru-RU', {
+                minimumFractionDigits: 2,
+            })} ₽`
+        }
+    />
+))
+
 stories.add('custom tooltip', () => (
     <HeatMap
         {...commonProperties}

packages/heatmap/stories/heatmapCanvas.stories.js

@@ -0,0 +1,104 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { generateCountriesData } from '@nivo/generators'
+import { HeatMapCanvas } from '../src'
+
+const keys = [
+    'hot dogs',
+    'burgers',
+    'sandwich',
+    'kebab',
+    'fries',
+    'donut',
+    'junk',
+    'sushi',
+    'ramen',
+    'curry',
+    'udon',
+    'bagel',
+]
+const commonProperties = {
+    width: 900,
+    height: 500,
+    margin: { top: 60, right: 80, bottom: 60, left: 80 },
+    data: generateCountriesData(keys, { size: 9, min: 0, max: 100 }),
+    indexBy: 'country',
+    keys,
+}
+
+const stories = storiesOf('HeatMapCanvas', module)
+
+stories.add('default', () => <HeatMapCanvas {...commonProperties} />)
+
+stories.add('square cells', () => (
+    <HeatMapCanvas
+        {...commonProperties}
+        forceSquare={true}
+        axisTop={{
+            orient: 'top',
+            tickSize: 5,
+            tickPadding: 5,
+            tickRotation: -55,
+            legend: '',
+            legendOffset: 36,
+        }}
+    />
+))
+
+stories.add('circle cells', () => (
+    <HeatMapCanvas {...commonProperties} cellShape="circle" padding={2} enableGridY={true} />
+))
+
+stories.add('alternative colors', () => <HeatMapCanvas {...commonProperties} colors="BrBG" />)
+
+stories.add('variable cell size', () => (
+    <HeatMapCanvas
+        {...commonProperties}
+        colors="BuPu"
+        cellShape="circle"
+        padding={2}
+        sizeVariation={0.6}
+        enableGridX={true}
+        enableGridY={true}
+    />
+))
+
+stories.add('with formatted values', () => (
+    <HeatMapCanvas
+        {...commonProperties}
+        tooltipFormat={value =>
+            `${Number(value).toLocaleString('ru-RU', {
+                minimumFractionDigits: 2,
+            })} ₽`
+        }
+    />
+))
+
+stories.add('with formatted labels', () => (
+    <HeatMapCanvas
+        {...commonProperties}
+        label={(datum, key) =>
+            `${Number(datum[key]).toLocaleString('ru-RU', {
+                minimumFractionDigits: 2,
+            })} ₽`
+        }
+    />
+))
+
+stories.add('custom tooltip', () => (
+    <HeatMapCanvas
+        {...commonProperties}
+        tooltip={({ xKey, yKey, value, color }) => (
+            <strong style={{ color }}>
+                {xKey} / {yKey}: {value}
+            </strong>
+        )}
+        theme={{
+            tooltip: {
+                container: {
+                    background: 'gray',
+                },
+            },
+        }}
+    />
+))