randy/maptool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show min/max y-axis values on each profile chart
CI / check (push) Successful in 40s
Details
CI / deploy (push) Successful in 15s
Details

Browse Source 
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.
This commit is contained in:
randy committed 2026-09-07 13:44:21 +02:00
1 parent 105651f005
commit 4f7fe3c2a4
2 files changed
+39 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/css/style.css
+29
View File
@@ -578,9 +578,14 @@ html, body {
font-weight: normal; font-weight: normal;
} }
.profile-chart__plot {
position: relative;
}
.profile-chart__svg { .profile-chart__svg {
display: block; display: block;
width: 100%; width: 100%;
height: 100%;
cursor: crosshair; cursor: crosshair;
} }
@@ -590,6 +595,30 @@ html, body {
vector-effect: non-scaling-stroke; 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 { .profile-panel__tooltip {
position: absolute; position: absolute;
top: 0; top: 0;
public/js/track_profile.js
+10 -6
View File
@@ -92,12 +92,16 @@ export class TrackProfilePanel {
wrapper.className = "profile-chart"; wrapper.className = "profile-chart";
wrapper.innerHTML = ` wrapper.innerHTML = `
<div class="profile-chart__label">${escapeHtml(series.label)} <span class="profile-chart__unit">(${escapeHtml(series.unit)})</span></div> <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"> <div class="profile-chart__plot" style="height:${series.height}px">
${areaPath ? `<path d="${areaPath}" fill="${series.color}" fill-opacity="0.15" stroke="none"></path>` : ""} <svg viewBox="0 0 ${VIEWBOX_WIDTH} ${series.height}" preserveAspectRatio="none" class="profile-chart__svg">
<path d="${linePath}" fill="none" stroke="${series.color}" stroke-width="2" vector-effect="non-scaling-stroke"></path> ${areaPath ? `<path d="${areaPath}" fill="${series.color}" fill-opacity="0.15" stroke="none"></path>` : ""}
<line class="profile-chart__crosshair" x1="0" x2="0" y1="0" y2="${series.height}" hidden></line> <path d="${linePath}" fill="none" stroke="${series.color}" stroke-width="2" vector-effect="non-scaling-stroke"></path>
<circle class="profile-chart__dot" r="4" fill="${series.color}" stroke="#fff" stroke-width="1.5" hidden></circle> <line class="profile-chart__crosshair" x1="0" x2="0" y1="0" y2="${series.height}" hidden></line>
</svg> <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.min = min;
wrapper.dataset.max = max; wrapper.dataset.max = max;