fix(bar): fix broken tests

plouc · Jun 28, 2021 · bc1eb1b · bc1eb1b
1 parent d508d10
commit bc1eb1b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 25 deletions.
diff --git a/packages/bar/src/compute/common.ts b/packages/bar/src/compute/common.ts
@@ -41,3 +41,5 @@ export const filterNullValues = <RawDatum extends Record<string, unknown>>(data:
         }
         return acc
     }, {}) as Exclude<RawDatum, null | undefined | false | '' | 0>
+
+export const coerceValue = <T>(value: T) => [value, Number(value)] as const
diff --git a/packages/bar/src/compute/grouped.ts b/packages/bar/src/compute/grouped.ts
@@ -1,8 +1,8 @@
 import { BarDatum, BarSvgProps, ComputedDatum } from '../types'
 import { OrdinalColorScale } from '@nivo/colors'
 import { Scale, ScaleBand } from '@nivo/scales'
+import { coerceValue, filterNullValues, getIndexScale, normalizeData } from './common'
 import { computeScale } from '@nivo/scales'
-import { getIndexScale, filterNullValues, normalizeData } from './common'
 
 type Params<RawDatum, XScaleInput, YScaleInput> = {
     data: RawDatum[]
@@ -49,14 +49,14 @@ const generateVerticalGroupedBars = <RawDatum extends Record<string, unknown>>(
     const bars = flatten(
         keys.map((key, i) =>
             range(0, xScale.domain().length).map(index => {
-                const value = Number(data[index][key])
+                const [rawValue, value] = coerceValue(data[index][key])
                 const indexValue = getIndex(data[index])
                 const x = (xScale(indexValue) ?? 0) + barWidth * i + innerPadding * i
                 const y = getY(value)
                 const barHeight = getHeight(value, y)
                 const barData = {
                     id: key,
-                    value,
+                    value: rawValue === null ? rawValue : value,
                     index,
                     indexValue,
                     data: cleanedData[index],
@@ -103,14 +103,14 @@ const generateHorizontalGroupedBars = <RawDatum extends Record<string, unknown>>
     const bars = flatten(
         keys.map((key, i) =>
             range(0, yScale.domain().length).map(index => {
-                const value = Number(data[index][key])
+                const [rawValue, value] = coerceValue(data[index][key])
                 const indexValue = getIndex(data[index])
                 const x = getX(value)
                 const y = (yScale(indexValue) ?? 0) + barHeight * i + innerPadding * i
                 const barWidth = getWidth(value, x)
                 const barData = {
                     id: key,
-                    value,
+                    value: rawValue === null ? rawValue : value,
                     index,
                     indexValue,
                     data: cleanedData[index],

diff --git a/packages/bar/src/compute/stacked.ts b/packages/bar/src/compute/stacked.ts
@@ -2,7 +2,7 @@ import { BarDatum, BarSvgProps, ComputedDatum } from '../types'
 import { OrdinalColorScale } from '@nivo/colors'
 import { Scale, ScaleBand, computeScale } from '@nivo/scales'
 import { Series, SeriesPoint, stack, stackOffsetDiverging } from 'd3-shape'
-import { getIndexScale, filterNullValues, normalizeData } from './common'
+import { coerceValue, filterNullValues, getIndexScale, normalizeData } from './common'
 
 type StackDatum<RawDatum> = SeriesPoint<RawDatum>
 
@@ -43,10 +43,11 @@ const generateVerticalStackedBars = <RawDatum extends Record<string, unknown>>(
                 const x = xScale(getIndex(d.data)) ?? 0
                 const y = (getY(d) ?? 0) + innerPadding * 0.5
                 const barHeight = getHeight(d, y) - innerPadding
+                const [rawValue, value] = coerceValue(d.data[stackedDataItem.key])
 
                 const barData = {
                     id: stackedDataItem.key,
-                    value: Number(d.data[stackedDataItem.key]),
+                    value: rawValue === null ? rawValue : value,
                     index: i,
                     indexValue: index,
                     data: filterNullValues(d.data),
@@ -93,10 +94,11 @@ const generateHorizontalStackedBars = <RawDatum extends Record<string, unknown>>
                 const y = yScale(getIndex(d.data)) ?? 0
                 const x = (getX(d) ?? 0) + innerPadding * 0.5
                 const barWidth = getWidth(d, x) - innerPadding
+                const [rawValue, value] = coerceValue(d.data[stackedDataItem.key])
 
                 const barData = {
                     id: stackedDataItem.key,
-                    value: Number(d.data[stackedDataItem.key]),
+                    value: rawValue === null ? rawValue : value,
                     index: i,
                     indexValue: index,
                     data: filterNullValues(d.data),

diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
@@ -30,7 +30,7 @@ export type BarDatumWithColor = BarDatum & {
 
 export type ComputedDatum<RawDatum> = {
     id: string | number
-    value: number
+    value: number | null
     index: number
     indexValue: string | number
     data: Exclude<RawDatum, null | undefined | false | '' | 0>

diff --git a/packages/bar/tests/Bar.test.js b/packages/bar/tests/Bar.test.js
@@ -10,7 +10,7 @@ import { useState } from 'react'
 import renderer from 'react-test-renderer'
 import { mount } from 'enzyme'
 import { LegendSvg, LegendSvgItem } from '@nivo/legends'
-import Bar from '../src/Bar'
+import { Bar } from '../src'
 
 it('should render a basic bar chart', () => {
     const component = renderer.create(

diff --git a/packages/bar/tests/__snapshots__/Bar.test.js.snap b/packages/bar/tests/__snapshots__/Bar.test.js.snap
@@ -752,7 +752,7 @@ exports[`should allow grouped horizontal layout 1`] = `
         transform="translate(0, 203)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={86}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -769,7 +769,7 @@ exports[`should allow grouped horizontal layout 1`] = `
         transform="translate(0, 107)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={86}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -786,7 +786,7 @@ exports[`should allow grouped horizontal layout 1`] = `
         transform="translate(0, 11)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={86}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -1673,7 +1673,7 @@ exports[`should allow grouped mode 1`] = `
         transform="translate(17, 200)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={100}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -1690,7 +1690,7 @@ exports[`should allow grouped mode 1`] = `
         transform="translate(178, 100)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={200}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -1707,7 +1707,7 @@ exports[`should allow grouped mode 1`] = `
         transform="translate(339, 0)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={300}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -2477,7 +2477,7 @@ exports[`should allow horizontal layout 1`] = `
         transform="translate(0, 203)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={86}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -2494,7 +2494,7 @@ exports[`should allow horizontal layout 1`] = `
         transform="translate(0, 107)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={86}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -2511,7 +2511,7 @@ exports[`should allow horizontal layout 1`] = `
         transform="translate(0, 11)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={86}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -3398,7 +3398,7 @@ exports[`should allow to disable labels 1`] = `
         transform="translate(17, 200)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={100}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -3415,7 +3415,7 @@ exports[`should allow to disable labels 1`] = `
         transform="translate(178, 100)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={200}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -3432,7 +3432,7 @@ exports[`should allow to disable labels 1`] = `
         transform="translate(339, 0)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={300}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -4319,7 +4319,7 @@ exports[`should render a basic bar chart 1`] = `
         transform="translate(17, 200)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={100}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -4352,7 +4352,7 @@ exports[`should render a basic bar chart 1`] = `
         transform="translate(178, 100)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={200}
           onClick={[Function]}
           onMouseEnter={[Function]}
@@ -4385,7 +4385,7 @@ exports[`should render a basic bar chart 1`] = `
         transform="translate(339, 0)"
       >
         <rect
-          fill="#e8c1a0"
+          fill="rgba(232, 193, 160, 1)"
           height={300}
           onClick={[Function]}
           onMouseEnter={[Function]}