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

Add storybook-addon-performance #3826

Merged

Conversation

PavelVanecek
Copy link
Collaborator

Description

I am not immediately certain of the usefulness of this addon since it reports renders in seconds and that will be different in each run and each computer; and it reports all of recharts to have 1 DOM element which makes me suspicious it's not seeing the whole picture.

Related Issue

#3437

Motivation and Context

How Has This Been Tested?

Storybook

Screenshots (if appropriate):

image

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.

@nikolasrieble
Copy link
Contributor

Do you see a reason to not add this for now? Do you think #3829 is sufficient instead?

Having two ways to measure performance might add more noise than value. What do you think?

@PavelVanecek
Copy link
Collaborator Author

I think both tools are valuable because they offer different information to different audience.

One aimed for contributors, repeatable and reliable, but more difficult to setup and use.

Another for general public, zero setup and quick to give an idea of what recharts can do and cannot do performance wise.

@ckifer
Copy link
Member

ckifer commented Oct 11, 2023

@PavelVanecek does this slow down storybook more than it already is?

I feel we're bogging things down a bit - if I can't run the storybook locally without my computer exploding then I think we might need to rethink adding this

@PavelVanecek
Copy link
Collaborator Author

PavelVanecek commented Oct 12, 2023

The storybook starts at the same speed as before. The plugin has a button "start measurement" and only when you switch to the "Performance" tab and push the button your computer starts exploding.

Also the default case - 1 instance, 1 render - takes 50ms. You need to play around with the config to even start your fans.

@ckifer
Copy link
Member

ckifer commented Oct 12, 2023

lol, gotcha. If you fix the merge conflicts we can merge this then

@PavelVanecek
Copy link
Collaborator Author

I resolved and pushed but github still shows conflicts ಠ_ಠ

@ckifer
Copy link
Member

ckifer commented Oct 12, 2023

Weird, why does it pick up all the other PRs changes

@ckifer ckifer closed this Oct 12, 2023
@ckifer ckifer reopened this Oct 12, 2023
@ckifer
Copy link
Member

ckifer commented Oct 12, 2023

Nice, closing and re-opening reset it

@@ -70,7 +70,7 @@ _Before_ submitting a pull request, please make sure the following is done…
## <a name="code"></a>Code Guide

Our linter will catch most styling issues that may exist in your code.
You can check the status of your code styling by simply running: `npm run lint`
You can check the status of your code styling by running: `npm run lint`
Copy link
Contributor

Choose a reason for hiding this comment

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

I love small language cleanups, thank you!

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.

Lets go!

@nikolasrieble nikolasrieble merged commit 9f39919 into recharts:master Oct 13, 2023
9 checks passed
renovate bot added a commit to SAP/ui5-webcomponents-react that referenced this pull request 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 pull request 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 pull request Nov 24, 2023
## Description

I am not immediately certain of the usefulness of this addon since it
reports renders in seconds and that will be different in each run and
each computer; and it reports all of recharts to have 1 DOM element
which makes me suspicious it's not seeing the whole picture.

## Related Issue

recharts#3437

## Motivation and Context

## How Has This Been Tested?

Storybook

## Screenshots (if appropriate):

<img width="1680" alt="image"
src="https://github.com/recharts/recharts/assets/1100170/530dd31e-bf8f-4368-9934-b174f1ac8b15">

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

- [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.
- [ ] I have added a storybook story or extended an existing story to
show my changes
- [X] All new and existing tests passed.
@PavelVanecek PavelVanecek deleted the storybook-addon-performance branch March 19, 2024 11:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants