Refactor projectTag function and add PieChart component

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

@@ -17,6 +17,7 @@ export default async function Portfolio({
   );
 
   const projectTag = async () => {
+    // get unique project id from deals
     const uniqueProjectIds = Array.from(
       new Set(deals?.map((deal) => deal.project_id))
     );
@@ -24,8 +25,10 @@ export default async function Portfolio({
     const tagIds = (
       await Promise.all(
         uniqueProjectIds.map(async (projectId: number) => {
-          const { data: tagIdsArray, error: tagError } =
+          const { data: tagIdsArray, error: tagError } = await getProjectTag(
-            await getProjectTag(supabase, projectId);
+            supabase,
+            projectId
+          );
           if (tagError) {
             console.error(tagError);
             return [];
@@ -35,12 +38,15 @@ export default async function Portfolio({
       )
     ).flat();
 
-    // console.log(tagIds);
+    // console.log(tagIds, uniqueProjectIds);
     const tagNames = await Promise.all(
       tagIds
         .filter((tagId) => tagId !== null)
         .map(async (id: number) => {
-          const { data: tagName, error: nameError } = await getTagName(supabase, id);
+          const { data: tagName, error: nameError } = await getTagName(
+            supabase,
+            id
+          );
           if (nameError) {
             console.error(nameError);
             return null;
@@ -48,24 +54,28 @@ export default async function Portfolio({
           return tagName;
         })
     );
-
+    // console.log(tagNames);
     return tagNames.filter((tagName) => tagName !== null);
   };
   const countTags = (tags: any[]) => {
-      const tagCounts = tags.flat().reduce((acc, tag) => {
+    const tagCounts = tags.flat().reduce(
+      (acc, tag) => {
         const tagName = tag.value;
         acc[tagName] = (acc[tagName] || 0) + 1;
         return acc;
-      }, {} as Record<string, number>);
+      },
-  
+      {} as Record<string, number>
-      return Object.entries(tagCounts).map(([name, count]) => ({
+    );
-        name,
+
-        count: count as number,
+    return Object.entries(tagCounts).map(([name, count]) => ({
-      }));
+      name,
-    };
+      count: count as number,
+    }));
+  };
   const tags = await projectTag();
-  console.log(tags)
+  // console.log(tags);
-  // const tagCount = countTags(tags);
+  const tagCount = countTags(tags);
+  // console.log(tagCount);
 
   if (investorDealError) {
     console.error(investorDealError);
@@ -163,6 +173,15 @@ export default async function Portfolio({
         <Overview graphType="bar" data={threeYearGraphData}></Overview>
         <Overview graphType="bar" data={dayOfWeekData}></Overview>
       </div>
+      <PieChart
+        data={tagCount.map(
+          (item: { name: string; count: number }) => item.count
+        )}
+        labels={tagCount.map(
+          (item: { name: string; count: number }) => item.name
+        )}
+        header="Total"
+      />
     </div>
   );
 }

src/components/pieChart.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Pie } from "react-chartjs-2";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 
@@ -6,7 +8,7 @@ ChartJS.register(ArcElement, Tooltip, Legend);
 interface PieChartProps {
   labels: string[];
   data: number[];
-  header:string
+  header: string;
 }
 
 const PieChart = (props: PieChartProps) => {

src/lib/data/query.ts

@@ -56,8 +56,8 @@ function getProjectTag(client: SupabaseClient, projectId: number) {
   return client.from("project_tag").select("tag_id").in("item_id", [projectId]);
 }
 
-function getTagName(client: SupabaseClient, tagId: number){ 
+function getTagName(client: SupabaseClient, tagId: number) {
-  return client.from("project_tag").select("tag_id").in("item_id", [tagId]); 
+  return client.from("tag").select("value").in("id", [tagId]);
 }
 
 export {
@@ -67,5 +67,5 @@ export {
   getTags,
   getInvestorDeal,
   getProjectTag,
-  getTagName
+  getTagName,
 };