Adds number of students along with percentages (#57)

* adds toggle to switch between percentages and raw numbers

* reverts toggle and adds numbers to tooltip

* new tooltip design

---------

Co-authored-by: Alexander Liu <[email protected]>

src/components/Graph/Graph.tsx

@@ -92,22 +92,25 @@ interface gradeValue {
 }
 
 // bar colors if there is only one search query
-const letterGradeBarColor = (opacity: number) =>
-  `rgba(54, 162, 235, ${opacity})`;
+const letterGradeBarColor = (opacity: number) => `rgba(54, 162, 235, ${opacity})`;
 const pnpBarColor = (opacity: number) => `rgba(255, 206, 86, ${opacity})`;
+
 const chartColorsSingleDark = Array(5)
   .fill(letterGradeBarColor(0.9))
   .concat(Array(2).fill(pnpBarColor(0.9)));
+
 const chartColorsSingleLight = Array(5)
   .fill(letterGradeBarColor(0.7))
   .concat(Array(2).fill(pnpBarColor(0.7)));
+
 const chartColorsMultipleDark = [
   "rgba(34, 87, 122, 0.9)",
   "rgba(56, 163, 165, 0.9)",
   "rgba(87, 204, 153, 0.9)",
   "rgba(128, 237, 153, 0.9)",
   "rgba(199, 249, 204, 0.9)",
 ];
+
 const chartColorsMultipleLight = [
   "rgba(34, 87, 122, 0.7)",
   "rgba(56, 163, 165, 0.7)",
@@ -121,6 +124,7 @@ const Graph = () => {
 
   const [queryIdsValue, setQueryIdsValue] = useState<number[]>([]);
   const [gradeValues, setGradeValues] = useState<gradeValue[]>([]);
+  const [gradeValuesRaw, setGradeValuesRaw] = useState<gradeValue[]>([]);
 
   const { colorScheme } = useContext(ColorSchemeContext);
 
@@ -160,14 +164,13 @@ const Graph = () => {
     });
     Promise.all(graphQueries).then((values) => {
       const newGradeValues: gradeValue[] = [
-        { id: "A" },
-        { id: "B" },
-        { id: "C" },
-        { id: "D" },
-        { id: "F" },
-        { id: "P" },
-        { id: "NP" },
+        { id: "A" }, { id: "B" }, { id: "C" }, { id: "D" }, { id: "F" }, { id: "P" }, { id: "NP" },
       ];
+
+      const newGradeValuesRaw: gradeValue[] = [
+        { id: "A" }, { id: "B" }, { id: "C" }, { id: "D" }, { id: "F" }, { id: "P" }, { id: "NP" },
+      ];
+
       values.map(({ data }, i) => {
         const gradeValue: number[] = [];
         const gradesAggregate = data.grades.aggregate;
@@ -179,20 +182,24 @@ const Graph = () => {
           gradesAggregate.sum_grade_f_count +
           gradesAggregate.sum_grade_p_count +
           gradesAggregate.sum_grade_np_count;
-        gradeValue.push(data.grades.aggregate.sum_grade_a_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_b_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_c_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_d_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_f_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_p_count / total);
-        gradeValue.push(data.grades.aggregate.sum_grade_np_count / total);
+        gradeValue.push(data.grades.aggregate.sum_grade_a_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_b_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_c_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_d_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_f_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_p_count);
+        gradeValue.push(data.grades.aggregate.sum_grade_np_count);
         // This is probably a little hacky? but it works for now.
         // Basically it relies on the fact that the order of the results are the same as the ids, which should always be the case because they're both derived from the query context.
         newGradeValues.forEach((newGradeValue, j) => {
+          newGradeValue[queryIdsValue[i]] = gradeValue[j] / total;
+        });
+        newGradeValuesRaw.forEach((newGradeValue, j) => {
           newGradeValue[queryIdsValue[i]] = gradeValue[j];
         });
       });
       setGradeValues(newGradeValues);
+      setGradeValuesRaw(newGradeValuesRaw);
     });
   }, [queryIdsValue, queries]);
 
@@ -232,7 +239,20 @@ const Graph = () => {
       padding={0.25}
       innerPadding={6}
       borderRadius={4}
-      tooltipLabel={(data) => `${data.indexValue}`}
+      tooltip={({id, value, index, indexValue, color}) => (
+          <div className="flex flex-col items-center shadow rounded-sm p-1.5 text-xs text-black bg-neutral-50 dark:text-white dark:bg-neutral-900">
+            <div className="flex flex-row items-center">
+              <div
+                  className="h-[11px] w-[11px] mr-1"
+                  style={{ backgroundColor: color }}
+              />
+              <span className="pr-1"><strong>{indexValue}</strong></span>
+            </div>
+            <div className="border-b-[1px] w-full mb-0.5" />
+            <span>{(value*100).toFixed(2)}%</span>
+            <span>{gradeValuesRaw[index][id]} Students</span>
+          </div>
+      )}
       {...props}
     />
   );