diff --git a/common/types/delays.ts b/common/types/delays.ts index d17b06cc..100f5829 100644 --- 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 index 3fd87bea..91cba0f2 100644 --- 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 = ({ redraw={true} data={{ labels, - datasets: [ + datasets: filterOutZeroValueDatasets([ { label: `🚉 Disabled Train`, borderColor: '#dc2626', @@ -104,6 +105,28 @@ export const DelayBreakdownGraph: React.FC = ({ 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 = ({ 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 index aec543ad..b5b5e650 100644 --- 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 = ({ 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 new file mode 100644 index 00000000..5821dfe0 --- /dev/null +++ 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); + }); +};