Skip to content

Commit

Permalink
fix: removes calendar from student and admin portal frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
@calisio @PThorpe92
calisio authored and PThorpe92 committed Sep 26, 2024
1 parent 49b667a commit 055772f
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 118 deletions.
45 changes: 24 additions & 21 deletions frontend/src/Components/TopProgActivityPieChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { PieChart, Pie, Cell } from 'recharts';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts';
import { ThemeContext } from './ThemeContext';
import { useContext } from 'react';
import { CourseActivity } from '@/common';
Expand All @@ -16,25 +16,28 @@ export default function TopProgPieChart({ data }: { data: CourseActivity[] }) {
}

return (
<PieChart width={300} height={300} className="my-auto">
<Pie
data={safeData}
dataKey="hours_engaged"
nameKey="course_name"
cx="50%"
cy="50%"
outerRadius="80%"
innerRadius="50%"
fill="#8884d8"
label={false}
>
{data.map((_, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
</PieChart>
<ResponsiveContainer width="100%" height={400}>
<PieChart>
<Pie
data={safeData}
dataKey="hours_engaged"
nameKey="course_name"
cx="50%"
cy="50%"
outerRadius="80%"
innerRadius="50%"
fill="#8884d8"
label={false}
>
{data.map((_, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
<Legend layout="horizontal" />
</PieChart>
</ResponsiveContainer>
);
}
160 changes: 74 additions & 86 deletions frontend/src/Pages/AdminDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,97 +56,85 @@ export default function AdminDashboard() {
data={activityData.course_milestones}
/>
</div>
<div className="card h-100 justify-between overflow-auto">
<h2 className="card-h-padding">
Top Course Engagement
</h2>
<div className="flex flex-row">
<TopProgPieChart
data={activityData.top_course_activity}
/>
<div className="p-4 my-auto w-[60%]">
{/* TO DO: caption needs to be added */}
<table className="table-2">
<thead>
<tr>
<th>Course Name</th>
<th>Time Spent</th>
</tr>
</thead>
<tbody className="!gap-6">
{!error &&
!isLoading &&
activityData &&
activityData.top_course_activity.map(
(
course: CourseActivity,
index: number
) => {
var courseTime: string;
if (
course.hours_engaged < 1
)
courseTime =
Math.round(
course.hours_engaged *
60
) + ' min';
else {
const hours =
Math.floor(
course.hours_engaged
);
const leftoverMins =
Math.round(
course.hours_engaged *
60
) % 60;
if (leftoverMins == 0)
courseTime =
hours + ' hrs';
else
courseTime =
hours +
' hr ' +
leftoverMins +
' min';
}
var legendColor =
'bg-teal-' +
(index + 1).toString();
// TO DO: temporary fix... figure out why teal-5 doesnt render immediately
if (index == 4)
legendColor =
theme == 'light'
? 'bg-[#002E2A]'
: 'bg-[#B0DFDA]';
return (
<tr key={index}>
<td className="flex flex-row gap-2">
<div
className={`h-3 w-3 ${legendColor} my-auto`}
></div>
{
course.course_name
}
</td>
<td>
{courseTime}
</td>
</tr>
</div>
{/* Top course engagement */}
<div className="card h-100 w-[35%] flex flex-col justify-between overflow-auto">
<h2 className="card-h-padding">Top Course Engagement</h2>
<div className="">
<TopProgPieChart
data={activityData.top_course_activity}
/>
<div className="px-4 pb-10">
{/* TO DO: caption needs to be added */}
<table className="table-2">
<thead>
<tr>
<th>Course Name</th>
<th>Time Spent</th>
</tr>
</thead>
<tbody className="!gap-6">
{!error &&
!isLoading &&
activityData &&
activityData.top_course_activity.map(
(
course: CourseActivity,
index: number
) => {
var courseTime: string;
if (course.hours_engaged < 1)
courseTime =
Math.round(
course.hours_engaged *
60
) + ' min';
else {
const hours = Math.floor(
course.hours_engaged
);
const leftoverMins =
Math.round(
course.hours_engaged *
60
) % 60;
if (leftoverMins == 0)
courseTime =
hours + ' hrs';
else
courseTime =
hours +
' hr ' +
leftoverMins +
' min';
}
)}
</tbody>
</table>
</div>
var legendColor =
'bg-teal-' +
(index + 1).toString();
// TO DO: temporary fix... figure out why teal-5 doesnt render immediately
if (index == 4)
legendColor =
theme == 'light'
? 'bg-[#002E2A]'
: 'bg-[#B0DFDA]';
return (
<tr key={index}>
<td className="flex flex-row gap-2">
<div
className={`h-3 w-3 ${legendColor} my-auto`}
></div>
{course.course_name}
</td>
<td>{courseTime}</td>
</tr>
);
}
)}
</tbody>
</table>
</div>
</div>
</div>
{/* Top course engagement */}
<div className="flex flex-col w-[35%] gap-6">
<CalendarComponent />
</div>
</div>
</div>
);
Expand Down
14 changes: 3 additions & 11 deletions frontend/src/Pages/StudentDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export default function StudentDashboard() {

return (
<div className="flex w-full">
<div className="px-8 py-4 w-3/5">
<div className="px-8 py-4">
<h1 className="text-5xl">Hi, {user.name_first}!</h1>
<h2 className="mt-7"> Pick Up Where You Left Off</h2>
<div className="mt-3 bg-base-teal p-6 card">
Expand Down Expand Up @@ -196,16 +196,8 @@ export default function StudentDashboard() {
)}
</div>
</div>
<div className="flex flex-col w-2/5">
<div className="flex w-full h-full">
<div className="w-1/2 border-r border-gray-300">
<CalendarComponent />
</div>
<div className="w-1/2">
<ResourcesSideBar />
</div>
</div>
</div>
<div className="min-w-px bg-grey-1"></div>
<ResourcesSideBar />
</div>
);
}

0 comments on commit 055772f

Please sign in to comment.