Improve behavior for animated graph with gesture

margelo / react-native-graph

📈 Beautiful, high-performance Graphs and Charts for React Native built with Skia

https://margelo.io

MIT License

2.08k stars 118 forks source link

Improve behavior for animated graph with gesture #14

Open foyarash opened 2 years ago

foyarash commented 2 years ago

Animated graph with gestures enabled had some improvements in my opinion.

This PR adds the following:

Allows to highlight the graph partially thanks to an initialIndex prop. This will basically give an initial position to the circle. The old behavior was not really appropriate: the whole graph had a translucent color. With this prop, this gives the possibility to highlight the whole graph.
Add the possibility to pass a custom duration for the gesture long press gesture
Currently, when releasing the gesture, the circle goes back to the end of the graph. The PR introduces a resetPositionOnRelease prop. Passing true as a value will keep the old behavior, while passing false will keep the circle at the last position where the gesture was released.

mrousavy commented 2 years ago

Hey! Thanks for your PR!

Allows to highlight the graph partially thanks to an initialIndex prop. This will basically give an initial position to the circle. The old behavior was not really appropriate: the whole graph had a translucent color. With this prop, this gives the possibility to highlight the whole graph.

I don't really understand this, could you maybe elaborate a bit? Do you have a screenshot/GIF to compare before/after?

foyarash commented 2 years ago

Hello

Sorry for the misunderstanding.

So basically, this is the look we have when the graph renders initially on the current version:

Simulator Screen Shot - iPhone 13 - 2022-05-27 at 12 01 48

With the initialIndex prop (here i set it to 35 in the example app):

Simulator Screen Shot - iPhone 13 - 2022-05-27 at 12 02 00

The highlight part i am talking about is the opaque blue part, at the left part of the graph in the second screenshot.

The initial goal was to be able to have the opaque blue part going all the way to the end of the graph. But i thought giving more flexibility to put it until a certain index might be better.

Let me know if that is more clear for you

mrousavy commented 2 years ago

Let me know if that is more clear for you

Got it, but I can't think of a use-case for this feature atm. - why would you want to have the path hard-stop at a given point? This whole thing is built as an interactive gesture for the user

foyarash commented 2 years ago

Let me know if that is more clear for you

Got it, but I can't think of a use-case for this feature atm. - why would you want to have the path hard-stop at a given point? This whole thing is built as an interactive gesture for the user

Taking the coinbase app as a reference, the graph is fully highlighted in the initial render. Maybe the case of highlighting the graph partially is a bad idea, but i dont think its a bad idea to highlight the whole graph

foyarash commented 2 years ago

Hello @mrousavy have you had a chance to look at the latest changes ? Thank you 🙂

Lexical-Luke commented 11 months ago

@mrousavy This is a really great idea when visualizing past and forecasted data! This way you could plot the current time moving on the graph.

Can this PR be approved? I'd like to use this feature.