From 9ad32390d13e1d413ca01b1bc45d02c695bc23dd Mon Sep 17 00:00:00 2001
From: Abdulrahman Alshahrani <62489819+Abdomash@users.noreply.github.com>
Date: Fri, 15 Nov 2024 23:54:19 +0300
Subject: [PATCH] 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>
---
 .../CourseCatalogInjectedPopup/GradeDistribution.tsx        | 6 ++++++
 1 file changed, 6 insertions(+)

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