fix: add single point handling

Key Highlights:
- If a single point is passed to the line chart, it will now render a
  straight line instead of nothing.

Author: e-younan

example/app/index.tsx

@@ -19,6 +19,9 @@ export default () => {
       <Pressable onPress={() => navigate("/multi_line_chart")}>
         <Text style={styles.link}>Go to multi line chart</Text>
       </Pressable>
+      <Pressable onPress={() => navigate("/single_point_multi_line_chart")}>
+        <Text style={styles.link}>Go to single point multi line chart</Text>
+      </Pressable>
     </ScrollView>
   );
 };

example/app/single_point_multi_line_chart.tsx

@@ -0,0 +1,94 @@
+import { Line, MultiLineChart } from "@codeherence/react-native-graph";
+import { Circle, Group } from "@shopify/react-native-skia";
+import * as Haptics from "expo-haptics";
+import { ScrollView, StyleSheet } from "react-native";
+import { runOnJS, useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const gestureStartImpact = () => {
+  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+};
+
+export default () => {
+  const { bottom, left, right } = useSafeAreaInsets();
+
+  const cursorShown = useSharedValue(false);
+  const opacity = useDerivedValue(() => {
+    return withTiming(cursorShown.value ? 1 : 0, { duration: 200 });
+  });
+
+  const msftX = useSharedValue(0);
+  const msftY = useSharedValue(0);
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={[
+        styles.contentContainer,
+        {
+          paddingBottom: bottom,
+          paddingLeft: left,
+          paddingRight: right,
+        },
+      ]}
+      showsVerticalScrollIndicator={false}
+    >
+      <MultiLineChart
+        isStatic={false}
+        points={{ msft: [[1000, 0]] }}
+        style={styles.chart}
+        ExtraCanvasElements={
+          <>
+            <Group opacity={opacity}>
+              <Circle cx={msftX} cy={msftY} r={4} color="purple" />
+            </Group>
+          </>
+        }
+        onPanGestureBegin={(payload) => {
+          "worklet";
+          cursorShown.value = true;
+          msftX.value = payload.points.msft.x;
+          msftY.value = payload.points.msft.y;
+          runOnJS(gestureStartImpact)();
+        }}
+        onPanGestureEnd={() => {
+          "worklet";
+          cursorShown.value = false;
+        }}
+        onPanGestureChange={(payload) => {
+          "worklet";
+          msftX.value = payload.points.msft.x;
+          msftY.value = payload.points.msft.y;
+          console.log({ payload: payload.points.msft });
+        }}
+      >
+        {(args) => (
+          <>
+            <Line points={args.points.msft} strokeWidth={1} color="purple" />
+          </>
+        )}
+      </MultiLineChart>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  contentContainer: { flexGrow: 1 },
+  chart: { flex: 1, maxHeight: 200 },
+  price: { fontSize: 32 },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    paddingVertical: 12,
+  },
+  toggleBtn: {
+    padding: 12,
+    backgroundColor: "blue",
+    borderRadius: 12,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+  },
+});

src/utils/math.ts

@@ -29,9 +29,24 @@ export const round = (value: number, precision: number = 15): number => {
 const linearYForX = (path: SkPath, x: number): [number, number, number] => {
   "worklet";
   const cmds = path.toCmds();
+  // If there are only 2 commands, the path is a straight line
+  if (cmds.length <= 2) {
+    const cmd = cmds[0];
+    if (cmd === undefined) return [0, 0, 0];
+    if (cmd[0] !== PathVerb.Move) return [0, 0, 0];
+    const x1 = cmd[1];
+    const y1 = cmd[2];
+    if (x1 === undefined || y1 === undefined) return [0, 0, 0];
+    return [x1, y1, 0];
+  }
+
+  // TODO: Optimize this using binary search. Note that the segments on the line chart may not
+  // be equidistant, so a naive binary search may not work that well.
+
   let from: Vector = vec(0, 0);
   let dataIndex = 0;
 
+  // Find the closest x value on the path and return the x, y, and index values
   for (let i = 0; i < cmds.length; ++i) {
     const cmd = cmds[i];
     if (cmd == null) break;
@@ -101,7 +116,7 @@ export const computePath = ({
   const straightLine = Skia.Path.Make()
     .moveTo(0, height / 2)
     .lineTo(width, height / 2);
-  if (points.length === 0) return straightLine; // No data, return a straight line
+  if (points.length <= 1) return straightLine; // No data, return a straight line
 
   const scaleX = scaleTime().domain([minTimestamp, maxTimestamp]).range([0, width]);
   const scaleY = scaleSqrt()