feat: Format time axis on end of run graph

scripts/components/graphs/line-graph.js

@@ -103,7 +103,27 @@ 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 (!isX && axis.name === $.Localize('#Run_Stat_Name_Time')) {
+					const extreme = Math.max(Math.abs(axis.min), Math.abs(axis.max));
+					const time = Math.abs(markerValue);
+
+					let sign = Math.sign(markerValue) >= 0 ? '+' : '-';
+					if (markerValue === 0) sign = '';
+
+					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, {

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

styles/config.scss

@@ -601,7 +601,7 @@ $popup-button-font-size: 24px !default;
 // LINEGRAPH
 // ================
 
-$linegraph-axis-width: 24px;
+$linegraph-axis-width: 40px;
 
 // ================
 // TOAST