From 7889534b4e6717bcaf073fbca68d82daaebaa783 Mon Sep 17 00:00:00 2001 From: Devin Matte Date: Sun, 14 May 2023 22:23:33 -0400 Subject: [PATCH 1/5] 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/5] 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/5] 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 = () => { From d364cedfa0d8b1eb319c75ea8ab023dd7dabe3ad Mon Sep 17 00:00:00 2001 From: Devin Matte Date: Mon, 18 Dec 2023 21:35:02 -0500 Subject: [PATCH 4/5] Adding green line slowzones --- common/components/maps/diagrams/lines.ts | 119 +++++++++---------- modules/slowzones/SlowZonesDetails.tsx | 3 +- modules/slowzones/SystemSlowZonesDetails.tsx | 4 +- modules/slowzones/charts/TotalSlowTime.tsx | 8 ++ 4 files changed, 71 insertions(+), 63 deletions(-) diff --git a/common/components/maps/diagrams/lines.ts b/common/components/maps/diagrams/lines.ts index 8cfe447ff..80b9e687b 100644 --- a/common/components/maps/diagrams/lines.ts +++ b/common/components/maps/diagrams/lines.ts @@ -60,98 +60,95 @@ 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 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 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'); + // 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); + // 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 = 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); + // 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); + // 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 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), + line(pxPerStation + 2, ['branch-d-stations-1']), 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], { + // 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([pathD], { trunk: stationsTrunk, - 'bcd-trunk': stationsBCDTrunk, - 'branch-b-stations': stationsBBranch, - 'branch-c-stations': stationsCBranch, + // '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, + // 'branch-e-stations-1': stationsEBranch1, + // 'branch-e-stations-2': stationsEBranch2, }); }; diff --git a/modules/slowzones/SlowZonesDetails.tsx b/modules/slowzones/SlowZonesDetails.tsx index 263ef0d20..aed68a915 100644 --- a/modules/slowzones/SlowZonesDetails.tsx +++ b/modules/slowzones/SlowZonesDetails.tsx @@ -45,7 +45,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'; if (!endDateUTC || !startDateUTC) { return ( diff --git a/modules/slowzones/SystemSlowZonesDetails.tsx b/modules/slowzones/SystemSlowZonesDetails.tsx index a079e2317..9c81a8b8f 100644 --- a/modules/slowzones/SystemSlowZonesDetails.tsx +++ b/modules/slowzones/SystemSlowZonesDetails.tsx @@ -36,7 +36,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 { query: { startDate, endDate }, @@ -102,6 +103,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..4a98d74a0 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`, + 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 ( From 7cf497ce48f2cbb11f35391353ae252e14be7753 Mon Sep 17 00:00:00 2001 From: Devin Matte Date: Sun, 1 Sep 2024 16:30:32 -0400 Subject: [PATCH 5/5] Specify the D branch --- modules/slowzones/charts/TotalSlowTime.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/slowzones/charts/TotalSlowTime.tsx b/modules/slowzones/charts/TotalSlowTime.tsx index 4a98d74a0..d3f0e8df5 100644 --- a/modules/slowzones/charts/TotalSlowTime.tsx +++ b/modules/slowzones/charts/TotalSlowTime.tsx @@ -82,7 +82,7 @@ export const TotalSlowTime: React.FC = ({ tension: 0.1, }, { - label: `Green Line`, + label: `Green Line (D)`, data: data?.map((d) => (d['Green'] / 60).toFixed(2)), borderColor: LINE_COLORS['line-green'], backgroundColor: LINE_COLORS['line-green'],