Tooltip and chart styling fixes (#535)

* Tooltip and chart styling fixes * Tooltip and chart styling fixes * Un-deleted .env.example * Put grade colors in an enum instead of array * fix prettier lint errors * delete unused file --------- Co-authored-by: Awesome-E <[email protected]>
icssc · Jan 14, 2025 · ee83a46 · ee83a46
1 parent 78c14ee
commit ee83a46
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 50 deletions.
diff --git a/site/src/component/GradeDist/Chart.tsx b/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 { GradeColors } from './gradeColors.ts';
+import { tooltipStyle } from './tooltipStyle.ts';
 
 interface ChartProps {
   gradeData: GradesRaw;
@@ -70,61 +70,47 @@ export default class Chart extends React.Component<ChartProps> {
         id: 'A',
         label: 'A',
         A: gradeACount,
-        color: '#2484C6',
+        color: GradeColors.A,
       },
       {
         id: 'B',
         label: 'B',
         B: gradeBCount,
-        color: '#54B058',
+        color: GradeColors.B,
       },
       {
         id: 'C',
         label: 'C',
         C: gradeCCount,
-        color: '#F9CE50',
+        color: GradeColors.C,
       },
       {
         id: 'D',
         label: 'D',
         D: gradeDCount,
-        color: '#ED9237',
+        color: GradeColors.D,
       },
       {
         id: 'F',
         label: 'F',
         F: gradeFCount,
-        color: '#E67237',
+        color: GradeColors.F,
       },
       {
         id: 'P',
         label: 'P',
         P: gradePCount,
-        color: '#4AB486',
+        color: GradeColors.P,
       },
       {
         id: 'NP',
         label: 'NP',
         NP: gradeNPCount,
-        color: '#E36436',
+        color: GradeColors.NP,
       },
     ];
   };
 
-  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 +120,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>
@@ -184,7 +170,7 @@ export default class Chart extends React.Component<ChartProps> {
                 legendOffset: 36,
               }}
               enableLabel={false}
-              colors={colors}
+              colors={Object.values(GradeColors)}
               theme={this.getTheme(darkMode)}
               tooltipLabel={(datum) => String(datum.id)}
               tooltip={this.styleTooltip}

diff --git a/site/src/component/GradeDist/Colors.tsx b/site/src/component/GradeDist/Colors.tsx
@@ -0,0 +1 @@
+export const Colors = ['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#EBEBEB', '#EBEBEB'];
diff --git a/site/src/component/GradeDist/Pie.tsx b/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 { GradeColors } from './gradeColors.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: GradeColors.P,
         },
         {
           id: 'NP',
           label: 'NP',
           value: gradeNPCount,
-          color: '#E36436',
+          color: GradeColors.NP,
         },
       ];
       return data;
@@ -102,43 +104,43 @@ export default class Pie extends React.Component<PieProps> {
         id: 'A',
         label: 'A',
         value: gradeACount,
-        color: '#60A3D1',
+        color: GradeColors.A,
       },
       {
         id: 'B',
         label: 'B',
         value: gradeBCount,
-        color: '#81C284',
+        color: GradeColors.B,
       },
       {
         id: 'C',
         label: 'C',
         value: gradeCCount,
-        color: '#F5D77F',
+        color: GradeColors.C,
       },
       {
         id: 'D',
         label: 'D',
         value: gradeDCount,
-        color: '#ECAD6D',
+        color: GradeColors.D,
       },
       {
         id: 'F',
         label: 'F',
         value: gradeFCount,
-        color: '#E8966D',
+        color: GradeColors.F,
       },
       {
         id: 'P',
         label: 'P',
         value: gradePCount,
-        color: '#4AB486',
+        color: GradeColors.P,
       },
       {
         id: 'NP',
         label: 'NP',
         value: gradeNPCount,
-        color: '#E36436',
+        color: GradeColors.NP,
       },
     ];
     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={Object.values(GradeColors)}
           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={{

diff --git a/site/src/component/GradeDist/gradeColors.ts b/site/src/component/GradeDist/gradeColors.ts
@@ -0,0 +1,9 @@
+export enum GradeColors {
+  A = '#60A3D1',
+  B = '#81C284',
+  C = '#F5D77F',
+  D = '#ECAD6D',
+  F = '#E8966D',
+  P = '#4AB486',
+  NP = '#E36436',
+}
diff --git a/site/src/component/GradeDist/tooltipStyle.ts b/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',
+    },
+  },
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const Colors = ['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#EBEBEB', '#EBEBEB'];