From c1910bacb0667f8e85f0cd6c5e580010f145e6f7 Mon Sep 17 00:00:00 2001 From: Sriram Hariharan Date: Wed, 8 Mar 2023 20:44:34 -0600 Subject: [PATCH] finished grade distribution ui --- src/views/components/common/Text/Text.tsx | 7 +-- .../CoursePopup/CoursePopup.module.scss | 2 +- .../injected/CoursePopup/CoursePopup.tsx | 1 - .../GradeDistribution.module.scss | 33 ++++++++--- .../GradeDistribution/GradeDistribution.tsx | 56 +++++++++++++++---- 5 files changed, 74 insertions(+), 25 deletions(-) diff --git a/src/views/components/common/Text/Text.tsx b/src/views/components/common/Text/Text.tsx index 93d1f5e2..49277ac3 100644 --- a/src/views/components/common/Text/Text.tsx +++ b/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) { const className = classNames( styles.text, - props.className, - styles[weightClass], styles[fontSizeClass], - styles[lineHightClass] + styles[lineHightClass], + props.className ); if (props.span) { diff --git a/src/views/components/injected/CoursePopup/CoursePopup.module.scss b/src/views/components/injected/CoursePopup/CoursePopup.module.scss index 5ab30ceb..0f5078cc 100644 --- a/src/views/components/injected/CoursePopup/CoursePopup.module.scss +++ b/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; diff --git a/src/views/components/injected/CoursePopup/CoursePopup.tsx b/src/views/components/injected/CoursePopup/CoursePopup.tsx index 7ef78657..4ecd70a5 100644 --- a/src/views/components/injected/CoursePopup/CoursePopup.tsx +++ b/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 ( diff --git a/src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.module.scss b/src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.module.scss index 0ddf0a86..cbdc0550 100644 --- a/src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.module.scss +++ b/src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.module.scss @@ -1,14 +1,31 @@ -.container { - max-width: 100%; +@import 'src/views/styles/base.module.scss'; + +.chartContainer { height: 250px; margin: 20px; padding: 12px; - > div { - overflow: hidden; - min-width: auto; - max-width: 100%; - height: 250px; - margin: 0 auto; + :global(.highcharts-background) { + fill: transparent; + } +} + +.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; + } } } diff --git a/src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.tsx b/src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.tsx index 1154a32c..dabc0453 100644 --- a/src/views/components/injected/CoursePopup/GradeDistribution/GradeDistribution.tsx +++ b/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(null); const [chartOptions, setChartOptions] = useState({ 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) { - return null; + if (status === DataStatus.FOUND) { + return ( + + + + ); } return ( - - + + {status === DataStatus.LOADING && } + {status === DataStatus.ERROR && ( + + + There was an error fetching the grade distribution data + + + + )} + {status === DataStatus.NOT_FOUND && ( + + + No grade distribution data was found for this course + + + + )} ); }