Improve behavior for animated graph with gesture

[foyarash]

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]

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]

Hello

Sorry for the misunderstanding.

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

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

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]

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]

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]

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

[Lexical-Luke]

@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.