From 4f7fe3c2a41cedf2e3360603f7962c808b00e439 Mon Sep 17 00:00:00 2001
From: Roman Priesol <roman@priesol.net>
Date: Mon, 7 Sep 2026 13:44:21 +0200
Subject: [PATCH] Show min/max y-axis values on each profile chart

Plain HTML overlays, not SVG text: the chart's viewBox scales width
and height independently (preserveAspectRatio="none", for a
responsive width at a fixed pixel height), so text drawn inside that
coordinate space would get stretched by the mismatched factor.
---
 public/css/style.css       | 29 +++++++++++++++++++++++++++++
 public/js/track_profile.js | 16 ++++++++++------
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 79eb9c9..628e022 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -578,9 +578,14 @@ html, body {
   font-weight: normal;
 }
 
+.profile-chart__plot {
+  position: relative;
+}
+
 .profile-chart__svg {
   display: block;
   width: 100%;
+  height: 100%;
   cursor: crosshair;
 }
 
@@ -590,6 +595,30 @@ html, body {
   vector-effect: non-scaling-stroke;
 }
 
+/* Overlaid as plain HTML, not SVG text: the chart's viewBox scales width
+   and height independently (preserveAspectRatio="none", so the line fills
+   a responsive width at a fixed pixel height) — text drawn inside that
+   coordinate space would get stretched by the same mismatched factor. */
+.profile-chart__axis-value {
+  position: absolute;
+  left: 4px;
+  color: #898781;
+  font-size: 10px;
+  line-height: 1;
+  background: rgba(252, 252, 251, 0.75);
+  padding: 1px 3px;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.profile-chart__axis-value--max {
+  top: 2px;
+}
+
+.profile-chart__axis-value--min {
+  bottom: 2px;
+}
+
 .profile-panel__tooltip {
   position: absolute;
   top: 0;
diff --git a/public/js/track_profile.js b/public/js/track_profile.js
index 5ab796e..3e57134 100644
--- a/public/js/track_profile.js
+++ b/public/js/track_profile.js
@@ -92,12 +92,16 @@ export class TrackProfilePanel {
     wrapper.className = "profile-chart";
     wrapper.innerHTML = `
       <div class="profile-chart__label">${escapeHtml(series.label)} <span class="profile-chart__unit">(${escapeHtml(series.unit)})</span></div>
-      <svg viewBox="0 0 ${VIEWBOX_WIDTH} ${series.height}" preserveAspectRatio="none" class="profile-chart__svg" style="height:${series.height}px">
-        ${areaPath ? `<path d="${areaPath}" fill="${series.color}" fill-opacity="0.15" stroke="none"></path>` : ""}
-        <path d="${linePath}" fill="none" stroke="${series.color}" stroke-width="2" vector-effect="non-scaling-stroke"></path>
-        <line class="profile-chart__crosshair" x1="0" x2="0" y1="0" y2="${series.height}" hidden></line>
-        <circle class="profile-chart__dot" r="4" fill="${series.color}" stroke="#fff" stroke-width="1.5" hidden></circle>
-      </svg>
+      <div class="profile-chart__plot" style="height:${series.height}px">
+        <svg viewBox="0 0 ${VIEWBOX_WIDTH} ${series.height}" preserveAspectRatio="none" class="profile-chart__svg">
+          ${areaPath ? `<path d="${areaPath}" fill="${series.color}" fill-opacity="0.15" stroke="none"></path>` : ""}
+          <path d="${linePath}" fill="none" stroke="${series.color}" stroke-width="2" vector-effect="non-scaling-stroke"></path>
+          <line class="profile-chart__crosshair" x1="0" x2="0" y1="0" y2="${series.height}" hidden></line>
+          <circle class="profile-chart__dot" r="4" fill="${series.color}" stroke="#fff" stroke-width="1.5" hidden></circle>
+        </svg>
+        <span class="profile-chart__axis-value profile-chart__axis-value--max">${formatValue(max, series)}</span>
+        <span class="profile-chart__axis-value profile-chart__axis-value--min">${formatValue(min, series)}</span>
+      </div>
     `;
     wrapper.dataset.min = min;
     wrapper.dataset.max = max;