Refactor date filtering and data aggregation in Portfolio component

src/app/portfolio/[uid]/page.tsx

@@ -12,24 +12,82 @@ export default async function Portfolio({
   if (error) {
     console.error(error);
   }
-  const getMonthName = (dateString: string) => {
+  const yearAgo = (num: number) => {
-    const date = new Date(dateString);
+    const newDate = new Date();
-    return date.toLocaleString("default", { month: "long" });
+    newDate.setFullYear(newDate.getFullYear() - num);
+    return newDate;
   };
 
-  const graphData = deals
+  const getMonthName = (dateString: string) => {
-    ? deals.map((item) => ({
+    const date = new Date(dateString);
-      // convert month's index to string
+    return date.toLocaleString("default", { month: "long", year: "numeric" });
-        name: getMonthName(item.created_time),
+  };
-        value: item.deal_amount as number,
+
-      }))
+  const overAllGraphData = deals
+    ? deals
+        .filter((item) => new Date(item.created_time) >= yearAgo(1))
+        .reduce(
+          (acc, item) => {
+            const monthName = getMonthName(item.created_time).slice(0, 3);
+            const existingMonth = acc.find(
+              (entry: { name: string }) => entry.name === monthName
+            );
+
+            if (existingMonth) {
+              existingMonth.value += item.deal_amount;
+            } else {
+              acc.push({ name: monthName, value: item.deal_amount });
+            }
+
+            return acc;
+          },
+          [] as { name: string; value: number }[]
+        )
     : [];
 
+const threeYearGraphData = deals
+  ? deals
+      .filter((item) => new Date(item.created_time) >= yearAgo(3))
+      .reduce(
+        (acc, item) => {
+          const year = new Date(item.created_time).getFullYear();
+          const existingYear = acc.find(
+            (entry: { name: string; }) => entry.name === year.toString()
+          );
+
+          if (existingYear) {
+            existingYear.value += item.deal_amount;
+          } else {
+            acc.push({ name: year.toString(), value: item.deal_amount })
+          }
+
+          return acc;
+        },
+        [] as { name: string; value: number }[]
+      )
+  : [];
+
+
+
+  // const graphData = [
+  //   { name: "October", value: 500 },
+  //   { name: "October", value: 500 },
+  //   { name: "November", value: 500 },
+  //   { name: "December", value: 500 },
+  //   { name: "January", value: 500 },
+  //   { name: "Febuary", value: 500 },
+  //   { name: "March", value: 500 },
+  // ];
+
   return (
     <div>
       {/* {JSON.stringify(deals)} */}
-      {JSON.stringify(graphData)}
+      {/* {JSON.stringify(deals)} */}
-      <Overview graphType="line" data={graphData}></Overview>
+      {/* {JSON.stringify(threeYearGraphData)} */}
+      <div className="flex w-full gap-10">
+        <Overview graphType="line" data={overAllGraphData}></Overview>
+        <Overview graphType="bar" data={threeYearGraphData}></Overview>
+      </div>
     </div>
   );
 }

src/components/ui/overview.tsx

@@ -78,7 +78,7 @@ export function Overview(props: OverViewProps) {
               tickFormatter={(value) => `$${value}`}
             />
             <Line
-              dataKey="total"
+              dataKey="value"
               fill="currentColor"
               className="fill-primary"
             />
@@ -99,7 +99,7 @@ export function Overview(props: OverViewProps) {
               axisLine={false}
               tickFormatter={(value) => `$${value}`}
             />
-            <Bar dataKey="total" fill="currentColor" className="fill-primary" />
+            <Bar dataKey="value" fill="currentColor" className="fill-primary" />
           </BarChart>
         )}
       </ResponsiveContainer>

src/lib/data/query.ts

@@ -45,9 +45,14 @@ function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
 }
 
 function getInvestorDeal(client: SupabaseClient, userId: string) {
-  return client.from("investment_deal").select("*").in("investor_id", [userId]);
+  return client
+    .from("investment_deal")
+    .select("*")
+    .in("investor_id", [userId])
+    .order("created_time", { ascending: true });
 }
 
+
 export {
   getBusinesses,
   getInvestmentCounts,