From 7889534b4e6717bcaf073fbca68d82daaebaa783 Mon Sep 17 00:00:00 2001 From: Devin Matte Date: Sun, 14 May 2023 22:23:33 -0400 Subject: [PATCH 1/3] Making a green line map --- common/components/maps/LineMap.stories.tsx | 8 ++ common/components/maps/diagrams/lines.ts | 83 ++++++++++++++++++- .../slowzones/map/SlowZonesMap.stories.tsx | 31 +++++++ modules/slowzones/types.ts | 2 +- 4 files changed, 122 insertions(+), 2 deletions(-) diff --git a/common/components/maps/LineMap.stories.tsx b/common/components/maps/LineMap.stories.tsx index d8226dedd..fc8544b25 100644 --- a/common/components/maps/LineMap.stories.tsx +++ b/common/components/maps/LineMap.stories.tsx @@ -54,9 +54,17 @@ const redLineSegments: SegmentRenderOptions[] = [ }, ]; +const greenLine = createDefaultDiagramForLine('Green'); + export const Testing = () => { return ( <> + options.stationId} + strokeOptions={{ stroke: 'green' }} + /> { }); }; +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 stationsBBranch = stationsB.slice(trunkLastIndex + 1); + const stationsCBranch = stationsC.slice(trunkLastIndex + 1); + + trunkFirstIndex = stationsD.findIndex((station) => station.station === 'place-lech'); + trunkLastIndex = stationsD.findIndex((station) => station.station === 'place-coecl'); + const stationsDBranch1 = stationsD.slice(0, trunkFirstIndex + 1); + const stationsDBranch2 = stationsD.slice(trunkLastIndex); + + 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); + + const trunk = line(pxPerStation * (1 + stationsTrunk.length), ['trunk']); + + const pathB = execute({ + start, + ranges: ['branch-b'], + commands: [ + trunk, + wiggle(30, -20), + line(10), + line(pxPerStation * stationsBBranch.length, ['branch-b-stations']), + ], + }); + const pathC = execute({ + start, + ranges: ['branch-c'], + commands: [trunk, 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, + 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, + '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 = {} @@ -79,5 +157,8 @@ export const createDefaultDiagramForLine = ( if (lineName === 'Red') { return createRedLineDiagram(options); } + if (lineName === 'Green') { + return createGreenLineDiagram(options); + } return createStraightLineDiagram(lineName, options); }; diff --git a/modules/slowzones/map/SlowZonesMap.stories.tsx b/modules/slowzones/map/SlowZonesMap.stories.tsx index 49db3277c..537b225f2 100644 --- a/modules/slowzones/map/SlowZonesMap.stories.tsx +++ b/modules/slowzones/map/SlowZonesMap.stories.tsx @@ -34,9 +34,40 @@ const slowZonesResponses: SlowZoneResponse[] = [ }, ]; +const slowZonesGreenResponses: SlowZoneResponse[] = [ + { + color: 'Green', + fr_id: '70061', + to_id: '70063', + start: '2023-03-12T00:00:00Z', + end: '2023-04-01T00:00:00Z', + delay: 42.5, + mean_metric: 172.929, + baseline: 135.0, + duration: 20, + }, + { + color: 'Green', + fr_id: '70063', + to_id: '70061', + start: '2023-03-12T00:00:00Z', + end: '2023-04-01T00:00:00Z', + delay: 90, + mean_metric: 172.929, + baseline: 135.0, + duration: 20, + }, +]; + export const Primary = () => { return ( <> + Date: Sun, 14 May 2023 22:56:18 -0400 Subject: [PATCH 2/3] Full green line --- common/components/maps/diagrams/lines.ts | 27 ++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/common/components/maps/diagrams/lines.ts b/common/components/maps/diagrams/lines.ts index 7775fbc10..3a5e4270b 100644 --- a/common/components/maps/diagrams/lines.ts +++ b/common/components/maps/diagrams/lines.ts @@ -71,26 +71,36 @@ export const createGreenLineDiagram = (options: CreateDiagramOptions = {}) => { 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-coecl'); + trunkLastIndex = stationsD.findIndex((station) => station.station === 'place-kencl'); const stationsDBranch1 = stationsD.slice(0, trunkFirstIndex + 1); - const stationsDBranch2 = stationsD.slice(trunkLastIndex); + 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); + 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']), @@ -99,7 +109,13 @@ export const createGreenLineDiagram = (options: CreateDiagramOptions = {}) => { const pathC = execute({ start, ranges: ['branch-c'], - commands: [trunk, line(30), line(pxPerStation * stationsCBranch.length, ['branch-c-stations'])], + commands: [ + trunk, + line(20), + bcdTrunk, + line(30), + line(pxPerStation * stationsCBranch.length, ['branch-c-stations']), + ], }); const pathD = execute({ start: dStart, @@ -108,6 +124,8 @@ export const createGreenLineDiagram = (options: CreateDiagramOptions = {}) => { 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']), ], @@ -126,6 +144,7 @@ export const createGreenLineDiagram = (options: CreateDiagramOptions = {}) => { 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, From c2fa1b8dbea9c92f7b71e08b24fd34def6cd7927 Mon Sep 17 00:00:00 2001 From: Devin Matte Date: Mon, 15 May 2023 11:20:58 -0400 Subject: [PATCH 3/3] Adding GL official slowzone --- modules/slowzones/map/SlowZonesMap.stories.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/modules/slowzones/map/SlowZonesMap.stories.tsx b/modules/slowzones/map/SlowZonesMap.stories.tsx index 537b225f2..c09215629 100644 --- a/modules/slowzones/map/SlowZonesMap.stories.tsx +++ b/modules/slowzones/map/SlowZonesMap.stories.tsx @@ -37,8 +37,8 @@ const slowZonesResponses: SlowZoneResponse[] = [ const slowZonesGreenResponses: SlowZoneResponse[] = [ { color: 'Green', - fr_id: '70061', - to_id: '70063', + fr_id: '70257', + to_id: '70508', start: '2023-03-12T00:00:00Z', end: '2023-04-01T00:00:00Z', delay: 42.5, @@ -46,17 +46,6 @@ const slowZonesGreenResponses: SlowZoneResponse[] = [ baseline: 135.0, duration: 20, }, - { - color: 'Green', - fr_id: '70063', - to_id: '70061', - start: '2023-03-12T00:00:00Z', - end: '2023-04-01T00:00:00Z', - delay: 90, - mean_metric: 172.929, - baseline: 135.0, - duration: 20, - }, ]; export const Primary = () => {