Made an enum for grade colors instead of an array

icssc · Jan 13, 2025 · aa641b4 · aa641b4
1 parent f863e1a
commit aa641b4
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 21 deletions.
diff --git a/api/.env.example b/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>
diff --git a/site/src/component/GradeDist/Chart.tsx b/site/src/component/GradeDist/Chart.tsx
@@ -4,7 +4,7 @@ import { ResponsiveBar, BarTooltipProps, BarDatum } from '@nivo/bar';
 import ThemeContext from '../../style/theme-context';
 import { type Theme } from '@nivo/core';
 import { GradesRaw } from '@peterportal/types';
-import { colors } from './colors.ts';
+import { GradeColors } from './gradeColors.ts';
 import { tooltipStyle } from './tooltipStyle.ts';
 
 interface ChartProps {
@@ -70,42 +70,43 @@ export default class Chart extends React.Component<ChartProps> {
         id: 'A',
         label: 'A',
         A: gradeACount,
+        color: GradeColors.A,
       },
       {
         id: 'B',
         label: 'B',
         B: gradeBCount,
-        color: colors[1],
+        color: GradeColors.B,
       },
       {
         id: 'C',
         label: 'C',
         C: gradeCCount,
-        color: colors[2],
+        color: GradeColors.C,
       },
       {
         id: 'D',
         label: 'D',
         D: gradeDCount,
-        color: colors[3],
+        color: GradeColors.D,
       },
       {
         id: 'F',
         label: 'F',
         F: gradeFCount,
-        color: colors[4],
+        color: GradeColors.F,
       },
       {
         id: 'P',
         label: 'P',
         P: gradePCount,
-        color: colors[5],
+        color: GradeColors.P,
       },
       {
         id: 'NP',
         label: 'NP',
         NP: gradeNPCount,
-        color: colors[6],
+        color: GradeColors.NP,
       },
     ];
   };
@@ -169,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/Pie.tsx b/site/src/component/GradeDist/Pie.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ResponsivePie, PieTooltipProps } from '@nivo/pie';
 
 import { GradesRaw } from '@peterportal/types';
-import { colors } from './colors.ts';
+import { GradeColors } from './gradeColors.ts';
 import { tooltipStyle } from './tooltipStyle.ts';
 
 const gradeScale = ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-'];
@@ -87,13 +87,13 @@ export default class Pie extends React.Component<PieProps> {
           id: 'P',
           label: 'P',
           value: gradePCount,
-          color: colors[5],
+          color: GradeColors.P,
         },
         {
           id: 'NP',
           label: 'NP',
           value: gradeNPCount,
-          color: colors[6],
+          color: GradeColors.NP,
         },
       ];
       return data;
@@ -104,43 +104,43 @@ export default class Pie extends React.Component<PieProps> {
         id: 'A',
         label: 'A',
         value: gradeACount,
-        color: colors[0],
+        color: GradeColors.A,
       },
       {
         id: 'B',
         label: 'B',
         value: gradeBCount,
-        color: colors[1],
+        color: GradeColors.B,
       },
       {
         id: 'C',
         label: 'C',
         value: gradeCCount,
-        color: colors[2],
+        color: GradeColors.C,
       },
       {
         id: 'D',
         label: 'D',
         value: gradeDCount,
-        color: colors[3],
+        color: GradeColors.D,
       },
       {
         id: 'F',
         label: 'F',
         value: gradeFCount,
-        color: colors[4],
+        color: GradeColors.F,
       },
       {
         id: 'P',
         label: 'P',
         value: gradePCount,
-        color: colors[5],
+        color: GradeColors.P,
       },
       {
         id: 'NP',
         label: 'NP',
         value: gradeNPCount,
-        color: colors[6],
+        color: GradeColors.NP,
       },
     ];
     return data;
@@ -177,7 +177,7 @@ export default class Pie extends React.Component<PieProps> {
           enableArcLinkLabels={false}
           innerRadius={0.8}
           padAngle={2}
-          colors={colors}
+          colors={Object.values(GradeColors)}
           cornerRadius={3}
           borderWidth={1}
           borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}

diff --git a/site/src/component/GradeDist/colors.ts b/site/src/component/GradeDist/colors.ts
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',
+}