Error graph by date in summary

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- Error graph by date in summary
+
 ## [0.2.5] - 2024-03-13
 
 ### Updated

lib/formatters.js

@@ -71,3 +71,25 @@ export function summarizeIssues(issues) {
 
   return sortBy(issueSummaries, 'count').reverse();
 }
+
+export function countIssuesByDate(issues, oldestDate, newestDate) {
+  const dateGroups = groupBy(issues, 'date');
+
+  const dateGroupsInRange = {};
+
+  for (let date = oldestDate; date <= newestDate; date++) {
+    dateGroupsInRange[date] = dateGroups[date] ?? [];
+  }
+
+  return Object.entries(dateGroupsInRange).map(([date, issues]) => {
+    return {
+      date,
+      count: issues.length,
+      boardings: issues.reduce((sum, issue) => sum + (issue.boardings ?? 0), 0),
+      alightings: issues.reduce(
+        (sum, issue) => sum + (issue.alightings ?? 0),
+        0,
+      ),
+    };
+  });
+}

lib/gtfs-ride.js

@@ -13,7 +13,11 @@ import { log, logWarning, logError, logStats } from './log-utils.js';
 import { setDefaultConfig } from './utils.js';
 import importAPC from './import-apc.js';
 import { generateSummaryHtml } from './summary.js';
-import { formatIssue, summarizeIssues } from './formatters.js';
+import {
+  countIssuesByDate,
+  formatIssue,
+  summarizeIssues,
+} from './formatters.js';
 
 /*
  * Generate GTFS-Ride data
@@ -140,6 +144,7 @@ const gtfsRide = async (initialConfig) => {
       .all(...tripsWithData);
 
     let dateRange = '';
+    let issueDateCounts = [];
 
     if (oldestDate && newestDate) {
       dateRange = `${DateTime.fromFormat(
@@ -149,13 +154,20 @@ const gtfsRide = async (initialConfig) => {
         newestDate.service_date.toString(),
         'yyyyMMdd',
       ).toLocaleString(DateTime.DATE_FULL)}`;
+
+      issueDateCounts = countIssuesByDate(
+        issues,
+        oldestDate.service_date,
+        newestDate.service_date,
+      );
     }
 
     const outputStats = {
       apcType: config.apcType,
       boardAlightCount: boardAlightCount['count(*)'],
       issues,
       issueSummaries: summarizeIssues(issues),
+      issueDateCounts,
       seconds,
       dateRange,
       stopsWithData,

views/layout.pug

@@ -9,4 +9,37 @@ html
   body
     block content
 
-    script(src="/js/index.js")
+    script(src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js")
+    script
+    script.
+      (async function() {
+        const issueDateCounts = !{JSON.stringify(issueDateCounts) || '\'\''};
+
+        new Chart(
+          document.getElementById('issuechart'),
+          {
+            type: 'bar',
+            data: {
+              labels: issueDateCounts.map(row => row.date),
+              datasets: [
+                {
+                  label: 'Issues by date',
+                  data: issueDateCounts.map(row => row.count)
+                }
+              ]
+            },
+            options: {
+              plugins: {
+                tooltip: {
+                  callbacks: {
+                    label: function(context) {
+                      const issueDateCount = issueDateCounts[context.dataIndex];
+                      return `${issueDateCount.count} Issues, ${issueDateCount.boardings} Boardings, ${issueDateCount.alightings} Alightings`;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        );
+      })();

views/summary.pug

@@ -98,6 +98,9 @@ block content
 
     .py-12#issues
       h2.text-3xl.font-extrabold.tracking-tight.text-gray-900.pb-4 #{issues.length.toLocaleString()} Issues
+
+      div(style="height: 400px;")
+        canvas#issuechart
       h3.text-xl.font-bold.tracking-tight.text-gray-900.pb-2 Summary of Issues
       table.table-auto.mb-4
         thead