performance: replace recharts charting lib with Chart.js #12952
Conversation
github-actions
bot
added
dependencies 📦
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Screen.Recording.2024-05-15.at.09.47.34.mov@nhsz Noticing this when playing around. It's a fairly unnatural approach for someone to resize a window like that, but also noticing it starts getting cramped on mobile:
|
There was a problem hiding this comment.
Having a couple issues here on desktop... In the Netlify preview, the homepage loads correctly showing the 30-day charts, but clicking on the 90-day button for any of them gives me the dreaded Application error: a client-side exception has occurred (see the browser console for more information).
Locally I do not get this, and I am able to toggle between them. I then notice a difference in our transition between 30 and 90 days, where it seems to only be showing 30 days worth of data during the transition (in both directions) leaving a dead space in the chart during the transition.
Screen.Recording.2024-05-16.at.11.47.24.mov
Is there a way to maintain all 90 days in the state while this transitions?
There was a problem hiding this comment.
Noting the same @nhsz. Locally (dev) its working fine but on the preview deploy it is crashing.
|
|
||
| const chartOptions = { | ||
| // chart styles | ||
| barThickness: 38, |
There was a problem hiding this comment.
Wondering if we could pass a responsive Chakra token here to make the width responsive... or perhaps we could use a maxBarThickness here to cap it on Mobile.
| barThickness: 38, | ||
| borderRadius: 4, | ||
| aspectRatio: 1.1, | ||
| responsive: true, |
There was a problem hiding this comment.
Odd that the chart doesn't re-expand if you shrink then widen the device window... Would think this would take care of it, and the Box it's contained within should be responsive... Will keep an eye out for a possible patch
Co-authored-by: Pablo Pettinari <pettinarip@gmail.com>
Co-authored-by: Pablo Pettinari <pettinarip@gmail.com>
Co-authored-by: Pablo Pettinari <pettinarip@gmail.com>
…g-website into performance-chartjs
There was a problem hiding this comment.
@nhsz looking good, the energy one is working perfectly. The only thing is that the home stats are crashing when you change the date range.
There was a problem hiding this comment.
Noting the same @nhsz. Locally (dev) its working fine but on the preview deploy it is crashing.
|
https://deploy-preview-12952--ethereumorg.netlify.app/en/energy-consumption From Safari: From Brave: Screen.Recording.2024-06-05.at.11.16.26.movScreen.Recording.2024-06-05.at.11.22.29.movCleared cache and tried this out... seeing some strange behavior on the engergy consumption chart where it glitches by loading/animating the chart twice, and seems to not be placing them in the correct sorting order. These adjust a little when the window size is adjusted. |
This PR replaces the
rechartscharting lib withChart.js, with the goal of providing a lighter alternative and reduce the bundle size.We currently have 2 types of charts on the site, the
/StatsBoxGrid/GridItemon the homepage andEnergyConsumptionChartDescription
src/components/StatsBoxGrid/GridItem.tsxwith Chart.js implementationsrc/components/EnergyConsumptionChart.tsxwith Chart.js implementationconstants.tscharts.tsto/lib/utilsrechartschart.jschartjs-plugin-datalabels(required plugin for custom datalabels)react-chartjs-2(React Chart.js wrapper)Charts location
StatsBoxGridEnergyConsumptionChartPreviews
Parsed size comparison
Chart.js (152.54kb)
recharts (271.81kb)
Reduction of 43.88%
Note
Found a small glitch on the StatsBox chart (don't think it's a blocker) that happens from time to time on some browsers like Chrome/Brave. Works ok on Firefox & Safari. From the comments on github, seems to be a browser issue and can't be fixed on the lib
Check the comments below: