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.

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

<CartesianGrid /> sets offset attribute to [object Object] #3810

Closed
1 task done
EvHaus opened this issue Oct 4, 2023 · 2 comments
Closed
1 task done

<CartesianGrid /> sets offset attribute to [object Object] #3810

EvHaus opened this issue Oct 4, 2023 · 2 comments
Labels
bug General bug label good first issue Issues with this label are great for first time contributors

Comments

@EvHaus
Copy link

EvHaus commented Oct 4, 2023

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://recharts.org/en-US/api/Legend

Steps to reproduce

It seems like all <CartesianGrid /> elements that recharts renders have their DOM elements set the offset value to the string [object Object]. You can reproduce this by going to the official documentation at https://recharts.org/en-US/api/Legend and inspect the DOM. You'll see:

<g class="recharts-cartesian-grid-horizontal"><line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="80" y="41" width="620" height="174" offset="[object Object]" x1="80" y1="215" x2="700" y2="215"></line><line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="80" y="41" width="620" height="174" offset="[object Object]" x1="80" y1="171.5" x2="700" y2="171.5"></line><line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="80" y="41" width="620" height="174" offset="[object Object]" x1="80" y1="128" x2="700" y2="128"></line><line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="80" y="41" width="620" height="174" offset="[object Object]" x1="80" y1="84.5" x2="700" y2="84.5"></line><line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="80" y="41" width="620" height="174" offset="[object Object]" x1="80" y1="41" x2="700" y2="41"></line></g>

What is expected?

Since the bug doesn't seem to affect the actual rendering of the element, it would be nice to keep the DOM output clean and simply remove the "offset" attribute entirely.

What is actually happening?

DOM nodes are rendered with an invalid offset="[object Object]" attribute value

Environment Info
Recharts v2.8.0
React 18.2.0
System Linux
Browser Chrome
@ckifer ckifer added bug General bug label good first issue Issues with this label are great for first time contributors labels Oct 10, 2023
@ckifer
Copy link
Member

ckifer commented Oct 10, 2023

Should be an easy enough one to fix, feel free to contribute!

ckifer pushed a commit that referenced this issue Oct 13, 2023
<!--- Provide a general summary of your changes in the Title above -->

## Description

Ignores the offset property when rendering the line elements in the
`CartesianGrid` component. This property does not impact rendering.

<!--- Describe your changes in detail -->

## Related Issue
#3810 

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
Solves issue #3810 

## How Has This Been Tested?

Manually checking to see that `offset` no longer exists for the line
elements when using the `CartesianGrid`


## Screenshots (if appropriate):

![image](https://github.com/recharts/recharts/assets/20285369/f8d4f5a9-1076-4327-90a4-b9e1710ae304)

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] 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.
- [x] I have added a storybook story or extended an existing story to
show my changes
- [x] All new and existing tests passed.
@ckifer
Copy link
Member

ckifer commented Oct 15, 2023

resolved in 2.9!

@ckifer ckifer closed this as completed Oct 15, 2023
renovate bot added a commit to SAP/ui5-webcomponents-react that referenced this issue Oct 18, 2023
[![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.8.0` ->
`2.9.0`](https://renovatebot.com/diffs/npm/recharts/2.8.0/2.9.0) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/recharts/2.9.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/recharts/2.9.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/recharts/2.8.0/2.9.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/recharts/2.8.0/2.9.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

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

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

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.8.0...v2.9.0)

#### What's Changed

Quite a lot this minor release! We sent out a cry for help and many
answered - thank you so much for that 🙌🏼

This release aims at internal maintainability, long lingering bugs, and
needed improvements. Highlights include equidistant tick improvements,
an active bar feature, and an ~85k/~9kb (gzipped) bundle size reduction
🚀

##### Feat

- `Bar`: Implement activeBar for Bar component by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3756
- `CartesianGrid`: add `syncWithticks`, `horizonalValues`, and
`verticalValues` props to allow more grid line customization by
[@&#8203;morozovkirill](https://togithub.com/morozovkirill) in
[recharts/recharts#3746
solves
[recharts/recharts#2153
- `CartesianAxis`: Improve interval option 'equidistantPreserveStart' by
[@&#8203;nikolasrieble](https://togithub.com/nikolasrieble) in
[recharts/recharts#3768
- `CartesianAxis`: Throw an invariant when axisIds do not match between
chart and axis components by
[@&#8203;ckifer](https://togithub.com/ckifer)
- `Brush`: add onDragEnd event to Brush component by
[@&#8203;simkesd](https://togithub.com/simkesd) in
[recharts/recharts#3774

##### Fix

-   Active Shape improvements
- `Funnel`: activeShape should work with Tooltip by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3772
- `Scatter`: activeShape should work with Tooltip by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3839
- `Pie`: activeShape should work with Tooltip by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3818
- `RadialBar`: activeShape should work with Tooltip by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3803
- `CartesianGrid`: Remove offset attribute from lines by
[@&#8203;branberry](https://togithub.com/branberry) in
[recharts/recharts#3854
solves
[recharts/recharts#3810
- `ResponsiveContainer`: style prop is now passed down correctly by
[@&#8203;d-gottlieb](https://togithub.com/d-gottlieb) in
[recharts/recharts#3726
- `Legend`: "Functions are not valid as a React child" error in
<Legend/> when a function is passed as the payload
[#&#8203;3749](https://togithub.com/recharts/recharts/issues/3749) by
[@&#8203;chris-mcdonald-dev](https://togithub.com/chris-mcdonald-dev) in
[recharts/recharts#3750
- `Tooltip`: Fix tooltip position when container uses transform scale by
[@&#8203;MateuszTrN](https://togithub.com/MateuszTrN) in
[recharts/recharts#3748
- `Tooltip`: Tooltip does not include data from all charts when a
separate dataset is passed to chart prop data and specified on
Line/Area/etc prop data by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3733
fixes
[recharts/recharts#3669

##### Refactor

Impossible to mention all of the great refactoring done this release
thanks to [@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) (33
PRs in one month!!) and others! Notable improvements include
(non-breaking) type safety enhancements and source code file size
reductions, and unit test improvements that will help reduce
regressions.

##### Chore

- Upgrade react-smooth to 2.0.5 - potentially fixes
[recharts/recharts#1135
(edit: this was already fixed)
- Add performance testing tool by
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) in
[recharts/recharts#3829
- remove reduceCSSCalc by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#3820

##### Storybook

- Add storybook-addon-performance by
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) in
[recharts/recharts#3826
-   many storybook improvements and fixes

#### 🚀 New Contributors (!!) 🚀

- [@&#8203;d-gottlieb](https://togithub.com/d-gottlieb) made their first
contribution in
[recharts/recharts#3726
- [@&#8203;andrewangelle](https://togithub.com/andrewangelle) made their
first contribution in
[recharts/recharts#3733
- [@&#8203;wanisramdani](https://togithub.com/wanisramdani) made their
first contribution in
[recharts/recharts#3751
- [@&#8203;MateuszTrN](https://togithub.com/MateuszTrN) made their first
contribution in
[recharts/recharts#3748
- [@&#8203;chris-mcdonald-dev](https://togithub.com/chris-mcdonald-dev)
made their first contribution in
[recharts/recharts#3750
- [@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) made their
first contribution in
[recharts/recharts#3759
- [@&#8203;simkesd](https://togithub.com/simkesd) made their first
contribution in
[recharts/recharts#3774
- [@&#8203;samtmorgan](https://togithub.com/samtmorgan) made their first
contribution in
[recharts/recharts#3778
- [@&#8203;Shashangbhagat](https://togithub.com/Shashangbhagat) made
their first contribution in
[recharts/recharts#3786
- [@&#8203;morozovkirill](https://togithub.com/morozovkirill) made their
first contribution in
[recharts/recharts#3746
- [@&#8203;branberry](https://togithub.com/branberry) made their first
contribution in
[recharts/recharts#3854
- [@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) made their
first contribution in
[recharts/recharts#3820

**Full Changelog**:
recharts/recharts@v2.8.0...v2.9.0

</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:eyJjcmVhdGVkSW5WZXIiOiIzNy44LjEiLCJ1cGRhdGVkSW5WZXIiOiIzNy4xOS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Lukas Harbarth <lukas.harbarth@sap.com>
bodinsamuel pushed a commit to specfy/specfy that referenced this issue Nov 13, 2023
[![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.8.0` ->
`2.9.3`](https://renovatebot.com/diffs/npm/recharts/2.8.0/2.9.3) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/recharts/2.9.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/recharts/2.9.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/recharts/2.8.0/2.9.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/recharts/2.8.0/2.9.3?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

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

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

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.9.2...v2.9.3)

#### Fix

`Brush`: Fix an issue where after 2.9 `Brush` does not correctly slice
data when using `Line` components - fixes
[recharts/recharts#3929
- thank you [@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo)

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

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.9.1...v2.9.2)

Fix another TS issue from 2.9.

##### Fix

- `Line/ActiveDot`: Fix breaking type change for the `onClick` function
of `activeDot` on `Line` - this resolves
[recharts/recharts#3922
- thank you [@&#8203;andrewangelle](https://togithub.com/andrewangelle)
for the quick turnaround

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

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.9.0...v2.9.1)

Bug fixes following 2.9.0

#### Fix

- `TypeScript`: fix breaking change in `ActiveShape` types - fixes
[recharts/recharts#3911
- thanks [@&#8203;andrewangelle](https://togithub.com/andrewangelle)
- `CartesianGrid`: fix breaking change where you could no longer render
`CartesianGrid` without a y-axis - fixes
[recharts/recharts#3907
- thanks [@&#8203;akamfoad](https://togithub.com/akamfoad)
- `Line`: fix infinite loop when `strokeDasharray` is `'0'` on `Line` -
fixes
[recharts/recharts#3899
(and maybe others)

**Full Changelog**:
recharts/recharts@v2.9.0...v2.9.1

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

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.8.0...v2.9.0)

#### What's Changed

Quite a lot this minor release! We sent out a cry for help and many
answered - thank you so much for that 🙌🏼

This release aims at internal maintainability, long lingering bugs, and
needed improvements. Highlights include equidistant tick improvements,
an active bar feature, and an ~85k/~9kb (gzipped) bundle size reduction
🚀

##### Feat

- `Bar`: Implement activeBar for Bar component by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3756
- `CartesianGrid`: add `syncWithticks`, `horizonalValues`, and
`verticalValues` props to allow more grid line customization by
[@&#8203;morozovkirill](https://togithub.com/morozovkirill) in
[recharts/recharts#3746
solves
[recharts/recharts#2153
- `CartesianAxis`: Improve interval option 'equidistantPreserveStart' by
[@&#8203;nikolasrieble](https://togithub.com/nikolasrieble) in
[recharts/recharts#3768
- `CartesianAxis`: Throw an invariant when axisIds do not match between
chart and axis components by
[@&#8203;ckifer](https://togithub.com/ckifer)
- `Brush`: add onDragEnd event to Brush component by
[@&#8203;simkesd](https://togithub.com/simkesd) in
[recharts/recharts#3774

##### Fix

-   Active Shape improvements
- `Funnel`: activeShape should work with Tooltip by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3772
- `Scatter`: activeShape should work with Tooltip by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3839
- `Pie`: activeShape should work with Tooltip by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3818
- `RadialBar`: activeShape should work with Tooltip by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3803
- `CartesianGrid`: Remove offset attribute from lines by
[@&#8203;branberry](https://togithub.com/branberry) in
[recharts/recharts#3854
solves
[recharts/recharts#3810
- `ResponsiveContainer`: style prop is now passed down correctly by
[@&#8203;d-gottlieb](https://togithub.com/d-gottlieb) in
[recharts/recharts#3726
- `Legend`: "Functions are not valid as a React child" error in
<Legend/> when a function is passed as the payload
[#&#8203;3749](https://togithub.com/recharts/recharts/issues/3749) by
[@&#8203;chris-mcdonald-dev](https://togithub.com/chris-mcdonald-dev) in
[recharts/recharts#3750
- `Tooltip`: Fix tooltip position when container uses transform scale by
[@&#8203;MateuszTrN](https://togithub.com/MateuszTrN) in
[recharts/recharts#3748
- `Tooltip`: Tooltip does not include data from all charts when a
separate dataset is passed to chart prop data and specified on
Line/Area/etc prop data by
[@&#8203;andrewangelle](https://togithub.com/andrewangelle) in
[recharts/recharts#3733
fixes
[recharts/recharts#3669

##### Refactor

Impossible to mention all of the great refactoring done this release
thanks to [@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) (33
PRs in one month!!) and others! Notable improvements include
(non-breaking) type safety enhancements and source code file size
reductions, and unit test improvements that will help reduce
regressions.

##### Chore

- Upgrade react-smooth to 2.0.5 - potentially fixes
[recharts/recharts#1135
(edit: this was already fixed)
- Add performance testing tool by
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) in
[recharts/recharts#3829
- remove reduceCSSCalc by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#3820

##### Storybook

- Add storybook-addon-performance by
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) in
[recharts/recharts#3826
-   many storybook improvements and fixes

#### 🚀 New Contributors (!!) 🚀

- [@&#8203;d-gottlieb](https://togithub.com/d-gottlieb) made their first
contribution in
[recharts/recharts#3726
- [@&#8203;andrewangelle](https://togithub.com/andrewangelle) made their
first contribution in
[recharts/recharts#3733
- [@&#8203;wanisramdani](https://togithub.com/wanisramdani) made their
first contribution in
[recharts/recharts#3751
- [@&#8203;MateuszTrN](https://togithub.com/MateuszTrN) made their first
contribution in
[recharts/recharts#3748
- [@&#8203;chris-mcdonald-dev](https://togithub.com/chris-mcdonald-dev)
made their first contribution in
[recharts/recharts#3750
- [@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) made their
first contribution in
[recharts/recharts#3759
- [@&#8203;simkesd](https://togithub.com/simkesd) made their first
contribution in
[recharts/recharts#3774
- [@&#8203;samtmorgan](https://togithub.com/samtmorgan) made their first
contribution in
[recharts/recharts#3778
- [@&#8203;Shashangbhagat](https://togithub.com/Shashangbhagat) made
their first contribution in
[recharts/recharts#3786
- [@&#8203;morozovkirill](https://togithub.com/morozovkirill) made their
first contribution in
[recharts/recharts#3746
- [@&#8203;branberry](https://togithub.com/branberry) made their first
contribution in
[recharts/recharts#3854
- [@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) made their
first contribution in
[recharts/recharts#3820

**Full Changelog**:
recharts/recharts@v2.8.0...v2.9.0

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 4pm every weekday" in timezone
Europe/Paris, 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/specfy/specfy).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40Ni4wIiwidXBkYXRlZEluVmVyIjoiMzcuNDYuMCIsInRhcmdldEJyYW5jaCI6ImNob3JlL3Jlbm92YXRlQmFzZUJyYW5jaCJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
GMer78 pushed a commit to GMer78/recharts-1 that referenced this issue Nov 24, 2023
<!--- Provide a general summary of your changes in the Title above -->

## Description

Ignores the offset property when rendering the line elements in the
`CartesianGrid` component. This property does not impact rendering.

<!--- Describe your changes in detail -->

## Related Issue
recharts#3810 

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
Solves issue recharts#3810 

## How Has This Been Tested?

Manually checking to see that `offset` no longer exists for the line
elements when using the `CartesianGrid`


## Screenshots (if appropriate):

![image](https://github.com/recharts/recharts/assets/20285369/f8d4f5a9-1076-4327-90a4-b9e1710ae304)

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] 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.
- [x] I have added a storybook story or extended an existing story to
show my changes
- [x] All new and existing tests passed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug General bug label good first issue Issues with this label are great for first time contributors
Projects
None yet
Development

No branches or pull requests

2 participants