Feat unmet need graph

src/app/insights/components/BarGraph.tsx

@@ -0,0 +1,35 @@
+
+
+interface BarGraphProps {
+    data: { name: string; value: number }[];
+  }
+
+
+
+
+export default function BarGraph({ data }: BarGraphProps) {
+  return (
+    <div className="bg-twd-graph-background mt-10 w-11/12 m-auto rounded-lg">
+      <div className="w-10/12 m-auto pt-5">
+        <h2 className="text-xl text-white">Unmet Needs</h2>
+        <p className="text-white">Summary of needs selected as unmet</p>
+      </div>
+      <div className="bg-twd-graph-background justify-center text-center px-6 pb-3 mb-10 mt-5">
+        {data.map((need, index) => (
+          <div key={index} className="mb-3">
+            <div className="flex justify-between text-sm text-white">
+              <span>{need.name}</span>
+              <span>{need.value}</span>
+            </div>
+            <div className="w-full bg-gray-700 rounded-md h-3 mt-1">
+              <div
+                className="bg-twd-primary-purple h-3 rounded-sm"
+                style={{ width: `${Math.min(need.value, 100)}%` }}
+              ></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/app/insights/components/InsightsDisplay.tsx

@@ -10,6 +10,8 @@ import Button from "@/ui/shared/Button";
 import clsx from "clsx";
 import MoodStreamGraph from "./StreamGraph";
 import { RxDocument } from "rxdb";
+import BarGraph from "./BarGraph";
+
 
 export interface Insight {
   neurotransmitters: {
@@ -23,9 +25,25 @@ export interface Insight {
   createdAt: string;
 }
 
+interface Need {
+  id: string;
+  name: string;
+  category: string;
+  selectedTimestamps: string[]; 
+  timestamp: string; 
+  selectedExpiry?: string; 
+}
+
+interface Category {
+  id: string; 
+  name: string; 
+  timestamp: string; 
+}
+
 export default function InsightsDisplay() {
   const database = useDatabase();
   const [insights, setInsights] = useState<Insight[] | null>(null);
+  const [needsData, setNeedsData] = useState<{ name: string; value: number }[] | null>(null);
 
   const dateOptions = ["day", "week", "month", "year"];
 
@@ -94,10 +112,57 @@ export default function InsightsDisplay() {
     }
   };
 
+
+  const getNeedsData = async () => {
+    try {
+      const needsResponse = await database.getFromDb<RxDocument<Need>>("needs");
+      const categoriesResponse = await database.getFromDb<RxDocument<Category>>("needs_categories");
+
+      const needs = needsResponse.map((doc) => doc.toJSON() as Need);
+
+      const categories = categoriesResponse.map((doc) => doc.toJSON() as Category);
+
+      // Aggregate `selectedTimestamps` counts by category
+      const categoryCounts = needs.reduce((acc: Record<string, number>, need: Need) => {
+        const { category, selectedTimestamps } = need;
+
+        if (!acc[category]) {
+          acc[category] = 0;
+        }
+
+        acc[category] += selectedTimestamps ? selectedTimestamps.length : 0;
+        return acc;
+      }, {});
+
+      // Map categories to their names with counts
+      const needsData = categories.map((category: Category) => ({
+        name: category.name,
+        value: categoryCounts[category.id] || 0,
+      }));
+
+      console.log("Final Needs Data for BarGraph:", needsData);
+      setNeedsData(needsData);
+    } catch (error) {
+      console.error("Error fetching needs data:", error);
+    }
+  };
+
   useEffect(() => {
     getInsights();
+    getNeedsData();
   }, []);
 
+
+  const dummyNeedsData = [
+    { name: "Integrity", value: 8 },
+    { name: "Celebration", value: 35 },
+    { name: "Physical Nurturance", value: 12 },
+    { name: "Autonomy", value: 10 },
+    { name: "Harmony", value: 71 },  
+    { name: "Play", value: 54 },
+    { name: "Interdependence", value: 15 },
+  ];
+
   return (
     <>
       <div className="flex text-center w-full m-auto justify-between bg-twd-background py-2 px-4 sticky top-0 z-50">
@@ -161,6 +226,15 @@ export default function InsightsDisplay() {
       ) : (
         <div>Loading Stream Graph...</div>
       )}
+
+      {/* unmet needs graph */}
+      {needsData === null ? (
+        <div>Loading Needs Data...</div>
+      ) : needsData.some(item => item.value > 0) ? (
+        <BarGraph data={needsData} />
+      ) : (
+        <BarGraph data={dummyNeedsData} />
+      )}
     </>
   );
 }

src/app/layout.tsx

@@ -7,8 +7,8 @@ import { Roboto } from "next/font/google";
 
 const APP_NAME = "Things We Do";
 const APP_DEFAULT_TITLE = "Things We Do";
-const APP_TITLE_TEMPLATE = "%s - Thing We Do";
-const APP_DESCRIPTION = "Best PWA app in the world!";
+const APP_TITLE_TEMPLATE = "%s - Things We Do";
+const APP_DESCRIPTION = "Your app for tracking things you do.";
 
 export const metadata: Metadata = {
   applicationName: APP_NAME,