Skip to content

Commit 887987a

Browse files
TatvikReddyTatvikReddy
committed
fixing errors
doesn't work, just intermediatory changes
1 parent da4cc55 commit 887987a

File tree

2 files changed

+89
-98
lines changed

2 files changed

+89
-98
lines changed

Diff for: ‎src/components/common/SingleGradesInfo/singleGradesInfo.tsx

+18-51
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ function convertNumbersToPercents(distribution: GradesType): number[] {
1515
(frequencyOfLetterGrade) => (frequencyOfLetterGrade / total) * 100,
1616
);
1717
}
18+
1819
function getRecentSemesters() {
1920
const recentSemesters: string[] = [];
2021
const today = new Date();
@@ -41,79 +42,45 @@ type Props = {
4142
};
4243

4344
function SingleGradesInfo({ title, course, grades }: Props) {
44-
if (typeof grades === 'undefined' || grades.state === 'error') {
45-
return null;
46-
}
45+
if (typeof grades === 'undefined' || grades.state === 'error') return null;
4746
if (grades.state === 'loading') {
4847
return (
4948
<div className="p-2">
5049
<Skeleton variant="rounded" className="w-full h-60 m-2" />
5150
<div className="flex flex-wrap justify-around">
52-
<p>
53-
Grades: <Skeleton className="inline-block w-[5ch]" />
54-
</p>
55-
<p>
56-
GPA: <Skeleton className="inline-block w-[5ch]" />
57-
</p>
51+
<p>Grades: <Skeleton className="inline-block w-[5ch]" /></p>
52+
<p>GPA: <Skeleton className="inline-block w-[5ch]" /></p>
5853
</div>
5954
</div>
6055
);
6156
}
62-
6357
const percents = convertNumbersToPercents(grades.data);
6458
const recentSemesters = getRecentSemesters();
65-
const gpaValues = [
66-
4, 4, 3.67, 3.33, 3, 2.67, 2.33, 2, 1.67, 1.33, 1, 0.67, 0,
67-
];
59+
const gpaValues = [4,4,3.67,3.33,3,2.67,2.33,2,1.67,1.33,1,0.67,0];
6860

6961
return (
7062
<div className="p-2">
7163
<div className="h-64">
7264
<BarGraph
7365
title={title ?? '# of Students'}
74-
xaxisLabels={[
75-
'A+',
76-
'A',
77-
'A-',
78-
'B+',
79-
'B',
80-
'B-',
81-
'C+',
82-
'C',
83-
'C-',
84-
'D+',
85-
'D',
86-
'D-',
87-
'F',
88-
'W',
89-
]}
90-
yaxisFormatter={(value) => Number(value).toFixed(0).toLocaleString()}
91-
tooltipFormatter={(value, { dataPointIndex }) =>
92-
Number(value).toFixed(0).toLocaleString() +
93-
' (' +
94-
percents[dataPointIndex].toFixed(2) +
95-
'%)'
96-
}
97-
series={[
98-
{
99-
name: searchQueryLabel(course),
100-
data: grades.data.grade_distribution,
101-
},
102-
]}
66+
xaxisLabels={['A+','A','A-','B+','B','B-','C+','C','C-','D+','D','D-','F','W']}
67+
yaxisFormatter={value => Number(value).toFixed(0).toLocaleString()}
68+
tooltipFormatter={(value,{ dataPointIndex }) => Number(value).toFixed(0).toLocaleString() + ' (' + percents[dataPointIndex].toFixed(2) + '%)'}
69+
series={[{ name: searchQueryLabel(course), data: grades.data.grade_distribution }]}
10370
/>
10471
</div>
10572
<div className="flex flex-wrap justify-around">
106-
<p>
107-
Grades: <b>{grades.data.total.toLocaleString()}</b>
108-
</p>
109-
<p>
110-
GPA:{' '}
111-
<b>{grades.data.gpa === -1 ? 'None' : grades.data.gpa.toFixed(3)}</b>
112-
</p>
73+
<p>Grades: <b>{grades.data.total.toLocaleString()}</b></p>
74+
<p>GPA: <b>{grades.data.gpa === -1 ? 'None' : grades.data.gpa.toFixed(3)}</b></p>
11375
</div>
11476
<div className="h-64">
115-
<LineGraph course ={recentSemesters}
116-
gpa={gpaValues} />
77+
<LineGraph
78+
chartTitle="GPA Trend"
79+
xAxisLabels={recentSemesters}
80+
yAxisFormatter={(value: number) => value.toFixed(2)}
81+
tooltipFormatter={(value: number) => value.toFixed(3)}
82+
series={[{ name: searchQueryLabel(course), data: gpaValues }]}
83+
/>
11784
</div>
11885
</div>
11986
);

Diff for: ‎src/components/graph/LineGraph/lineGraph.tsx

+71-47
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
import { Skeleton, ToggleButton, ToggleButtonGroup } from '@mui/material';
2+
import dynamic from 'next/dynamic';
23
import React, { useEffect, useState } from 'react';
3-
import Chart from 'react-apexcharts';
44

5-
import {
6-
type SearchQuery,
7-
searchQueryLabel,
8-
} from '@/modules/SearchQuery/SearchQuery';
95
import type { GenericFetchedData } from '@/pages/dashboard/index';
106

7+
// Dynamically import react-apexcharts with SSR disabled.
8+
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
9+
1110
export type GPATrendType = {
1211
season: string[];
1312
years: string[];
1413
gpa: number[];
1514
};
1615

1716
type Props = {
18-
recentSemesters: SearchQuery;
19-
gpaTrend: GenericFetchedData<GPATrendType>;
17+
gpaTrend?: GenericFetchedData<GPATrendType>;
18+
chartTitle?: string;
19+
xAxisLabels?: string[];
20+
yAxisFormatter?: (value: number) => string;
21+
tooltipFormatter?: (value: number) => string;
22+
series?: {
23+
name: string;
24+
data: number[];
25+
}[];
2026
};
2127

22-
function LineGraph({ recentSemesters, gpaTrend }: Props) {
28+
function LineGraph({ gpaTrend, chartTitle, xAxisLabels, yAxisFormatter, tooltipFormatter, series }: Props): React.ReactNode {
2329
const [chartType, setChartType] = useState<'line' | 'bar'>('line');
2430
const [chartData, setChartData] = useState<{
2531
options: {
@@ -77,7 +83,8 @@ function LineGraph({ recentSemesters, gpaTrend }: Props) {
7783
},
7884
},
7985
xaxis: {
80-
categories: [] as string[],
86+
categories: [],
87+
8188
labels: {
8289
rotate: -45,
8390
},
@@ -110,63 +117,80 @@ function LineGraph({ recentSemesters, gpaTrend }: Props) {
110117
});
111118

112119
useEffect(() => {
113-
if (gpaTrend.state === 'done') {
114-
setChartData({
120+
if (gpaTrend && gpaTrend.state === 'done') {
121+
setChartData(prev => ({
115122
options: {
116-
...chartData.options,
123+
...prev.options,
124+
117125
xaxis: {
118126
categories: gpaTrend.data.season,
119127
labels: { rotate: -45 },
120128
},
121129
},
122130
series: [
123131
{
124-
name: searchQueryLabel(recentSemesters),
132+
name: chartTitle || '',
133+
125134
data: gpaTrend.data.gpa,
126135
},
127136
],
128-
});
129-
}
130-
}, [gpaTrend, recentSemesters]);
131-
132-
const handleChartToggle = (
133-
_event: React.MouseEvent<HTMLElement>,
134-
newChartType: 'line' | 'bar' | null,
135-
) => {
136-
if (newChartType) {
137-
setChartType(newChartType);
137+
}));
138+
} else if (series) {
139+
setChartData(prev => ({
140+
options: {
141+
...prev.options,
142+
143+
xaxis: {
144+
categories: xAxisLabels || [],
145+
labels: { rotate: -45 },
146+
},
147+
148+
yaxis: {
149+
...prev.options.yaxis,
150+
labels: {
151+
formatter:
152+
yAxisFormatter || ((value: number) => value.toFixed(2)),
153+
},
154+
},
155+
156+
tooltip: {
157+
y: {
158+
formatter:
159+
tooltipFormatter || ((value: number) => value.toFixed(3)),
160+
},
161+
},
162+
},
163+
164+
series: series,
165+
}));
138166
}
139-
};
167+
}, [gpaTrend, series, xAxisLabels, yAxisFormatter, tooltipFormatter]);
140168

141-
if (typeof gpaTrend === 'undefined' || gpaTrend.state === 'error') {
142-
return null;
143-
}
144-
if (gpaTrend.state === 'loading') {
145-
return (
146-
<div className="p-2">
147-
<Skeleton variant="rounded" className="w-full h-60 m-2" />
148-
</div>
149-
);
169+
if (gpaTrend) {
170+
if (gpaTrend.state === 'error') {
171+
return null;
172+
}
173+
if (gpaTrend.state === 'loading') {
174+
return (
175+
<div className="p-2">
176+
<Skeleton variant="rounded" className="w-full h-60 m-2" />
177+
</div>
178+
);
179+
}
150180
}
151181

182+
const handleChartToggle = (_event: React.MouseEvent<HTMLElement>, newChartType: 'line' | 'bar' | null) => {
183+
if (newChartType) setChartType(newChartType);
184+
};
185+
152186
return (
153187
<div className="p-2">
154-
<ToggleButtonGroup
155-
value={chartType}
156-
exclusive
157-
onChange={handleChartToggle}
158-
className="mb-2"
159-
>
160-
<ToggleButton value="bar"></ToggleButton>
161-
<ToggleButton value="line"></ToggleButton>
188+
<ToggleButtonGroup value={chartType} exclusive onChange={handleChartToggle} className="mb-2">
189+
<ToggleButton value="bar" />
190+
<ToggleButton value="line" />
162191
</ToggleButtonGroup>
163192
<div className="h-64">
164-
<Chart
165-
options={chartData.options}
166-
series={chartData.series}
167-
type={chartType}
168-
height={250}
169-
/>
193+
<Chart options={chartData.options} series={chartData.series} type={chartType} height={250} />
170194
</div>
171195
</div>
172196
);

0 commit comments

Comments
 (0)