feat: display reading speed on analytics dashboard

Author: jo-elimu

pom-dependency-tree.txt

@@ -1,4 +1,4 @@
-ai.elimu:webapp:war:2.6.32-SNAPSHOT
+ai.elimu:webapp:war:2.6.34-SNAPSHOT
 +- ai.elimu:model:jar:model-2.0.97:compile
 |  \- com.google.code.gson:gson:jar:2.13.0:compile
 |     \- com.google.errorprone:error_prone_annotations:jar:2.37.0:compile

src/main/java/ai/elimu/web/analytics/students/StudentController.java

@@ -143,6 +143,38 @@ public String handleRequest(@PathVariable Long studentId, Model model) {
     }
     model.addAttribute("wordAssessmentEventCorrectCountList", wordAssessmentEventCorrectCountList);
     model.addAttribute("wordAssessmentEventIncorrectCountList", wordAssessmentEventIncorrectCountList);
+
+    // Prepare chart data - Reading speed (words per minute)
+    List<Double> readingSpeedAvgList = new ArrayList<>();
+    if (!wordAssessmentEvents.isEmpty()) {
+      Map<String, Integer> eventCountByWeekMap = new HashMap<>();
+      Map<String, Long> timeSpentMsSumByWeekMap = new HashMap<>();
+      for (WordAssessmentEvent event : wordAssessmentEvents) {
+        String eventWeek = simpleDateFormat.format(event.getTimestamp().getTime());
+        if (event.getMasteryScore() >= 0.5) {
+          eventCountByWeekMap.put(eventWeek, eventCountByWeekMap.getOrDefault(eventWeek, 0) + 1);
+          timeSpentMsSumByWeekMap.put(eventWeek, eventCountByWeekMap.getOrDefault(eventWeek, 0) + event.getTimeSpentMs());
+        }
+      }
+      week = (Calendar) calendar6MonthsAgo.clone();
+      while (!week.after(calendarNow)) {
+        String weekAsString = simpleDateFormat.format(week.getTime());
+        Integer wordsReadCount = eventCountByWeekMap.getOrDefault(weekAsString, 0);
+        log.info("wordsReadCount: " + wordsReadCount);
+        Long timeSpentMsSum = timeSpentMsSumByWeekMap.getOrDefault(weekAsString, 0L);
+        log.info("timeSpentMsSum: " + timeSpentMsSum);
+        Double timeSpentInMinutes = (double) (timeSpentMsSum / 1_000);
+        log.info("timeSpentInMinutes: " + timeSpentInMinutes);
+        Double wordsPerMinute = 0.00;
+        if (timeSpentInMinutes > 0) {
+          wordsPerMinute = wordsReadCount / timeSpentInMinutes;
+          log.info("wordsPerMinute: " + wordsPerMinute);
+        }
+        readingSpeedAvgList.add(wordsPerMinute);
+        week.add(Calendar.WEEK_OF_YEAR, 1);
+      }
+    }
+    model.addAttribute("readingSpeedAvgList", readingSpeedAvgList);
 
     // Prepare chart data - WordLearningEvents
     List<WordLearningEvent> wordLearningEvents = wordLearningEventDao.readAll(student.getAndroidId());

src/main/webapp/WEB-INF/jsp/analytics/students/id.jsp

@@ -202,6 +202,34 @@
 
     <h5 style="margin-top: 1em;">🔤 Words</h5>
     <div class="card-panel">
+        <h5>Reading speed (correct words per minute)</h5>
+        <canvas id="readingSpeedChart"></canvas>
+        <script>
+            const readingSpeedLabels = [
+                <c:forEach var="week" items="${weekList}">'${week}',</c:forEach>
+            ];
+            const readingSpeedData = {
+                labels: readingSpeedLabels,
+                datasets: [{
+                    data: <c:out value="${readingSpeedAvgList}" />,
+                    label: 'cwpm',
+                    backgroundColor: 'rgba(100,181,246, 0.5)', // #64b5f6 blue lighten-2
+                    borderColor: 'rgba(100,181,246, 0.5)', // #64b5f6 blue lighten-2
+                    tension: 0.5,
+                    fill: true
+                }]
+            };
+            const readingSpeedConfig = {
+                type: 'line',
+                data: readingSpeedData,
+                options: {}
+            };
+            var readingSpeedCtx = document.getElementById('readingSpeedChart');
+            new Chart(readingSpeedCtx, readingSpeedConfig);
+        </script>
+
+        <div class="divider" style="margin: 2em 0;"></div>
+
         <a id="exportWordAssessmentEventsToCsvButton" class="right btn waves-effect waves-light grey-text white" 
            href="<spring:url value='/analytics/students/${student.id}/word-assessment-events.csv' />">
             Export to CSV<i class="material-icons right">vertical_align_bottom</i>