more charts

src/app/portal/admin/forms/[id]/submissions/AnalyticsPage.tsx

@@ -3,54 +3,44 @@ import { FormChart } from "@/app/portal/admin/forms/[id]/submissions/formDataCha
 import { formContext } from "@/components/layouts/formTabView";
 import { getFormAnalytics } from "@/lib/utils/forms/analytics";
 import { useContext, useEffect, useState } from "react";
+import { ReferenceMap } from "./columns";
 
-export default function AnalyticsPage({ submissions }: { submissions: any[] }) {
+export default function AnalyticsPage({
+  submissions,
+  refMap,
+}: {
+  submissions: any[];
+  refMap: ReferenceMap;
+}) {
   const columns = [
-    "role",
-    "level",
     "status",
+    "level",
+    "role",
+    "reviewer_id",
+    "interviewer_id",
     "year",
     "faculty",
     "specialization",
     "graduationYear",
     "lp-team",
-
-    // "reviewer_id",
   ];
-  const { data, isLoading, error } = useChartData({
+  const { data } = useChartData({
     columns: columns,
     submissions: submissions,
+    refMap: refMap,
   });
 
-  const dataGrid = () => {
-    if (isLoading) {
-      return (
-        <div>
-          <h4>Loading...</h4>
-        </div>
-      );
-    } else if (error) {
-      return (
-        <div>
-          <h4>Error loading data</h4>
-        </div>
-      );
-    } else {
-      return data.analyticsData.map((chartData, index) => (
-        <FormChart
-          key={index}
-          chartInfo={chartData.charInfo}
-          chartConfig={chartData.chartConfig}
-          chartData={chartData.chartData}
-        />
-      ));
-    }
-  };
-
   return (
     <div className="overflow-hidden flex flex-col max-w-screen pb-32 ">
-      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ">
-        {dataGrid()}
+      <section className="grid grid-cols-1  md:grid-cols-2 lg:grid-cols-2  gap-4 ">
+        {data.analyticsData.map((chartData, index) => (
+          <FormChart
+            key={index}
+            chartInfo={chartData.charInfo}
+            chartConfig={chartData.chartConfig}
+            chartData={chartData.chartData}
+          />
+        ))}
       </section>
     </div>
   );
@@ -59,16 +49,17 @@ export default function AnalyticsPage({ submissions }: { submissions: any[] }) {
 function useChartData({
   columns,
   submissions,
+  refMap,
 }: {
   columns: string[];
   submissions: any;
+  refMap: ReferenceMap;
 }) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
   const data: { analyticsData: any[]; stats?: any } = getFormAnalytics(
     { columns },
     submissions ? submissions : [],
+    refMap,
   );
 
-  return { data, isLoading, error };
+  return { data };
 }

src/app/portal/admin/forms/[id]/submissions/columns.tsx

@@ -42,6 +42,7 @@ export type ReferenceItem = {
   id: string;
   label: string;
 };
+
 export type ReferenceMap = {
   [key: string]: ReferenceItem | ReferenceMap | string;
 };

src/app/portal/admin/forms/[id]/submissions/data-table.tsx

@@ -143,6 +143,7 @@ export function DataTable<TData, TValue>({
       </div>
       {table.getFilteredRowModel().rows.length > 0 && tabView === "chart" && (
         <AnalyticsPage
+          refMap={refMap}
           submissions={table
             .getFilteredRowModel()
             .rows.map((row) => row.original)}

src/app/portal/admin/forms/[id]/submissions/formDataChart.tsx

@@ -35,7 +35,6 @@ export function FormChart({
     <Card className={"max-w-2xl flex-1 w-full "}>
       <CardHeader>
         <CardTitle>{chartInfo.title}</CardTitle>
-        <CardDescription>{chartInfo.description}</CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig}>
@@ -48,7 +47,7 @@ export function FormChart({
             }}
           >
             <YAxis
-              className={"min-w-80 *:text-white! max-w-none "}
+              className={"min-w-96 *:text-white! max-w-none "}
               dataKey="label"
               type="category"
               tickLine={false}

src/lib/utils/forms/analytics.ts

@@ -1,3 +1,7 @@
+import {
+  ReferenceMap,
+  ReferenceItem,
+} from "@/app/portal/admin/forms/[id]/submissions/columns";
 import { ChartConfig } from "@/components/primitives/chart";
 
 type temp = {
@@ -22,6 +26,7 @@ interface AggregationResult {
 function aggregateColumn(
   data: Record<string, any>[],
   column: string,
+  ref: ReferenceMap | null,
 ): AggregationResult {
   const aggData = data.reduce(
     (acc: Record<string, AggregatedValue>, row: Record<string, any>) => {
@@ -40,7 +45,7 @@ function aggregateColumn(
             acc[val] = {
               id: val,
               count: 1,
-              label: val,
+              label: ref ? ref[val].label : val,
             };
           }
         });
@@ -55,7 +60,7 @@ function aggregateColumn(
         acc[value] = {
           id: value,
           count: 1,
-          label: value,
+          label: ref ? ref[value].label : value,
         };
       }
       return acc;
@@ -81,16 +86,22 @@ function createChartConfig(data: any[], columns: string[]) {
   return chartConfig;
 }
 
-export function getFormAnalytics(config: temp, submissions: any) {
-  const chartData = config.columns.map((column) =>
-    aggregateColumn(submissions, column),
-  );
-  const lastUpdated = Date.now();
+export function getFormAnalytics(
+  config: temp,
+  submissions: any,
+  refMap: ReferenceMap,
+) {
+  const chartData = config.columns.map((column) => {
+    let ref = refMap[column];
+    if (typeof ref === "string") {
+      ref = refMap[ref];
+    }
+    return aggregateColumn(submissions, column, ref ? ref : null);
+  });
   return {
     analyticsData: chartData,
     stats: {
       submissions: submissions.length,
-      lastUpdated: lastUpdated,
     },
   };
 }