search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.82k stars 1.14k forks source link

[charts] Fix line animation #12892

Open alexfauquette opened 3 weeks ago

alexfauquette commented 3 weeks ago

Fix #12873

Here is the codesandbox with the fix:

https://codesandbox.io/p/sandbox/priceless-shaw-g23c8w?file=%2Fsrc%2FDemo.tsx%3A57%2C24

It remains an edge case if you toggle before the animation is resolved. It that case, the animation is not played and the chars goes directly to the final state. Which is less problematic than stopping wright in the middle.

I don't know why animation stopped. I opened an issue on this topic: https://github.com/pmndrs/react-spring/issues/2273

The current workaround make sure to keep the last different value in memory

mui-bot commented 3 weeks ago

Deploy preview: https://deploy-preview-12892--material-ui-x.netlify.app/

Generated by :no_entry_sign: dangerJS against 17abb38aa3e7b43a67e6bf3a89566c26d63be233

JCQuintas commented 3 weeks ago

Lines and points animations aren't smooth anymore:

Click "Randomize" under the "Animation" part

eg: https://deploy-preview-12892--material-ui-x.netlify.app/x/react-charts/lines/#animation vs: https://mui.com/x/react-charts/lines/#animation

alexfauquette commented 3 weeks ago

Lines and points animations aren't smooth anymore:

It seems I can remove the imperative call to api.start which improve the sync

alexfauquette commented 3 weeks ago

Moving to draft, because the logic leads to bugs with mouse hover. Will need to think back about it with a clearer mind

https://github.com/mui/mui-x/assets/45398769/5b6cee65-3bbe-4a08-a473-6d1c849157a6