recharts
Fix: bar width when there is only one data point
Description
- Adding condition to return a bar size when there is only one data point;
- Creating test for it.
Related Issue
- Bug #3640
Motivation and Context
- I choose this bug to solve for a graduation issue and because it seems easy.
How Has This Been Tested?
- I created a test to count one rectangle for one data point.
Screenshots:
Types of changes
- [x] 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:
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] I have added tests to cover my changes.
- [ ] I have added a storybook story or extended an existing story to show my changes
- [x] All new and existing tests passed.
@ckifer I could increase the x-axis width to centralize the unique bar in the axis if you tell me the path to do this. Did my changes break the tests that failed in the build?
@ckifer I could increase the x-axis width to centralize the unique bar in the axis if you tell me the path to do this. Did my changes break the tests that failed in the build?
Yes, this specifically
<BarChart /> › Render a bar › renders a bar if size is limited
Agreed in principle, but the flexibility does add a lot of pressure on the side of the maintainers.
We support this but is it expected to look a certain way or be functional? I guess it might be useful depending on the case and customizations applied. I wish the original creators had limited flexibility a bit (even though it's one of the things people like about the lib now) 😅
Doesn't matter for now though, just trying to think aloud a bit. Thanks for the input!
To write in favor of having bar charts with numerical X and Y axes, here are some ones I am using for a project:
https://bferentz.vercel.app/
In a lot of charts on that page, I am comparing a numeric value (potential points scored in a game) against another numeric value (the % chance of those points being score).
@TheCleric nice, thanks for the data point (and cool site!)
At small scale things look relatively non-functional but these types of examples help challenge (at least my) perception of what people are able to do with the lib. Kudos for creativity and we'll make sure number support doesn't go away
@souzolliveira any chance you could merge the latest and fix this test?
Yes, sorry for the delay, I will update my branch and correct the tests.
Trying to land this, I merged master via UI. Testing this locally, tests are failing 🤔 Strangely the CI was not triggered by actions in the UI.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 4 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FAIL test/chart/BarChart.spec.tsx > <BarChart /> > Renders 1 bar in simple BarChart
AssertionError: expected to have a length of 1 but got +0
- Expected
+ Received
- 1
+ 0
❯ test/chart/BarChart.spec.tsx:40:63
38| );
39|
40| expect(container.querySelectorAll('.recharts-rectangle')).toHaveLength(1);
| ^
41| });
42|
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/4]⎯
FAIL test/chart/BarChart.spec.tsx > <BarChart /> > Render a bar > renders a bar if size is limited
Error: expect(element).toHaveAttribute("x", "79") // element.getAttribute("x") === "79"
Expected the element to have attribute:
x="79"
Received:
x="83"
❯ test/chart/BarChart.spec.tsx:332:30
330|
331| const rectangleProps = rectangles[0];
332| expect(rectangleProps).toHaveAttribute('x', '79');
| ^
333| expect(rectangleProps).toHaveAttribute('y', '5');
334| expect(rectangleProps).toHaveAttribute('width', '40');
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/4]⎯
FAIL test/chart/BarChart.spec.tsx > <BarChart /> > Renders a (Bar) chart with less width than left, right margin and less height than top, bottom margin
TypeError: Cannot read properties of null (reading 'children')
❯ test/chart/BarChart.spec.tsx:364:21
362|
363| const clipPath = container.querySelector('#recharts53-clip');
364| expect(clipPath.children[0]).not.toBeNull();
| ^
365|
366| // expect clipPath rect to have a width and height of 0
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/4]⎯
FAIL test/util/ChartUtils.spec.tsx > getBandSizeOfAxis > DataUtils.getBandSizeOfAxis({ type: "number", scale }, ticks) should return 0
AssertionError: expected +0 to be 2 // Object.is equality
- Expected
+ Received
- 2
+ 0
❯ test/util/ChartUtils.spec.tsx:189:44
187| const axis: BaseAxisProps = { type: 'number' };
188| const ticks = [{ coordinate: 13 }, { coordinate: 15 }, { coordinate: 20 }];
189| expect(getBandSizeOfAxis(axis, ticks)).toBe(2);
| ^
190| });
191| });
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[4/4]⎯
Test Files 2 failed | 83 passed (85)
Tests 4 failed | 1431 passed (1435)
Start at 14:42:57
Duration 14.68s (transform 1.62s, setup 6.52s, collect 42.94s, tests 10.26s, environment 24.40s, prepare 6.44s)