finished grade distribution ui

src/views/components/common/Text/Text.tsx

@@ -7,7 +7,7 @@ import styles from './Text.module.scss';
 export type TextProps = {
     color?: Color;
     weight?: Weight;
-    size: Size;
+    size?: Size;
     span?: boolean;
     className?: string;
     onClick?: () => void;
@@ -31,11 +31,10 @@ export default function Text(props: PropsWithChildren<TextProps>) {
 
     const className = classNames(
         styles.text,
-        props.className,
-
         styles[weightClass],
         styles[fontSizeClass],
-        styles[lineHightClass]
+        styles[lineHightClass],
+        props.className
     );
 
     if (props.span) {

src/views/components/injected/CoursePopup/CoursePopup.module.scss

@@ -3,7 +3,7 @@
     position: relative;
     max-width: 50%;
     overflow-y: auto;
-    max-height: 80%;
+    max-height: 90%;
 
     // fade in animation
     animation: fadeIn 0.2s ease-out;

src/views/components/injected/CoursePopup/CoursePopup.tsx

@@ -16,7 +16,6 @@ interface Props {
  * The popup that appears when the user clicks on a course for more details.
  */
 export default function CoursePopup({ course, onClose }: Props) {
-    console.log(course);
     return (
         <Popup className={styles.popup} overlay onClose={onClose}>
             <CourseHeader course={course} onClose={onClose} />

src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.module.scss

@@ -1,14 +1,31 @@
-.container {
+@import 'src/views/styles/base.module.scss';
-    max-width: 100%;
+
+.chartContainer {
     height: 250px;
     margin: 20px;
     padding: 12px;
 
-    > div {
+    :global(.highcharts-background) {
-        overflow: hidden;
+        fill: transparent;
-        min-width: auto;
+    }
-        max-width: 100%;
+}
-        height: 250px;
+
-        margin: 0 auto;
+.textContainer {
+    height: 250px;
+    margin: 20px;
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .text {
+        padding: 12px;
+        box-shadow: none;
+        text-align: center;
+
+        // add some vertical padding to each element
+        > * {
+            margin: 0.2em 0;
+        }
     }
 }

src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.tsx

@@ -1,16 +1,20 @@
 /* eslint-disable no-nested-ternary */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import HighchartsReact from 'highcharts-react-official';
 import Highcharts from 'highcharts';
 import Card from 'src/views/components/common/Card/Card';
 import { bMessenger } from 'src/shared/messages';
 import { Course } from 'src/shared/types/Course';
-import styles from './GradeDistribution.module.scss';
 import colors from 'src/views/styles/colors.module.scss';
+import Spinner from 'src/views/components/common/Spinner/Spinner';
+import Text from 'src/views/components/common/Text/Text';
+import Icon from 'src/views/components/common/Icon/Icon';
+import styles from './GradeDistribution.module.scss';
 
 enum DataStatus {
     LOADING = 'LOADING',
-    DONE = 'DONE',
+    FOUND = 'FOUND',
+    NOT_FOUND = 'NOT_FOUND',
     ERROR = 'ERROR',
 }
 
@@ -18,7 +22,12 @@ interface Props {
     course: Course;
 }
 
+/**
+ * A chart to fetch and display the grade distribution for a course
+ * @returns
+ */
 export default function GradeDistribution({ course }: Props) {
+    const ref = useRef<HighchartsReact.RefObject>(null);
     const [chartOptions, setChartOptions] = useState<Highcharts.Options>({
         title: {
             text: undefined,
@@ -47,6 +56,8 @@ export default function GradeDistribution({ course }: Props) {
                 fontFamily: 'Inter',
                 fontWeight: '600',
             },
+            spacingBottom: 25,
+            height: 250,
         },
         credits: {
             enabled: false,
@@ -85,7 +96,9 @@ export default function GradeDistribution({ course }: Props) {
             if (!distribution) {
                 return setStatus(DataStatus.ERROR);
             }
-
+            if (!distribution.length) {
+                return setStatus(DataStatus.NOT_FOUND);
+            }
             setChartOptions(options => ({
                 ...options,
                 series: [
@@ -94,9 +107,6 @@ export default function GradeDistribution({ course }: Props) {
                         name: 'Grades',
                         data: distribution.map((y, i) => ({
                             y,
-                            // eslint-disable-next-line no-nested-ternary
-                            // color: i < 8 ? '#2ECC71' : i < 10 ? '#F1C40F' : '#E74C3C',
-                            // eslint-disable-next-line no-nested-ternary
                             color:
                                 i < 3
                                     ? colors.turtle_pond
@@ -111,16 +121,40 @@ export default function GradeDistribution({ course }: Props) {
                     },
                 ],
             }));
+            setStatus(DataStatus.FOUND);
+            // the highcharts library kinda sucks and doesn't resize the chart when the window resizes,
+            // so we have to manually trigger a resize event when the chart is rendered 🙃
+            window.dispatchEvent(new Event('resize'));
         });
     }, [course]);
 
-    if (!chartOptions.series?.length) {
+    if (status === DataStatus.FOUND) {
-        return null;
+        return (
+            <Card className={styles.chartContainer}>
+                <HighchartsReact ref={ref} highcharts={Highcharts} options={chartOptions} />
+            </Card>
+        );
     }
 
     return (
-        <Card className={styles.container}>
+        <Card className={styles.textContainer}>
-            <HighchartsReact highcharts={Highcharts} options={chartOptions} />
+            {status === DataStatus.LOADING && <Spinner />}
+            {status === DataStatus.ERROR && (
+                <Card className={styles.text}>
+                    <Text color='speedway_brick' size='medium' weight='semi_bold'>
+                        There was an error fetching the grade distribution data
+                    </Text>
+                    <Icon color='speedway_brick' size='large' name='sentiment_dissatisfied' />
+                </Card>
+            )}
+            {status === DataStatus.NOT_FOUND && (
+                <Card className={styles.text}>
+                    <Text color='charcoal' size='medium' weight='semi_bold'>
+                        No grade distribution data was found for this course
+                    </Text>
+                    <Icon color='charcoal' size='x_large' name='search_off' />
+                </Card>
+            )}
         </Card>
     );
 }