feat: add explanation to grade distribution (#325)

* feat: add 'About the data' link to grade distribution chart

* chore: change the About the data text style/variant to small

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Abdulrahman Alshahrani
2024-11-15 23:54:19 +03:00
committed by GitHub
parent 0d51cae4c8
commit 9ad32390d1

View File

@@ -1,6 +1,7 @@
import type { Course } from '@shared/types/Course'; import type { Course } from '@shared/types/Course';
import type { Distribution, LetterGrade } from '@shared/types/Distribution'; import type { Distribution, LetterGrade } from '@shared/types/Distribution';
import { extendedColors } from '@shared/types/ThemeColors'; import { extendedColors } from '@shared/types/ThemeColors';
import Link from '@views/components/common/Link';
import Text from '@views/components/common/Text/Text'; import Text from '@views/components/common/Text/Text';
import { import {
NoDataError, NoDataError,
@@ -13,6 +14,8 @@ import type { ChangeEvent } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react';
import Skeleton from 'react-loading-skeleton'; import Skeleton from 'react-loading-skeleton';
const UT_GRADE_DISTRIBUTION_URL = 'https://reports.utexas.edu/spotlight-data/ut-course-grade-distributions';
interface GradeDistributionProps { interface GradeDistributionProps {
course: Course; course: Course;
} }
@@ -246,6 +249,9 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
</option> </option>
))} ))}
</select> </select>
<Link variant='small' href={UT_GRADE_DISTRIBUTION_URL} className='link'>
About the data
</Link>
</div> </div>
{distributions[semester] && !distributions[semester]!.instructorIncluded && ( {distributions[semester] && !distributions[semester]!.instructorIncluded && (
<div className='mt-3 flex flex-wrap content-center items-center self-stretch justify-center gap-3'> <div className='mt-3 flex flex-wrap content-center items-center self-stretch justify-center gap-3'>