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:
@@ -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
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user