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 = ( + array: T[], + property: keyof T +) => { + const res: Record = {}; + 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 = (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 = (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) => {