add disableSmoothing prop

Author: Christoph Pader

Diff for: src/AnimatedLineGraph.tsx

@@ -71,6 +71,7 @@ export function AnimatedLineGraph({
   verticalPadding = lineThickness,
   TopAxisLabel,
   BottomAxisLabel,
+  disableSmoothing = false,
   ...props
 }: AnimatedLineGraphProps): React.ReactElement {
   const [width, setWidth] = useState(0)
@@ -196,6 +197,7 @@ export function AnimatedLineGraph({
       verticalPadding,
       canvasHeight: height,
       canvasWidth: width,
+      disableSmoothing,
     }
 
     if (shouldFillGradient) {

Diff for: src/CreateGraphPath.ts

@@ -43,6 +43,10 @@ type GraphPathConfig = {
    * Range of the graph's x and y-axis
    */
   range: GraphPathRange
+  /**
+   * Disables smoothing of the graph line to increase accuracy of graph according to the dataset
+   */
+  disableSmoothing: boolean
 }
 
 type GraphPathConfigWithGradient = GraphPathConfig & {
@@ -140,6 +144,7 @@ function createGraphPathBase({
   canvasHeight: height,
   canvasWidth: width,
   shouldFillGradient,
+  disableSmoothing,
 }: GraphPathConfigWithGradient | GraphPathConfigWithoutGradient):
   | SkPath
   | GraphPathWithGradient {
@@ -208,27 +213,35 @@ function createGraphPathBase({
   for (let i = 0; i < points.length; i++) {
     const point = points[i]!
 
-    // first point needs to start the path
-    if (i === 0) path.moveTo(point.x, point.y)
-
-    const prev = points[i - 1]
-    const prevPrev = points[i - 2]
-
-    if (prev == null) continue
-
-    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
-
-    path.cubicTo(cp1x, cp1y, cp2x, cp2y, cp3x, cp3y)
-
-    if (i === points.length - 1) {
-      path.cubicTo(point.x, point.y, point.x, point.y, point.x, point.y)
+    // Start the path or add a line directly to the next point
+    if (i === 0) {
+      path.moveTo(point.x, point.y)
+    } else {
+      if (disableSmoothing) {
+        // Direct line to the next point for no smoothing
+        path.lineTo(point.x, point.y)
+      } else {
+        // Continue using smoothing
+        const prev = points[i - 1]
+        const prevPrev = points[i - 2]
+
+        if (prev == null) continue
+
+        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
+
+        path.cubicTo(cp1x, cp1y, cp2x, cp2y, cp3x, cp3y)
+
+        if (i === points.length - 1) {
+          path.cubicTo(point.x, point.y, point.x, point.y, point.x, point.y)
+        }
+      }
     }
   }
 

Diff for: src/LineGraphProps.ts

@@ -47,6 +47,10 @@ interface BaseLineGraphProps extends ViewProps {
    * Enable the Fade-In Gradient Effect at the beginning of the Graph
    */
   enableFadeInMask?: boolean
+  /**
+   * Disables smoothing of the graph line to increase accuracy of graph according to the dataset
+   */
+  disableSmoothing?: boolean
 }
 
 export type StaticLineGraphProps = BaseLineGraphProps & {

Diff for: src/StaticLineGraph.tsx

@@ -16,6 +16,7 @@ export function StaticLineGraph({
   color,
   lineThickness = 3,
   enableFadeInMask,
+  disableSmoothing = false,
   style,
   ...props
 }: StaticLineGraphProps): React.ReactElement {
@@ -49,8 +50,9 @@ export function StaticLineGraph({
         canvasWidth: width,
         horizontalPadding: lineThickness,
         verticalPadding: lineThickness,
+        disableSmoothing,
       }),
-    [height, lineThickness, pathRange, pointsInRange, width]
+    [disableSmoothing, height, lineThickness, pathRange, pointsInRange, width]
   )
 
   const gradientColors = useMemo(