Improve behavior for animated graph with gesture

package.json

@@ -126,7 +126,8 @@
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "es5",
-    "useTabs": false
+    "useTabs": false,
+    "semi": false
   },
   "react-native-builder-bob": {
     "source": "src",

src/AnimatedLineGraph.tsx

@@ -41,6 +41,9 @@ export function AnimatedLineGraph({
   TopAxisLabel,
   BottomAxisLabel,
   selectionDotShadowColor,
+  gestureHoldDuration = 300,
+  initialIndex,
+  resetPositionOnRelease,
   ...props
 }: AnimatedLineGraphProps): React.ReactElement {
   const [width, setWidth] = useState(0)
@@ -53,6 +56,7 @@ export function AnimatedLineGraph({
       setWidth(Math.round(layout.width))
       setHeight(Math.round(layout.height))
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   )
 
@@ -158,7 +162,9 @@ export function AnimatedLineGraph({
     [interpolateProgress]
   )
 
-  const { gesture, isActive, x } = useHoldOrPanGesture({ holdDuration: 300 })
+  const { gesture, isActive, x } = useHoldOrPanGesture({
+    holdDuration: gestureHoldDuration,
+  })
   const circleX = useValue(0)
   const circleY = useValue(0)
   const pathEnd = useValue(0)
@@ -193,17 +199,25 @@ export function AnimatedLineGraph({
         damping: 50,
         velocity: 0,
       })
-      if (!active) pathEnd.current = 1
+      if (!active && resetPositionOnRelease) pathEnd.current = 1
 
       if (active) onGestureStart?.()
       else onGestureEnd?.()
     },
-    [circleRadius, onGestureEnd, onGestureStart, pathEnd]
+    [
+      circleRadius,
+      onGestureEnd,
+      onGestureStart,
+      pathEnd,
+      resetPositionOnRelease,
+    ]
   )
   useAnimatedReaction(
-    () => x.value,
-    (fingerX) => {
-      runOnJS(setFingerX)(fingerX)
+    () => [x.value, isActive.value],
+    ([fingerX, isActiveValue]) => {
+      if (isActiveValue) {
+        runOnJS(setFingerX)(fingerX as number)
+      }
     },
     [isActive, setFingerX, width, x]
   )
@@ -215,16 +229,22 @@ export function AnimatedLineGraph({
     [isActive, setIsActive]
   )
   const positions = useDerivedValue(
-    () => [
-      0,
-      Math.min(0.15, pathEnd.current),
-      pathEnd.current,
-      pathEnd.current,
-      1,
-    ],
+    () => [0, pathEnd.current, pathEnd.current, pathEnd.current, 1],
     [pathEnd]
   )
 
+  useEffect(() => {
+    if (
+      typeof initialIndex === 'number' &&
+      initialIndex < points.length &&
+      width
+    ) {
+      const xForIndex = Math.round((initialIndex * width) / points.length)
+      setFingerX(xForIndex)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [points, initialIndex, width])
+
   return (
     <View {...props}>
       <GestureDetector gesture={enablePanGesture ? gesture : undefined}>

src/LineGraphProps.ts

@@ -62,6 +62,21 @@ export type AnimatedLineGraphProps = BaseLineGraphProps & {
    * The element that gets rendered below the Graph (usually the "min" point/value of the Graph)
    */
   BottomAxisLabel?: () => React.ReactElement | null
+
+  /**
+   * Hold duration for the graph gesture
+   */
+  gestureHoldDuration?: number
+
+  /**
+   * Initial index shown on the graph
+   */
+  initialIndex?: number
+
+  /**
+   * Wether to reset or not the circle position when releasing the gesture
+   */
+  resetPositionOnRelease?: boolean
 }
 
 export type LineGraphProps =