fix: move std-dev info to accordion, remove broken tooltip (#19) #20

Merged
shcizo merged 4 commits from fix/std-dev-tooltip-positioning-and-discoverability-19 into main 2026-05-25 08:04:17 +02:00
5 changed files with 12 additions and 81 deletions
Showing only changes of commit 5791d8e34f - Show all commits
-25
View File
@@ -14,7 +14,6 @@
.rating-value {
font-variant-numeric: tabular-nums;
cursor: help;
}
.pdga-number {
@@ -47,12 +46,6 @@
font-variant-numeric: tabular-nums;
}
.std-dev-inline {
color: var(--text-muted);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.difference {
font-weight: 600;
}
@@ -101,24 +94,6 @@
box-shadow: var(--shadow-lg);
}
/* ── Tooltips ─────────────────────────────────── */
.std-dev-tooltip {
position: fixed;
background: var(--navy-900);
color: var(--text-inverse);
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: 12px;
font-family: var(--font-mono);
pointer-events: none;
z-index: 10000;
display: none;
white-space: pre;
box-shadow: var(--shadow-lg);
font-weight: 400;
}
/* ── Debug Icon ───────────────────────────────── */
.debug-icon:hover {
-54
View File
@@ -26,27 +26,6 @@ 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;
@@ -78,7 +57,6 @@ function setupAfterTableSwap() {
document.body.addEventListener('htmx:afterSwap', function(event) {
const target = event.detail.target;
if (target.id === 'ratings-table') {
initRatingsTooltips();
initChartsIn(target);
return;
}
@@ -88,19 +66,6 @@ function setupAfterTableSwap() {
});
}
function initRatingsTooltips() {
document.querySelectorAll('.rating-value').forEach(span => {
const pdgaNumber = span.dataset.pdga;
const rating = parseInt(span.dataset.rating);
const stdDev = parseInt(span.dataset.stddev);
const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
if (rating && stdDev && tooltip) {
setupTooltip(span, tooltip, () => stdDevTooltipText(rating, stdDev));
}
});
}
function togglePlayerHistory(pdgaNumber) {
const historyRow = document.getElementById('history-' + pdgaNumber);
const contentDiv = document.getElementById('history-content-' + pdgaNumber);
@@ -200,14 +165,6 @@ async function refreshPlayer(pdgaNumber) {
if (ratingValue) {
ratingValue.textContent = data.player.rating || 'N/A';
ratingValue.dataset.rating = data.player.rating || '';
const stdDev = parseInt(ratingValue.dataset.stddev);
const rating = parseInt(data.player.rating);
const tooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
if (rating && stdDev && tooltip) {
replaceWithTooltip(ratingValue, tooltip, () => stdDevTooltipText(rating, stdDev));
}
}
const deltaMonthPill = ratingCell ? ratingCell.querySelector('.delta-pill') : null;
@@ -239,8 +196,6 @@ async function refreshRoundHistory(pdgaNumber) {
if (predictedValue) {
predictedValue.textContent = data.predictedRating || 'N/A';
predictedValue.dataset.stddev = data.stdDev || '';
updateStdDevInline(predictedValue.closest('.pred-stack'), data.stdDev);
}
}
@@ -249,14 +204,6 @@ async function refreshRoundHistory(pdgaNumber) {
const ratingValue = ratingCell ? ratingCell.querySelector('.rating-value') : null;
if (ratingValue && data.stdDev) {
ratingValue.dataset.stddev = data.stdDev;
const rating = parseInt(ratingValue.dataset.rating);
const stdDev = parseInt(data.stdDev);
const ratingTooltip = document.getElementById(`tooltip-rating-${pdgaNumber}`);
if (rating && stdDev && ratingTooltip) {
replaceWithTooltip(ratingValue, ratingTooltip, () => stdDevTooltipText(rating, stdDev));
}
}
}
} catch (error) {
@@ -772,7 +719,6 @@ async function refreshHistoryThenCalculate(pdgaNumber) {
if (predictedValue) {
predictedValue.textContent = data.predictedRating || 'N/A';
predictedValue.dataset.stddev = data.stdDev || '';
updateStdDevInline(predictedValue.closest('.pred-stack'), data.stdDev);
}
}
+6
View File
@@ -26,6 +26,12 @@ const chartPdgaNumber = hasPlayer ? player.pdgaNumber : pdgaNumber;
<dt>Gap to predicted</dt>
<dd><%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %></dd>
</div>
<% if (player.stdDev != null && player.rating) { %>
<div>
<dt>Round spread</dt>
<dd>±<%= player.stdDev %> (range <%= player.rating - player.stdDev %><%= player.rating + player.stdDev %>)</dd>
</div>
<% } %>
</dl>
<button class="link-btn" onclick="showDebugInfo(<%= player.pdgaNumber %>)" style="margin-top: 4px;">View calculation details →</button>
</div>
+6
View File
@@ -114,6 +114,12 @@ function renderSparkline(values, opts) {
<dt>Gap to predicted</dt>
<dd><span class="delta-pill <%= predCls %> delta-predicted-pill"><span class="delta-glyph"><%= predGlyph %></span><span class="delta-num"><%= predNum %></span></span></dd>
</div>
<% if (player.stdDev != null && player.rating) { %>
<div>
<dt>Round spread</dt>
<dd>±<%= player.stdDev %> (range <%= player.rating - player.stdDev %><%= player.rating + player.stdDev %>)</dd>
</div>
<% } %>
</dl>
</div>
</div>
-2
View File
@@ -67,14 +67,12 @@ function renderSparkline(values, opts) {
<% } else { %>
<span class="rating-pending">Click to load</span>
<% } %>
<div class="std-dev-tooltip" id="tooltip-rating-<%= player.pdgaNumber %>"></div>
</td>
<td class="col-predicted" id="predicted-<%= player.pdgaNumber %>">
<% if (player.predictedRating) { %>
<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 != null) { %><span class="std-dev-inline mono">±<%= player.stdDev %></span><% } %>
</div>
<% } else { %>
<span class="rating-pending">—</span>