Squashed commit of the following:
commitc46e4a51c9Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Mon Feb 19 21:37:46 2024 -0600 change from reducer pattern to state variables, remove chartData from state commit36bcdd2522Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Mon Feb 19 21:15:41 2024 -0600 change grade distribution colors to match updated figma commit11a50df88dMerge:c16b301b4c96a9Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Mon Feb 19 17:57:13 2024 -0600 Merge branch 'hackathon' into abhinavchadaga/course-catalog-popup commitc16b301ff0Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Mon Feb 19 17:47:21 2024 -0600 Kinda complete the handlers commit1ac1d9095aAuthor: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sun Feb 18 17:36:59 2024 -0600 Bunch of renaming commit925829ad41Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sun Feb 18 17:24:53 2024 -0600 Fix syllabi url Remove unused variable and unnecessary args to url commitf2e5d51eb3Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sun Feb 18 17:24:22 2024 -0600 Add TODO replace current grade colors with a tailwind palette commit747ee44440Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sun Feb 18 01:26:51 2024 -0600 Minor tweaks change style in header commitddfe952a32Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sun Feb 18 01:26:38 2024 -0600 Add Grade Distribution Stuff commitc27bf3c390Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sun Feb 18 01:26:13 2024 -0600 Modify story to use proper course info commit7afdbac1b8Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 16:37:01 2024 -0600 description stuff done commit1a89432276Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 15:26:32 2024 -0600 Rename CoursePopup Old one to "Old", remove "2" from new one commit4c2b31e61aAuthor: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 15:23:01 2024 -0600 add todo for calendar button commit11b7a51dedAuthor: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 15:22:18 2024 -0600 add course button onclick handlers commitf2dfcec838Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 14:52:38 2024 -0600 some unocss updates commitf9f375514bAuthor: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 13:00:46 2024 -0600 Add rmp callback commit122fc6dbddAuthor: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 13:00:16 2024 -0600 Change test course to 314 commit19b124b3bdAuthor: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 12:19:21 2024 -0600 complete CourseHeaderAndActions Component added course buttons, using proper subcomponents now. commit2eea01fc74Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 11:22:12 2024 -0600 use chip component in header commit9cb13c8fd1Merge:a62b7189392085Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 11:21:12 2024 -0600 Merge branch 'hackathon' into abhinavchadaga/course-catalog-popup commita62b718c43Merge:43d26757b7b858Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 10:57:24 2024 -0600 Merge branch 'hackathon' into abhinavchadaga/course-catalog-popup commit43d2675be5Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Sat Feb 17 10:54:49 2024 -0600 some work on course popup update the stories and create the header component commit31bcef3099Merge:874f8d5fa1d737Author: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Wed Feb 14 14:33:16 2024 -0600 Merge branch 'main' into abhinavchadaga/course-catalog-popup pulling from main commit874f8d56cbAuthor: Abhinav Chadaga <abhinav.chadaga@utexas.edu> Date: Wed Feb 14 14:30:24 2024 -0600 some work
This commit is contained in:
knownotunknown
doprz
@@ -0,0 +1,170 @@
|
||||
import Spinner from '@views/components/common/Spinner/Spinner';
|
||||
import Text from '@views/components/common/Text/Text';
|
||||
import Highcharts from 'highcharts';
|
||||
import HighchartsReact from 'highcharts-react-official';
|
||||
import React from 'react';
|
||||
import { Course } from 'src/shared/types/Course';
|
||||
import { Distribution, LetterGrade } from 'src/shared/types/Distribution';
|
||||
import { colors } from 'src/shared/util/themeColors';
|
||||
import {
|
||||
NoDataError,
|
||||
queryAggregateDistribution,
|
||||
querySemesterDistribution,
|
||||
} from 'src/views/lib/database/queryDistribution';
|
||||
|
||||
interface GradeDistributionProps {
|
||||
course: Course;
|
||||
}
|
||||
|
||||
enum DataStatus {
|
||||
LOADING = 'LOADING',
|
||||
FOUND = 'FOUND',
|
||||
NOT_FOUND = 'NOT_FOUND',
|
||||
ERROR = 'ERROR',
|
||||
}
|
||||
|
||||
const GRADE_COLORS: Record<LetterGrade, string> = {
|
||||
A: colors.gradeDistribution.a,
|
||||
'A-': colors.gradeDistribution.aminus,
|
||||
'B+': colors.gradeDistribution.bplus,
|
||||
B: colors.gradeDistribution.b,
|
||||
'B-': colors.gradeDistribution.bminus,
|
||||
'C+': colors.gradeDistribution.cplus,
|
||||
C: colors.gradeDistribution.c,
|
||||
'C-': colors.gradeDistribution.cminus,
|
||||
'D+': colors.gradeDistribution.dplus,
|
||||
D: colors.gradeDistribution.d,
|
||||
'D-': colors.gradeDistribution.dminus,
|
||||
F: colors.gradeDistribution.f,
|
||||
};
|
||||
|
||||
const GradeDistribution: React.FC<GradeDistributionProps> = ({ course }) => {
|
||||
const [semester, setSemester] = React.useState('Aggregate');
|
||||
const [distributions, setDistributions] = React.useState<Record<string, Distribution>>({});
|
||||
const [status, setStatus] = React.useState(DataStatus.LOADING);
|
||||
const ref = React.useRef<HighchartsReact.RefObject>(null);
|
||||
|
||||
const chartData = React.useMemo(() => {
|
||||
if (status === DataStatus.FOUND && distributions[semester]) {
|
||||
return Object.entries(distributions[semester]).map(([grade, count]) => ({
|
||||
y: count,
|
||||
color: GRADE_COLORS[grade as LetterGrade],
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
}, [distributions, semester, status]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const fetchInitialData = async () => {
|
||||
try {
|
||||
const [aggregateDist, semesters] = await queryAggregateDistribution(course);
|
||||
const initialDistributions: Record<string, Distribution> = { Aggregate: aggregateDist };
|
||||
const semesterPromises = semesters.map(semester => querySemesterDistribution(course, semester));
|
||||
const semesterDistributions = await Promise.all(semesterPromises);
|
||||
semesters.forEach((semester, i) => {
|
||||
initialDistributions[`${semester.season} ${semester.year}`] = semesterDistributions[i];
|
||||
});
|
||||
setDistributions(initialDistributions);
|
||||
setStatus(DataStatus.FOUND);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
if (e instanceof NoDataError) {
|
||||
setStatus(DataStatus.NOT_FOUND);
|
||||
} else {
|
||||
setStatus(DataStatus.ERROR);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchInitialData();
|
||||
}, [course]);
|
||||
|
||||
const handleSelectSemester = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSemester(event.target.value);
|
||||
};
|
||||
|
||||
const chartOptions: Highcharts.Options = {
|
||||
title: { text: undefined },
|
||||
subtitle: { text: undefined },
|
||||
legend: { enabled: false },
|
||||
xAxis: {
|
||||
title: { text: 'Grade' },
|
||||
categories: ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F'],
|
||||
crosshair: true,
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: { text: 'Number of Students' },
|
||||
},
|
||||
chart: {
|
||||
style: { fontFamily: 'Roboto Flex', fontWeight: '600' },
|
||||
spacingBottom: 25,
|
||||
spacingTop: 25,
|
||||
height: 250,
|
||||
},
|
||||
credits: { enabled: false },
|
||||
accessibility: { enabled: true },
|
||||
tooltip: {
|
||||
headerFormat: '<span style="font-size:small; font-weight:bold">{point.key}</span><table>',
|
||||
pointFormat:
|
||||
'<td style="color:{black};padding:0;font-size:small; font-weight:bold;"><b>{point.y:.0f} Students</b></td>',
|
||||
footerFormat: '</table>',
|
||||
shared: true,
|
||||
useHTML: true,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: { pointPadding: 0.2, borderWidth: 0 },
|
||||
series: { animation: { duration: 700 } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'column',
|
||||
name: 'Grades',
|
||||
data: chartData,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='pb-[25px] pt-[12px]'>
|
||||
{status === DataStatus.LOADING && <Spinner />}
|
||||
{status === DataStatus.NOT_FOUND && <Text variant='p'>No grade distribution data found</Text>}
|
||||
{status === DataStatus.ERROR && <Text variant='p'>Error fetching grade distribution data</Text>}
|
||||
{status === DataStatus.FOUND && (
|
||||
<>
|
||||
<div className='w-full flex items-center justify-center gap-[12px]'>
|
||||
<Text variant='p'>Grade distribution for {`${course.department} ${course.number}`}</Text>
|
||||
<select
|
||||
className='border border rounded-[4px] border-solid px-[12px] py-[8px]'
|
||||
onChange={handleSelectSemester}
|
||||
>
|
||||
{Object.keys(distributions)
|
||||
.sort((k1, k2) => {
|
||||
if (k1 === 'Aggregate') {
|
||||
return -1;
|
||||
}
|
||||
if (k2 === 'Aggregate') {
|
||||
return 1;
|
||||
}
|
||||
const [season1, year1] = k1.split(' ');
|
||||
const [, year2] = k2.split(' ');
|
||||
if (year1 !== year2) {
|
||||
return parseInt(year2, 10) - parseInt(year1, 10);
|
||||
}
|
||||
return season1 === 'Fall' ? 1 : -1;
|
||||
})
|
||||
.map(semester => (
|
||||
<option key={semester} value={semester}>
|
||||
{semester}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<HighchartsReact ref={ref} highcharts={Highcharts} options={chartOptions} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GradeDistribution;
|
||||
Reference in New Issue
Block a user