fix(bar): fix when values are updated from 0 in grouped mode (#1585)

packages/bar/src/BarItem.js

@@ -111,7 +111,7 @@ BarItem.propTypes = {
     onClick: PropTypes.func,
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
-    tooltip: PropTypes.element.isRequired,
+    tooltip: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
 
     theme: PropTypes.shape({
         tooltip: PropTypes.shape({}).isRequired,

packages/bar/src/compute/grouped.js

@@ -16,6 +16,7 @@ const flatten = array => [].concat(...array)
 const range = (start, end) => Array.from(' '.repeat(end - start), (_, index) => start + index)
 
 const clampToZero = value => (gt(value, 0) ? 0 : value)
+const zeroIfNotFinite = value => (isFinite(value) ? value : 0)
 
 /**
  * Generates x/y scales & bars for vertical grouped bar chart.
@@ -169,7 +170,7 @@ export const generateGroupedBars = ({
         .reduce((acc, entry) => [...acc, ...keys.map(k => entry[k])], [])
         .filter(Boolean)
     const min = clampMin(Math.min(...values))
-    const max = Math.max(...values)
+    const max = zeroIfNotFinite(Math.max(...values))
 
     const scale = computeScale(scaleSpec, { [axis]: { min, max } }, width, height)
 

packages/bar/src/compute/stacked.js

@@ -6,7 +6,6 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-// import flattenDepth from 'lodash/flattenDepth'
 import { computeScale } from '@nivo/scales'
 import { stack, stackOffsetDiverging } from 'd3-shape'
 import { getIndexScale, filterNullValues, normalizeData } from './common'

packages/bar/src/props.js

@@ -35,7 +35,7 @@ export const BarPropTypes = {
     layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
     reverse: PropTypes.bool.isRequired,
     valueScale: scalePropType.isRequired,
-    indexScale: bandScalePropTypes.isRequired,
+    indexScale: PropTypes.shape(bandScalePropTypes).isRequired,
 
     minValue: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]).isRequired,
     maxValue: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]).isRequired,

packages/bar/tests/Bar.test.js

@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React from 'react'
+import React, { useState } from 'react'
 import renderer from 'react-test-renderer'
 import { mount } from 'enzyme'
 import { LegendSvg, LegendSvgItem } from '@nivo/legends'
@@ -390,6 +390,38 @@ it(`should not apply scale rounding when passed indexScale.round: false`, () =>
     expect(firstBarWidth).not.toEqual(Math.floor(firstBarWidth))
 })
 
+it('should render bars in grouped mode after updating starting values from 0', () => {
+    const MyBar = () => {
+        const [data, setData] = useState([{ id: 'test', A: 0, B: 0 }])
+
+        return (
+            <>
+                <button onClick={() => setData([{ id: 'test', A: 10, B: 10 }])}>update</button>
+                <Bar
+                    width={500}
+                    height={300}
+                    data={data}
+                    groupMode="grouped"
+                    keys={['A', 'B']}
+                    animate={false}
+                />
+            </>
+        )
+    }
+
+    const wrapper = mount(<MyBar />)
+
+    wrapper.find('BarItem').forEach(bar => {
+        expect(bar.prop('height')).toBe(0)
+    })
+
+    wrapper.find('button').simulate('click')
+
+    wrapper.find('BarItem').forEach(bar => {
+        expect(bar.prop('height')).toBe(300)
+    })
+})
+
 describe('tooltip', () => {
     it('should render a tooltip when hovering a slice', () => {
         const wrapper = mount(