- Sorted the user progress chart by day

components/pages/todos/family-chores/FamilyChart.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react";
 import { BarChart } from "react-native-gifted-charts";
 import { UserProfile } from "@/hooks/firebase/types/profileTypes";
+import {chartDayMap} from "@/constants/common";
 
 const FamilyChart = ({ children }: {
   children: Array<UserProfile>;
@@ -52,7 +53,7 @@ const FamilyChart = ({ children }: {
 
       return {
         stacks: stacks,
-        label: day,
+        label: chartDayMap[day],
       }
     });
     setDataList(data);

components/pages/todos/user-chores/UserChart.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react";
 import { BarChart } from "react-native-gifted-charts";
 import {UserProfile} from "@/hooks/firebase/types/profileTypes";
+import {chartDayMap, weekOrder} from "@/constants/common";
 
 const UserChart = ({ profileData }: {
   profileData: UserProfile | undefined;
@@ -19,13 +20,18 @@ const UserChart = ({ profileData }: {
       Sunday: 0,
     };
 
-    const data = Object.keys(weeklyDayPoints).map((day) => {
+    // Sort by day
+    const sortedWeeklyPoints = Object.fromEntries(
+        weekOrder.map(day => [day, weeklyDayPoints[day]])
+    );
+
+    const data = Object.keys(sortedWeeklyPoints).map((day) => {
       const value = weeklyDayPoints[day];
 
       return {
         value: value,
         frontColor: barColor,
-        label: day,
+        label: chartDayMap[day],
       }
     });
     setDataList(data);

constants/common.ts

@@ -0,0 +1,11 @@
+export const chartDayMap = {
+    Monday: "M",
+    Tuesday: "Tu",
+    Wednesday: "W",
+    Thursday: "Th",
+    Friday: "F",
+    Saturday: "Sa",
+    Sunday: "Su",
+}
+
+export const weekOrder = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];