Only show delays with more than 0m

transitmatters · Dec 20, 2024 · 4dc77ba · 4dc77ba
1 parent 7f09c7a
commit 4dc77ba
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 50 deletions.
diff --git a/common/types/delays.ts b/common/types/delays.ts
@@ -12,6 +12,8 @@ export interface LineDelays {
   police_activity: number;
   power_problem: number;
   signal_problem: number;
+  track_work: number;
+  car_traffic: number;
   mechanical_problem: number;
   brake_problem: number;
   switch_problem: number;

diff --git a/modules/delays/charts/DelayBreakdownGraph.tsx b/modules/delays/charts/DelayBreakdownGraph.tsx
@@ -19,6 +19,7 @@ import { getFormattedTimeString } from '../../../common/utils/time';
 import { hexWithAlpha } from '../../../common/utils/general';
 import { getRemainingBlockAnnotation } from '../../service/utils/graphUtils';
 import { DATE_FORMAT, TODAY } from '../../../common/constants/dates';
+import { filterOutZeroValueDatasets } from './utils';
 
 interface DelayBreakdownGraphProps {
   data: LineDelays[];
@@ -59,7 +60,7 @@ export const DelayBreakdownGraph: React.FC<DelayBreakdownGraphProps> = ({
           redraw={true}
           data={{
             labels,
-            datasets: [
+            datasets: filterOutZeroValueDatasets([
               {
                 label: `🚉 Disabled Train`,
                 borderColor: '#dc2626',
@@ -104,6 +105,28 @@ export const DelayBreakdownGraph: React.FC<DelayBreakdownGraphProps> = ({
                 pointHoverBackgroundColor: lineColor,
                 data: data.map((datapoint) => datapoint.signal_problem),
               },
+              {
+                label: `🚙 Cars/Traffic`,
+                borderColor: '#f59e0b',
+                backgroundColor: hexWithAlpha('#f59e0b', 0.8),
+                pointRadius: 0,
+                pointBorderWidth: 0,
+                fill: true,
+                pointHoverRadius: 6,
+                pointHoverBackgroundColor: lineColor,
+                data: data.map((datapoint) => datapoint.car_traffic),
+              },
+              {
+                label: `🚧 Track Work`,
+                borderColor: '#f87171',
+                backgroundColor: hexWithAlpha('#f87171', 0.8),
+                pointRadius: 0,
+                pointBorderWidth: 0,
+                fill: true,
+                pointHoverRadius: 6,
+                pointHoverBackgroundColor: lineColor,
+                data: data.map((datapoint) => datapoint.track_work),
+              },
               {
                 label: `🎚️ Switch Problem`,
                 borderColor: '#10b981',
@@ -203,7 +226,7 @@ export const DelayBreakdownGraph: React.FC<DelayBreakdownGraphProps> = ({
                 pointHoverBackgroundColor: lineColor,
                 data: data.map((datapoint) => datapoint.other),
               },
-            ],
+            ]),
           }}
           options={{
             responsive: true,

diff --git a/modules/delays/charts/DelayByCategoryGraph.tsx b/modules/delays/charts/DelayByCategoryGraph.tsx
@@ -13,6 +13,7 @@ import { watermarkLayout } from '../../../common/constants/charts';
 import { ChartBorder } from '../../../common/components/charts/ChartBorder';
 import type { LineDelays } from '../../../common/types/delays';
 import { getFormattedTimeString } from '../../../common/utils/time';
+import { filterOutZeroValues } from './utils';
 
 interface DelayByCategoryGraphProps {
   data: LineDelays[];
@@ -40,54 +41,29 @@ export const DelayByCategoryGraph: React.FC<DelayByCategoryGraphProps> = ({
   const { linePath } = useDelimitatedRoute();
   const ref = useRef();
   const isMobile = !useBreakpoint('md');
-  const labels = [
-    '🚉 Disabled Train',
-    '🚪 Door Problem',
-    '🔌 Power/Wire Issue',
-    '🚦 Signal Problem',
-    '🎚️ Switch Problem',
-    '🛑 Brake Issue',
-    '🛤️ Track Issue',
-    '🔧 Mechanical Problem',
-    '🌊 Flooding',
-    '🚓 Police Activity',
-    '🚑 Medical Emergency',
-    '🚒 Fire Department Activity',
-    'Other',
-  ];
-  const backgroundColors = [
-    '#dc2626',
-    '#3f6212',
-    '#eab308',
-    '#84cc16',
-    '#10b981',
-    '#4c1d95',
-    '#8b5cf6',
-    '#451a03',
-    '#0ea5e9',
-    '#1d4ed8',
-    '#be123c',
-    '#ea580c',
-    '#6b7280',
-  ];
-  const delayTotals: number[] = sumArray(
-    data.map((datapoint) => {
-      return [
-        datapoint.disabled_vehicle,
-        datapoint.door_problem,
-        datapoint.power_problem,
-        datapoint.signal_problem,
-        datapoint.switch_problem,
-        datapoint.brake_problem,
-        datapoint.track_issue,
-        datapoint.mechanical_problem,
-        datapoint.flooding,
-        datapoint.police_activity,
-        datapoint.medical_emergency,
-        datapoint.fire,
-        datapoint.other,
-      ];
-    })
+
+  const { labels, backgroundColors, delayTotals } = filterOutZeroValues(
+    sumArray(
+      data.map((datapoint) => {
+        return [
+          datapoint.disabled_vehicle,
+          datapoint.door_problem,
+          datapoint.power_problem,
+          datapoint.signal_problem,
+          datapoint.switch_problem,
+          datapoint.brake_problem,
+          datapoint.track_issue,
+          datapoint.track_work,
+          datapoint.car_traffic,
+          datapoint.mechanical_problem,
+          datapoint.flooding,
+          datapoint.police_activity,
+          datapoint.medical_emergency,
+          datapoint.fire,
+          datapoint.other,
+        ];
+      })
+    )
   );
 
   return (

diff --git a/modules/delays/charts/utils.ts b/modules/delays/charts/utils.ts
@@ -0,0 +1,55 @@
+import type { ChartDataset } from 'chart.js';
+
+const labels = [
+  '🚉 Disabled Train',
+  '🚪 Door Problem',
+  '🔌 Power/Wire Issue',
+  '🚦 Signal Problem',
+  '🎚️ Switch Problem',
+  '🛑 Brake Issue',
+  '🛤️ Track Issue',
+  `🚧 Track Work`,
+  `🚙 Cars/Traffic`,
+  '🔧 Mechanical Problem',
+  '🌊 Flooding',
+  '🚓 Police Activity',
+  '🚑 Medical Emergency',
+  '🚒 Fire Department Activity',
+  'Other',
+];
+
+const backgroundColors = [
+  '#dc2626',
+  '#3f6212',
+  '#eab308',
+  '#84cc16',
+  '#10b981',
+  '#4c1d95',
+  '#8b5cf6',
+  '#f87171',
+  '#f59e0b',
+  '#451a03',
+  '#0ea5e9',
+  '#1d4ed8',
+  '#be123c',
+  '#ea580c',
+  '#6b7280',
+];
+
+export const filterOutZeroValues = (delayTotals: number[]) => {
+  const populatedDelayTotalIdxs = delayTotals.map((delayTotal, idx) => {
+    return delayTotal > 0 ? idx : -1;
+  });
+
+  return {
+    labels: labels.filter((_, idx) => populatedDelayTotalIdxs[idx] !== -1),
+    backgroundColors: backgroundColors.filter((_, idx) => populatedDelayTotalIdxs[idx] !== -1),
+    delayTotals: delayTotals.filter((_, idx) => populatedDelayTotalIdxs[idx] !== -1),
+  };
+};
+
+export const filterOutZeroValueDatasets = (datasets: ChartDataset<'line', number[]>[]) => {
+  return datasets.filter((dataset) => {
+    return dataset.data.some((data) => data > 0);
+  });
+};