feat: introduce multiline chart

Key Highlights:
- Major API refactor to support multiline charts

Author: e-younan

example/app/_layout.tsx

@@ -10,6 +10,7 @@ export default () => (
     <Stack>
       <Stack.Screen name="index" />
       <Stack.Screen name="chart" />
+      <Stack.Screen name="multi_line_chart" />
     </Stack>
   </GestureHandlerRootView>
 );

example/app/index.tsx

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

example/app/multi_line_chart.tsx

@@ -0,0 +1,99 @@
+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";
+
+import { priceMap } from "../src/store/prices";
+
+const gestureStartImpact = () => {
+  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+};
+
+export default () => {
+  const cursorShown = useSharedValue(false);
+  const x = useSharedValue(0);
+  const y = useSharedValue(0);
+  const { bottom, left, right } = useSafeAreaInsets();
+
+  const opacity = useDerivedValue(() => {
+    // return cursorShown.value ? 1 : 0;
+    // Use a timing function to animate the opacity
+    return withTiming(cursorShown.value ? 1 : 0, { duration: 200 });
+  });
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={[
+        styles.contentContainer,
+        {
+          paddingBottom: bottom,
+          paddingLeft: left,
+          paddingRight: right,
+        },
+      ]}
+      showsVerticalScrollIndicator={false}
+    >
+      <MultiLineChart
+        isStatic={false}
+        points={priceMap}
+        style={styles.chart}
+        // ExtraCanvasElements={
+        //   <>
+        //     <Group color="blue" opacity={opacity}>
+        //       <Circle cx={x} cy={y} r={10} />
+        //     </Group>
+        //   </>
+        // }
+        onPanGestureBegin={(payload) => {
+          "worklet";
+          cursorShown.value = true;
+          x.value = payload.event.x;
+          y.value = payload.event.y;
+          runOnJS(gestureStartImpact)();
+        }}
+        onPanGestureEnd={() => {
+          "worklet";
+          cursorShown.value = false;
+        }}
+        onPanGestureChange={(payload) => {
+          "worklet";
+          x.value = payload.event.x;
+          y.value = payload.event.y;
+        }}
+      >
+        {(args) => (
+          <>
+            <Line points={args.points.aapl} strokeWidth={1} color="green" />
+            <Line points={args.points.msft} strokeWidth={1} color="purple" />
+            <Line points={args.points.nvda} strokeWidth={1} color="black" />
+            <Line points={args.points.unity} strokeWidth={1} color="orange" />
+          </>
+        )}
+      </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,
+  },
+});

example/assets/circle-pic.png

@@ -83,6 +83,8 @@ PODS:
     - ExpoModulesCore
   - ExpoFileSystem (16.0.7):
     - ExpoModulesCore
+  - ExpoHaptics (12.8.1):
+    - ExpoModulesCore
   - ExpoHead (3.4.8):
     - ExpoModulesCore
   - ExpoImage (1.10.6):
@@ -1231,6 +1233,7 @@ DEPENDENCIES:
   - ExpoBlur (from `../node_modules/expo-blur/ios`)
   - ExpoCrypto (from `../node_modules/expo-crypto/ios`)
   - ExpoFileSystem (from `../node_modules/expo-file-system/ios`)
+  - ExpoHaptics (from `../node_modules/expo-haptics/ios`)
   - ExpoHead (from `../node_modules/expo-router/ios`)
   - ExpoImage (from `../node_modules/expo-image/ios`)
   - ExpoKeepAwake (from `../node_modules/expo-keep-awake/ios`)
@@ -1336,6 +1339,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-crypto/ios"
   ExpoFileSystem:
     :path: "../node_modules/expo-file-system/ios"
+  ExpoHaptics:
+    :path: "../node_modules/expo-haptics/ios"
   ExpoHead:
     :path: "../node_modules/expo-router/ios"
   ExpoImage:
@@ -1469,6 +1474,7 @@ SPEC CHECKSUMS:
   ExpoBlur: e832d874bd94afc0645daddbd3162ec1ce172080
   ExpoCrypto: b6428f48599c007676dc81a9b5f72c07e62fdccc
   ExpoFileSystem: c7488590959bf85ebc114909eb8186cbd62e3a25
+  ExpoHaptics: 28a771b630353cd6e8dcf1b1e3e693e38ad7c3c3
   ExpoHead: 8224345e80abcf4c97b31c99805dd5a3c8d3404d
   ExpoImage: 8cf2d51de3d03b7e984e9b0ba8f19c0c22057001
   ExpoKeepAwake: 0f5cad99603a3268e50af9a6eb8b76d0d9ac956c

example/assets/planets.jpeg

@@ -17,6 +17,7 @@
     "expo-constants": "~15.4.5",
     "expo-crypto": "~12.8.1",
     "expo-dev-client": "~3.3.9",
+    "expo-haptics": "~12.8.1",
     "expo-image": "~1.10.6",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.8",

example/assets/twitter-verified.svg

@@ -5189,6 +5189,11 @@ expo-font@~11.10.3:
   dependencies:
     fontfaceobserver "^2.1.0"
 
+expo-haptics@~12.8.1:
+  version "12.8.1"
+  resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-12.8.1.tgz#42b996763be33d661bd33bbc3b3958c3f2734b9d"
+  integrity sha512-ntLsHkfle8K8w9MW8pZEw92ZN3sguaGUSSIxv30fPKNeQFu7Cq/h47Qv3tONv2MO3wU48N9FbKnant6XlfptpA==
+
 expo-image@~1.10.6:
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/expo-image/-/expo-image-1.10.6.tgz#b0e54d31d97742505296c076a5f18d094ba9a8cc"

example/ios/Podfile.lock

@@ -9,7 +9,6 @@ import { Cursor } from "./Cursor";
 import { LineChartProps } from "./LineChart";
 import { computePath, computeGraphData } from "./computations";
 import { useGestures } from "./useGestures";
-import { batchedUpdates } from "../../libs/batchedUpdates";
 
 export const InteractiveLineChart: React.FC<LineChartProps<false>> = ({
   points = [],
@@ -33,8 +32,7 @@ export const InteractiveLineChart: React.FC<LineChartProps<false>> = ({
   onHoverGestureEnd = null,
   ...viewProps
 }) => {
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
+  const [{ width, height }, setSize] = useState({ width: 0, height: 0 });
 
   // Initially -cursorRadius so that the cursor is hidden
   const x = useSharedValue(-cursorRadius);
@@ -67,10 +65,7 @@ export const InteractiveLineChart: React.FC<LineChartProps<false>> = ({
 
   const onLayout = useCallback((e: LayoutChangeEvent) => {
     // Batch the updates to avoid unnecessary re-renders
-    batchedUpdates(() => {
-      setWidth(e.nativeEvent.layout.width);
-      setHeight(e.nativeEvent.layout.height);
-    });
+    setSize(e.nativeEvent.layout);
   }, []);
 
   return (