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/js/track_profile.js
+10 -6
View File
@@ -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;