fixing errors

doesn't work, just intermediatory changes
UTDNebula · Feb 4, 2025 · 887987a · 887987a
1 parent da4cc55
commit 887987a
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 98 deletions.
diff --git a/src/components/common/SingleGradesInfo/singleGradesInfo.tsx b/src/components/common/SingleGradesInfo/singleGradesInfo.tsx
@@ -15,6 +15,7 @@ function convertNumbersToPercents(distribution: GradesType): number[] {
     (frequencyOfLetterGrade) => (frequencyOfLetterGrade / total) * 100,
   );
 }
+
 function getRecentSemesters() {
   const recentSemesters: string[] = [];
   const today = new Date();
@@ -41,79 +42,45 @@ type Props = {
 };
 
 function SingleGradesInfo({ title, course, grades }: Props) {
-  if (typeof grades === 'undefined' || grades.state === 'error') {
-    return null;
-  }
+  if (typeof grades === 'undefined' || grades.state === 'error') return null;
   if (grades.state === 'loading') {
     return (
       <div className="p-2">
         <Skeleton variant="rounded" className="w-full h-60 m-2" />
         <div className="flex flex-wrap justify-around">
-          <p>
-            Grades: <Skeleton className="inline-block w-[5ch]" />
-          </p>
-          <p>
-            GPA: <Skeleton className="inline-block w-[5ch]" />
-          </p>
+          <p>Grades: <Skeleton className="inline-block w-[5ch]" /></p>
+          <p>GPA: <Skeleton className="inline-block w-[5ch]" /></p>
         </div>
       </div>
     );
   }
-
   const percents = convertNumbersToPercents(grades.data);
   const recentSemesters = getRecentSemesters();
-  const gpaValues = [
-    4, 4, 3.67, 3.33, 3, 2.67, 2.33, 2, 1.67, 1.33, 1, 0.67, 0,
-  ];
+  const gpaValues = [4,4,3.67,3.33,3,2.67,2.33,2,1.67,1.33,1,0.67,0];
 
   return (
     <div className="p-2">
       <div className="h-64">
         <BarGraph
           title={title ?? '# of Students'}
-          xaxisLabels={[
-            'A+',
-            'A',
-            'A-',
-            'B+',
-            'B',
-            'B-',
-            'C+',
-            'C',
-            'C-',
-            'D+',
-            'D',
-            'D-',
-            'F',
-            'W',
-          ]}
-          yaxisFormatter={(value) => Number(value).toFixed(0).toLocaleString()}
-          tooltipFormatter={(value, { dataPointIndex }) =>
-            Number(value).toFixed(0).toLocaleString() +
-            ' (' +
-            percents[dataPointIndex].toFixed(2) +
-            '%)'
-          }
-          series={[
-            {
-              name: searchQueryLabel(course),
-              data: grades.data.grade_distribution,
-            },
-          ]}
+          xaxisLabels={['A+','A','A-','B+','B','B-','C+','C','C-','D+','D','D-','F','W']}
+          yaxisFormatter={value => Number(value).toFixed(0).toLocaleString()}
+          tooltipFormatter={(value,{ dataPointIndex }) => Number(value).toFixed(0).toLocaleString() + ' (' + percents[dataPointIndex].toFixed(2) + '%)'}
+          series={[{ name: searchQueryLabel(course), data: grades.data.grade_distribution }]}
         />
       </div>
       <div className="flex flex-wrap justify-around">
-        <p>
-          Grades: <b>{grades.data.total.toLocaleString()}</b>
-        </p>
-        <p>
-          GPA:{' '}
-          <b>{grades.data.gpa === -1 ? 'None' : grades.data.gpa.toFixed(3)}</b>
-        </p>
+        <p>Grades: <b>{grades.data.total.toLocaleString()}</b></p>
+        <p>GPA: <b>{grades.data.gpa === -1 ? 'None' : grades.data.gpa.toFixed(3)}</b></p>
       </div>
       <div className="h-64">
-        <LineGraph course ={recentSemesters} 
-        gpa={gpaValues} />
+        <LineGraph
+          chartTitle="GPA Trend"
+          xAxisLabels={recentSemesters}
+          yAxisFormatter={(value: number) => value.toFixed(2)}
+          tooltipFormatter={(value: number) => value.toFixed(3)}
+          series={[{ name: searchQueryLabel(course), data: gpaValues }]}
+        />
       </div>
     </div>
   );

diff --git a/src/components/graph/LineGraph/lineGraph.tsx b/src/components/graph/LineGraph/lineGraph.tsx
@@ -1,25 +1,31 @@
 import { Skeleton, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import dynamic from 'next/dynamic';
 import React, { useEffect, useState } from 'react';
-import Chart from 'react-apexcharts';
 
-import {
-  type SearchQuery,
-  searchQueryLabel,
-} from '@/modules/SearchQuery/SearchQuery';
 import type { GenericFetchedData } from '@/pages/dashboard/index';
 
+// Dynamically import react-apexcharts with SSR disabled.
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
 export type GPATrendType = {
   season: string[];
   years: string[];
   gpa: number[];
 };
 
 type Props = {
-  recentSemesters: SearchQuery;
-  gpaTrend: GenericFetchedData<GPATrendType>;
+  gpaTrend?: GenericFetchedData<GPATrendType>;
+  chartTitle?: string;
+  xAxisLabels?: string[];
+  yAxisFormatter?: (value: number) => string;
+  tooltipFormatter?: (value: number) => string;
+  series?: {
+    name: string;
+    data: number[];
+  }[];
 };
 
-function LineGraph({ recentSemesters, gpaTrend }: Props) {
+function LineGraph({ gpaTrend, chartTitle, xAxisLabels, yAxisFormatter, tooltipFormatter, series }: Props): React.ReactNode {
   const [chartType, setChartType] = useState<'line' | 'bar'>('line');
   const [chartData, setChartData] = useState<{
     options: {
@@ -77,7 +83,8 @@ function LineGraph({ recentSemesters, gpaTrend }: Props) {
         },
       },
       xaxis: {
-        categories: [] as string[],
+        categories: [],
+
         labels: {
           rotate: -45,
         },
@@ -110,63 +117,80 @@ function LineGraph({ recentSemesters, gpaTrend }: Props) {
   });
 
   useEffect(() => {
-    if (gpaTrend.state === 'done') {
-      setChartData({
+    if (gpaTrend && gpaTrend.state === 'done') {
+      setChartData(prev => ({
         options: {
-          ...chartData.options,
+          ...prev.options,
+
           xaxis: {
             categories: gpaTrend.data.season,
             labels: { rotate: -45 },
           },
         },
         series: [
           {
-            name: searchQueryLabel(recentSemesters),
+            name: chartTitle || '',
+
             data: gpaTrend.data.gpa,
           },
         ],
-      });
-    }
-  }, [gpaTrend, recentSemesters]);
-
-  const handleChartToggle = (
-    _event: React.MouseEvent<HTMLElement>,
-    newChartType: 'line' | 'bar' | null,
-  ) => {
-    if (newChartType) {
-      setChartType(newChartType);
+      }));
+    } else if (series) {
+      setChartData(prev => ({
+        options: {
+          ...prev.options,
+
+          xaxis: {
+            categories: xAxisLabels || [],
+            labels: { rotate: -45 },
+          },
+
+          yaxis: {
+            ...prev.options.yaxis,
+            labels: {
+              formatter:
+                yAxisFormatter || ((value: number) => value.toFixed(2)),
+            },
+          },
+
+          tooltip: {
+            y: {
+              formatter:
+                tooltipFormatter || ((value: number) => value.toFixed(3)),
+            },
+          },
+        },
+
+        series: series,
+      }));
     }
-  };
+  }, [gpaTrend, series, xAxisLabels, yAxisFormatter, tooltipFormatter]);
 
-  if (typeof gpaTrend === 'undefined' || gpaTrend.state === 'error') {
-    return null;
-  }
-  if (gpaTrend.state === 'loading') {
-    return (
-      <div className="p-2">
-        <Skeleton variant="rounded" className="w-full h-60 m-2" />
-      </div>
-    );
+  if (gpaTrend) {
+    if (gpaTrend.state === 'error') {
+      return null;
+    }
+    if (gpaTrend.state === 'loading') {
+      return (
+        <div className="p-2">
+          <Skeleton variant="rounded" className="w-full h-60 m-2" />
+        </div>
+      );
+    }
   }
 
+  const handleChartToggle = (_event: React.MouseEvent<HTMLElement>, newChartType: 'line' | 'bar' | null) => {
+    if (newChartType) setChartType(newChartType);
+  };
+
   return (
     <div className="p-2">
-      <ToggleButtonGroup
-        value={chartType}
-        exclusive
-        onChange={handleChartToggle}
-        className="mb-2"
-      >
-        <ToggleButton value="bar"></ToggleButton>
-        <ToggleButton value="line"></ToggleButton>
+      <ToggleButtonGroup value={chartType} exclusive onChange={handleChartToggle} className="mb-2">
+        <ToggleButton value="bar" />
+        <ToggleButton value="line" />
       </ToggleButtonGroup>
       <div className="h-64">
-        <Chart
-          options={chartData.options}
-          series={chartData.series}
-          type={chartType}
-          height={250}
-        />
+        <Chart options={chartData.options} series={chartData.series} type={chartType} height={250} />
       </div>
     </div>
   );