Remove box+whisker+stdev (#100)

* Remove box and whisker and standard deviation bar graphs * Prettier * Average calc fix * Remove average graph, move to expandableSearchGrid * Revert subtitle addition * Prettier * Add question mark tooltip disclaimer * Prettier * Revert autocomplete_graph.json * Don't show question mark on loading --------- Co-authored-by: William Skaggs <wskaggs3262@gmail.com>
UTDNebula · Oct 12, 2023 · fee265d · fee265d
1 parent 77e7ab1
commit fee265d
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 103 deletions.
diff --git a/components/common/ExpandableSearchGrid/expandableSearchGrid.tsx b/components/common/ExpandableSearchGrid/expandableSearchGrid.tsx
@@ -12,6 +12,7 @@ import { SearchTermCard } from '../SearchTermCard/searchTermCard';
 type ExpandableSearchGridProps = {
   onChange: (searchTerms: SearchQuery[]) => void;
   studentTotals: number[];
+  averageData: number[];
 };
 
 /**
@@ -22,6 +23,7 @@ type ExpandableSearchGridProps = {
 export const ExpandableSearchGrid = ({
   onChange,
   studentTotals,
+  averageData,
 }: ExpandableSearchGridProps) => {
   const router = useRouter();
 
@@ -87,34 +89,38 @@ export const ExpandableSearchGrid = ({
       {searchTerms.map((option: SearchQuery, index: number) => (
         <SearchTermCard
           primaryText={searchQueryLabel(option)}
-          secondaryText={studentTotalFormatter(studentTotals[index])}
+          secondaryText={secondaryTextFormatter(
+            studentTotals[index],
+            averageData[index],
+          )}
           key={index}
           index={index}
           legendColor={searchQueryColors[index]}
           onCloseButtonClicked={deleteSearchTerm}
+          loading={studentTotals[index] === -1 || averageData[index] === -1}
         />
       ))}
       {searchTerms.length < 3 ? (
-        <Card className="bg-primary-light rounded-none" variant="outlined">
-          <CardContent className="flex flex-col justify-center items-start p-3">
-            <SearchBar
-              selectSearchValue={addSearchTerm}
-              value={value}
-              setValue={setValue}
-              disabled={searchDisabled}
-            />
-          </CardContent>
+        <Card className="bg-primary-light rounded-none flex flex-col justify-center items-start p-3">
+          <SearchBar
+            selectSearchValue={addSearchTerm}
+            value={value}
+            setValue={setValue}
+            disabled={searchDisabled}
+          />
         </Card>
       ) : null}
     </div>
   );
 };
 
-function studentTotalFormatter(total: number) {
-  if (total === -1) {
-    return 'Loading...';
-  }
-  return total.toLocaleString('en-US') + ' grades';
+function secondaryTextFormatter(total: number, gpa: number) {
+  return (
+    total.toLocaleString('en-US') +
+    ' grades | ' +
+    Number(gpa).toFixed(2) +
+    ' average GPA'
+  );
 }
 
 function searchQueriesLabel(queries: SearchQuery[]): string {

diff --git a/components/common/SearchTermCard/searchTermCard.tsx b/components/common/SearchTermCard/searchTermCard.tsx
@@ -1,5 +1,5 @@
-import { Close } from '@mui/icons-material';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Close, Help } from '@mui/icons-material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import Card from '@mui/material/Card';
 import * as React from 'react';
 
@@ -12,6 +12,7 @@ type SearchTermCardProps = {
   index: number;
   onCloseButtonClicked: (index: number) => void;
   legendColor: string;
+  loading: boolean;
 };
 
 /**
@@ -25,35 +26,27 @@ export const SearchTermCard = (props: SearchTermCardProps) => {
   }
 
   return (
-    <Card
-      className="bg-primary-light"
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderRadius: 0,
-      }}
-      variant="outlined"
-    >
+    <Card className="bg-primary-light p-2 flex flex-row justify-between items-center rounded-none">
       <div className="float-left flex align-middle place-items-center">
         <Box
+          className="rounded-full w-5 h-5 float-left mr-2 ml-2"
           sx={{
             backgroundColor: props.legendColor,
-            borderRadius: 100,
-            width: '20px',
-            height: '20px',
-            float: 'left',
-            marginRight: '8px',
-            marginLeft: '8px',
           }}
         />
-        <Typography className="leading-tight text-lg text-gray-600 dark:text-gray-200">
-          {props.primaryText}
-          <span className="block text-sm text-gray-500 dark:text-gray-300">
-            {props.secondaryText}
+        <div>
+          <Typography className="leading-tight text-lg text-gray-600 dark:text-gray-200">
+            {props.primaryText}
+          </Typography>
+          <span className="block text-sm text-gray-500 dark:text-gray-300 inline">
+            {props.loading ? 'Loading...' : props.secondaryText}
           </span>
-        </Typography>
+          {props.loading ? null : (
+            <Tooltip title="Avergae GPA excludes dropped grades" arrow>
+              <Help className="inline fill-primary text-base ml-0.5 mb-0.5" />
+            </Tooltip>
+          )}
+        </div>
       </div>
       <div className="float-right">
         <IconButton aria-label="play/pause" onClick={handleCloseClick}>

diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
@@ -113,9 +113,7 @@ export const Dashboard: NextPage = () => {
 
   const [fullGradesData, setFullGradesData] = useState<fullGradesType[]>([]);
   const [gradesData, setGradesData] = useState<gradesType[]>([]);
-  const [GPAData, setGPAData] = useState<gradesType[]>([]);
-  const [averageData, setAverageData] = useState<gradesType[]>([]);
-  const [stdevData, setStdevData] = useState<gradesType[]>([]);
+  const [averageData, setAverageData] = useState([-1, -1, -1]);
   const [studentTotals, setStudentTotals] = useState([-1, -1, -1]);
 
   const [professorInvolvingSearchTerms, setProfessorInvolvingSearchTerms] =
@@ -265,8 +263,9 @@ export const Dashboard: NextPage = () => {
       };
     });
 
-    const newDat: gradesType[] = [];
+    const newGradesData: gradesType[] = [];
     const newStudentTotals = [-1, -1, -1];
+    const newAverageData: number[] = [];
     for (let i = 0; i < partialGradesData.length; i++) {
       const total: number = partialGradesData[i].data.reduce(
         (accumulator, currentValue) => accumulator + currentValue,
@@ -276,47 +275,28 @@ export const Dashboard: NextPage = () => {
       const normalized: number[] = partialGradesData[i].data.map(
         (value) => (value / total) * 100,
       );
-      newDat[i] = {
+      newGradesData[i] = {
         name: partialGradesData[i].name,
         data: normalized,
       };
-    }
-    setGradesData(newDat);
-    setStudentTotals(newStudentTotals);
 
-    const newGPADat: gradesType[] = [];
-    const newAverageDat: gradesType[] = [];
-    const newStdevDat: gradesType[] = [];
-    for (let i = 0; i < partialGradesData.length; i++) {
       const GPALookup = [
         4, 4, 3.67, 3.33, 3, 2.67, 2.33, 2, 1.67, 1.33, 1, 0.67, 0,
       ];
-      let GPAGrades: number[] = [];
-      for (let j = 0; j < partialGradesData[i].data.length - 1; j++) {
-        GPAGrades = GPAGrades.concat(
-          Array(partialGradesData[i].data[j]).fill(GPALookup[j]),
-        );
-      }
-      newGPADat.push({ name: partialGradesData[i].name, data: GPAGrades });
-      const mean =
-        GPAGrades.reduce((partialSum, a) => partialSum + a, 0) /
-        GPAGrades.length;
-      newAverageDat.push({
-        name: partialGradesData[i].name,
-        data: [mean],
-      });
-      const stdev = Math.sqrt(
-        GPAGrades.reduce((partialSum, a) => partialSum + (a - mean) ** 2, 0) /
-          GPAGrades.length,
+
+      newAverageData.push(
+        GPALookup.reduce(
+          (accumulator, currentValue, index) =>
+            accumulator + currentValue * partialGradesData[i].data[index],
+          0,
+        ) /
+          (total -
+            partialGradesData[i].data[partialGradesData[i].data.length - 1]),
       );
-      newStdevDat.push({
-        name: partialGradesData[i].name,
-        data: [stdev],
-      });
     }
-    setGPAData(newGPADat);
-    setAverageData(newAverageDat);
-    setStdevData(newStdevDat);
+    setGradesData(newGradesData);
+    setStudentTotals(newStudentTotals);
+    setAverageData(newAverageData);
   }, [fullGradesData, startingSession, endingSession]);
 
   let gradesPage;
@@ -408,34 +388,6 @@ export const Dashboard: NextPage = () => {
               series={gradesData}
             />
           </Card>
-          <Card className="h-96 p-4 m-4" elevation={darkModeElevation}>
-            <GraphChoice
-              form="BoxWhisker"
-              title="GPA Box and Whisker"
-              yaxisFormatter={(value) => Number(value).toFixed(2)}
-              series={GPAData}
-            />
-          </Card>
-          <div className="grid grid-cols-1 md:grid-cols-2">
-            <Card className="h-96 p-4 m-4" elevation={darkModeElevation}>
-              <GraphChoice
-                form="Vertical"
-                title="GPA Averages"
-                xaxisLabels={['Average']}
-                yaxisFormatter={(value) => Number(value).toFixed(2)}
-                series={averageData}
-              />
-            </Card>
-            <Card className="h-96 p-4 m-4" elevation={darkModeElevation}>
-              <GraphChoice
-                form="Vertical"
-                title="GPA Standard Deviations"
-                xaxisLabels={['Standard Deviation']}
-                yaxisFormatter={(value) => Number(value).toFixed(2)}
-                series={stdevData}
-              />
-            </Card>
-          </div>
         </div>
       </>
     );
@@ -583,6 +535,7 @@ export const Dashboard: NextPage = () => {
         <ExpandableSearchGrid
           onChange={searchTermsChange}
           studentTotals={studentTotals}
+          averageData={averageData}
         />
         <div className="w-full h-5/6 justify-center">
           <div className="w-full h-5/6 relative min-h-full">