Add new questions per topic metric to production

client/package.json

@@ -19,7 +19,7 @@
     "@types/node": "^18.8.4",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "axios": "^0.27.2",
+    "axios": "^1.6.7",
     "chart.js": "^4.4.1",
     "chat.js": "^1.0.2",
     "downloadjs": "^1.4.7",
@@ -31,7 +31,7 @@
     "react-cookie": "^4.1.1",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-window": "^1.8.7",
     "socket.io-client": "^4.5.1",
     "styled-components": "^5.3.5",

client/src/components/metrics/Graph.tsx

@@ -13,13 +13,14 @@ import MetricsService from '../../services/MetricsService';
 
 export default function Graph() {
   const theme = useTheme();
-  const [numStudentsPerDayLastWeek, setNumStudentsPerDayLastWeek] = useState([]);
-  const [numStudentsPerDay, setNumStudentsPerDay] = useState([]);
-  const [numStudentsOverall, setNumStudentsOverall] = useState([]);
+  const [numQuestionsPerDayLastWeek, setNumQuestionsPerDayLastWeek] = useState([]);
+  const [numQuestionsPerDay, setNumQuestionsPerDay] = useState([]);
+  const [numQuestionsOverall, setNumQuestionsOverall] = useState([]);
+  const [numQuestionsPerTopic, setNumQuestionsPerTopic] = useState([]);
 
   useEffect(() => {
     MetricsService.getNumStudentsPerDayLastWeek().then((res) => {
-      setNumStudentsPerDayLastWeek(res.data.numStudentsPerDayLastWeek);
+      setNumQuestionsPerDayLastWeek(res.data.numStudentsPerDayLastWeek);
     });
 
     MetricsService.getNumStudentsPerDay().then((res) => {
@@ -30,11 +31,16 @@ export default function Graph() {
         return days.indexOf(a.day) - days.indexOf(b.day);
       });
 
-      setNumStudentsPerDay(dataBack);
+      setNumQuestionsPerDay(dataBack);
     });
 
     MetricsService.getNumStudentsOverall().then((res) => {
-      setNumStudentsOverall(res.data.numStudentsOverall);
+      setNumQuestionsOverall(res.data.numStudentsOverall);
+    });
+
+    MetricsService.getNumQuestionsPerTopic().then((res) => {
+      console.log(res.data.numQuestionsPerTopic);
+      setNumQuestionsPerTopic(res.data.numQuestionsPerTopic);
     });
   }, []);
 
@@ -50,7 +56,7 @@ export default function Graph() {
 
       <div style={{height: '40vh', width: 'auto', position: 'relative'}}>
         <Line
-          datasetIdKey='numStudentsPerDayLastWeek'
+          datasetIdKey='numQuestionsPerDayLastWeek'
           options={{
             layout: {
               padding: {
@@ -81,7 +87,7 @@ export default function Graph() {
               y: {
                 title: {
                   display: true,
-                  text: 'Number of Students',
+                  text: 'Number of Questions',
                   font: {
                     size: 16,
                   },
@@ -97,11 +103,11 @@ export default function Graph() {
           }}
 
           data={{
-            labels: numStudentsPerDayLastWeek.map((day) => dateFormatter(day.day)),
+            labels: numQuestionsPerDayLastWeek.map((day) => dateFormatter(day.day)),
             datasets: [
               {
-                label: 'Number of Students',
-                data: numStudentsPerDayLastWeek.map((day) => day.students),
+                label: 'Number of Questions',
+                data: numQuestionsPerDayLastWeek.map((day) => day.students),
                 fill: false,
                 backgroundColor: theme.palette.primary.main,
                 borderColor: theme.palette.primary.main,
@@ -119,7 +125,7 @@ export default function Graph() {
 
       <div style={{height: '40vh', width: 'auto', position: 'relative'}}>
         <Line
-          datasetIdKey='numStudentsPerDayOverall'
+          datasetIdKey='numQuestionsPerDayOverall'
           options={{
             layout: {
               padding: {
@@ -150,7 +156,7 @@ export default function Graph() {
               y: {
                 title: {
                   display: true,
-                  text: 'Number of Students',
+                  text: 'Number of Questions',
                   font: {
                     size: 16,
                   },
@@ -166,11 +172,11 @@ export default function Graph() {
           }}
 
           data={{
-            labels: numStudentsOverall.map((day) => dateFormatter(day.day)),
+            labels: numQuestionsOverall.map((day) => dateFormatter(day.day)),
             datasets: [
               {
-                label: 'Number of Students',
-                data: numStudentsOverall.map((day) => day.students),
+                label: 'Number of Questions',
+                data: numQuestionsOverall.map((day) => day.students),
                 fill: false,
                 backgroundColor: theme.palette.primary.main,
                 borderColor: theme.palette.primary.main,
@@ -188,7 +194,73 @@ export default function Graph() {
 
       <div style={{height: '40vh', width: 'auto', position: 'relative'}}>
         <Bar
-          datasetIdKey='numStudentsPerDayOfWeek'
+          datasetIdKey='numQuestionsPerDayOfWeek'
+          options={{
+            layout: {
+              padding: {
+                top: 40,
+                right: 100,
+                bottom: 40,
+                left: 50,
+              },
+            },
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                display: false,
+              },
+            },
+            scales: {
+              x: {
+                ticks: {
+                  font: {
+                    size: 16,
+                  },
+                },
+                grid: {
+                  color: theme.palette.divider,
+                },
+              },
+              y: {
+                title: {
+                  display: true,
+                  text: 'Number of Questions',
+                  font: {
+                    size: 16,
+                  },
+                },
+                ticks: {
+                  autoSkip: true,
+                },
+                grid: {
+                  color: theme.palette.divider,
+                },
+              },
+            },
+          }}
+          data={{
+            labels: numQuestionsPerDay.map((day) => day.day),
+            datasets: [
+              {
+                label: 'Number of Questions',
+                data: numQuestionsPerDay.map((day) => day.students),
+                backgroundColor: theme.palette.primary.main,
+                borderColor: theme.palette.primary.main,
+                borderWidth: 3,
+              },
+            ],
+          }}
+        />
+      </div>
+
+      <Typography variant="h5" sx={{mt: 4, ml: 10}} fontWeight='bold'>
+      Number of Questions per Topic
+      </Typography>
+
+      <div style={{height: '40vh', width: 'auto', position: 'relative'}}>
+        <Bar
+          datasetIdKey='numQuestionsPerTopic'
           options={{
             layout: {
               padding: {
@@ -219,7 +291,7 @@ export default function Graph() {
               y: {
                 title: {
                   display: true,
-                  text: 'Number of Students',
+                  text: 'Number of Questions',
                   font: {
                     size: 16,
                   },
@@ -234,11 +306,11 @@ export default function Graph() {
             },
           }}
           data={{
-            labels: numStudentsPerDay.map((day) => day.day),
+            labels: numQuestionsPerTopic.map((topic) => topic.name),
             datasets: [
               {
-                label: 'Number of Students',
-                data: numStudentsPerDay.map((day) => day.students),
+                label: 'Number of Questions',
+                data: numQuestionsPerTopic.map((topic) => topic.count),
                 backgroundColor: theme.palette.primary.main,
                 borderColor: theme.palette.primary.main,
                 borderWidth: 3,

client/src/services/MetricsService.tsx

@@ -58,6 +58,10 @@ class MetricsDataService {
   getNumStudentsOverall() {
     return http.get('/metrics/numStudentsOverall');
   }
+
+  getNumQuestionsPerTopic() {
+    return http.get('/metrics/numQuestionsPerTopic');
+  }
 }
 
 export default new MetricsDataService();

server/controllers/metrics.js

@@ -427,6 +427,67 @@ exports.get_num_students_overall = (req, res) => {
     });
 }
 
+exports.get_num_questions_per_topic = (req, res) => {
+    if (!req.user || !req.user.isTA) {
+        respond_error(req, res, "You don't have permissions to perform this operation", 403);
+        return;
+    }
+
+    let assignmentsSet = {};
+
+    assignmentsSet[-1] = {
+        name: "Other",
+        start_date: new Date("1/1/2000"),
+        end_date: new Date("1/1/3000")
+    }
+
+    models.assignment_semester.findAll({
+        where: {
+            sem_id: settings.get_admin_settings().currSem,
+        },
+        order: [['start_date', 'ASC']],
+        include: models.assignment
+    }).then((assignments) => {
+
+        for (const assignmentSem of assignments) {
+            let assignment = assignmentSem.assignment;
+            assignmentsSet[assignment.assignment_id] = {
+                name: assignment.name,
+                start_date: assignmentSem.start_date,
+                end_date: assignmentSem.end_date
+            };
+        }
+
+        return models.question.findAll({
+            attributes: [
+                'assignment',
+                [Sequelize.fn('count', Sequelize.col('question_id')), 'count']
+            ],
+            where: {
+                sem_id: settings.get_admin_settings().currSem,
+                help_time: {
+                    [Sequelize.Op.ne]: null
+                },
+            },
+            group: [[Sequelize.col('assignment')]],
+        })
+    }).then((data) => {
+        for (const row of data) {
+            let assnCount = row.dataValues;
+            assignmentsSet[assnCount.assignment].count = assnCount.count;
+        }
+
+        let result = [];
+
+        for (const [id, assn] of Object.entries(assignmentsSet)) {
+            result.push(assn)
+        }
+        result.sort((a, b) => a.start_date - b.start_date)
+
+        respond(req, res, "Got number of questions per topic", { numQuestionsPerTopic: result }, 200);
+    });
+}
+
 exports.get_ranked_students = (req, res) => {
     if (!req.user || !req.user.isTA || !req.user.isAdmin) {
         respond_error(req, res, "You don't have permission to perform this operation", 403);