Merge pull request #255 from cmu15122/jtromero/metricsPolish

Jtromero/metrics polish

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.andrewId}>
+                            {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.andrewId}>
+                            {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>
+  );
+}

client/src/components/metrics/Graph.tsx

@@ -45,7 +45,7 @@ export default function Graph() {
   return (
     <div>
       <Typography variant="h5" sx={{mt: 4, ml: 10}} fontWeight='bold'>
-        Number of Students per Day (in the last week)
+        Number of Questions per Day (in the last week)
       </Typography>
 
       <div style={{height: '40vh', width: 'auto', position: 'relative'}}>
@@ -114,7 +114,7 @@ export default function Graph() {
       </div>
 
       <Typography variant="h5" sx={{mt: 4, ml: 10}} fontWeight='bold'>
-        Number of Students per Day (overall)
+        Number of Questions per Day (semester)
       </Typography>
 
       <div style={{height: '40vh', width: 'auto', position: 'relative'}}>
@@ -183,7 +183,7 @@ export default function Graph() {
       </div>
 
       <Typography variant="h5" sx={{mt: 4, ml: 10}} fontWeight='bold'>
-      Number of Students per Day of the Week
+      Number of Questions per Day of the Week
       </Typography>
 
       <div style={{height: '40vh', width: 'auto', position: 'relative'}}>

client/src/components/metrics/MetricsMain.tsx

@@ -1,26 +1,32 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {
   Typography,
 } from '@mui/material';
 
-import DateTimeSelector from './DateTimeSelector';
 import PersonalStats from './PersonalStats';
 import OverallStats from './OverallStats';
 import CumulativeStats from './CumulativeStats';
 import Graph from './Graph';
+import {UserDataContext} from '../../contexts/UserDataContext';
+import AdminMetrics from './AdminMetrics';
 
 export default function MetricsMain(props) {
+  const {userData} = useContext(UserDataContext);
+
   return (
     <div>
       <Typography variant="h3" textAlign='center' sx={{mt: 4}} fontWeight='bold'>
         Metrics
       </Typography>
-      {/* <DateTimeSelector/> */}
       <PersonalStats/>
 
       <OverallStats/>
       <CumulativeStats/>
       <Graph/>
+
+      {
+        userData.isAdmin && <AdminMetrics/>
+      }
     </div>
   );
 }

client/src/components/settings/admin/DayPicker.tsx

@@ -8,7 +8,7 @@ import {Delete as DeleteIcon} from '@mui/icons-material';
 import SettingsService from '../../../services/SettingsService';
 
 export default function DayPicker(props) {
-  const {convertIdxToDays, daysOfWeek, room, roomDictionary, setRoomDictionary} = props;
+  const {convertIdxToDays, daysOfWeek, room, roomDictionary} = props;
   const [newDays, setNewDays] = useState(convertIdxToDays(roomDictionary[room]));
 
   const convertDaysToIdx = (daysArr) => {

client/src/components/settings/admin/Locations.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useContext, useMemo} from 'react';
+import React, {useState, useContext, useMemo} from 'react';
 import {
   TableCell, Typography,
 } from '@mui/material';

client/src/components/settings/admin/TASettings.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useContext, useMemo} from 'react';
+import React, {useState, useContext, useMemo} from 'react';
 import {
   Button, Checkbox, FormControlLabel, Grid, TableCell, TableRow, Typography, useTheme,
 } from '@mui/material';

client/src/services/MetricsService.tsx

@@ -1,6 +1,12 @@
 import http from '../http-common';
 
 class MetricsDataService {
+  getRankedTAs() {
+    return http.get('/metrics/rankedTAs');
+  }
+  getRankedStudents() {
+    return http.get('/metrics/rankedStudents');
+  }
   getHelpedStudents() {
     return http.get('/metrics/helpedStudents');
   }