import linegraph in singlegradeinfo

please

Author: sparklingwter

Diff for: package-lock.json

@@ -23,7 +23,7 @@
     "@mui/material": "^6.1.2",
     "@next/third-parties": "^14.2.15",
     "@vercel/speed-insights": "^1.0.12",
-    "apexcharts": "^4.0.0",
+    "apexcharts": "^4.4.0",
     "autoprefixer": "^10.4.2",
     "autosuggest-highlight": "^3.3.4",
     "css-loader": "^7.1.2",
@@ -38,7 +38,7 @@
     "postcss": "^8.4.6",
     "postcss-loader": "^8.1.1",
     "react": "^18.2.0",
-    "react-apexcharts": "^1.6.0",
+    "react-apexcharts": "^1.7.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-resizable-panels": "^2.1.4",

Diff for: package.json

@@ -2,6 +2,7 @@ import { Skeleton } from '@mui/material';
 import React from 'react';
 
 import BarGraph from '@/components/graph/BarGraph/barGraph';
+import LineGraph from '@/components/graph/LineGraph/lineGraph';
 import {
   type SearchQuery,
   searchQueryLabel,
@@ -14,6 +15,24 @@ function convertNumbersToPercents(distribution: GradesType): number[] {
     (frequencyOfLetterGrade) => (frequencyOfLetterGrade / total) * 100,
   );
 }
+function getRecentSemesters() {
+  const recentSemesters: string[] = [];
+  const today = new Date();
+  const mm = today.getMonth() + 1;
+  let yyyy = today.getFullYear();
+  let season = mm <= 5 ? 'S' : 'F';
+
+  for (let i = 6; i >= 1; i--) {
+    if (season === 'S') {
+      yyyy -= 1;
+      season = 'F';
+    } else {
+      season = 'S';
+    }
+    recentSemesters.push(yyyy.toString().substring(2) + season);
+  }
+  return recentSemesters;
+}
 
 type Props = {
   title?: string;
@@ -42,6 +61,10 @@ function SingleGradesInfo({ title, course, grades }: Props) {
   }
 
   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,
+  ];
 
   return (
     <div className="p-2">
@@ -88,6 +111,10 @@ function SingleGradesInfo({ title, course, grades }: Props) {
           <b>{grades.data.gpa === -1 ? 'None' : grades.data.gpa.toFixed(3)}</b>
         </p>
       </div>
+      <div className="h-64">
+        <LineGraph course ={recentSemesters} 
+        gpa={gpaValues} />
+      </div>
     </div>
   );
 }

Diff for: src/components/common/SingleGradesInfo/singleGradesInfo.tsx

@@ -1,21 +1,25 @@
 import { Skeleton, ToggleButton, ToggleButtonGroup } from '@mui/material';
-import type { ApexOptions } from 'apexcharts';
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Chart from 'react-apexcharts';
 
-import { type SearchQuery, searchQueryLabel } from '@/modules/SearchQuery/SearchQuery';
+import {
+  type SearchQuery,
+  searchQueryLabel,
+} from '@/modules/SearchQuery/SearchQuery';
 import type { GenericFetchedData } from '@/pages/dashboard/index';
+
 export type GPATrendType = {
-    years: string[];
-    gpa_values: number[];
-  };
+  season: string[];
+  years: string[];
+  gpa: number[];
+};
 
 type Props = {
-  course: SearchQuery;
+  recentSemesters: SearchQuery;
   gpaTrend: GenericFetchedData<GPATrendType>;
 };
 
-function GPATrendGraph({ course, gpaTrend }: Props) {
+function LineGraph({ recentSemesters, gpaTrend }: Props) {
   const [chartType, setChartType] = useState<'line' | 'bar'>('line');
   const [chartData, setChartData] = useState<{
     options: {
@@ -97,36 +101,43 @@ function GPATrendGraph({ course, gpaTrend }: Props) {
         },
       },
     },
-    series: [{
-      name: '',
-      data: [],
-    }],
+    series: [
+      {
+        name: '',
+        data: [],
+      },
+    ],
   });
 
   useEffect(() => {
     if (gpaTrend.state === 'done') {
       setChartData({
         options: {
           ...chartData.options,
-          xaxis: { 
-            categories: gpaTrend.data.years,
-            labels: { rotate: -45 } 
+          xaxis: {
+            categories: gpaTrend.data.season,
+            labels: { rotate: -45 },
           },
         },
-        series: [{
-          name: searchQueryLabel(course),
-          data: gpaTrend.data.gpa_values,
-        }],
+        series: [
+          {
+            name: searchQueryLabel(recentSemesters),
+            data: gpaTrend.data.gpa,
+          },
+        ],
       });
     }
-  }, [gpaTrend, course]);
+  }, [gpaTrend, recentSemesters]);
 
-  const handleChartToggle = (_event: React.MouseEvent<HTMLElement>, newChartType: 'line' | 'bar' | null) => {
+  const handleChartToggle = (
+    _event: React.MouseEvent<HTMLElement>,
+    newChartType: 'line' | 'bar' | null,
+  ) => {
     if (newChartType) {
       setChartType(newChartType);
     }
   };
-  
+
   if (typeof gpaTrend === 'undefined' || gpaTrend.state === 'error') {
     return null;
   }
@@ -146,8 +157,8 @@ function GPATrendGraph({ course, gpaTrend }: Props) {
         onChange={handleChartToggle}
         className="mb-2"
       >
-        <ToggleButton value="bar">📊</ToggleButton>
-        <ToggleButton value="line">📈</ToggleButton>
+        <ToggleButton value="bar"></ToggleButton>
+        <ToggleButton value="line"></ToggleButton>
       </ToggleButtonGroup>
       <div className="h-64">
         <Chart
@@ -161,4 +172,4 @@ function GPATrendGraph({ course, gpaTrend }: Props) {
   );
 }
 
-export default GPATrendGraph;
+export default LineGraph;

Diff for: src/components/graph/LineGraph/lineGraph.tsx

@@ -943,6 +943,4 @@ export const Dashboard: NextPage<{ pageTitle: string }> = ({
   );
 };
 
-
-
 export default Dashboard;

Diff for: src/pages/dashboard/index.tsx

@@ -25,7 +25,7 @@
     "verbatimModuleSyntax": true
   },
   "include": ["src", "next-env.d.ts", "**/*.ts", "**/*.tsx", "/**/**/*/.tsx"],
-  "exclude": ["node_modules", "**/tailwind.config.js"],
+  "exclude": ["node_modules"],
   "ts-node": {
     "transpileOnly": true,
     "moduleTypes": {