-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
[charts] improve tick rendering performance #17755
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
base: master
Are you sure you want to change the base?
[charts] improve tick rendering performance #17755
Conversation
c95783c
to
7275f25
Compare
Deploy preview: https://deploy-preview-17755--material-ui-x.netlify.app/ |
7d8970a
to
70305d9
Compare
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
70305d9
to
d9a86b1
Compare
@@ -44,4 +44,35 @@ describe('ScatterChartPro', () => { | |||
}, | |||
options, | |||
); | |||
|
|||
bench( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added here.
for (let i = 0; i < ticks.length; i += 1) { | ||
const value = ticks[i]; | ||
const offset = scale(value); | ||
const point = direction === 'x' ? { x: offset, y: 0 } : { x: 0, y: offset }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the direction
in isPointInside
handles that for us
const point = direction === 'x' ? { x: offset, y: 0 } : { x: 0, y: offset }; | |
const point = { x: offset, y: offset } |
3e7766e
to
20b98ad
Compare
CodSpeed Performance ReportMerging #17755 will improve performances by 9.58%Comparing Summary
Benchmarks breakdown
|
CodSpeed doesn't work well with rebases, but according to the PR the benchmark was introduced in, there is a reduction from 7.5s to 71.8ms, a 100x improvement. |
Improve tick rendering performance.
This improvement is especially visible when zooming in because the
tickNumber
would grow to large numbers (> 100k) but most of them would be outside the drawing area. Nevertheless, we were still mapping over all of those and creating a huge array. Now, we iterate over the created ticks but only create the tick object for those that will be inside the drawing area.I think this can be further improved by adjusting the tick number to be slower in the first place.