Feat: Improve createGraphPath function and simplify range logic (#62)

* feat: improve createGraphPath function and simplify range logic * remove unused code
margelo · Feb 20, 2023 · 7f3cd89 · 7f3cd89
1 parent 479ce84
commit 7f3cd89
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 192 deletions.
diff --git a/src/AnimatedLineGraph.tsx b/src/AnimatedLineGraph.tsx
@@ -24,7 +24,8 @@ import {
   createGraphPathWithGradient,
   getGraphPathRange,
   GraphPathRange,
-  pixelFactorX,
+  getXInRange,
+  getPointsInRange,
 } from './CreateGraphPath'
 import Reanimated, {
   runOnJS,
@@ -51,9 +52,8 @@ const INDICATOR_PULSE_BLUR_RADIUS_BIG =
   INDICATOR_RADIUS * INDICATOR_BORDER_MULTIPLIER + 20
 
 export function AnimatedLineGraph({
-  points,
+  points: allPoints,
   color,
-  smoothing = 0.2,
   gradientFillColors,
   lineThickness = 3,
   range,
@@ -67,7 +67,7 @@ export function AnimatedLineGraph({
   enableIndicator = false,
   indicatorPulsating = false,
   horizontalPadding = enableIndicator
-    ? INDICATOR_RADIUS * INDICATOR_BORDER_MULTIPLIER
+    ? Math.ceil(INDICATOR_RADIUS * INDICATOR_BORDER_MULTIPLIER)
     : 0,
   verticalPadding = lineThickness,
   TopAxisLabel,
@@ -136,27 +136,27 @@ export function AnimatedLineGraph({
   const pointSelectedIndex = useRef<number>()
 
   const pathRange: GraphPathRange = useMemo(
-    () => getGraphPathRange(points, range),
-    [points, range]
+    () => getGraphPathRange(allPoints, range),
+    [allPoints, range]
   )
 
-  const drawingWidth = useMemo(() => {
-    return Math.max(Math.floor(width - 2 * horizontalPadding), 0)
-  }, [horizontalPadding, width])
+  const pointsInRange = useMemo(
+    () => getPointsInRange(allPoints, pathRange),
+    [allPoints, pathRange]
+  )
+
+  const drawingWidth = useMemo(
+    () => width - 2 * horizontalPadding,
+    [horizontalPadding, width]
+  )
 
   const lineWidth = useMemo(() => {
-    const lastPoint = points[points.length - 1]
+    const lastPoint = pointsInRange[pointsInRange.length - 1]
 
-    if (lastPoint == null) return width - 2 * horizontalPadding
+    if (lastPoint == null) return drawingWidth
 
-    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])
+    return Math.max(getXInRange(drawingWidth, lastPoint.date, pathRange.x), 0)
+  }, [drawingWidth, pathRange.x, pointsInRange])
 
   const indicatorX = useMemo(
     () =>
@@ -181,7 +181,7 @@ export function AnimatedLineGraph({
       // view is not yet measured!
       return
     }
-    if (points.length < 1) {
+    if (pointsInRange.length < 1) {
       // points are still empty!
       return
     }
@@ -190,9 +190,8 @@ export function AnimatedLineGraph({
     let gradientPath
 
     const createGraphPathProps = {
-      points: points,
+      pointsInRange: pointsInRange,
       range: pathRange,
-      smoothing: smoothing,
       horizontalPadding: horizontalPadding,
       verticalPadding: verticalPadding,
       canvasHeight: height,
@@ -270,7 +269,7 @@ export function AnimatedLineGraph({
     paths,
     shouldFillGradient,
     gradientPaths,
-    points,
+    pointsInRange,
     range,
     straightLine,
     verticalPadding,
@@ -342,28 +341,30 @@ export function AnimatedLineGraph({
 
   const setFingerX = useCallback(
     (fingerX: number) => {
-      const lowerBound = horizontalPadding
-      const upperBound = drawingWidth + horizontalPadding
-
-      const fingerXInRange = Math.min(Math.max(fingerX, lowerBound), upperBound)
-      const y = getYForX(commands.current, fingerXInRange)
+      const y = getYForX(commands.current, fingerX)
 
       if (y != null) {
+        circleX.current = fingerX
         circleY.current = y
-        circleX.current = fingerXInRange
       }
 
-      if (isActive.value) pathEnd.current = fingerXInRange / width
+      if (isActive.value) pathEnd.current = fingerX / width
 
-      const actualFingerX = fingerX - horizontalPadding
+      const fingerXInRange = Math.max(fingerX - horizontalPadding, 0)
 
       const index = Math.round(
-        (actualFingerX / drawingWidth) * (points.length - 1)
+        (fingerXInRange /
+          getXInRange(
+            drawingWidth,
+            pointsInRange[pointsInRange.length - 1]!.date,
+            pathRange.x
+          )) *
+          (pointsInRange.length - 1)
       )
-      const pointIndex = Math.min(Math.max(index, 0), points.length - 1)
+      const pointIndex = Math.min(Math.max(index, 0), pointsInRange.length - 1)
 
       if (pointSelectedIndex.current !== pointIndex) {
-        const dataPoint = points[pointIndex]
+        const dataPoint = pointsInRange[pointIndex]
         pointSelectedIndex.current = pointIndex
 
         if (dataPoint != null) {
@@ -379,7 +380,8 @@ export function AnimatedLineGraph({
       isActive.value,
       onPointSelected,
       pathEnd,
-      points,
+      pathRange.x,
+      pointsInRange,
       width,
     ]
   )
@@ -432,9 +434,9 @@ export function AnimatedLineGraph({
   )
 
   useEffect(() => {
-    if (points.length !== 0 && commands.current.length !== 0)
+    if (pointsInRange.length !== 0 && commands.current.length !== 0)
       pathEnd.current = 1
-  }, [commands, pathEnd, points.length])
+  }, [commands, pathEnd, pointsInRange.length])
 
   useEffect(() => {
     if (indicatorPulsating) {