Tooltip and chart styling fixes

api/.env.example

@@ -10,4 +10,4 @@ PORT=8080 # should match the port on the frontend proxy under site/vite.config.t
 # GOOGLE_SECRET=<secret>
 # GRECAPTCHA_SECRET=<secret>
 # ADMIN_EMAILS=["<your email>"]
-# ANTEATER_API_KEY=<secret>
+# ANTEATER_API_KEY=<secret>

site/src/component/GradeDist/Chart.tsx

@@ -4,8 +4,8 @@ import { ResponsiveBar, BarTooltipProps, BarDatum } from '@nivo/bar';
 import ThemeContext from '../../style/theme-context';
 import { type Theme } from '@nivo/core';
 import { GradesRaw } from '@peterportal/types';
-
-const colors = ['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#EBEBEB', '#EBEBEB'];
+import { colors } from './colors.ts';
+import { tooltipStyle } from './tooltipStyle.ts';
 
 interface ChartProps {
   gradeData: GradesRaw;
@@ -70,61 +70,46 @@ export default class Chart extends React.Component<ChartProps> {
         id: 'A',
         label: 'A',
         A: gradeACount,
-        color: '#2484C6',
       },
       {
         id: 'B',
         label: 'B',
         B: gradeBCount,
-        color: '#54B058',
+        color: colors[1],
       },
       {
         id: 'C',
         label: 'C',
         C: gradeCCount,
-        color: '#F9CE50',
+        color: colors[2],
       },
       {
         id: 'D',
         label: 'D',
         D: gradeDCount,
-        color: '#ED9237',
+        color: colors[3],
       },
       {
         id: 'F',
         label: 'F',
         F: gradeFCount,
-        color: '#E67237',
+        color: colors[4],
       },
       {
         id: 'P',
         label: 'P',
         P: gradePCount,
-        color: '#4AB486',
+        color: colors[5],
       },
       {
         id: 'NP',
         label: 'NP',
         NP: gradeNPCount,
-        color: '#E36436',
+        color: colors[6],
       },
     ];
   };
 
-  tooltipStyle: Theme = {
-    tooltip: {
-      container: {
-        background: 'rgba(0,0,0,.87)',
-        color: '#ffffff',
-        fontSize: '1.2rem',
-        outline: 'none',
-        margin: 0,
-        padding: '0.25em 0.5em',
-        borderRadius: '2px',
-      },
-    },
-  };
-
   /*
    * Indicate how the tooltip should look like when users hover over the bar
    * Code is slightly modified from: https://codesandbox.io/s/nivo-scatterplot-
@@ -134,7 +119,7 @@ export default class Chart extends React.Component<ChartProps> {
    */
   styleTooltip = (props: BarTooltipProps<BarDatum>) => {
     return (
-      <div style={this.tooltipStyle.tooltip?.container}>
+      <div style={tooltipStyle.tooltip?.container}>
         <strong>
           {props.label}: {props.data[props.label]}
         </strong>

site/src/component/GradeDist/Colors.tsx

@@ -0,0 +1 @@
+export const Colors = ['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#EBEBEB', '#EBEBEB'];

site/src/component/GradeDist/Pie.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { ResponsivePie, PieTooltipProps } from '@nivo/pie';
 
 import { GradesRaw } from '@peterportal/types';
+import { colors } from './colors.ts';
+import { tooltipStyle } from './tooltipStyle.ts';
 
 const gradeScale = ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-'];
 const gpaScale = [4.0, 3.7, 3.3, 3.0, 2.7, 2.3, 2.0, 1.7, 1.3, 1.0, 0, 7];
@@ -27,7 +29,7 @@ export default class Pie extends React.Component<PieProps> {
   averageGrade = '';
   averagePNP = '';
 
-  getClassData = () => {
+  getClassData = (): Slice[] => {
     let gradeACount = 0,
       gradeBCount = 0,
       gradeCCount = 0,
@@ -85,13 +87,13 @@ export default class Pie extends React.Component<PieProps> {
           id: 'P',
           label: 'P',
           value: gradePCount,
-          color: '#4AB486',
+          color: colors[5],
         },
         {
           id: 'NP',
           label: 'NP',
           value: gradeNPCount,
-          color: '#E36436',
+          color: colors[6],
         },
       ];
       return data;
@@ -102,43 +104,43 @@ export default class Pie extends React.Component<PieProps> {
         id: 'A',
         label: 'A',
         value: gradeACount,
-        color: '#60A3D1',
+        color: colors[0],
       },
       {
         id: 'B',
         label: 'B',
         value: gradeBCount,
-        color: '#81C284',
+        color: colors[1],
       },
       {
         id: 'C',
         label: 'C',
         value: gradeCCount,
-        color: '#F5D77F',
+        color: colors[2],
       },
       {
         id: 'D',
         label: 'D',
         value: gradeDCount,
-        color: '#ECAD6D',
+        color: colors[3],
       },
       {
         id: 'F',
         label: 'F',
         value: gradeFCount,
-        color: '#E8966D',
+        color: colors[4],
       },
       {
         id: 'P',
         label: 'P',
         value: gradePCount,
-        color: '#4AB486',
+        color: colors[5],
       },
       {
         id: 'NP',
         label: 'NP',
         value: gradeNPCount,
-        color: '#E36436',
+        color: colors[6],
       },
     ];
     return data;
@@ -150,6 +152,16 @@ export default class Pie extends React.Component<PieProps> {
     this.averageGrade = gradeScale[i];
   }
 
+  styleTooltip = (props: PieTooltipProps<Slice>) => {
+    return (
+      <div style={tooltipStyle.tooltip?.container}>
+        <strong>
+          {props.datum.id}: {((props.datum.value / this.total) * 100).toFixed(2)}%
+        </strong>
+      </div>
+    );
+  };
+
   render() {
     return (
       <div style={{ width: '100%', position: 'relative' }}>
@@ -165,24 +177,11 @@ export default class Pie extends React.Component<PieProps> {
           enableArcLinkLabels={false}
           innerRadius={0.8}
           padAngle={2}
-          colors={['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#4AB486', '#E36436']}
+          colors={colors}
           cornerRadius={3}
           borderWidth={1}
           borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
-          tooltip={(props: PieTooltipProps<Slice>) => (
-            <div
-              style={{
-                color: '#FFFFFF',
-                background: 'rgba(0,0,0,.87)',
-                paddingLeft: '0.5em',
-                paddingRight: '0.5em',
-              }}
-            >
-              <strong>
-                {props.datum.id}: {((props.datum.value / this.total) * 100).toFixed(2)}%
-              </strong>
-            </div>
-          )}
+          tooltip={this.styleTooltip}
         />
         <div
           style={{

site/src/component/GradeDist/TooltipStyle.tsx

@@ -0,0 +1,17 @@
+import { type Theme } from '@nivo/core';
+
+export const TooltipStyle: Theme = {
+  tooltip: {
+    container: {
+      background: 'rgba(0,0,0,.87)',
+      color: '#ffffff',
+      fontSize: '1.2rem',
+      outline: 'none',
+      margin: 0,
+      padding: '0.25em 0.5em',
+      borderRadius: '2px',
+      paddingLeft: '0.5em',
+      paddingRight: '0.5em',
+    },
+  },
+};

site/src/component/GradeDist/colors.ts

@@ -0,0 +1 @@
+export const colors = ['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#4AB486', '#E36436'];

site/src/component/GradeDist/tooltipStyle.ts

@@ -0,0 +1,17 @@
+import { type Theme } from '@nivo/core';
+
+export const tooltipStyle: Theme = {
+  tooltip: {
+    container: {
+      background: 'rgba(0,0,0,.87)',
+      color: '#ffffff',
+      fontSize: '1.2rem',
+      outline: 'none',
+      margin: 0,
+      padding: '0.25em 0.5em',
+      borderRadius: '2px',
+      paddingLeft: '0.5em',
+      paddingRight: '0.5em',
+    },
+  },
+};

site/src/component/PrereqTree/PrereqTree.tsx

@@ -72,7 +72,7 @@ const PrereqTreeNode: FC<TreeProps> = (props) => {
           }
           content={
             props.prerequisiteNames[
-              prereq.prereqType === 'course' ? prereq.courseId.replace(/ /g, '') : (prereq.examName ?? '')
+              prereq.prereqType === 'course' ? prereq.courseId.replace(/ /g, '') : prereq.examName ?? ''
             ]?.title ?? ''
           }
           node={'prerequisite-node'}

site/src/component/SideInfo/SideInfo.tsx

@@ -241,8 +241,8 @@ const SideInfo: FC<SideInfoProps> = (props) => {
             reviewKey={highestReview}
             displayName={
               props.searchType == 'course'
-                ? (Object.values(props.course?.instructors ?? {})?.find(({ ucinetid }) => ucinetid === highestReview)
-                    ?.name ?? '')
+                ? Object.values(props.course?.instructors ?? {})?.find(({ ucinetid }) => ucinetid === highestReview)
+                    ?.name ?? ''
                 : props.professor?.courses[highestReview]
                   ? props.professor?.courses[highestReview].department +
                     ' ' +
@@ -259,8 +259,8 @@ const SideInfo: FC<SideInfoProps> = (props) => {
             reviewKey={lowestReview}
             displayName={
               props.searchType == 'course'
-                ? (Object.values(props.course?.instructors ?? {})?.find(({ ucinetid }) => ucinetid === lowestReview)
-                    ?.name ?? '')
+                ? Object.values(props.course?.instructors ?? {})?.find(({ ucinetid }) => ucinetid === lowestReview)
+                    ?.name ?? ''
                 : props.professor?.courses[lowestReview]
                   ? props.professor?.courses[lowestReview].department +
                     ' ' +