diff --git a/modules/slowzones/SlowZonesDetails.tsx b/modules/slowzones/SlowZonesDetails.tsx index a02430374..c55350ed2 100644 --- a/modules/slowzones/SlowZonesDetails.tsx +++ b/modules/slowzones/SlowZonesDetails.tsx @@ -48,7 +48,8 @@ export function SlowZonesDetails() { const totalSlowTimeReady = !delayTotals.isError && delayTotals.data && startDateUTC && endDateUTC && lineShort && line; const segmentsReady = !allSlow.isError && allSlow.data && startDateUTC && lineShort; - const canShowSlowZonesMap = lineShort === 'Red' || lineShort === 'Blue' || lineShort === 'Orange'; + const canShowSlowZonesMap = + lineShort === 'Red' || lineShort === 'Blue' || lineShort === 'Orange' || lineShort === 'Green'; const isDesktop = useBreakpoint('lg'); if (!endDateUTC || !startDateUTC) { diff --git a/modules/slowzones/SystemSlowZonesDetails.tsx b/modules/slowzones/SystemSlowZonesDetails.tsx index 99aa0fff7..a3bfa947e 100644 --- a/modules/slowzones/SystemSlowZonesDetails.tsx +++ b/modules/slowzones/SystemSlowZonesDetails.tsx @@ -38,7 +38,8 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet const [lineShort, setLineShort] = useState('Red'); const line = `line-${lineShort.toLowerCase()}` as Line; - const canShowSlowZonesMap = lineShort === 'Red' || lineShort === 'Blue' || lineShort === 'Orange'; + const canShowSlowZonesMap = + lineShort === 'Red' || lineShort === 'Blue' || lineShort === 'Orange' || lineShort === 'Green'; const isDesktop = useBreakpoint('lg'); const { @@ -116,6 +117,7 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet Red: 'Red', Orange: 'Orange', Blue: 'Blue', + Green: 'Green', })} /> diff --git a/modules/slowzones/charts/TotalSlowTime.tsx b/modules/slowzones/charts/TotalSlowTime.tsx index e72d48cf7..d3f0e8df5 100644 --- a/modules/slowzones/charts/TotalSlowTime.tsx +++ b/modules/slowzones/charts/TotalSlowTime.tsx @@ -81,6 +81,14 @@ export const TotalSlowTime: React.FC = ({ pointRadius: 0, tension: 0.1, }, + { + label: `Green Line (D)`, + data: data?.map((d) => (d['Green'] / 60).toFixed(2)), + borderColor: LINE_COLORS['line-green'], + backgroundColor: LINE_COLORS['line-green'], + pointRadius: 0, + tension: 0.1, + }, ]; return ( diff --git a/modules/slowzones/map/SlowZonesMap.stories.tsx b/modules/slowzones/map/SlowZonesMap.stories.tsx index 76e491684..42d458d56 100644 --- a/modules/slowzones/map/SlowZonesMap.stories.tsx +++ b/modules/slowzones/map/SlowZonesMap.stories.tsx @@ -38,9 +38,29 @@ const slowZonesResponses: SlowZoneResponse[] = [ }, ]; +const slowZonesGreenResponses: SlowZoneResponse[] = [ + { + color: 'Green', + fr_id: '70257', + to_id: '70508', + start: '2023-03-12T00:00:00Z', + end: '2023-04-01T00:00:00Z', + delay: 42.5, + mean_metric: 172.929, + baseline: 135.0, + duration: 20, + }, +]; + export const Primary = () => { return ( <> +