Fix axis padding calculation for 0 or 1 data point. Fixes #4313

[graup]

The padding calculation did not take into account the case when there is only 0 or 1 data point, in which case the calculatedPadding is Infinite, resulting in range() to be set to Infinite, resulting in the ticks not being drawn properly.

I have fixed this by checking for Infinite before setting calculatedPadding.

This results in at least something being drawn – behaving as if padding was undefined. An even better fix would be to calculate padding without relying on the distance between values, but that would require a big refactor.

Related Issue

#4313

How Has This Been Tested?

I added a test case. It is failing without my fix, showing that the x-axis is not drawn at all.

N.B. the same test case can also show the bug in #3640 if we look at the rendered .recharts-rectangle (it is empty even though there should be one bar).

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• I have added a storybook story or extended an existing story to show my changes

[PavelVanecek]

Thanks for the fix and for the test! I would just like to see a small change in the assertion area, all good elsewhere.

Once that's done would you please also consider adding the same fix to the 3.x branch? @ckifer will prepare a bugfix release from master branch and we will want to have the fix also included in 3.x.

[PavelVanecek]

To make the test easier to read if it fails, can we do this instead?

const tick = container.querySelector('.xAxis .recharts-cartesian-axis-tick-value');
assertNonNull(tick);
expect(tick.getAttribute('x')).toEqual("180");

[graup]

Good idea. I did it like this

expect(tick).toBeInTheDocument();
expect(tick?.getAttribute('x')).toEqual('180');

[PavelVanecek]

I wonder if this problem is limited to Bar charts? Do you think it's valuable to have tests covering also other types of charts?

[graup]

This problem will appear in all charts that use CartesianUtils I think. Only testing one is probably enough as the others will end up in the same code path.

Happy to make a PR for the 3.x branch

[ckifer]

LGTM. Like Pavel mentioned we'll need the same PR for 3.x so we don't forget about it.

Thank you!

[graup]

Done. Thanks for the quick response guys.

I've also been looking into #3853, will push an updated version of that PR soonish

[ckifer]

released in 2.12.4