Skip to content

Commit 80e22da

Browse files
trevorpfiztrevorpfiz
committed
feat: basic timeline component
1 parent 1b91cfd commit 80e22da

File tree

9 files changed

+437
-122
lines changed

9 files changed

+437
-122
lines changed

‎apps/expo/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
},
2222
"dependencies": {
2323
"@bacons/text-decoder": "^0.0.0",
24+
"@expo-google-fonts/inter": "^0.2.3",
2425
"@expo/metro-config": "^0.18.11",
2526
"@expo/vector-icons": "^14.0.2",
2627
"@gorhom/bottom-sheet": "^4.6.4",
@@ -100,7 +101,7 @@
100101
"react-native-openai": "^0.6.1",
101102
"react-native-pager-view": "^6.3.3",
102103
"react-native-reanimated": "~3.15.0",
103-
"react-native-reanimated-carousel": "^3.5.1",
104+
"react-native-reanimated-carousel": "4.0.0-alpha.12",
104105
"react-native-redash": "^18.1.3",
105106
"react-native-root-siblings": "^5.0.1",
106107
"react-native-root-toast": "^3.6.0",

‎apps/expo/src/app/(app)/(tabs)/index.tsx

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,40 @@
1-
import { ScrollView, View } from "react-native";
1+
import { View } from "react-native";
2+
import { ScrollView } from "react-native-gesture-handler";
23
import { SafeAreaView } from "react-native-safe-area-context";
34

5+
import MyChart from "~/components/charts/line-chart";
46
import { DaySlider } from "~/components/home/day-slider";
57
import HomeHeader from "~/components/home/home-header";
68
import { OverviewPager } from "~/components/home/overview-pager";
9+
import Timeline from "~/components/home/timeline";
710
import { Separator } from "~/components/ui/separator";
811

912
export default function HomeScreen() {
1013
return (
11-
<SafeAreaView style={{ flex: 1 }}>
12-
<ScrollView>
14+
<SafeAreaView style={{ flex: 1 }} edges={["top", "left", "right"]}>
15+
<ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
16+
{/* Header */}
1317
<HomeHeader />
1418

19+
{/* Metabolic Scores Slider */}
1520
<View>
1621
<DaySlider />
1722
<Separator />
1823
{/* <Separator className="mx-auto mb-4 bg-red-500" orientation="vertical" /> */}
1924
</View>
2025

26+
{/* Overview Pager */}
2127
<View className="h-64">
2228
<OverviewPager />
2329
</View>
30+
31+
{/* CGM Chart */}
32+
<MyChart />
33+
34+
{/* Timeline */}
35+
<Timeline />
36+
37+
{/* Zones */}
2438
</ScrollView>
2539
</SafeAreaView>
2640
);

‎apps/expo/src/components/charts/data.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export const DATA = Array.from({ length: 31 }, (_, i) => ({
2+
day: i,
3+
highTmp: 40 + 30 * Math.random(),
4+
}));
5+
6+
export const DATA2 = Array.from({ length: 31 }, (_, i) => ({
7+
day: i,
8+
highTmp: 40 + 10 * Math.random(),
9+
}));
10+
11+
export const generateData = () =>
12+
Array.from({ length: 31 }, (_, i) => ({
13+
day: i,
14+
highTmp: 40 + 30 * Math.random(),
15+
}));

‎apps/expo/src/components/charts/line-chart.tsx

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import type { SharedValue } from "react-native-reanimated";
2+
import { useCallback, useState } from "react";
3+
import { View } from "react-native";
4+
import { useDerivedValue } from "react-native-reanimated";
5+
import { Inter_500Medium } from "@expo-google-fonts/inter";
6+
import { Circle, Text as SKText, useFont } from "@shopify/react-native-skia";
7+
import { CartesianChart, Line, useChartPressState } from "victory-native";
8+
9+
import { DATA, generateData } from "~/components/charts/data";
10+
import { Button } from "~/components/ui/button";
11+
import { Text } from "~/components/ui/text";
12+
import { useColorScheme } from "~/lib/use-color-scheme";
13+
14+
export default function MyChart() {
15+
const { colorScheme } = useColorScheme();
16+
const font = useFont(Inter_500Medium, 12);
17+
const inspectFont = useFont(Inter_500Medium, 30);
18+
const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });
19+
20+
const [chartData, setChartData] = useState(DATA);
21+
22+
const value = useDerivedValue(() => {
23+
return "$" + state.y.highTmp.value.value.toFixed(2);
24+
}, [state]);
25+
26+
const labelColor = colorScheme === "dark" ? "white" : "black";
27+
const lineColor = colorScheme === "dark" ? "lightgray" : "black";
28+
29+
const refreshData = useCallback(() => {
30+
setChartData(generateData());
31+
}, []);
32+
33+
return (
34+
<View className="h-80 w-full">
35+
<CartesianChart
36+
data={chartData}
37+
xKey="day"
38+
yKeys={["highTmp"]}
39+
domainPadding={{ top: 30 }}
40+
axisOptions={{ font, labelColor, lineColor }}
41+
chartPressState={state}
42+
>
43+
{({ points, chartBounds }) => (
44+
<>
45+
<SKText
46+
x={chartBounds.left + 10}
47+
y={40}
48+
font={inspectFont}
49+
text={value}
50+
color={labelColor}
51+
style={"fill"}
52+
/>
53+
<Line
54+
points={points.highTmp}
55+
color="lightgreen"
56+
strokeWidth={3}
57+
animate={{ type: "timing", duration: 500 }}
58+
connectMissingData={false}
59+
/>
60+
{isActive ? (
61+
<ToolTip x={state.x.position} y={state.y.highTmp.position} />
62+
) : null}
63+
</>
64+
)}
65+
</CartesianChart>
66+
<Button onPress={refreshData}>
67+
<Text>Update Data</Text>
68+
</Button>
69+
</View>
70+
);
71+
}
72+
73+
function ToolTip({ x, y }: { x: SharedValue<number>; y: SharedValue<number> }) {
74+
return <Circle cx={x} cy={y} r={8} color="gray" opacity={0.8} />;
75+
}

‎apps/expo/src/components/home/timeline-item.tsx

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import type { SharedValue } from "react-native-reanimated";
2+
import { Dimensions, StyleSheet } from "react-native";
3+
import Animated, {
4+
Extrapolation,
5+
interpolate,
6+
useAnimatedStyle,
7+
} from "react-native-reanimated";
8+
9+
import type { MockActivityData } from "~/data/activity";
10+
import {
11+
Card,
12+
CardContent,
13+
CardDescription,
14+
CardHeader,
15+
CardTitle,
16+
} from "~/components/ui/card";
17+
import { Text } from "~/components/ui/text";
18+
19+
interface Props {
20+
item: MockActivityData;
21+
index: number;
22+
scrollX: SharedValue<number>;
23+
}
24+
25+
const width = Dimensions.get("window").width;
26+
27+
const TimelineItem = (props: Props) => {
28+
const { item, index, scrollX } = props;
29+
30+
const animatedStyles = useAnimatedStyle(() => {
31+
return {
32+
transform: [
33+
{
34+
translateX: interpolate(
35+
scrollX.value,
36+
[(index - 1) * width, index * width, (index + 1) * width],
37+
[-width * 0.13, 0, width * 0.13],
38+
Extrapolation.CLAMP,
39+
),
40+
},
41+
{
42+
scale: interpolate(
43+
scrollX.value,
44+
[(index - 1) * width, index * width, (index + 1) * width],
45+
[0.9, 1, 0.9],
46+
Extrapolation.CLAMP,
47+
),
48+
},
49+
],
50+
};
51+
});
52+
53+
return (
54+
<Animated.View style={[styles.container, animatedStyles]}>
55+
<Card className="h-full w-full max-w-[90%]">
56+
<CardHeader>
57+
<CardTitle>{item.title}</CardTitle>
58+
<CardDescription>{item.description}</CardDescription>
59+
</CardHeader>
60+
<CardContent>
61+
<Text>Card Content</Text>
62+
</CardContent>
63+
</Card>
64+
</Animated.View>
65+
);
66+
};
67+
68+
const styles = StyleSheet.create({
69+
container: {
70+
justifyContent: "center",
71+
alignItems: "center",
72+
width,
73+
height: "100%",
74+
},
75+
});
76+
77+
export { TimelineItem };

‎apps/expo/src/components/home/timeline.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import type { FlatList } from "react-native-reanimated/lib/typescript/Animated";
2+
import { useCallback, useRef } from "react";
3+
import { View } from "react-native";
4+
import Animated, {
5+
useAnimatedScrollHandler,
6+
useSharedValue,
7+
} from "react-native-reanimated";
8+
9+
import type { MockActivityData } from "~/data/activity";
10+
import { TimelineItem } from "~/components/home/timeline-item";
11+
import { mockActivityData } from "~/data/activity";
12+
13+
export default function Timeline() {
14+
const listRef = useRef<FlatList<MockActivityData> | null>(null);
15+
const scrollX = useSharedValue(0);
16+
17+
const onScrollHandler = useAnimatedScrollHandler({
18+
onScroll: (event) => {
19+
scrollX.value = event.contentOffset.x;
20+
},
21+
});
22+
23+
const renderItem = useCallback(
24+
({ item, index }: { item: MockActivityData; index: number }) => {
25+
return <TimelineItem item={item} index={index} scrollX={scrollX} />;
26+
},
27+
[scrollX],
28+
);
29+
30+
const keyExtractor = useCallback(
31+
(item: MockActivityData) => item.dateTime,
32+
[],
33+
);
34+
35+
return (
36+
<View className="flex-1">
37+
<Animated.FlatList
38+
ref={listRef}
39+
data={mockActivityData}
40+
renderItem={renderItem}
41+
keyExtractor={keyExtractor}
42+
horizontal
43+
showsHorizontalScrollIndicator={false}
44+
pagingEnabled
45+
onScroll={onScrollHandler}
46+
contentContainerStyle={{
47+
paddingVertical: 16,
48+
paddingHorizontal: 0,
49+
}}
50+
/>
51+
</View>
52+
);
53+
}

‎apps/expo/src/data/activity.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
export const mockActivityData = [
2+
{
3+
type: "exercise",
4+
dateTime: "2024-08-09T07:30:00",
5+
title: "Morning Jog",
6+
description: "5km jog around the neighborhood park",
7+
},
8+
{
9+
type: "nutrition",
10+
dateTime: "2024-08-09T09:00:00",
11+
title: "Healthy Breakfast",
12+
description: "Oatmeal with berries and a glass of fresh orange juice",
13+
},
14+
{
15+
type: "exercise",
16+
dateTime: "2024-08-09T12:00:00",
17+
title: "Lunchtime Yoga",
18+
description: "30-minute yoga session focusing on stretching and relaxation",
19+
},
20+
{
21+
type: "nutrition",
22+
dateTime: "2024-08-09T13:30:00",
23+
title: "Protein-packed Lunch",
24+
description:
25+
"Grilled chicken salad with mixed greens and balsamic dressing",
26+
},
27+
{
28+
type: "exercise",
29+
dateTime: "2024-08-09T17:00:00",
30+
title: "Strength Training",
31+
description: "45-minute weightlifting session focusing on upper body",
32+
},
33+
{
34+
type: "nutrition",
35+
dateTime: "2024-08-09T19:30:00",
36+
title: "Balanced Dinner",
37+
description: "Baked salmon with quinoa and steamed vegetables",
38+
},
39+
{
40+
type: "exercise",
41+
dateTime: "2024-08-10T08:00:00",
42+
title: "Swimming",
43+
description: "1-hour swim session at the local pool",
44+
},
45+
{
46+
type: "nutrition",
47+
dateTime: "2024-08-10T10:30:00",
48+
title: "Post-workout Smoothie",
49+
description: "Banana and spinach smoothie with protein powder",
50+
},
51+
];
52+
export type MockActivityData = (typeof mockActivityData)[number];

‎apps/expo/src/data/cgm.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// mock cgm data
2+
export const mockCGMData = [
3+
{
4+
dateTime: "2024-08-09T07:30:00",
5+
value: 120,
6+
},
7+
{
8+
dateTime: "2024-08-09T09:00:00",
9+
value: 120,
10+
},
11+
{
12+
dateTime: "2024-08-09T12:00:00",
13+
value: 120,
14+
},
15+
];
16+
export type CGMData = (typeof mockCGMData)[number];

0 commit comments

Comments
 (0)