feat(radar): add tests for value formatting

Author: plouc

packages/radar/src/Radar.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, Fragment } from 'react'
 import { Container, useDimensions, SvgWrapper } from '@nivo/core'
 import { BoxLegendSvg } from '@nivo/legends'
-import { RadarShapes } from './RadarShapes'
+import { RadarLayer } from './RadarLayer'
 import { RadarGrid } from './RadarGrid'
 import { RadarSlices } from './RadarSlices'
 import { RadarDots } from './RadarDots'
@@ -83,7 +83,7 @@ const InnerRadar = <D extends Record<string, unknown>>({
 
     const layerById: Record<RadarLayerId, ReactNode> = {
         grid: null,
-        shapes: null,
+        layers: null,
         slices: null,
         dots: null,
         legends: null,
@@ -105,11 +105,11 @@ const InnerRadar = <D extends Record<string, unknown>>({
         )
     }
 
-    if (layers.includes('shapes')) {
-        layerById.shapes = (
-            <g key="shapes" transform={`translate(${centerX}, ${centerY})`}>
+    if (layers.includes('layers')) {
+        layerById.layers = (
+            <g key="layers" transform={`translate(${centerX}, ${centerY})`}>
                 {keys.map(key => (
-                    <RadarShapes<D>
+                    <RadarLayer<D>
                         key={key}
                         data={data}
                         item={key}
@@ -195,7 +195,7 @@ const InnerRadar = <D extends Record<string, unknown>>({
             ariaDescribedBy={ariaDescribedBy}
         >
             {layerById.grid}
-            {layerById.shapes}
+            {layerById.layers}
             {layerById.slices}
             {layerById.dots}
             {layerById.legends}

packages/radar/src/RadarShapes.tsx packages/radar/src/RadarLayer.tsx

@@ -6,7 +6,7 @@ import { useMotionConfig, useTheme, useAnimatedPath } from '@nivo/core'
 import { useInheritedColor } from '@nivo/colors'
 import { RadarCommonProps } from './types'
 
-interface RadarShapesProps<D extends Record<string, unknown>> {
+interface RadarLayerProps<D extends Record<string, unknown>> {
     data: D[]
     item: string
     colorByKey: Record<string | number, string>
@@ -19,7 +19,7 @@ interface RadarShapesProps<D extends Record<string, unknown>> {
     blendMode: RadarCommonProps['blendMode']
 }
 
-export const RadarShapes = <D extends Record<string, unknown>>({
+export const RadarLayer = <D extends Record<string, unknown>>({
     data,
     item: key,
     colorByKey,
@@ -30,7 +30,7 @@ export const RadarShapes = <D extends Record<string, unknown>>({
     borderColor,
     fillOpacity,
     blendMode,
-}: RadarShapesProps<D>) => {
+}: RadarLayerProps<D>) => {
     const theme = useTheme()
     const getBorderColor = useInheritedColor(borderColor, theme)
 

packages/radar/src/props.ts

@@ -3,7 +3,7 @@ import { RadarSliceTooltip } from './RadarSliceTooltip'
 import { RadarLayerId } from './types'
 
 export const svgDefaultProps = {
-    layers: ['grid', 'shapes', 'slices', 'dots', 'legends'] as RadarLayerId[],
+    layers: ['grid', 'layers', 'slices', 'dots', 'legends'] as RadarLayerId[],
 
     maxValue: 'auto' as const,
 

packages/radar/src/types.ts

@@ -65,7 +65,7 @@ export interface RadarSliceTooltipProps {
 }
 export type RadarSliceTooltipComponent = FunctionComponent<RadarSliceTooltipProps>
 
-export type RadarLayerId = 'grid' | 'shapes' | 'slices' | 'dots' | 'legends'
+export type RadarLayerId = 'grid' | 'layers' | 'slices' | 'dots' | 'legends'
 
 export type RadarColorMapping = Record<string, string>
 

packages/radar/tests/Radar.test.tsx

@@ -25,18 +25,46 @@ const baseProps: RadarSvgProps<TestDatum> = {
 it('should render a basic radar chart', () => {
     const wrapper = mount(<Radar<TestDatum> {...baseProps} />)
 
-    const shapes = wrapper.find('RadarShapes')
-    expect(shapes).toHaveLength(2)
-
-    const shape0 = shapes.at(0)
-    expect(shape0.prop('item')).toBe('A')
-    const shape0path = shape0.find('path')
-    expect(shape0path.prop('fill')).toBe('rgba(232, 193, 160, 1)')
-
-    const shape1 = shapes.at(1)
-    expect(shape1.prop('item')).toBe('B')
-    const shape1path = shape1.find('path')
-    expect(shape1path.prop('fill')).toBe('rgba(244, 117, 96, 1)')
+    const layers = wrapper.find('RadarLayer')
+    expect(layers).toHaveLength(2)
+
+    const layer0 = layers.at(0)
+    expect(layer0.prop('item')).toBe('A')
+    const layer0path = layer0.find('path')
+    expect(layer0path.prop('fill')).toBe('rgba(232, 193, 160, 1)')
+
+    const layer1 = layers.at(1)
+    expect(layer1.prop('item')).toBe('B')
+    const layer1path = layer1.find('path')
+    expect(layer1path.prop('fill')).toBe('rgba(244, 117, 96, 1)')
+})
+
+describe('data', () => {
+    it('should support value formatting', () => {
+        const wrapper = mount(
+            <Radar<TestDatum> {...baseProps} valueFormat={value => `${value}%`} />
+        )
+
+        wrapper.find('RadarSlice').at(0).find('path').simulate('mouseenter')
+
+        const tooltip = wrapper.find('RadarSliceTooltip')
+        const data = tooltip.prop<RadarSliceTooltipProps['data']>('data')
+        expect(data[0].formattedValue).toEqual('20%')
+        expect(data[1].formattedValue).toEqual('10%')
+    })
+
+    it('should support value formatting depending on the key', () => {
+        const wrapper = mount(
+            <Radar<TestDatum> {...baseProps} valueFormat={(value, key) => `${value} ${key}s`} />
+        )
+
+        wrapper.find('RadarSlice').at(2).find('path').simulate('mouseenter')
+
+        const tooltip = wrapper.find('RadarSliceTooltip')
+        const data = tooltip.prop<RadarSliceTooltipProps['data']>('data')
+        expect(data[0].formattedValue).toEqual('30 As')
+        expect(data[1].formattedValue).toEqual('10 Bs')
+    })
 })
 
 describe('tooltip', () => {
@@ -90,8 +118,8 @@ describe('style', () => {
         const colors = ['rgba(255, 0, 0, 1)', 'rgba(0, 0, 255, 1)']
         const wrapper = mount(<Radar {...baseProps} colors={colors} />)
 
-        expect(wrapper.find('RadarShapes').at(0).find('path').prop('fill')).toBe(colors[0])
-        expect(wrapper.find('RadarShapes').at(1).find('path').prop('fill')).toBe(colors[1])
+        expect(wrapper.find('RadarLayer').at(0).find('path').prop('fill')).toBe(colors[0])
+        expect(wrapper.find('RadarLayer').at(1).find('path').prop('fill')).toBe(colors[1])
     })
 
     it('custom colors function', () => {
@@ -106,8 +134,8 @@ describe('style', () => {
             />
         )
 
-        expect(wrapper.find('RadarShapes').at(0).find('path').prop('fill')).toBe(colorMapping.A)
-        expect(wrapper.find('RadarShapes').at(1).find('path').prop('fill')).toBe(colorMapping.B)
+        expect(wrapper.find('RadarLayer').at(0).find('path').prop('fill')).toBe(colorMapping.A)
+        expect(wrapper.find('RadarLayer').at(1).find('path').prop('fill')).toBe(colorMapping.B)
     })
 })