feat: enable multiple X-Axis and Y-Axis

[alexbalonperin]

Implemented for AreaCharts, LineCharts & BarCharts

Description

This change is quite big because I refactored quite a bit of code to reduce code duplication due to the multiple axis.
It follows the API proposal described in the linked ticket.
This PR was inspired by #1028 but also supports BarCharts and multiple X-Axis.

A few important things:

• The current version of recharts 2.x doesn't allow using custom react components so after chatting with the new recharts maintainers I extracted the axis and area, line, bar into functions that return JSX element. Recharts 3.x should support custom components. Big thanks to @ckifer!
• The PR doesn't introduce any breaking change but the refactoring is significant. I checked all stories on AreaCharts, LineCharts and BarCharts many times and everything seems to work as expected
• When selecting multiple X-Axis, the tooltip only shows the payload for the first X-Axis. I have made a PR on the recharts repo to fix that issue (see Fix: show all series data on tooltip when multiple X-Axis recharts/recharts#4758). Hopefully, it will be merged soon and we can bump the recharts version to get proper tooltips.

I realize that this might be quite a big change that might not get merged quickly (at all?) but since we need it at my company I thought I would make the PR and you can decide if you want to merge or close it.

Related issue(s)
fixes #1102

What kind of change does this PR introduce? (check at least one)

• Bug fix (non-breaking change which fixes an issue)
• New Feature (non-breaking change which adds functionality)
• New Feature (BREAKING CHANGE which adds functionality)
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

How has this been tested?
I have probably looked at the storybook a million times lol.

Screenshots (if appropriate):

The PR fulfils these requirements:

• It's submitted to the main branch
• When resolving a specific issue, it's referenced in the related issue section above
• My change requires a change to the documentation. (Managed by Tremor Team)
• I have added tests to cover my changes
• Check the "Allow edits from maintainers" option while creating your PR.
• Add refs #XXX or fixes #XXX to the related issue section if your PR refers to or fixes an issue.
• By contributing to Tremor, you confirm that you have read and agreed to Tremor's CONTRIBUTING.md guideline. You also agree that your contributions will be licensed under the Apache License 2.0 license.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tremor-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 25, 2024 4:42am