From 03327cb8bb2d7ace892cde15deaa4ca1d3873b94 Mon Sep 17 00:00:00 2001
From: benjl <benluijkx@gmail.com>
Date: Fri, 19 Jan 2024 14:00:30 -0700
Subject: [PATCH 1/2] feat: Format time axis on end of run graph

---
 scripts/components/graphs/line-graph.js | 22 +++++++++++++++++++++-
 scripts/pages/end-of-run/end-of-run.js  |  6 ++++--
 styles/components/graphs/linegraph.scss |  2 +-
 styles/config.scss                      |  2 +-
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/scripts/components/graphs/line-graph.js b/scripts/components/graphs/line-graph.js
index 4fa6a931..47f09406 100644
--- a/scripts/components/graphs/line-graph.js
+++ b/scripts/components/graphs/line-graph.js
@@ -23,6 +23,7 @@
  * @property {number} min - The minimum value on the axis
  * @property {number} interval - The intervals upon which to draw gridlines
  * @property {string} name - The name to draw on the side of the axis
+ * @property {boolean} timeBased - Whether or not the axis represents a length of time
  */
 
 /**
@@ -103,7 +104,26 @@ class LineGraph {
 				const offset = 'position: ' + (isX ? `${dist}px 0px 0px;` : `0px ${dist}px 0px;`);
 
 				// Linear interpolate to determine marker text, backwards for Y. Then round to precision and cast back to Number.
-				const markerValue = +(isX ? lineMin + j : lineMax + lineMin - j).toFixed(precision);
+				let markerValue = +(isX ? lineMin + j : lineMax + lineMin - j).toFixed(precision);
+				if (axis.timeBased) {
+					const extreme = Math.max(Math.abs(axis.min), Math.abs(axis.max));
+					const time = Math.abs(markerValue);
+
+					const sign = markerValue > 0 ? '+' : markerValue < 0 ? '-' : '';
+
+					const hours = Math.floor(time / 3600);
+					let minutes = Math.floor((time % 3600) / 60);
+					let seconds = (time % 3600) % 60;
+
+					if (time < 10 && extreme < 10) seconds = seconds.toFixed(precision);
+
+					markerValue = `${sign}${seconds}`;
+					if (extreme >= 60) {
+						if (extreme >= 3600 && minutes < 10) minutes = '0' + minutes;
+						if (seconds < 10) seconds = '0' + seconds;
+						markerValue = extreme >= 3600 ? `${sign}${hours}:${minutes}` : `${sign}${minutes}:${seconds}`;
+					}
+				}
 
 				// Create the marker label
 				$.CreatePanel('Label', markers, axisName + j, {
diff --git a/scripts/pages/end-of-run/end-of-run.js b/scripts/pages/end-of-run/end-of-run.js
index 8cb76f20..e7eb90bf 100644
--- a/scripts/pages/end-of-run/end-of-run.js
+++ b/scripts/pages/end-of-run/end-of-run.js
@@ -385,7 +385,8 @@ class EndOfRun {
 				name: $.Localize('#Common_Zone'),
 				// Limit max zones we draw an axis for to 30
 				// todo: find interval equiv to this: lineCount: Math.min(numZones, 30),
-				interval: 1
+				interval: 1,
+				timeBased: false
 			},
 			{
 				min: min,
@@ -393,7 +394,8 @@ class EndOfRun {
 				name: $.Localize(
 					useStat ? comparisonSplits[0].statsComparisons[statIndex].name : '#Run_Stat_Name_Time'
 				),
-				interval: yInterval
+				interval: yInterval,
+				timeBased: !useStat
 			}
 		];
 
diff --git a/styles/components/graphs/linegraph.scss b/styles/components/graphs/linegraph.scss
index 86818837..6a405088 100644
--- a/styles/components/graphs/linegraph.scss
+++ b/styles/components/graphs/linegraph.scss
@@ -172,7 +172,7 @@
 			height: 16px;
 			transform: translateY(-6px) translateX(-6px);
 			text-align: right;
-			max-width: 20px;
+			max-width: 40px;
 		}
 	}
 }
diff --git a/styles/config.scss b/styles/config.scss
index 4ce05ed2..b63aafe8 100644
--- a/styles/config.scss
+++ b/styles/config.scss
@@ -601,7 +601,7 @@ $popup-button-font-size: 24px !default;
 // LINEGRAPH
 // ================
 
-$linegraph-axis-width: 24px;
+$linegraph-axis-width: 40px;
 
 // ================
 // TOAST

From 348728f5759cd2c18443e035db2f4e25d9612ba7 Mon Sep 17 00:00:00 2001
From: benjl <benluijkx@gmail.com>
Date: Fri, 19 Jan 2024 17:06:44 -0700
Subject: [PATCH 2/2] chore: Decrease graph shaded area opacity

---
 scripts/pages/end-of-run/end-of-run.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/pages/end-of-run/end-of-run.js b/scripts/pages/end-of-run/end-of-run.js
index e7eb90bf..960d84c9 100644
--- a/scripts/pages/end-of-run/end-of-run.js
+++ b/scripts/pages/end-of-run/end-of-run.js
@@ -327,8 +327,8 @@ class EndOfRun {
 			],
 			color: '#ffffffaa',
 			thickness: 2,
-			shadeBelowToOriginColor: '#ffffff66',
-			shadeAboveToOriginColor: '#ffffff66'
+			shadeBelowToOriginColor: '#ffffff33',
+			shadeAboveToOriginColor: '#ffffff33'
 		};
 
 		let max = 0;