fix: y for x computation

Author: e-younan

example/app/index.tsx

@@ -5,24 +5,21 @@ import {
   HoverGestureHandlerOnChangeEventPayload,
 } from "@codeherence/react-native-graph";
 import { LinearGradient, vec } from "@shopify/react-native-skia";
-import { useCallback, useEffect, useState } from "react";
-import { Button, StyleSheet, Text, View } from "react-native";
+import { useCallback, useMemo } from "react";
+import { StyleSheet, Text, View, useWindowDimensions } from "react-native";
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import AnimatedText from "../components/AnimatedText";
-
-const generateRandomData = (): [number, number][] => {
-  return Array.from({ length: 30 }, (_, i) => [i, Math.random() * 2000]);
-};
+import msft_prices from "../data/msft_prices.json";
 
 const formatter = new Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
 });
 
 const AxisLabel: React.FC<AxisLabelComponentProps> = ({ value }) => (
-  <Text>{formatter.format(value)}</Text>
+  <Text selectable={false}>{formatter.format(value)}</Text>
 );
 
 const uiFormatter = (price: number) => {
@@ -35,20 +32,18 @@ const uiFormatter = (price: number) => {
 };
 
 export default () => {
+  const { width } = useWindowDimensions();
   const { top, bottom } = useSafeAreaInsets();
-  const [data, setData] = useState<[number, number][]>([]);
+  const data: [number, number][] = useMemo(
+    () =>
+      msft_prices.results
+        .reverse()
+        .map<[number, number]>((r) => [new Date(r.date).getTime(), r.close]),
+    []
+  );
 
   const latestPrice = useSharedValue("0");
 
-  // Randomize the data
-  const refreshData = useCallback(() => {
-    const newData = generateRandomData();
-    latestPrice.value = formatter.format(newData[newData.length - 1]![1]);
-    setData(newData);
-  }, []);
-
-  useEffect(refreshData, []);
-
   const onHoverChangeWorklet = useCallback((evt: HoverGestureHandlerOnChangeEventPayload) => {
     "worklet";
     latestPrice.value = uiFormatter(evt.point);
@@ -70,11 +65,10 @@ export default () => {
 
   return (
     <View style={[styles.container, { paddingTop: top, paddingBottom: bottom }]}>
-      <Button title="Randomize data" onPress={refreshData} />
       <AnimatedText style={styles.price} animatedProps={animatedProps} />
       <LineChart
         points={data}
-        style={styles.chart}
+        style={[styles.chart, { width }]}
         TopAxisLabel={AxisLabel}
         BottomAxisLabel={AxisLabel}
         onPanGestureChange={onGestureChangeWorklet}
@@ -83,7 +77,11 @@ export default () => {
         onHoverGestureChange={onHoverChangeWorklet}
         strokeWidth={2}
         PathFill={({ width }) => (
-          <LinearGradient start={vec(0, 0)} end={vec(width, 0)} colors={["blue", "yellow"]} />
+          <LinearGradient
+            start={vec(0, 0)}
+            end={vec(width, 0)}
+            colors={["blue", "red", "purple"]}
+          />
         )}
       />
     </View>
@@ -92,6 +90,6 @@ export default () => {
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
-  chart: { flex: 1 },
+  chart: { flex: 1, maxHeight: 400 },
   price: { fontSize: 32 },
 });