Green line slow zones

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) {

modules/slowzones/SystemSlowZonesDetails.tsx

@@ -38,7 +38,8 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet
 
   const [lineShort, setLineShort] = useState<LineShort>('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',
             })}
           />
         </WidgetDiv>

modules/slowzones/charts/TotalSlowTime.tsx

@@ -81,6 +81,14 @@ export const TotalSlowTime: React.FC<TotalSlowTimeProps> = ({
           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 (
     <ChartBorder>

modules/slowzones/map/SlowZonesMap.stories.tsx

@@ -38,9 +38,29 @@
   },
 ];
 
+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 (
     <>
+      <SlowZonesMap
+        lineName="Green"
+        slowZones={slowZonesGreenResponses}
+        direction="vertical"
+        speedRestrictions={[]}
+      />
       <SlowZonesMap
         lineName="Red"
         slowZones={slowZonesResponses}

modules/slowzones/types.ts

@@ -1,3 +1,3 @@
-const SLOW_ZONES_LINES = ['Red', 'Blue', 'Orange'] as const;
+const SLOW_ZONES_LINES = ['Red', 'Blue', 'Orange', 'Green'] as const;
 
 export type SlowZonesLineName = (typeof SLOW_ZONES_LINES)[number];