From 6d67f4f0f48f800fbab069f0b21ca92e84e6b4a0 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph@margelo.io>
Date: Tue, 6 Sep 2022 18:36:57 +0200
Subject: [PATCH] feat: implement indicator

---
 example/src/screens/GraphPage.tsx |  47 +++++-
 package.json                      |  12 +-
 src/AnimatedLineGraph.tsx         | 269 ++++++++++++++++++++++++++----
 src/CreateGraphPath.ts            | 233 ++++++++++++++++++++------
 src/LineGraphProps.ts             |  28 ++++
 src/Maths.ts                      |  23 +++
 src/SelectionDot.tsx              |   7 +-
 src/StaticLineGraph.tsx           |  19 ++-
 src/hooks/useHoldOrPanGesture.ts  |  77 ---------
 src/hooks/usePanGesture.ts        |  47 ++++++
 src/utils/hexToRgba.ts            |  11 ++
 yarn.lock                         |  28 ++--
 12 files changed, 615 insertions(+), 186 deletions(-)
 create mode 100644 src/Maths.ts
 delete mode 100644 src/hooks/useHoldOrPanGesture.ts
 create mode 100644 src/hooks/usePanGesture.ts
 create mode 100644 src/utils/hexToRgba.ts

diff --git a/example/src/screens/GraphPage.tsx b/example/src/screens/GraphPage.tsx
index 5ff5bb9..51e0b4c 100644
--- a/example/src/screens/GraphPage.tsx
+++ b/example/src/screens/GraphPage.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { View, StyleSheet, Text, Button } from 'react-native'
 import { LineGraph } from 'react-native-graph'
 import StaticSafeAreaInsets from 'react-native-static-safe-area-insets'
@@ -19,6 +19,11 @@ export function GraphPage() {
   const [isAnimated, setIsAnimated] = useState(true)
   const [enablePanGesture, setEnablePanGesture] = useState(true)
   const [enableFadeInEffect, setEnableFadeInEffect] = useState(false)
+  const [enableCustomSelectionDot, setEnableCustomSelectionDot] =
+    useState(false)
+  const [enableRange, setEnableRange] = useState(false)
+  const [enableIndicator, setEnableIndicator] = useState(false)
+  const [indicatorPulsating, setIndicatorPulsating] = useState(false)
 
   const [points, setPoints] = useState(() => generateRandomGraphData(POINTS))
   const smallPoints = generateSinusGraphData(9)
@@ -28,6 +33,8 @@ export function GraphPage() {
     hapticFeedback('impactLight')
   }, [])
 
+  const highestDate = useMemo(() => points[POINTS - 1]!.date, [])
+
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
       <View style={styles.row}>
@@ -52,7 +59,23 @@ export function GraphPage() {
         enablePanGesture={enablePanGesture}
         enableFadeInMask={enableFadeInEffect}
         onGestureStart={() => hapticFeedback('impactLight')}
-        SelectionDot={SelectionDot}
+        SelectionDot={enableCustomSelectionDot ? SelectionDot : undefined}
+        range={
+          enableRange
+            ? {
+                x: {
+                  min: points[0]!.date,
+                  max: new Date(highestDate.getTime() + 30),
+                },
+                y: {
+                  min: -200,
+                  max: 200,
+                },
+              }
+            : undefined
+        }
+        enableIndicator={enableIndicator}
+        indicatorPulsating={indicatorPulsating}
       />
 
       <Button title="Refresh" onPress={refreshData} />
@@ -73,6 +96,26 @@ export function GraphPage() {
           isEnabled={enableFadeInEffect}
           setIsEnabled={setEnableFadeInEffect}
         />
+        <Toggle
+          title="Custom Selection Dot:"
+          isEnabled={enableCustomSelectionDot}
+          setIsEnabled={setEnableCustomSelectionDot}
+        />
+        <Toggle
+          title="Enable Range:"
+          isEnabled={enableRange}
+          setIsEnabled={setEnableRange}
+        />
+        <Toggle
+          title="Enable Indicator:"
+          isEnabled={enableIndicator}
+          setIsEnabled={setEnableIndicator}
+        />
+        <Toggle
+          title="Indicator pulsating:"
+          isEnabled={indicatorPulsating}
+          setIsEnabled={setIndicatorPulsating}
+        />
       </View>
 
       <View style={styles.spacer} />
diff --git a/package.json b/package.json
index 64c5bcc..3a5efa5 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
   "devDependencies": {
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
+    "@shopify/react-native-skia": "^0.1.136",
     "@types/react": "^17.0.42",
     "@types/react-native": "^0.67.4",
     "eslint": "^7.2.0",
@@ -67,18 +68,17 @@
     "react": "^17.0.2",
     "react-native": "^0.67.4",
     "react-native-builder-bob": "^0.18.0",
-    "release-it": "^14.2.2",
-    "typescript": "^4.4.3",
     "react-native-gesture-handler": "^2.5.0",
     "react-native-reanimated": "^2.9.1",
-    "@shopify/react-native-skia": "^0.1.136"
+    "release-it": "^14.2.2",
+    "typescript": "^4.4.3"
   },
   "peerDependencies": {
+    "@shopify/react-native-skia": "*",
     "react": "*",
     "react-native": "*",
-    "@shopify/react-native-skia": "*",
-    "react-native-reanimated": ">=2",
-    "react-native-gesture-handler": ">=2"
+    "react-native-gesture-handler": ">=2",
+    "react-native-reanimated": ">=2"
   },
   "release-it": {
     "git": {
diff --git a/src/AnimatedLineGraph.tsx b/src/AnimatedLineGraph.tsx
index 9e81dde..9b29446 100644
--- a/src/AnimatedLineGraph.tsx
+++ b/src/AnimatedLineGraph.tsx
@@ -12,18 +12,45 @@ import {
   vec,
   Group,
   PathCommand,
+  useSharedValueEffect,
+  mix,
+  Circle,
+  Shadow,
 } from '@shopify/react-native-skia'
 import type { AnimatedLineGraphProps } from './LineGraphProps'
-import { SelectionDot as DefaultSelectionDot } from './SelectionDot'
-import { createGraphPath } from './CreateGraphPath'
+import {
+  CIRCLE_RADIUS,
+  CIRCLE_RADIUS_MULTIPLIER,
+  SelectionDot as DefaultSelectionDot,
+} from './SelectionDot'
+import {
+  createGraphPath,
+  getGraphPathRange,
+  GraphPathRange,
+  pixelFactorX,
+} from './CreateGraphPath'
 import Reanimated, {
   runOnJS,
   useAnimatedReaction,
+  useSharedValue,
+  cancelAnimation,
+  withRepeat,
+  withSequence,
+  withTiming,
+  withDelay,
 } from 'react-native-reanimated'
 import { getSixDigitHex } from './utils/getSixDigitHex'
 import { GestureDetector } from 'react-native-gesture-handler'
-import { useHoldOrPanGesture } from './hooks/useHoldOrPanGesture'
+import { usePanGesture } from './hooks/usePanGesture'
 import { getYForX } from './GetYForX'
+import { hexToRgba } from './utils/hexToRgba'
+
+const INDICATOR_RADIUS = 7
+const INDICATOR_BORDER_MULTIPLIER = 1.3
+const INDICATOR_PULSE_BLUR_RADIUS_SMALL =
+  INDICATOR_RADIUS * INDICATOR_BORDER_MULTIPLIER
+const INDICATOR_PULSE_BLUR_RADIUS_BIG =
+  INDICATOR_RADIUS * INDICATOR_BORDER_MULTIPLIER + 20
 
 // weird rea type bug
 const ReanimatedView = Reanimated.View as any
@@ -32,12 +59,17 @@ export function AnimatedLineGraph({
   points,
   color,
   lineThickness = 3,
+  range,
   enableFadeInMask,
   enablePanGesture,
   onPointSelected,
   onGestureStart,
   onGestureEnd,
   SelectionDot = DefaultSelectionDot,
+  enableIndicator = false,
+  indicatorPulsating = false,
+  horizontalPadding = CIRCLE_RADIUS * CIRCLE_RADIUS_MULTIPLIER,
+  verticalPadding = lineThickness + CIRCLE_RADIUS * CIRCLE_RADIUS_MULTIPLIER,
   TopAxisLabel,
   BottomAxisLabel,
   ...props
@@ -45,7 +77,31 @@ export function AnimatedLineGraph({
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
   const interpolateProgress = useValue(0)
-  const graphPadding = lineThickness
+
+  const { gesture, isActive, x } = usePanGesture({ holdDuration: 300 })
+  const circleX = useValue(0)
+  const circleY = useValue(0)
+  const pathEnd = useValue(0)
+  const indicatorRadius = useValue(enableIndicator ? INDICATOR_RADIUS : 0)
+  const indicatorBorderRadius = useComputedValue(
+    () => indicatorRadius.current * INDICATOR_BORDER_MULTIPLIER,
+    [indicatorRadius]
+  )
+
+  const indicatorPulseAnimation = useSharedValue(0)
+  const indicatorPulseRadius = useValue(INDICATOR_PULSE_BLUR_RADIUS_SMALL)
+  const indicatorPulseOpacity = useValue(1)
+
+  const positions = useComputedValue(
+    () => [
+      0,
+      Math.min(0.15, pathEnd.current),
+      pathEnd.current,
+      pathEnd.current,
+      1,
+    ],
+    [pathEnd]
+  )
 
   const onLayout = useCallback(
     ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
@@ -69,6 +125,41 @@ export function AnimatedLineGraph({
 
   const paths = useValue<{ from?: SkPath; to?: SkPath }>({})
   const commands = useRef<PathCommand[]>([])
+  const [commandsChanged, setCommandsChanged] = useState(0)
+
+  const pathRange: GraphPathRange = useMemo(
+    () => getGraphPathRange(points, range),
+    [points, range]
+  )
+
+  const drawingWidth = useMemo(() => {
+    const lastPoint = points[points.length - 1]!
+
+    return Math.max(
+      Math.floor(
+        (width - 2 * horizontalPadding) *
+          pixelFactorX(lastPoint.date, pathRange.x.min, pathRange.x.max)
+      ),
+      0
+    )
+  }, [horizontalPadding, pathRange.x.max, pathRange.x.min, points, width])
+
+  const indicatorX = useMemo(
+    () =>
+      commandsChanged >= 0
+        ? Math.floor(drawingWidth) + horizontalPadding
+        : undefined,
+    [commandsChanged, drawingWidth, horizontalPadding]
+  )
+  const indicatorY = useMemo(
+    () =>
+      commandsChanged >= 0 && indicatorX != null
+        ? getYForX(commands.current, indicatorX)
+        : undefined,
+    [commandsChanged, indicatorX]
+  )
+
+  const indicatorPulseColor = useMemo(() => hexToRgba(color, 0.4), [color])
 
   useEffect(() => {
     if (height < 1 || width < 1) {
@@ -82,11 +173,15 @@ export function AnimatedLineGraph({
 
     const path = createGraphPath({
       points: points,
-      graphPadding: graphPadding,
+      range: pathRange,
+      horizontalPadding: horizontalPadding,
+      verticalPadding: verticalPadding,
       canvasHeight: height,
       canvasWidth: width,
     })
 
+    commands.current = path.toCmds()
+
     const previous = paths.current
     let from: SkPath = previous.to ?? straightLine
     if (previous.from != null && interpolateProgress.current < 1)
@@ -104,7 +199,8 @@ export function AnimatedLineGraph({
         to: path,
       }
     }
-    commands.current = path.toCmds()
+
+    setCommandsChanged(commandsChanged + 1)
 
     runSpring(
       interpolateProgress,
@@ -116,13 +212,17 @@ export function AnimatedLineGraph({
         velocity: 0,
       }
     )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    graphPadding,
     height,
+    horizontalPadding,
     interpolateProgress,
+    pathRange,
     paths,
     points,
+    range,
     straightLine,
+    verticalPadding,
     width,
   ])
 
@@ -154,40 +254,94 @@ export function AnimatedLineGraph({
       return to.interpolate(from, interpolateProgress.current)
     },
     // RN Skia deals with deps differently. They are actually the required SkiaValues that the derived value listens to, not react values.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [interpolateProgress]
   )
 
-  const { gesture, isActive, x } = useHoldOrPanGesture({ holdDuration: 300 })
-  const circleX = useValue(0)
-  const circleY = useValue(0)
-  const pathEnd = useValue(0)
+  const stopPulsating = useCallback(() => {
+    cancelAnimation(indicatorPulseAnimation)
+    indicatorPulseAnimation.value = 0
+  }, [indicatorPulseAnimation])
+
+  const startPulsating = useCallback(() => {
+    indicatorPulseAnimation.value = withRepeat(
+      withDelay(
+        1000,
+        withSequence(
+          withTiming(1, { duration: 1100 }),
+          withTiming(0, { duration: 0 }), // revert to 0
+          withTiming(0, { duration: 1200 }), // delay between pulses
+          withTiming(1, { duration: 1100 }),
+          withTiming(1, { duration: 2000 }) // delay after both pulses
+        )
+      ),
+      -1
+    )
+  }, [indicatorPulseAnimation])
 
   const setFingerX = useCallback(
     (fingerX: number) => {
-      const y = getYForX(commands.current, fingerX)
+      const lowerBound = horizontalPadding
+      const upperBound = drawingWidth + horizontalPadding
+
+      const fingerXInRange = Math.min(Math.max(fingerX, lowerBound), upperBound)
+      const y = getYForX(commands.current, fingerXInRange)
 
       if (y != null) {
         circleY.current = y
-        circleX.current = fingerX
+        circleX.current = fingerXInRange
       }
-      pathEnd.current = fingerX / width
 
-      const index = Math.round((fingerX / width) * points.length)
+      if (fingerX > lowerBound && fingerX < upperBound && isActive.value)
+        pathEnd.current = fingerX / width
+
+      const actualFingerX = fingerX - horizontalPadding
+
+      const index = Math.round((actualFingerX / upperBound) * points.length)
       const pointIndex = Math.min(Math.max(index, 0), points.length - 1)
-      const dataPoint = points[Math.round(pointIndex)]
+      const dataPoint = points[pointIndex]
       if (dataPoint != null) onPointSelected?.(dataPoint)
     },
-    [circleX, circleY, onPointSelected, pathEnd, points, width]
+    [
+      circleX,
+      circleY,
+      drawingWidth,
+      horizontalPadding,
+      isActive.value,
+      onPointSelected,
+      pathEnd,
+      points,
+      width,
+    ]
   )
+
   const setIsActive = useCallback(
     (active: boolean) => {
-      if (!active) pathEnd.current = 1
-      if (active) onGestureStart?.()
-      else onGestureEnd?.()
+      runSpring(indicatorRadius, !active ? INDICATOR_RADIUS : 0, {
+        mass: 1,
+        stiffness: 1000,
+        damping: 50,
+        velocity: 0,
+      })
+
+      if (active) {
+        onGestureStart?.()
+        stopPulsating()
+      } else {
+        onGestureEnd?.()
+        pathEnd.current = 1
+        startPulsating()
+      }
     },
-    [onGestureEnd, onGestureStart, pathEnd]
+    [
+      indicatorRadius,
+      onGestureEnd,
+      onGestureStart,
+      pathEnd,
+      startPulsating,
+      stopPulsating,
+    ]
   )
+
   useAnimatedReaction(
     () => x.value,
     (fingerX) => {
@@ -197,6 +351,7 @@ export function AnimatedLineGraph({
     },
     [isActive, setFingerX, width, x]
   )
+
   useAnimatedReaction(
     () => isActive.value,
     (active) => {
@@ -204,21 +359,36 @@ export function AnimatedLineGraph({
     },
     [isActive, setIsActive]
   )
-  const positions = useComputedValue(
-    () => [
-      0,
-      Math.min(0.15, pathEnd.current),
-      pathEnd.current,
-      pathEnd.current,
-      1,
-    ],
-    [pathEnd]
-  )
+
+  useEffect(() => {
+    if (points.length !== 0 && commands.current.length !== 0)
+      pathEnd.current = 1
+  }, [commands, pathEnd, points.length])
+
+  useEffect(() => {
+    if (indicatorPulsating) {
+      startPulsating()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [indicatorPulsating])
+
+  useSharedValueEffect(() => {
+    if (!isActive.value) {
+      indicatorPulseRadius.current = mix(
+        indicatorPulseAnimation.value,
+        INDICATOR_PULSE_BLUR_RADIUS_SMALL,
+        INDICATOR_PULSE_BLUR_RADIUS_BIG
+      )
+      indicatorPulseOpacity.current = mix(indicatorPulseAnimation.value, 1, 0)
+    } else {
+      indicatorPulseRadius.current = 0
+    }
+  }, indicatorPulseAnimation)
 
   return (
     <View {...props}>
       <GestureDetector gesture={enablePanGesture ? gesture : undefined}>
-        <ReanimatedView style={styles.container}>
+        <ReanimatedView style={[styles.container, styles.axisLabelContainer]}>
           {/* Top Label (max price) */}
           {TopAxisLabel != null && (
             <View style={styles.axisRow}>
@@ -256,6 +426,36 @@ export function AnimatedLineGraph({
                   circleY={circleY}
                 />
               )}
+
+              {enableIndicator && (
+                <Group>
+                  {indicatorPulsating && (
+                    <Circle
+                      cx={indicatorX}
+                      cy={indicatorY}
+                      r={indicatorPulseRadius}
+                      opacity={indicatorPulseOpacity}
+                      color={indicatorPulseColor}
+                      style="fill"
+                    />
+                  )}
+
+                  <Circle
+                    cx={indicatorX}
+                    cy={indicatorY}
+                    r={indicatorBorderRadius}
+                    color={'#ffffff'}
+                  >
+                    <Shadow dx={2} dy={2} color="rgba(0,0,0,0.2)" blur={4} />
+                  </Circle>
+                  <Circle
+                    cx={indicatorX}
+                    cy={indicatorY}
+                    r={indicatorRadius}
+                    color={color}
+                  />
+                </Group>
+              )}
             </Canvas>
           </View>
 
@@ -278,6 +478,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  axisLabelContainer: {
+    paddingVertical: 20,
+  },
   axisRow: {
     height: 17,
   },
diff --git a/src/CreateGraphPath.ts b/src/CreateGraphPath.ts
index 48dbdfc..3aa306c 100644
--- a/src/CreateGraphPath.ts
+++ b/src/CreateGraphPath.ts
@@ -1,5 +1,26 @@
-import { SkPath, SkPoint, Skia } from '@shopify/react-native-skia'
-import type { GraphPoint } from './LineGraphProps'
+import {
+  SkPath,
+  Skia,
+  Vector,
+  cartesian2Polar,
+} from '@shopify/react-native-skia'
+import type { GraphPoint, GraphRange } from './LineGraphProps'
+import { createSplineFunction } from './Maths'
+
+export interface GraphXRange {
+  min: Date
+  max: Date
+}
+
+export interface GraphYRange {
+  min: number
+  max: number
+}
+
+export interface GraphPathRange {
+  x: GraphXRange
+  y: GraphYRange
+}
 
 interface GraphPathConfig {
   /**
@@ -7,9 +28,13 @@ interface GraphPathConfig {
    */
   points: GraphPoint[]
   /**
-   * Optional Padding (top, left, bottom, right) for the Graph to correctly round the Path.
+   * Optional Padding (left, right) for the Graph to correctly round the Path.
+   */
+  horizontalPadding: number
+  /**
+   * Optional Padding (top, bottom) for the Graph to correctly round the Path.
    */
-  graphPadding: number
+  verticalPadding: number
   /**
    * Height of the Canvas (Measured with onLayout)
    */
@@ -18,69 +43,181 @@ interface GraphPathConfig {
    * Width of the Canvas (Measured with onLayout)
    */
   canvasWidth: number
+  /**
+   * Smoothing of the graph path (usually between 0.2 and 0.5)
+   */
+  smoothing?: number
+  /**
+   * Range of the graph's x and y-axis
+   */
+  range: GraphPathRange
+}
+
+export const controlPoint = (
+  reverse: boolean,
+  smoothing: number,
+  current: Vector,
+  previous: Vector,
+  next: Vector
+): Vector => {
+  const p = previous
+  const n = next
+  // Properties of the opposed-line
+  const lengthX = n.x - p.x
+  const lengthY = n.y - p.y
+
+  const o = cartesian2Polar({ x: lengthX, y: lengthY })
+  // If is end-control-point, add PI to the angle to go backward
+  const angle = o.theta + (reverse ? Math.PI : 0)
+  const length = o.radius * smoothing
+  // The control point position is relative to the current point
+  const x = current.x + Math.cos(angle) * length
+  const y = current.y + Math.sin(angle) * length
+  return { x, y }
+}
+
+export function getGraphPathRange(
+  points: GraphPoint[],
+  range?: GraphRange
+): GraphPathRange {
+  const minValueX = range?.x?.min ?? points[0]!.date
+  const maxValueX = range?.x?.max ?? points[points.length - 1]!.date
+
+  const minValueY =
+    range?.y?.min ??
+    points.reduce(
+      (prev, curr) => (curr.value < prev ? curr.value : prev),
+      Number.MAX_SAFE_INTEGER
+    )
+  const maxValueY =
+    range?.y?.max ??
+    points.reduce(
+      (prev, curr) => (curr.value > prev ? curr.value : prev),
+      Number.MIN_SAFE_INTEGER
+    )
+
+  return {
+    x: { min: minValueX, max: maxValueX },
+    y: { min: minValueY, max: maxValueY },
+  }
+}
+
+export const pixelFactorX = (
+  date: Date,
+  minValue: Date,
+  maxValue: Date
+): number => {
+  const diff = maxValue.getTime() - minValue.getTime()
+  const x = date.getTime()
+
+  if (x < minValue.getTime() || x > maxValue.getTime()) return 0
+  return (x - minValue.getTime()) / diff
+}
+
+export const pixelFactorY = (
+  value: number,
+  minValue: number,
+  maxValue: number
+): number => {
+  const diff = maxValue - minValue
+  const y = value
+
+  if (y < minValue || y > maxValue) return 0
+  return (y - minValue) / diff
 }
 
 // A Graph Point will be drawn every second "pixel"
 const PIXEL_RATIO = 2
 
 export function createGraphPath({
-  points: graphData,
-  graphPadding,
+  points,
+  smoothing = 0.2,
+  range,
+  horizontalPadding,
+  verticalPadding,
   canvasHeight: height,
   canvasWidth: width,
 }: GraphPathConfig): SkPath {
-  const innerHeight = height - 2 * graphPadding
-
-  const maxValue = graphData.reduce(
-    (prev, curr) => (curr.value > prev ? curr.value : prev),
-    Number.MIN_SAFE_INTEGER
-  )
-  const minValue = graphData.reduce(
-    (prev, curr) => (curr.value < prev ? curr.value : prev),
-    Number.MAX_SAFE_INTEGER
-  )
-
-  const areValuesSame = minValue === maxValue
-
-  const points: SkPoint[] = []
+  const path = Skia.Path.Make()
 
-  for (let pixel = 0; pixel < width; pixel += PIXEL_RATIO) {
-    const index = Math.floor((pixel / width) * graphData.length)
-    const value = graphData[index]?.value ?? minValue
+  const actualWidth = width - 2 * horizontalPadding
+  const actualHeight = height - 2 * verticalPadding
 
-    const x = (pixel / width) * (width - 2 * graphPadding) + graphPadding
-    const y = areValuesSame
-      ? height / 2
-      : height -
-        ((value - minValue) / (maxValue - minValue)) * innerHeight -
-        graphPadding
+  const getGraphPoint = (point: GraphPoint): Vector => {
+    const x =
+      actualWidth * pixelFactorX(point.date, range.x.min, range.x.max) +
+      horizontalPadding
+    const y =
+      actualHeight -
+      actualHeight * pixelFactorY(point.value, range.y.min, range.y.max) +
+      verticalPadding
 
-    points.push({ x: x, y: y })
+    return { x: x, y: y }
   }
 
-  const path = Skia.Path.Make()
+  if (points[0] == null) return path
 
-  for (let i = 0; i < points.length; i++) {
-    const point = points[i]!
+  const firstPoint = getGraphPoint(points[0])
+  path.moveTo(firstPoint.x, firstPoint.y)
 
-    // first point needs to start the path
-    if (i === 0) path.moveTo(point.x, point.y)
+  points.forEach((point, i) => {
+    if (i === 0) {
+      return
+    }
 
-    const prev = points[i - 1]
-    const prevPrev = points[i - 2]
+    if (point.date < range.x.min || point.date > range.x.max) return
 
-    if (prev == null) continue
+    const prev = points[i - 1]
 
-    const p0 = prevPrev ?? prev
-    const p1 = prev
-    const cp1x = (2 * p0.x + p1.x) / 3
-    const cp1y = (2 * p0.y + p1.y) / 3
-    const cp2x = (p0.x + 2 * p1.x) / 3
-    const cp2y = (p0.y + 2 * p1.y) / 3
-    const cp3x = (p0.x + 4 * p1.x + point.x) / 6
-    const cp3y = (p0.y + 4 * p1.y + point.y) / 6
+    if (prev == null) return
+    const prevPrev = points[i - 2] ?? prev
+    const next = points[i + 1] ?? point
+
+    const currentPoint = getGraphPoint(point)
+    const prevPoint = getGraphPoint(prev)
+    const prevPrevPoint = getGraphPoint(prevPrev)
+    const nextPoint = getGraphPoint(next)
+
+    const cps = controlPoint(
+      false,
+      smoothing,
+      prevPoint,
+      prevPrevPoint,
+      currentPoint
+    )
+    const cpe = controlPoint(
+      true,
+      smoothing,
+      currentPoint,
+      prevPoint,
+      nextPoint
+    )
+
+    const splineFunction = createSplineFunction(
+      prevPoint,
+      cps,
+      cpe,
+      currentPoint
+    )
+
+    const reps = Math.floor(
+      (actualWidth *
+        pixelFactorX(
+          new Date(point.date.getTime() - prev.date.getTime()),
+          range.x.min,
+          range.x.max
+        ) +
+        horizontalPadding) /
+        PIXEL_RATIO
+    )
+
+    for (let i2 = 0; i2 <= reps; i2++) {
+      const p = splineFunction(i2 / reps)
+
+      if (p == null) return
+      path.cubicTo(p.x, p.y, p.x, p.y, p.x, p.y)
+    }
+  })
 
-    path.cubicTo(cp1x, cp1y, cp2x, cp2y, cp3x, cp3y)
-  }
   return path
 }
diff --git a/src/LineGraphProps.ts b/src/LineGraphProps.ts
index d0f0112..6801b6d 100644
--- a/src/LineGraphProps.ts
+++ b/src/LineGraphProps.ts
@@ -1,5 +1,6 @@
 import type React from 'react'
 import type { ViewProps } from 'react-native'
+import type { GraphPathRange } from './CreateGraphPath'
 import type { SharedValue } from 'react-native-reanimated'
 import type { SkiaMutableValue } from '@shopify/react-native-skia'
 
@@ -8,6 +9,8 @@ export interface GraphPoint {
   date: Date
 }
 
+export type GraphRange = Partial<GraphPathRange>
+
 export interface SelectionDotProps {
   isActive: SharedValue<boolean>
   color: BaseLineGraphProps['color']
@@ -21,6 +24,11 @@ interface BaseLineGraphProps extends ViewProps {
    * All points to be marked in the graph. Coordinate system will adjust to scale automatically.
    */
   points: GraphPoint[]
+  /**
+   * Range of the graph's x and y-axis. The range must be greater
+   * than the range given by the points.
+   */
+  range?: GraphRange
   /**
    * Color of the graph line (path)
    */
@@ -45,6 +53,26 @@ export type AnimatedLineGraphProps = BaseLineGraphProps & {
    * Whether to enable Graph scrubbing/pan gesture.
    */
   enablePanGesture?: boolean
+  /**
+   * The color of the selection dot when the user is panning the graph.
+   */
+  selectionDotShadowColor?: string
+  /**
+   * Horizontal padding applied to graph, so the pan gesture dot doesn't get cut off horizontally
+   */
+  horizontalPadding?: number
+  /**
+   * Vertical padding applied to graph, so the pan gesture dot doesn't get cut off vertically
+   */
+  verticalPadding?: number
+  /**
+   * Enables an indicator which is displayed at the end of the graph
+   */
+  enableIndicator?: boolean
+  /**
+   * Let's the indicator pulsate
+   */
+  indicatorPulsating?: boolean
 
   /**
    * Called for each point while the user is scrubbing/panning through the graph
diff --git a/src/Maths.ts b/src/Maths.ts
new file mode 100644
index 0000000..b28d795
--- /dev/null
+++ b/src/Maths.ts
@@ -0,0 +1,23 @@
+import { add, Vector } from '@shopify/react-native-skia'
+
+const mul = (v: Vector, f: number): Vector => ({ x: v.x * f, y: v.y * f })
+
+export type SplineFunction = (t: number) => Vector | undefined
+
+export const createSplineFunction = (
+  p0: Vector,
+  p1: Vector,
+  p2: Vector,
+  p3: Vector
+): SplineFunction => {
+  return (t: number) => {
+    if (t > 1 || t < 0) return
+
+    const p0Formula = mul(p0, Math.pow(1 - t, 3))
+    const p1Formula = mul(p1, 3 * Math.pow(1 - t, 2) * t)
+    const p2Formula = mul(p2, 3 * (1 - t) * Math.pow(t, 2))
+    const p3Formula = mul(p3, Math.pow(t, 3))
+
+    return add(add(p0Formula, p1Formula), add(p2Formula, p3Formula))
+  }
+}
diff --git a/src/SelectionDot.tsx b/src/SelectionDot.tsx
index 7c582ac..e72098b 100644
--- a/src/SelectionDot.tsx
+++ b/src/SelectionDot.tsx
@@ -10,6 +10,9 @@ import {
 } from '@shopify/react-native-skia'
 import type { SelectionDotProps } from './LineGraphProps'
 
+export const CIRCLE_RADIUS = 5
+export const CIRCLE_RADIUS_MULTIPLIER = 6
+
 export function SelectionDot({
   isActive,
   color,
@@ -18,13 +21,13 @@ export function SelectionDot({
 }: SelectionDotProps): React.ReactElement {
   const circleRadius = useValue(0)
   const circleStrokeRadius = useComputedValue(
-    () => circleRadius.current * 6,
+    () => circleRadius.current * CIRCLE_RADIUS_MULTIPLIER,
     [circleRadius]
   )
 
   const setIsActive = useCallback(
     (active: boolean) => {
-      runSpring(circleRadius, active ? 5 : 0, {
+      runSpring(circleRadius, active ? CIRCLE_RADIUS : 0, {
         mass: 1,
         stiffness: 1000,
         damping: 50,
diff --git a/src/StaticLineGraph.tsx b/src/StaticLineGraph.tsx
index 1043637..b7149bf 100644
--- a/src/StaticLineGraph.tsx
+++ b/src/StaticLineGraph.tsx
@@ -2,11 +2,16 @@ import { Canvas, LinearGradient, Path, vec } from '@shopify/react-native-skia'
 import { getSixDigitHex } from './utils/getSixDigitHex'
 import React, { useCallback, useMemo, useState } from 'react'
 import { View, StyleSheet, LayoutChangeEvent } from 'react-native'
-import { createGraphPath } from './CreateGraphPath'
+import {
+  createGraphPath,
+  getGraphPathRange,
+  GraphPathRange,
+} from './CreateGraphPath'
 import type { StaticLineGraphProps } from './LineGraphProps'
 
 export function StaticLineGraph({
   points,
+  range,
   color,
   lineThickness = 3,
   enableFadeInMask,
@@ -15,7 +20,6 @@ export function StaticLineGraph({
 }: StaticLineGraphProps): React.ReactElement {
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
-  const graphPadding = lineThickness
 
   const onLayout = useCallback(
     ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
@@ -25,15 +29,22 @@ export function StaticLineGraph({
     []
   )
 
+  const pathRange: GraphPathRange = useMemo(
+    () => getGraphPathRange(points, range),
+    [points, range]
+  )
+
   const path = useMemo(
     () =>
       createGraphPath({
         points: points,
+        range: pathRange,
         canvasHeight: height,
         canvasWidth: width,
-        graphPadding: graphPadding,
+        horizontalPadding: lineThickness,
+        verticalPadding: lineThickness,
       }),
-    [graphPadding, height, points, width]
+    [height, lineThickness, pathRange, points, width]
   )
 
   const gradientColors = useMemo(
diff --git a/src/hooks/useHoldOrPanGesture.ts b/src/hooks/useHoldOrPanGesture.ts
deleted file mode 100644
index 2ae9124..0000000
--- a/src/hooks/useHoldOrPanGesture.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useMemo } from 'react'
-import { Gesture, SimultaneousGesture } from 'react-native-gesture-handler'
-import Reanimated, {
-  useDerivedValue,
-  useSharedValue,
-} from 'react-native-reanimated'
-
-interface Config {
-  holdDuration: number
-}
-
-interface Result {
-  x: Reanimated.SharedValue<number>
-  y: Reanimated.SharedValue<number>
-  isActive: Reanimated.SharedValue<boolean>
-  gesture: SimultaneousGesture
-}
-
-export function useHoldOrPanGesture({ holdDuration = 300 }: Config): Result {
-  const x = useSharedValue(0)
-  const y = useSharedValue(0)
-  const isHoldGestureActive = useSharedValue(false)
-  const isPanGestureActive = useSharedValue(false)
-
-  const holdGesture = useMemo(
-    () =>
-      Gesture.LongPress()
-        .minDuration(holdDuration)
-        .onStart((event) => {
-          x.value = event.x
-          y.value = event.y
-          isHoldGestureActive.value = true
-        })
-        .onFinalize(() => {
-          isHoldGestureActive.value = false
-        }),
-    [holdDuration, isHoldGestureActive, x, y]
-  )
-
-  const panGesture = useMemo(
-    () =>
-      Gesture.Pan()
-        .manualActivation(true)
-        .onChange((e) => {
-          x.value = e.x
-          y.value = e.y
-        })
-        .onTouchesMove((_, state) => {
-          if (isHoldGestureActive.value) {
-            // Hold gesture is active so we can also activate Pan
-            state.activate()
-          }
-        })
-        .onStart(() => {
-          isPanGestureActive.value = true
-        })
-        .onEnd(() => {
-          isPanGestureActive.value = false
-        }),
-    [isHoldGestureActive, isPanGestureActive, x, y]
-  )
-
-  const isActive = useDerivedValue(
-    () => isHoldGestureActive.value || isPanGestureActive.value,
-    [isHoldGestureActive, isPanGestureActive]
-  )
-
-  return useMemo(
-    () => ({
-      gesture: Gesture.Simultaneous(holdGesture, panGesture),
-      isActive: isActive,
-      x: x,
-      y: y,
-    }),
-    [holdGesture, isActive, panGesture, x, y]
-  )
-}
diff --git a/src/hooks/usePanGesture.ts b/src/hooks/usePanGesture.ts
new file mode 100644
index 0000000..62fd330
--- /dev/null
+++ b/src/hooks/usePanGesture.ts
@@ -0,0 +1,47 @@
+import { useMemo } from 'react'
+import { Gesture, PanGesture } from 'react-native-gesture-handler'
+import Reanimated, { useSharedValue } from 'react-native-reanimated'
+
+interface Config {
+  holdDuration: number
+}
+
+interface Result {
+  x: Reanimated.SharedValue<number>
+  y: Reanimated.SharedValue<number>
+  isActive: Reanimated.SharedValue<boolean>
+  gesture: PanGesture
+}
+
+export function usePanGesture({ holdDuration = 300 }: Config): Result {
+  const x = useSharedValue(0)
+  const y = useSharedValue(0)
+  const isPanGestureActive = useSharedValue(false)
+
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .activateAfterLongPress(holdDuration)
+        .onChange((e) => {
+          x.value = e.x
+          y.value = e.y
+        })
+        .onStart(() => {
+          isPanGestureActive.value = true
+        })
+        .onEnd(() => {
+          isPanGestureActive.value = false
+        }),
+    [holdDuration, isPanGestureActive, x, y]
+  )
+
+  return useMemo(
+    () => ({
+      gesture: panGesture,
+      isActive: isPanGestureActive,
+      x: x,
+      y: y,
+    }),
+    [isPanGestureActive, panGesture, x, y]
+  )
+}
diff --git a/src/utils/hexToRgba.ts b/src/utils/hexToRgba.ts
new file mode 100644
index 0000000..10aca5c
--- /dev/null
+++ b/src/utils/hexToRgba.ts
@@ -0,0 +1,11 @@
+export function hexToRgba(hex: string, alpha: number) {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+
+  if (alpha > 0) {
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+
+  return `rgb(${r}, ${g}, ${b})`
+}
diff --git a/yarn.lock b/yarn.lock
index 734c1f1..fedd086 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -188,10 +188,10 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
-"@babel/helper-plugin-utils@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
-  integrity sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==
+"@babel/helper-plugin-utils@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
+  integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
 
 "@babel/helper-remap-async-to-generator@^7.16.8":
   version "7.16.8"
@@ -344,11 +344,11 @@
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
 "@babel/plugin-proposal-export-namespace-from@^7.17.12":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.6.tgz#1016f0aa5ab383bbf8b3a85a2dcaedf6c8ee7491"
-  integrity sha512-zr/QcUlUo7GPo6+X1wC98NJADqmy5QTFWWhqeQWiki4XHafJtLl/YMGkmRB2szDD2IYJCCdBTd4ElwhId9T7Xw==
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
 "@babel/plugin-proposal-json-strings@^7.16.7":
@@ -1503,9 +1503,9 @@
     prepend-file "^2.0.0"
 
 "@shopify/react-native-skia@^0.1.136":
-  version "0.1.136"
-  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.136.tgz#cb399cd1216dfc14ad3cca226e6d0450b1e7ab7c"
-  integrity sha512-gNsBw9/ISNL7tAHdfhjeW3Y9/FPN93mPx4XSJS7xwbEgYaJdBP+1T1MyCCZZZTTcqJ6bCVp9FFUR6yo0u93Pgg==
+  version "0.1.137"
+  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.137.tgz#c3f655cfc5ff1f58afd3b1efd26f7ec9bd28e262"
+  integrity sha512-eQn+kVxTaJTa8ptHLyXTrSQyPDGGX0wAWNOJS0GOg9zHM9+zkIkliriF0izXtGk8DgYGbUoVgz+JBQ41xHBihg==
   dependencies:
     canvaskit-wasm "^0.35.0"
     react-reconciler "^0.26.2"
@@ -1618,9 +1618,9 @@
     "@types/react" "*"
 
 "@types/react@*":
-  version "18.0.8"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.8.tgz#a051eb380a9fbcaa404550543c58e1cf5ce4ab87"
-  integrity sha512-+j2hk9BzCOrrOSJASi5XiOyBbERk9jG5O73Ya4M0env5Ixi6vUNli4qy994AINcEF+1IEHISYFfIT4zwr++LKw==
+  version "17.0.45"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.45.tgz#9b3d5b661fd26365fefef0e766a1c6c30ccf7b3f"
+  integrity sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"