Making a green line map

common/components/maps/LineMap.stories.tsx

@@ -54,9 +54,17 @@ const redLineSegments: SegmentRenderOptions[] = [
   },
 ];
 
+const greenLine = createDefaultDiagramForLine('Green');
+
 export const Testing = () => {
   return (
     <>
+      <LineMap
+        direction="horizontal"
+        diagram={greenLine}
+        getStationLabel={(options) => options.stationId}
+        strokeOptions={{ stroke: 'green' }}
+      />
       <LineMap
         direction="horizontal"
         diagram={redLine}

common/components/maps/diagrams/lines.ts

@@ -5,7 +5,7 @@ import { Diagram } from './diagram';
 import { execute } from './execute';
 import type { Turtle } from './types';
 
-type DiagrammableLineName = 'Red' | 'Orange' | 'Blue';
+type DiagrammableLineName = 'Red' | 'Orange' | 'Blue' | 'Green';
 
 type CreateDiagramOptions = {
   /** Number of pixels between each station */
@@ -58,6 +58,103 @@ export const createRedLineDiagram = (options: CreateDiagramOptions = {}) => {
   });
 };
 
+export const createGreenLineDiagram = (options: CreateDiagramOptions = {}) => {
+  const { pxPerStation = DEFAULT_PX_PER_STATION } = options;
+  const start: Turtle = { x: 0, y: 0, theta: 90 };
+  const dStart: Turtle = { x: -20, y: -50, theta: 90 };
+  const eStart: Turtle = { x: 0, y: -75, theta: 90 };
+  const stationsB = getStationsForLine('Green', 'B');
+  const stationsC = getStationsForLine('Green', 'C');
+  const stationsD = getStationsForLine('Green', 'D');
+  const stationsE = getStationsForLine('Green', 'E');
+
+  let trunkFirstIndex = stationsD.findIndex((station) => station.station === 'place-lech');
+  let trunkLastIndex = stationsD.findIndex((station) => station.station === 'place-coecl');
+  const stationsTrunk = stationsD.slice(trunkFirstIndex, trunkLastIndex + 1);
+
+  const bcdTrunkFirstIndex = stationsB.findIndex((station) => station.station === 'place-hymnl');
+  const bcdTrunkLastIndex = stationsB.findIndex((station) => station.station === 'place-kencl');
+  const stationsBCDTrunk = stationsB.slice(bcdTrunkFirstIndex, bcdTrunkLastIndex + 1);
+
+  trunkLastIndex = stationsB.findIndex((station) => station.station === 'place-kencl');
+  const stationsBBranch = stationsB.slice(trunkLastIndex + 1);
+
+  trunkLastIndex = stationsC.findIndex((station) => station.station === 'place-kencl');
+  const stationsCBranch = stationsC.slice(trunkLastIndex + 1);
+
+  trunkFirstIndex = stationsD.findIndex((station) => station.station === 'place-lech');
+  trunkLastIndex = stationsD.findIndex((station) => station.station === 'place-kencl');
+  const stationsDBranch1 = stationsD.slice(0, trunkFirstIndex + 1);
+  const stationsDBranch2 = stationsD.slice(trunkLastIndex + 1);
+
+  trunkFirstIndex = stationsE.findIndex((station) => station.station === 'place-lech');
+  trunkLastIndex = stationsE.findIndex((station) => station.station === 'place-coecl');
+  const stationsEBranch1 = stationsE.slice(0, trunkFirstIndex + 1);
+  const stationsEBranch2 = stationsE.slice(trunkLastIndex + 1);
+
+  const trunk = line(pxPerStation * (1 + stationsTrunk.length), ['trunk']);
+  const bcdTrunk = line(pxPerStation + 2, ['bcd-trunk']);
+
+  const pathB = execute({
+    start,
+    ranges: ['branch-b'],
+    commands: [
+      trunk,
+      line(20),
+      bcdTrunk,
+      wiggle(30, -20),
+      line(10),
+      line(pxPerStation * stationsBBranch.length, ['branch-b-stations']),
+    ],
+  });
+  const pathC = execute({
+    start,
+    ranges: ['branch-c'],
+    commands: [
+      trunk,
+      line(20),
+      bcdTrunk,
+      line(30),
+      line(pxPerStation * stationsCBranch.length, ['branch-c-stations']),
+    ],
+  });
+  const pathD = execute({
+    start: dStart,
+    ranges: ['branch-d'],
+    commands: [
+      line(pxPerStation * stationsDBranch1.length, ['branch-d-stations-1']),
+      wiggle(30, 20),
+      trunk,
+      line(20),
+      bcdTrunk,
+      wiggle(30, 20),
+      line(pxPerStation * stationsDBranch2.length, ['branch-d-stations-2']),
+    ],
+  });
+  const pathE = execute({
+    start: eStart,
+    ranges: ['branch-e'],
+    commands: [
+      line(pxPerStation * stationsEBranch1.length, ['branch-e-stations-1']),
+      line(15),
+      trunk,
+      wiggle(60, 40),
+      line(pxPerStation * stationsEBranch2.length, ['branch-e-stations-2']),
+    ],
+  });
+
+  return new Diagram([pathB, pathC, pathD, pathE], {
+    trunk: stationsTrunk,
+    'bcd-trunk': stationsBCDTrunk,
+    'branch-b-stations': stationsBBranch,
+    'branch-c-stations': stationsCBranch,
+    'branch-d-stations-1': stationsDBranch1,
+    'branch-d-stations-2': stationsDBranch2,
+    'branch-e-stations-1': stationsEBranch1,
+    'branch-e-stations-2': stationsEBranch2,
+  });
+};
+
 const createStraightLineDiagram = (
   lineName: DiagrammableLineName,
   options: CreateDiagramOptions = {}
@@ -80,6 +177,8 @@ export const createDefaultDiagramForLine = (
   switch (lineName) {
     case 'Red':
       return createRedLineDiagram(options);
+    case 'Green':
+      return createGreenLineDiagram(options);
     default:
       return createStraightLineDiagram(lineName, options);
   }

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];