uber
animation fails when rendering FlexibleXYPlot VerticalBarSeries with same data
I observed the following and would like to know if my fix is correct.
Suppose a chart is given two datasets called A and B. Normally, A animates to B. However, if the chart is rendered multiple times with datasets A, B, and B in quick succession, no animation is visible. This is, presumably, because the animation from A to B is canceled and the animation from B to B is invisible.
I was able to address this issue using React.memo, rendering the react-vis component only if I detect that the data is not deep-equal to the previous data.
See the sandbox at https://codesandbox.io/s/wkwq93mz08 which shows the effect with and without memoization.
Since I haven't found similar reports of failure to animate in the issues here, I am wondering if I understand the issue correctly and if my fix is correct. I am also wondering why react-vis is not doing this automatically (animating only if previous/new data is different?) I can see that you wouldn't want to opt people into a possible expensive data equality test, especially for large data. On the other hand, should there be (or is there?) a mechanism for the user to tell react-vis when it should animate and when not, rather than relying on what appears to be the properties passed in different renders, which can be hard to predict?
Strange, I had the same issue as well. My chart would not animate if the dataset change very quickly in succession. Like you, I getting my data through API calls and that somehow might interfere with the animation. Somehow, looking through your code gave me an idea on how to solve the issue.
I have the same issue. it appears that any subsequent change in state cancels the animation. In my case after i get new data i also trigger a state update/reset for the crosshair value, which in turn cancels the animation. As a workaround i've delayed the crosshair's value update with 400ms (the animation is set to 200ms)
This surprised me.
These charts should have smooth animations when props are unchanged.
If there's anyone else with similar issues please feel free to reference / link them here.
