feat: introduce static line chart

Key Highlights:
- Introduced isStatic property for LineChart component
- Separated LineChart into an interactive and static
  chart component
- Created example screen showcasing the static chart
- Refactored the example application slightly by moving
  dummy data into the store directory

Author: Evan Y

.vscode/settings.json

@@ -1,3 +1,8 @@
 {
-    "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    // Fix all errors
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "always"
+    },
+    
 }

example/app/chart.tsx

@@ -11,10 +11,7 @@ import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import AnimatedText from "../components/AnimatedText";
-import aapl_prices from "../data/aapl_prices.json";
-import msft_prices from "../data/msft_prices.json";
-import nvda_prices from "../data/nvda_prices.json";
-import unity_prices from "../data/unity_prices.json";
+import { priceMap } from "../src/store/prices";
 
 const formatter = new Intl.NumberFormat("en-US", {
   style: "currency",
@@ -34,21 +31,6 @@ const uiFormatter = (price: number) => {
   }).format(price);
 };
 
-const priceMap = {
-  msft: [...msft_prices.results]
-    .reverse()
-    .map<[number, number]>((r) => [new Date(r.date).getTime(), r.close]),
-  aapl: aapl_prices.results
-    .reverse()
-    .map<[number, number]>((r) => [new Date(r.date).getTime(), r.close]),
-  nvda: nvda_prices.results
-    .reverse()
-    .map<[number, number]>((r) => [new Date(r.date).getTime(), r.close]),
-  unity: unity_prices.results
-    .reverse()
-    .map<[number, number]>((r) => [new Date(r.date).getTime(), r.close]),
-};
-
 const priceMapKeys = Object.keys(priceMap) as (keyof typeof priceMap)[];
 
 export default () => {

example/app/index.tsx

@@ -11,7 +11,10 @@ export default () => {
       showsVerticalScrollIndicator={false}
     >
       <Pressable onPress={() => navigate("/chart")}>
-        <Text style={styles.link}>Go to Charts</Text>
+        <Text style={styles.link}>Go to interactive chart</Text>
+      </Pressable>
+      <Pressable onPress={() => navigate("/static_chart")}>
+        <Text style={styles.link}>Go to static chart</Text>
       </Pressable>
     </ScrollView>
   );

example/app/static_chart.tsx

@@ -0,0 +1,61 @@
+import { type AxisLabelProps, LineChart } from "@codeherence/react-native-graph";
+import { Paint } from "@shopify/react-native-skia";
+import { useReducer } from "react";
+import { Button, ScrollView, StyleSheet, Text } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { priceMap } from "../src/store/prices";
+
+const formatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+});
+
+const AxisLabel: React.FC<AxisLabelProps> = ({ value }) => (
+  <Text selectable={false}>{formatter.format(value)}</Text>
+);
+
+const priceMapKeys = Object.keys(priceMap) as (keyof typeof priceMap)[];
+
+export default () => {
+  const { bottom, left, right } = useSafeAreaInsets();
+  const [counter, increment] = useReducer((s: number) => s + 1, 0);
+
+  const symbol = priceMapKeys[counter % priceMapKeys.length]!;
+  const data = priceMap[symbol];
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={[
+        styles.contentContainer,
+        {
+          paddingBottom: bottom,
+          paddingLeft: left,
+          paddingRight: right,
+        },
+      ]}
+      showsVerticalScrollIndicator={false}
+    >
+      <Button title={`Showing ${symbol}. Press to switch.`} onPress={increment} />
+      <LineChart
+        isStatic
+        points={data}
+        style={styles.chart}
+        TopAxisLabel={AxisLabel}
+        BottomAxisLabel={AxisLabel}
+        strokeWidth={2}
+        PathFill={({ strokeWidth }) => (
+          <Paint style="stroke" strokeWidth={strokeWidth} color="lightblue" />
+        )}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  contentContainer: { flexGrow: 1 },
+  chart: { flex: 1, maxHeight: 300 },
+  price: { fontSize: 32 },
+});