feat: Indicator and Range (margelo#21)

* feat: implement indicator and range

* memoize range and add null check in example

* split up variables and add comment

* simplify range in example

* further simplify

* Update example/src/screens/GraphPage.tsx

Co-authored-by: Marc Rousavy <marcrousavy@hotmail.com>

* fix: indentation

Co-authored-by: Marc Rousavy <marcrousavy@hotmail.com>

example/src/screens/GraphPage.tsx

@@ -1,7 +1,8 @@
-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'
+import type { GraphRange } from '../../../src/LineGraphProps'
 import { SelectionDot } from '../components/CustomSelectionDot'
 import { Toggle } from '../components/Toggle'
 import {
@@ -19,15 +20,52 @@ 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)
+  const smallPoints = useMemo(() => generateSinusGraphData(9), [])
 
   const refreshData = useCallback(() => {
     setPoints(generateRandomGraphData(POINTS))
     hapticFeedback('impactLight')
   }, [])
 
+  const highestDate = useMemo(
+    () =>
+      points.length !== 0 && points[points.length - 1] != null
+        ? points[points.length - 1]!.date
+        : undefined,
+    [points]
+  )
+  const range: GraphRange | undefined = useMemo(() => {
+    // if range is disabled, default to infinite range (undefined)
+    if (!enableRange) return undefined
+
+    if (points.length !== 0 && highestDate != null) {
+      return {
+        x: {
+          min: points[0]!.date,
+          max: new Date(highestDate.getTime() + 30),
+        },
+        y: {
+          min: -200,
+          max: 200,
+        },
+      }
+    } else {
+      return {
+        y: {
+          min: -200,
+          max: 200,
+        },
+      }
+    }
+  }, [enableRange, highestDate, points])
+
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
       <View style={styles.row}>
@@ -52,7 +90,10 @@ export function GraphPage() {
         enablePanGesture={enablePanGesture}
         enableFadeInMask={enableFadeInEffect}
         onGestureStart={() => hapticFeedback('impactLight')}
-        SelectionDot={SelectionDot}
+        SelectionDot={enableCustomSelectionDot ? SelectionDot : undefined}
+        range={range}
+        enableIndicator={enableIndicator}
+        indicatorPulsating={indicatorPulsating}
       />
 
       <Button title="Refresh" onPress={refreshData} />
@@ -73,6 +114,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} />

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": {