feat(core): improve value formatter typings

packages/core/index.d.ts

@@ -206,10 +206,7 @@ declare module '@nivo/core' {
         | 'stepAfter'
         | 'stepBefore'
 
-    export type DataFormatter = (value: DatumValue) => string | number
-
     export function useAnimatedPath(path: string): OpaqueInterpolation<string>
-    export function useValueFormatter(formatter?: DataFormatter | string): DataFormatter
 
     export type LinearGradientDef = {
         id: string
@@ -337,4 +334,12 @@ declare module '@nivo/core' {
         x: number
         y: number
     }
+
+    export type ValueFormat<V> =
+        // d3 formatter
+        | string
+        // explicit formatting function
+        | ((value: V) => string)
+    export function getValueFormatter<V>(format?: ValueFormat<V>): (value: V) => string
+    export function useValueFormatter<V>(format?: ValueFormat<V>): (value: V) => string
 }

packages/core/src/hooks/useValueFormatter.js

@@ -9,15 +9,15 @@ export const getValueFormatter = format => {
     if (typeof format === 'string') {
         // time format specifier
         if (format.indexOf('time:') === 0) {
-            return d3TimeFormat(format.slice('5'))
+            return `${d3TimeFormat(format.slice('5'))}`
         }
 
         // standard format specifier
-        return d3Format(format)
+        return `${d3Format(format)}`
     }
 
     // no formatting
-    return v => v
+    return v => `${v}`
 }
 
 export const useValueFormatter = format => useMemo(() => getValueFormatter(format), [format])

packages/marimekko/src/hooks.ts

@@ -179,7 +179,7 @@ export const useComputedData = <RawDatum>({
 }) => {
     const getColor = useOrdinalColorScale<Omit<DimensionDatum<RawDatum>, 'color'>>(colors, 'id')
 
-    const formatValue = useValueFormatter(valueFormat)
+    const formatValue = useValueFormatter<number>(valueFormat)
 
     return useMemo(() => {
         const computedData: ComputedDatum<RawDatum>[] = []

packages/marimekko/src/types.ts

@@ -7,14 +7,7 @@ import {
     stackOffsetWiggle,
 } from 'd3-shape'
 import { ScaleLinear } from 'd3-scale'
-import {
-    Box,
-    Dimensions,
-    Theme,
-    SvgDefsAndFill,
-    ModernMotionProps,
-    DataFormatter,
-} from '@nivo/core'
+import { Box, Dimensions, Theme, SvgDefsAndFill, ModernMotionProps, ValueFormat } from '@nivo/core'
 import { AxisProps } from '@nivo/axes'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
@@ -33,7 +26,7 @@ export interface DataProps<RawDatum> {
         id: string
         value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
     }[]
-    valueFormat?: string | DataFormatter
+    valueFormat?: ValueFormat<number>
 }
 
 export interface NormalizedDatum<RawDatum> {

packages/pie/src/hooks.ts

@@ -36,7 +36,7 @@ export const useNormalizedData = <RawDatum extends MayHaveLabel>({
         () => (typeof value === 'function' ? value : (d: RawDatum) => get(d, value)),
         [value]
     )
-    const formatValue = useValueFormatter(valueFormat as any)
+    const formatValue = useValueFormatter<number>(valueFormat)
 
     const getColor = useOrdinalColorScale<Omit<ComputedDatum<RawDatum>, 'arc' | 'color' | 'fill'>>(
         colors,

packages/pie/src/types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Dimensions, Theme, SvgDefsAndFill, ModernMotionProps } from '@nivo/core'
+import { Box, Dimensions, Theme, SvgDefsAndFill, ModernMotionProps, ValueFormat } from '@nivo/core'
 import {
     Arc,
     ArcGenerator,
@@ -82,7 +82,7 @@ export type PieLayer<RawDatum> = PieLayerId | PieCustomLayer<RawDatum>
 export type CommonPieProps<RawDatum> = {
     id: string | DatumIdAccessorFunction<RawDatum>
     value: string | DatumValueAccessorFunction<RawDatum>
-    valueFormat?: string | ValueFormatter
+    valueFormat?: ValueFormat<number>
 
     margin: Box
     sortByValue: boolean

packages/sunburst/src/hooks.ts

@@ -111,7 +111,7 @@ export const useSunburst = <RawDatum extends MaybeColor>({
     const getId = useMemo(() => getAccessorFor(id), [id])
     const getValue = useMemo(() => getAccessorFor(value), [value])
 
-    const formatValue = useValueFormatter(valueFormat)
+    const formatValue = useValueFormatter<number>(valueFormat)
 
     const nodes = useMemo(() => {
         const partition = d3Partition<RawDatum>().size([2 * Math.PI, radius * radius])

packages/sunburst/src/types.ts

@@ -1,14 +1,7 @@
 import { Arc } from 'd3-shape'
 import { HierarchyRectangularNode } from 'd3-hierarchy'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
-import {
-    Theme,
-    Dimensions,
-    Box,
-    DataFormatter,
-    SvgDefsAndFill,
-    ModernMotionProps,
-} from '@nivo/core'
+import { Theme, Dimensions, Box, ValueFormat, SvgDefsAndFill, ModernMotionProps } from '@nivo/core'
 
 export type DatumId = string | number
 export type DatumValue = number
@@ -34,7 +27,7 @@ export interface DataProps<RawDatum> {
     data: RawDatum
     id?: string | number | DatumPropertyAccessor<RawDatum, DatumId>
     value?: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
-    valueFormat?: string | DataFormatter
+    valueFormat?: ValueFormat<number>
 }
 
 export interface ChildrenDatum<RawDatum> {

packages/tooltip/src/BasicTooltip.tsx

@@ -1,12 +1,12 @@
 import React, { memo, ReactNode } from 'react'
 // @ts-ignore
-import { useTheme, DataFormatter, useValueFormatter } from '@nivo/core'
+import { useTheme, ValueFormat, useValueFormatter } from '@nivo/core'
 import { Chip } from './Chip'
 
 interface BasicTooltipProps {
     id: ReactNode
     value?: number | string | Date
-    format?: DataFormatter
+    format?: ValueFormat<number | string | Date>
     color?: string
     enableChip?: boolean
     /**