3 and 4 completed

2026-03-11 02:38:43 +01:00
1 parent 3573709d99
commit 97436c6823
@@ -0,0 +1,132 @@
+import React from "react";
+import { View, Text, StyleSheet, Dimensions } from "react-native";
+import { LineChart } from "react-native-chart-kit";
+import { theme } from "../styles/theme";
+import type { WeeklyTrendData } from "../api/types";
+
+interface WeeklyProgressChartProps {
+  weeklyData: WeeklyTrendData[];
+  title?: string;
+}
+
+export function WeeklyProgressChart({
+  weeklyData,
+  title = "Weekly Progress",
+}: WeeklyProgressChartProps) {
+  const screenWidth = Dimensions.get("window").width;
+
+  // Prepare chart data
+  const labels = weeklyData.map((week) => week.weekLabel);
+  const checkInsData = weeklyData.map((week) => week.checkIns);
+  const goalsCompletedData = weeklyData.map((week) => week.goalsCompleted);
+  const avgProgressData = weeklyData.map((week) => week.averageProgress);
+
+  const chartConfig = {
+    backgroundColor: theme.colors.white,
+    backgroundGradientFrom: theme.colors.white,
+    backgroundGradientTo: theme.colors.white,
+    decimalPlaces: 0,
+    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
+    labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
+    style: {
+      borderRadius: theme.borderRadius.lg,
+    },
+    propsForDots: {
+      r: "4",
+      strokeWidth: "2",
+      stroke: theme.colors.primary,
+    },
+  };
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        data: checkInsData,
+        color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`, // Blue for check-ins
+        strokeWidth: 2,
+      },
+      {
+        data: goalsCompletedData,
+        color: (opacity = 1) => `rgba(16, 185, 129, ${opacity})`, // Green for goals
+        strokeWidth: 2,
+      },
+    ],
+    legend: ["Check-ins", "Goals Completed"],
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      <View style={styles.chartContainer}>
+        <LineChart
+          data={data}
+          width={screenWidth - 60}
+          height={220}
+          chartConfig={chartConfig}
+          bezier
+          style={styles.chart}
+          withInnerLines={true}
+          withOuterLines={true}
+          withVerticalLabels={true}
+          withHorizontalLabels={true}
+          fromZero={true}
+        />
+      </View>
+      <View style={styles.legend}>
+        <View style={styles.legendItem}>
+          <View style={[styles.legendDot, { backgroundColor: "#3b82f6" }]} />
+          <Text style={styles.legendText}>Check-ins</Text>
+        </View>
+        <View style={styles.legendItem}>
+          <View style={[styles.legendDot, { backgroundColor: "#10b981" }]} />
+          <Text style={styles.legendText}>Goals Completed</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.colors.white,
+    borderRadius: theme.borderRadius.xl,
+    padding: 16,
+    marginBottom: 16,
+    ...theme.shadows.medium,
+  },
+  title: {
+    fontSize: theme.typography.fontSize.lg,
+    fontWeight: theme.typography.fontWeight.bold,
+    color: theme.colors.gray700,
+    marginBottom: 12,
+  },
+  chartContainer: {
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  chart: {
+    marginVertical: 8,
+    borderRadius: theme.borderRadius.lg,
+  },
+  legend: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 20,
+    paddingTop: 8,
+  },
+  legendItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  legendDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+  },
+  legendText: {
+    fontSize: theme.typography.fontSize.sm,
+    color: theme.colors.gray500,
+  },
+});