Skip to content
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

Fix: animate graph on data changes #111

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

msalcala11
Copy link

@msalcala11 msalcala11 commented Aug 5, 2024

Running the example project and clicking the "Refresh" button under the graph to change the graph's data does not result in the graph animating from the initial data to the new data for me. This 1-line change gets animations on data changes working as expected. Fixes #115

@ArtKullashi
Copy link

Can confirm this somewhat fixes the issue. The path of the graph still refuses to interpolate between some data changes. Eg. between two data sets that mirror each other. I think that this could be a skia limitation however

@msalcala11
Copy link
Author

@ArtKullashi Thanks for testing. Yes, I've noticed interpolations can fail between certain data changes if there are more than 45 data points (and the reliability of interpolation seems to decrease as the number of data points increases). The solution that has worked for me has been to scale graph data down to 45 data points

@Pahkoo
Copy link

Pahkoo commented Sep 2, 2024

When the point data is changed at {animated: true}, will the chart have a dynamic change effect? I am a static change here, no animation effect.

@msalcala11
Copy link
Author

msalcala11 commented Sep 2, 2024

When the point data is changed at {animated: true}, will the chart have a dynamic change effect? I am a static change here, no animation effect.

@Pahkoo Yes, in my testing, this PR should cause the chart to animate on point data changes when the animated prop is set to true so long as the point data arrays are of equal length and do not exceed 45 data points. Is it possible that your data arrays contain more than 45 data points or are not of equal length?

@csmartinsfct
Copy link

csmartinsfct commented Sep 30, 2024

@msalcala11 FYI with that fix I can animate between more than 45 data points, as long as the dataset size matches.

As far as supporting animation between data sets of different sizes, see: https://shopify.github.io/react-native-skia/docs/animations/hooks/#usepathinterpolation

To interpolate two completely different paths, we found the flubber library to work well with Skia

@msalcala11
Copy link
Author

msalcala11 commented Nov 12, 2024

@csmartinsfct Thanks for sharing those Skia docs - will need to try the flubber library. I've been able to animate between more than 45 data points for some datasets as well. However, I've noticed that, as the number of data points increases, the likelihood of animations failing for some data changes also increases. I've found that 45 data points is the maximum amount of data points I can use to ensure that 100% of animations succeed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Data changes aren't animating
4 participants