gpa better ui

unkn-wn · Dec 5, 2024 · 77e0c7b · 77e0c7b
1 parent 731e639
commit 77e0c7b
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 43 deletions.
diff --git a/src/components/OverallGpa.js b/src/components/OverallGpa.js
@@ -1,19 +1,29 @@
 import { calculateOverallGPA } from '@/lib/gpaUtils';
+import { Tooltip } from '@chakra-ui/react';
 
 const OverallGpa = ({ courseData, card }) => {
-  const { gpa, color } = calculateOverallGPA(courseData);
+  const { gpa, color, profCount, totalSemCount } = calculateOverallGPA(courseData);
 
   return (
-    <a className={`justify-center flex whitespace-nowrap
-      ${card ? 'text-sm px-2 py-1 mx-1 my-1 rounded-full border-2 border-yellow-700' : 'px-5 rounded-md'}`}
-      style={{
-        backgroundColor: color
-      }}
-      title="Total calculated GPA across all semesters and professors">
-      <span className={`my-auto ${card ? '' : 'text-lg'} font-black text-white`}>
-        GPA: {gpa === 0 ? "N/A" : gpa}
-      </span>
-    </a>
+    <Tooltip
+      label={`Averaged across ${totalSemCount} semester(s) and ${profCount} professor(s)`}
+      hasArrow
+      placement='auto'
+      bg='gray.900'
+      color='white'
+      openDelay={0}
+      fontSize='sm'
+      px={2}
+      py={1}
+    >
+      <div className={`justify-center flex whitespace-nowrap
+        ${card ? 'text-sm px-2 py-1 mx-1 my-1 rounded-full' : 'px-5 rounded-md'}`}
+        style={{ backgroundColor: color }}>
+        <span className={`my-auto ${card ? '' : 'text-lg'} font-black text-white`}>
+          GPA: {gpa === 0 ? "N/A" : gpa}
+        </span>
+      </div>
+    </Tooltip>
   );
 };
 

diff --git a/src/components/card.js b/src/components/card.js
@@ -41,17 +41,26 @@ const Card = ({ course, searchTerm }) => {
 
         <div onClick={() => handleLink()}>
           <h2 className="lg:text-lg md:text-lg font-bold text-white">{course.subjectCode} {course.courseCode}: {course.title}</h2>
-          <p className="lg:text-sm text-sm text-zinc-400 font-medium my-1">
-            {course.credits[1] > 1
-              ? `${course.credits[1]} Credits`
-              : `${course.credits[1]} Credit`}
-            {` | `}
-            {uniqueInstructors[0]}
-            {uniqueInstructors.length > 1 && ", "}
-            {uniqueInstructors.length > 1 &&
-              uniqueInstructors[1]
-            }
-          </p>
+
+          <div className="lg:text-sm text-sm text-zinc-400 font-medium my-1">
+            <div className="flex flex-row">
+              <p className="self-center">
+                {course.credits[1] > 1
+                  ? `${course.credits[1]} Credits`
+                  : `${course.credits[1]} Credit`}
+                {` | `}
+              </p>
+
+              <OverallGpa courseData={course} card />
+            </div>
+            <p>
+              {uniqueInstructors[0]}
+              {uniqueInstructors.length > 1 && ", "}
+              {uniqueInstructors.length > 1 &&
+                uniqueInstructors[1]
+              }
+            </p>
+          </div>
 
           <p className="text-sm text-zinc-300 mb-4 break-words grow">
             <span>{course.description.length > 300
@@ -61,18 +70,15 @@ const Card = ({ course, searchTerm }) => {
           </p>
 
           <div className="flex flex-row flex-wrap">
-            <OverallGpa courseData={course} card />
-
-            {course.sched.includes("Distance Learning") && <p className="text-sm px-2 py-1 mx-1 my-1 rounded-full border-solid border border-purple-500 bg-purple-300 whitespace-nowrap">
+            {course.sched.includes("Distance Learning") && <p className="text-sm text-white px-2 py-1 mx-1 my-1 rounded-full border-solid border bg-purple-600 border-purple-800 whitespace-nowrap">
               Distance Learning
             </p>}
             {availableSemesters.map((sem, i) => (
               (i < 2) && <span
-                className={`text-sm text-white px-2 py-1 mx-1 my-1 rounded-full whitespace-nowrap ${
-                  sem === CURRENT_SEMESTER
-                    ? 'bg-yellow-600 border-2 border-yellow-700'
-                    : 'bg-sky-800 border-2 border-sky-700'
-                }`}
+                className={`text-sm text-white px-2 py-1 mx-1 my-1 rounded-full whitespace-nowrap ${sem === CURRENT_SEMESTER
+                  ? 'bg-yellow-600 border-2 border-yellow-700'
+                  : 'bg-sky-800 border-2 border-sky-700'
+                  }`}
                 key={i}
               >
                 {sem}

diff --git a/src/lib/gpaUtils.js b/src/lib/gpaUtils.js
@@ -27,12 +27,14 @@ export const collectAllProfessors = (instructors) => {
 //     gpa: {
 //         "instr1": [3.11, "#ffffff"],
 //         "instr2": [3.55, "#ffffff"],
-//     }
+//     },
+//     totalSemCount: 2,
 // }
 export const calculateGradesAndGPA = (profs, gpaData) => {
     const grades = [];
     const gpa = {};
     let colorIndex = 0;
+    let totalSemCount = 0;
 
     for (const instructor of profs) {
         let avgGPA = 0;
@@ -71,8 +73,10 @@ export const calculateGradesAndGPA = (profs, gpaData) => {
             data: avgGradeDist,
             backgroundColor: color,
         });
+
+        totalSemCount += semesterCount;
     }
-    return { grades, gpa };
+    return { grades, gpa, totalSemCount };
 };
 
 // Average all data for all professors into grade array format like above ^^
@@ -99,15 +103,27 @@ export const getColor = (gpa) => {
 
     const perc = gpa / 4.0;
     const perc2 = perc * perc * 0.9;
-    const color1 = [221, 170, 51];
-    const color2 = [79, 0, 56];
 
-    const w1 = perc2;
-    const w2 = 1 - perc2;
+    const color1 = [122, 0, 0];    // red
+    const color2 = [180, 124, 34];   // yellow
+    const color3 = [75, 179, 29];    // green
+
+    let w1, w2, w3;
+    if (perc2 <= 0.5) {
+        // Blend between red and yellow for lower GPAs
+        w1 = (0.5 - perc2) * 2;
+        w2 = 1 - w1;
+        w3 = 0;
+    } else {
+        // Blend between yellow and green for higher GPAs
+        w1 = 0;
+        w2 = (1 - perc2) * 2;
+        w3 = 1 - w2;
+    }
 
-    const r = Math.round(color1[0] * w1 + color2[0] * w2 * 1);
-    const g = Math.round(color1[1] * w1 + color2[1] * w2 * 1);
-    const b = Math.round(color1[2] * w1 + color2[2] * w2 * 1);
+    const r = Math.round(color1[0] * w1 + color2[0] * w2 + color3[0] * w3);
+    const g = Math.round(color1[1] * w1 + color2[1] * w2 + color3[1] * w3);
+    const b = Math.round(color1[2] * w1 + color2[2] * w2 + color3[2] * w3);
 
     return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 };
@@ -179,7 +195,9 @@ export const processGpaData = (course, recentOnly = false) => {
 // Calculate overall GPA across all professors for a course, outputs
 // {
 //     gpa: 3.11,
-//     color: "#ffffff" (based on getColor)
+//     color: "#ffffff" (based on getColor),
+//     profCount: 2,
+//     totalSemCount: 4,
 // }
 export const calculateOverallGPA = (courseData) => {
     const allProfs = [];
@@ -193,7 +211,7 @@ export const calculateOverallGPA = (courseData) => {
             allProfs.push(prof);
         }
 
-        const { gpa } = calculateGradesAndGPA(allProfs, courseData.gpa);
+        const { gpa, totalSemCount } = calculateGradesAndGPA(allProfs, courseData.gpa);
 
         // Calculate average GPA across all professors
         for (const prof in gpa) {
@@ -206,13 +224,17 @@ export const calculateOverallGPA = (courseData) => {
         const avgGpa = profCount > 0 ? (totalGpa / profCount).toFixed(2) : 0;
         return {
             gpa: avgGpa,
-            color: getColor(avgGpa)
+            color: getColor(avgGpa),
+            profCount,
+            totalSemCount,
         };
     } catch (e) {
         console.error("Overall GPA not found: ", e);
         return {
             gpa: 0,
-            color: getColor(0)
+            color: getColor(0),
+            profCount: 0,
+            totalSemCount: 0,
         };
     }
 };