QOL Fixes and Metrics Improvements

.gitignore

@@ -117,3 +117,4 @@ dist
 
 # Config Files
 config.json
+adminSettings.json

client/package.json

@@ -20,17 +20,19 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "axios": "^0.27.2",
+    "chart.js": "^4.4.1",
+    "chat.js": "^1.0.2",
     "downloadjs": "^1.4.7",
     "luxon": "^2.4.0",
     "material-react-toastify": "^1.0.1",
     "number-to-words": "^1.2.4",
     "react": "^18.1.0",
+    "react-chartjs-2": "^5.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-window": "^1.8.7",
-    "recharts": "^2.1.13",
     "socket.io-client": "^4.5.1",
     "styled-components": "^5.3.5",
     "typescript": "^4.8.4",

client/src/components/home/shared/AskQuestion.tsx

@@ -10,7 +10,6 @@ import BaseCard from '../../common/cards/BaseCard';
 import HomeService from '../../../services/HomeService';
 import {UserDataContext} from '../../../contexts/UserDataContext';
 import {QueueDataContext} from '../../../contexts/QueueDataContext';
-import {StudentDataContext} from '../../../contexts/StudentDataContext';
 
 function createData(assignment_id, name) {
   return {assignment_id, name};
@@ -34,8 +33,6 @@ export default function AskQuestion() {
 
   const [askDisabled, setAskDisabled] = useState(false);
 
-  const {studentData, setStudentData} = useContext(StudentDataContext);
-
   const locations = useMemo(() => {
     if (queueData != null) {
       const day = date.getDay();

client/src/components/home/shared/QueueStats.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect} from 'react';
+import React, {useContext} from 'react';
 import {
   CardContent, Divider, Stack, Typography, useTheme,
 } from '@mui/material';

client/src/components/home/student/UpdateQuestionOverlay.tsx

@@ -1,6 +1,6 @@
 import React, {useContext, useState} from 'react';
 import {
-  Button, Dialog, DialogContent, FormControl, Input, Link, Stack, Typography,
+  Button, Dialog, DialogContent, FormControl, Input, Link, Typography,
 } from '@mui/material';
 
 import HomeService from '../../../services/HomeService';

client/src/components/home/ta/dialogs/FilterOptions.tsx

@@ -1,10 +1,9 @@
-import React, {useState, useEffect, useContext, useMemo} from 'react';
+import React, {useContext, useMemo} from 'react';
 
 import {List, ListSubheader, ListItem,
   ListItemButton, ListItemIcon, ListItemText, Checkbox,
 } from '@mui/material';
 
-import SettingsService from '../../../../services/SettingsService';
 import {QueueDataContext} from '../../../../contexts/QueueDataContext';
 
 function createData(assignment_id, name) {

client/src/components/metrics/AdminMetrics.tsx

@@ -0,0 +1,182 @@
+import React, {useEffect, useState} from 'react';
+import MetricsService from '../../services/MetricsService';
+import {
+  Card, Divider, Typography, Stack, Table, TableBody, TableCell,
+  TableContainer, TableHead, TablePagination, TableRow,
+} from '@mui/material';
+
+export default function AdminMetrics() {
+  const [rankedStudents, setRankedStudents] = useState([]);
+  const [rankedTAs, setRankedTAs] = useState([]);
+
+  // students pagination
+  const [studentPage, setStudentPage] = useState(0);
+  const [rowsPerStudentPage, setRowsPerStudentPage] = useState(10);
+  const handleChangeStudentPage = (event, newPage) => {
+    setStudentPage(newPage);
+  };
+  const handleChangeRowsPerStudentPage = (event) => {
+    setRowsPerStudentPage(+event.target.value);
+    setStudentPage(0);
+  };
+
+  // tas pagination
+  const [taPage, setTAPage] = useState(0);
+  const [rowsPerTAPage, setRowsPerTAPage] = useState(10);
+  const handleChangeTAPage = (event, newPage) => {
+    setTAPage(newPage);
+  };
+  const handleChangeRowsPerTAPage = (event) => {
+    setRowsPerTAPage(+event.target.value);
+    setTAPage(0);
+  };
+
+  useEffect(() => {
+    MetricsService.getRankedStudents().then((res) => {
+      setRankedStudents(res.data.rankedStudents.map((student) => {
+        return {
+          ...student,
+          average: Math.round(student.timeHelped / student.count * 10) / 10,
+        };
+      }));
+    });
+
+    MetricsService.getRankedTAs().then((res) => {
+      setRankedTAs(res.data.rankedTAs.map((ta) => {
+        return {
+          ...ta,
+          average: Math.round(ta.timeHelping / ta.count * 10) / 10,
+        };
+      }));
+    });
+  }, []);
+
+  const studentCols = [
+    {id: 'student_andrew', label: 'Andrew ID', width: 25},
+    {id: 'student_name', label: 'Name', width: 25},
+    {id: 'count', label: 'Num Questions', width: 100},
+    {id: 'badCount', label: 'Num Ask to Fix', width: 100},
+    {id: 'timeHelped', label: 'Total Helping Time (min)', width: 100},
+    {id: 'average', label: 'Average Helping Time (min)', width: 100},
+  ];
+
+  const taCols = [
+    {id: 'ta_andrew', label: 'Andrew ID', width: 25},
+    {id: 'ta_name', label: 'Name', width: 25},
+    {id: 'count', label: 'Num Questions Answered', width: 100},
+    {id: 'timeHelping', label: 'Total Time Helping (min)', width: 100},
+    {id: 'average', label: 'Average Time Helping (min)', width: 100},
+  ];
+
+  return (
+    <div style={{margin: 'auto', padding: '10px', width: '90%'}}>
+      <Typography variant="h5" sx={{my: 4}} fontWeight='bold'>
+        Ranked Students and Ranked TAs
+      </Typography>
+
+      <Card>
+        <Stack
+          direction={{xs: 'column', md: 'row'}}
+          justifyContent="space-evenly"
+          alignItems="start"
+          divider={<Divider orientation="vertical" flexItem/>}
+          spacing={2}
+          sx={{m: 2}}
+        >
+          <Stack sx={{width: '100%'}}>
+            <TableContainer sx={{height: 'auto'}}>
+              <Table stickyHeader aria-label="sticky table">
+                <TableHead>
+                  <TableRow>
+                    {studentCols.map((column) => (
+                      <TableCell
+                        key={column.id}
+                        style={{width: column.width, textOverflow: 'ellipsis'}}
+                      >
+                        {column.label}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rankedStudents
+                      .slice(studentPage * rowsPerStudentPage, studentPage * rowsPerStudentPage + rowsPerStudentPage)
+                      .map((row) => {
+                        return (
+                          <TableRow hover role="checkbox" tabIndex={-1} key={row.student_andrew}>
+                            {studentCols.map((column) => {
+                              const value = row[column.id];
+                              return (
+                                <TableCell key={column.id} sx={{width: 50, textOverflow: 'ellipsis'}}>
+                                  {value}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
+                        );
+                      })
+                  }
+                </TableBody>
+              </Table>
+            </TableContainer>
+            <TablePagination
+              rowsPerPageOptions={[10, 25, 100]}
+              component="div"
+              count={rankedStudents.length}
+              rowsPerPage={rowsPerStudentPage}
+              page={studentPage}
+              onPageChange={handleChangeStudentPage}
+              onRowsPerPageChange={handleChangeRowsPerStudentPage}
+            />
+          </Stack>
+          <Stack sx={{width: '100%'}}>
+            <TableContainer sx={{height: 'auto'}}>
+              <Table stickyHeader aria-label="sticky table">
+                <TableHead>
+                  <TableRow>
+                    {taCols.map((column) => (
+                      <TableCell
+                        key={column.id}
+                        style={{width: column.width, textOverflow: 'ellipsis'}}
+                      >
+                        {column.label}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rankedTAs
+                      .slice(taPage * rowsPerTAPage, taPage * rowsPerTAPage + rowsPerTAPage)
+                      .map((row) => {
+                        return (
+                          <TableRow hover role="checkbox" tabIndex={-1} key={row.ta_andrew}>
+                            {taCols.map((column) => {
+                              const value = row[column.id];
+                              return (
+                                <TableCell key={column.id} sx={{width: 50, textOverflow: 'ellipsis'}}>
+                                  {value}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
+                        );
+                      })
+                  }
+                </TableBody>
+              </Table>
+            </TableContainer>
+            <TablePagination
+              rowsPerPageOptions={[10, 25, 100]}
+              component="div"
+              count={rankedTAs.length}
+              rowsPerPage={rowsPerTAPage}
+              page={taPage}
+              onPageChange={handleChangeTAPage}
+              onRowsPerPageChange={handleChangeRowsPerTAPage}
+            />
+          </Stack>
+        </Stack>
+      </Card>
+    </div>
+  );
+}