Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix legend size #4272

Merged
merged 3 commits into from Mar 11, 2024
Merged

Fix legend size #4272

merged 3 commits into from Mar 11, 2024

Conversation

zhonglin94
Copy link

Description

The chart shrinks when I apply a scale on the chart container

Related Issue

The issue

Motivation and Context

The legend size(height and width) provided by the getBoundingClientRect is changed if it's parent container is transformed using scale. If the container scale is 3x, then the legend height is significantly larger than usual, which makes the chart content visibly smaller than expected.

How Has This Been Tested?

Firstly, I tested locally using the Recharts demo
Then I build a package and test in a third party application that facing the same problem

Screenshots (if appropriate):

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 code follows the code style of this project.
  • 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
  • All new and existing tests passed.

@zhonglin94 zhonglin94 changed the base branch from 3.x to master March 9, 2024 02:22
nikolasrieble
nikolasrieble reviewed Mar 9, 2024
View reviewed changes
Copy link
Contributor

@nikolasrieble nikolasrieble left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your contribution! This seems to be a great solution. Could you please add a test to make sure we do not break this feature again?

@zhonglin94
Copy link
Author

Thank you for your contribution! This seems to be a great solution. Could you please add a test to make sure we do not break this feature again?

Hi Nikolasrieble, I tried to add unit test but found it hard to propose a reasonable to test it. The main reason is that the getBoundingClientRect and offsetHeight/offsetWidth always return 0 in the jsdom.

@PavelVanecek
Copy link
Collaborator

Hello @zhonglin94 please see here for examples how to mock getBoundingClientRect: https://github.com/recharts/recharts/pull/4274/files

@zhonglin94
Copy link
Author

Hello @zhonglin94 please see here for examples how to mock getBoundingClientRect: https://github.com/recharts/recharts/pull/4274/files

Thank you so much for help. I add unit test to cover my changes.

@ckifer
Copy link
Member

ckifer commented Mar 10, 2024

@PavelVanecek this change is targeting master. A lot of things just changed with Legend in the 3.x branch - I don't mind releasing this in a 2.x patch but this might get lost if it doesn't get added to 3.x now. Any suggestions?

@PavelVanecek
Copy link
Collaborator

Well we need another PR for 3.x. There will be conflicts. This is unfortunately the price for having two live branches.

@ckifer
Copy link
Member

ckifer commented Mar 11, 2024

Ack, got it. I can port this to 3.x

ckifer
ckifer approved these changes Mar 11, 2024
View reviewed changes
Copy link
Member

@ckifer ckifer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ckifer ckifer merged commit 9215b75 into recharts:master Mar 11, 2024
5 checks passed
@ckifer
Copy link
Member

ckifer commented Mar 11, 2024

@zhonglin94 if you want to make the same PR to the 3.x branch feel free! Otherwise I'll get around to it eventually

@ckifer ckifer mentioned this pull request Mar 18, 2024
Merged
7 tasks
renovate bot added a commit to SAP/ui5-webcomponents-react that referenced this pull request Mar 18, 2024
@renovate
fix(deps): update dependency recharts to v2.12.3 (#5614)
c0069e2 
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [recharts](https://togithub.com/recharts/recharts) | [`2.12.2` ->
`2.12.3`](https://renovatebot.com/diffs/npm/recharts/2.12.2/2.12.3) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/recharts/2.12.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/recharts/2.12.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/recharts/2.12.2/2.12.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/recharts/2.12.2/2.12.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>recharts/recharts (recharts)</summary>

###
[`v2.12.3`](https://togithub.com/recharts/recharts/releases/tag/v2.12.3)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.12.2...v2.12.3)

Some more small changes/fixes while working on 3.x

#### What's Changed

##### Fix

- `Legend`: fix issue where Legend was not taken into account when
scaling the chart container by
[@&#8203;zhonglin94](https://togithub.com/zhonglin94) in
[recharts/recharts#4272
closes
[recharts/recharts#4246
- `Area`: fixed a bug where className was not assigned to areaDot by
[@&#8203;108yen](https://togithub.com/108yen) in
[recharts/recharts#4294
closes
[recharts/recharts#4290
- `RadialBar`: address regression where radial bar and its background
were off from eachother because of rounding by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4295
closes
[recharts/recharts#4264
- `ErrorBar`: do not count `null` as 0 in error bar domain by
[@&#8203;rinkstiekema](https://togithub.com/rinkstiekema) in
[recharts/recharts#4297

#### New Contributors

- [@&#8203;zhonglin94](https://togithub.com/zhonglin94) made their first
contribution in
[recharts/recharts#4272

**Full Changelog**:
recharts/recharts@v2.12.2...v2.12.3

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/SAP/ui5-webcomponents-react).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNDUuMCIsInVwZGF0ZWRJblZlciI6IjM3LjI0NS4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nikolasrieble nikolasrieble nikolasrieble left review comments

@ckifer ckifer ckifer approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@zhonglin94 @PavelVanecek @ckifer @nikolasrieble @Fndeep