feat(marimekko): add support for value formatter

plouc · Nov 16, 2020 · c5429db · c5429db
1 parent 87e5edb
commit c5429db
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git a/packages/marimekko/src/BarTooltip.tsx b/packages/marimekko/src/BarTooltip.tsx
@@ -5,7 +5,7 @@ import { BarDatum } from './types'
 export const BarTooltip = <RawDatum,>({ bar }: { bar: BarDatum<RawDatum> }) => (
     <BasicTooltip
         id={`${bar.datum.id} - ${bar.id}`}
-        value={bar.value}
+        value={bar.formattedValue}
         enableChip={true}
         color={bar.color}
     />

diff --git a/packages/marimekko/src/Marimekko.tsx b/packages/marimekko/src/Marimekko.tsx
@@ -18,6 +18,7 @@ const InnerMarimekko = <RawDatum,>({
     data,
     id,
     value,
+    valueFormat,
     dimensions,
     width,
     height,
@@ -61,6 +62,7 @@ const InnerMarimekko = <RawDatum,>({
         id,
         value,
         dimensions,
+        valueFormat,
         layout,
         offset,
         outerPadding,

diff --git a/packages/marimekko/src/hooks.ts b/packages/marimekko/src/hooks.ts
@@ -2,7 +2,11 @@ import { useMemo } from 'react'
 import { get } from 'lodash'
 import { stack as d3Stack, Stack, Series } from 'd3-shape'
 import { ScaleLinear, scaleLinear } from 'd3-scale'
-import { useTheme } from '@nivo/core'
+import {
+    // @ts-ignore
+    useValueFormatter,
+    useTheme,
+} from '@nivo/core'
 import { InheritedColorConfig, useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
 import {
     NormalizedDatum,
@@ -154,6 +158,7 @@ export const useComputedData = <RawDatum>({
     data,
     stacked,
     dimensionIds,
+    valueFormat,
     thicknessScale,
     dimensionsScale,
     colors,
@@ -164,6 +169,7 @@ export const useComputedData = <RawDatum>({
     data: NormalizedDatum<RawDatum>[]
     stacked: Series<RawDatum, string>[]
     dimensionIds: string[]
+    valueFormat: DataProps<RawDatum>['valueFormat']
     thicknessScale: ScaleLinear<number, number>
     dimensionsScale: ScaleLinear<number, number>
     colors: CommonProps<RawDatum>['colors']
@@ -173,6 +179,8 @@ export const useComputedData = <RawDatum>({
 }) => {
     const getColor = useOrdinalColorScale<Omit<DimensionDatum<RawDatum>, 'color'>>(colors, 'id')
 
+    const formatValue = useValueFormatter(valueFormat)
+
     return useMemo(() => {
         const computedData: ComputedDatum<RawDatum>[] = []
 
@@ -203,6 +211,7 @@ export const useComputedData = <RawDatum>({
                         id: dimensionId,
                         datum: computedDatum,
                         value: dimensionPoint[1] - dimensionPoint[0],
+                        formattedValue: formatValue(dimensionPoint[1] - dimensionPoint[0]),
                         color: 'rgba(0, 0, 0, 0)',
                         x: 0,
                         y: 0,
@@ -258,6 +267,7 @@ export const useComputedData = <RawDatum>({
         outerPadding,
         innerPadding,
         getColor,
+        formatValue,
     ])
 }
 
@@ -290,6 +300,7 @@ export const useMarimekko = <RawDatum>({
     data,
     id,
     value,
+    valueFormat,
     dimensions: rawDimensions,
     layout,
     offset,
@@ -304,6 +315,7 @@ export const useMarimekko = <RawDatum>({
     data: DataProps<RawDatum>['data']
     id: DataProps<RawDatum>['id']
     value: DataProps<RawDatum>['value']
+    valueFormat: DataProps<RawDatum>['valueFormat']
     dimensions: DataProps<RawDatum>['dimensions']
     layout: Layout
     offset: OffsetId
@@ -332,6 +344,7 @@ export const useMarimekko = <RawDatum>({
         data: normalizedData,
         stacked,
         dimensionIds,
+        valueFormat,
         thicknessScale,
         dimensionsScale,
         colors,

diff --git a/packages/marimekko/src/types.ts b/packages/marimekko/src/types.ts
@@ -6,15 +6,21 @@ import {
     stackOffsetSilhouette,
     stackOffsetWiggle,
 } from 'd3-shape'
-import { Box, Dimensions, Theme, SvgDefsAndFill, ModernMotionProps } from '@nivo/core'
+import {
+    Box,
+    Dimensions,
+    Theme,
+    SvgDefsAndFill,
+    ModernMotionProps,
+    DataFormatter,
+} from '@nivo/core'
 import { AxisProps } from '@nivo/axes'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 
 export type DatumId = string | number
 export type DatumValue = number
 export type DatumFormattedValue = string | number
-export type ValueFormatter = (value: number) => DatumFormattedValue
 
 export type DatumPropertyAccessor<RawDatum, T> = (datum: RawDatum) => T
 
@@ -26,6 +32,7 @@ export interface DataProps<RawDatum> {
         id: string
         value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
     }[]
+    valueFormat?: string | DataFormatter
 }
 
 export interface NormalizedDatum<RawDatum> {
@@ -38,6 +45,7 @@ export interface NormalizedDatum<RawDatum> {
 export interface DimensionDatum<RawDatum> {
     id: string
     value: number
+    formattedValue: string | number
     color: string
     x: number
     y: number
@@ -103,8 +111,6 @@ export const offsetById = {
 export type OffsetId = keyof typeof offsetById
 
 export type CommonProps<RawDatum> = {
-    valueFormat?: string | ValueFormatter
-
     margin: Box
     layout: Layout
     offset: OffsetId

diff --git a/packages/marimekko/stories/marimekko.stories.tsx b/packages/marimekko/stories/marimekko.stories.tsx
@@ -126,7 +126,7 @@ stories.add('diverging', () => {
             data={data}
             layout="horizontal"
             offset="diverging"
-            axisLeft={{
+            axisBottom={{
                 format: (v: number) => Math.abs(v),
             }}
         />