From 01d398b1b829210de25928af9c9da658adcf0b41 Mon Sep 17 00:00:00 2001
From: Ian Reynolds <idreyn@gmail.com>
Date: Wed, 19 Jun 2024 19:08:01 -0400
Subject: [PATCH] Fix: Align scheduled/delivered trip counts (#993)

---
 common/utils/array.ts            | 10 ++++++++++
 modules/service/ServiceGraph.tsx | 28 ++++++++++++++++++++++------
 2 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 common/utils/array.ts

diff --git a/common/utils/array.ts b/common/utils/array.ts
new file mode 100644
index 000000000..37e884054
--- /dev/null
+++ b/common/utils/array.ts
@@ -0,0 +1,10 @@
+export const indexByProperty = <T extends { [key: string]: any }>(
+  array: T[],
+  property: keyof T
+) => {
+  const res: Record<string, T> = {};
+  array.forEach((el) => {
+    res[el[property]] = el;
+  });
+  return res;
+};
diff --git a/modules/service/ServiceGraph.tsx b/modules/service/ServiceGraph.tsx
index cfe123db6..ca8c0f2af 100644
--- a/modules/service/ServiceGraph.tsx
+++ b/modules/service/ServiceGraph.tsx
@@ -6,6 +6,7 @@ import type { DeliveredTripMetrics, ScheduledService } from '../../common/types/
 import type { ParamsType } from '../speed/constants/speeds';
 import { ChartBorder } from '../../common/components/charts/ChartBorder';
 import { DownloadButton } from '../../common/components/buttons/DownloadButton';
+import { indexByProperty } from '../../common/utils/array';
 import { ScheduledAndDeliveredGraph } from './ScheduledAndDeliveredGraph';
 import { getShuttlingBlockAnnotations } from './utils/graphUtils';
 
@@ -36,11 +37,25 @@ export const ServiceGraph: React.FC<ServiceGraphProps> = (props: ServiceGraphPro
     }));
   }, [data]);
 
+  const allDates = [
+    ...new Set([
+      ...predictedData.counts.map((point) => point.date),
+      ...data.map((point) => point.date),
+    ]),
+  ].sort((a, b) => (a > b ? 1 : -1));
+
+  const scheduledDataByDate = indexByProperty(predictedData.counts, 'date');
+  const deliveredDataByDate = indexByProperty(data, 'date');
+
   const scheduled = useMemo(() => {
     return {
       label: 'Scheduled round trips',
-      data: predictedData.counts.map(({ date, count }, index) => {
-        const value = data[index]?.miles_covered > 0 && count ? count / 2 : 0;
+      data: allDates.map((date) => {
+        const scheduledToday = scheduledDataByDate[date];
+        const deliveredToday = deliveredDataByDate[date];
+        const anyDeliveredToday = deliveredToday?.miles_covered > 0;
+        const value =
+          scheduledToday.count && anyDeliveredToday ? Math.round(scheduledToday.count) / 2 : 0;
         return { date, value };
       }),
       style: {
@@ -51,14 +66,15 @@ export const ServiceGraph: React.FC<ServiceGraphProps> = (props: ServiceGraphPro
         },
       },
     };
-  }, [data, predictedData, peak]);
+  }, [allDates, deliveredDataByDate, peak, scheduledDataByDate]);
 
   const delivered = useMemo(() => {
     return {
       label: 'Daily round trips',
-      data: data.map((datapoint) => {
-        const value = datapoint.miles_covered ? Math.round(datapoint.count) : 0;
-        return { date: datapoint.date, value };
+      data: allDates.map((date) => {
+        const deliveredToday = deliveredDataByDate[date];
+        const value = deliveredToday?.miles_covered ? Math.round(deliveredToday.count) : 0;
+        return { date, value };
       }),
       style: {
         tooltipLabel: (point) => {