electricitymaps
Switch react-motion to react-spring
I have looked into this and looks like react-spring might not be the package we want to use to animate SVG paths, it's interpolation metod seem to create some weird results especially on arcs (like in the gauges use).
You guys can try it yourselves as it technically works but it morphs the shape in a weird way (very noticeable when you drag the time slider back and forth fast).
If anyone has a solution for it I'd be happy to hear it otherwise it might just be better to remove the animation for now as mentioned in #4143 so we can upgrade to later versions of react and then we can find a way to re-implement the current behavior and use on the graph itself for consistency.
@madsnedergaard I'd love if you took a look at this when you have the time. (there is no hurry) If we can't find a good fix I think we should just remove the animation on the gauges for now.
(I have working code that animate the production vs capacity bar chart without issues that I can add though but it don't help with the circle morphing issue.)
Ugh, annoying that it jumps weirdly around :/
https://user-images.githubusercontent.com/3296643/170287521-ec91d85e-5a5f-494d-aaae-c67740f596a1.mp4
Dunno if it would make sense to switch to some package for this like https://github.com/naikus/svg-gauge? 🤔 (just first result when googling, haven't looked further into it except the demo)
Ugh, annoying that it jumps weirdly around :/
Kapture.2022-05-25.at.16.32.16.mp4 Dunno if it would make sense to switch to some package for this like https://github.com/naikus/svg-gauge? 🤔 (just first result when googling, haven't looked further into it except the demo)
Looks like that package would work just fine. I also found this package, reaviz, that could work, it also contain a lot of other visualization options if we want to use it in the future. It was made for react so there might be some benefit to that. NPM link
But generally I am in favor of keeping it as simple as possible.
Hmm, good point.. We've also been discussing switching the graphs to a more standardized React library (instead of the heavily customized d3 setup we current have), so maybe worth parking this until that happens (to make sure we spend time on finding and implementing the right thing)? 🤔
Hmm, good point.. We've also been discussing switching the graphs to a more standardized React library (instead of the heavily customized d3 setup we current have), so maybe worth parking this until that happens (to make sure we spend time on finding and implementing the right thing)? 🤔
If the backend was opened up for more production modes (i.e. uncombine the combined ones as suggested in #4161 albeit for a different reason) this wiz would look pretty good (if we change the styling) 😉
Too bad this wasn't working well enough, I suggest we close this PR for now and revisit this at a later stage by looking into all visualisations :)