fix: address std-dev inline span refresh + style fixes (#19)

- A: create inline span when missing in refreshRoundHistory (was silently dropped)
- B: updateStdDevInline also called from refreshHistoryThenCalculate
- C: extract stdDevTooltipText + updateStdDevInline helpers; replace 3 call sites
- D: remove margin-left: 4px and bump font-size to 12px on .std-dev-inline
- E: guard against stdDev === 0 in EJS (truthy → != null)
This commit is contained in:
Samuel Enocsson
2026-05-23 06:45:39 +02:00
parent c3fb850de3
commit 1ff768e2fa
3 changed files with 28 additions and 22 deletions
+1 -2
View File
@@ -49,9 +49,8 @@
.std-dev-inline {
color: var(--text-muted);
font-size: 11px;
font-size: 12px;
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
.difference {
+26 -19
View File
@@ -26,6 +26,27 @@ function applyDeltaPill(pillEl, value) {
pillEl.appendChild(numSpan);
}
// ── Std-dev helpers ───────────────────────────────
function stdDevTooltipText(rating, stdDev) {
return `Spridning: ±${stdDev} poäng\nIntervall: ${rating - stdDev}${rating + stdDev}`;
}
function updateStdDevInline(predStack, stdDev) {
if (!predStack) return;
let stdDevInline = predStack.querySelector('.std-dev-inline');
if (stdDev) {
if (!stdDevInline) {
stdDevInline = document.createElement('span');
stdDevInline.className = 'std-dev-inline mono';
predStack.appendChild(stdDevInline);
}
stdDevInline.textContent = '±' + stdDev;
stdDevInline.style.display = '';
} else if (stdDevInline) {
stdDevInline.style.display = 'none';
}
}
function initChartsIn(rootEl) {
rootEl.querySelectorAll('.player-chart').forEach(function(container) {
if (container.dataset.charted === 'true') return;
@@ -75,9 +96,7 @@ function initRatingsTooltips() {
const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
if (rating && stdDev && tooltip) {
const minRating = rating - stdDev;
const maxRating = rating + stdDev;
setupTooltip(span, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
setupTooltip(span, tooltip, () => stdDevTooltipText(rating, stdDev));
}
});
}
@@ -187,9 +206,7 @@ async function refreshPlayer(pdgaNumber) {
const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
if (rating && stdDev && tooltip) {
const minRating = rating - stdDev;
const maxRating = rating + stdDev;
replaceWithTooltip(ratingValue, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
replaceWithTooltip(ratingValue, tooltip, () => stdDevTooltipText(rating, stdDev));
}
}
@@ -223,16 +240,7 @@ async function refreshRoundHistory(pdgaNumber) {
predictedValue.textContent = data.predictedRating || 'N/A';
predictedValue.dataset.stddev = data.stdDev || '';
const predStack = predictedValue.closest('.pred-stack');
const stdDevInline = predStack ? predStack.querySelector('.std-dev-inline') : null;
if (stdDevInline) {
if (data.stdDev) {
stdDevInline.textContent = '\u00b1' + data.stdDev;
stdDevInline.style.display = '';
} else {
stdDevInline.style.display = 'none';
}
}
updateStdDevInline(predictedValue.closest('.pred-stack'), data.stdDev);
}
}
@@ -247,9 +255,7 @@ async function refreshRoundHistory(pdgaNumber) {
const ratingTooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
if (rating && stdDev && ratingTooltip) {
const minRating = rating - stdDev;
const maxRating = rating + stdDev;
replaceWithTooltip(ratingValue, ratingTooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
replaceWithTooltip(ratingValue, ratingTooltip, () => stdDevTooltipText(rating, stdDev));
}
}
}
@@ -766,6 +772,7 @@ async function refreshHistoryThenCalculate(pdgaNumber) {
if (predictedValue) {
predictedValue.textContent = data.predictedRating || 'N/A';
predictedValue.dataset.stddev = data.stdDev || '';
updateStdDevInline(predictedValue.closest('.pred-stack'), data.stdDev);
}
}
+1 -1
View File
@@ -74,7 +74,7 @@ function renderSparkline(values, opts) {
<div class="pred-stack">
<span class="predicted-value pred-num mono" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>"><%= player.predictedRating %></span>
<%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %>
<% if (player.stdDev) { %><span class="std-dev-inline mono">±<%= player.stdDev %></span><% } %>
<% if (player.stdDev != null) { %><span class="std-dev-inline mono">±<%= player.stdDev %></span><% } %>
</div>
<% } else { %>
<span class="rating-pending">—</span>