Add expandable rating history charts with interactive tooltips
- Implement clickable player rows to expand/collapse rating history - Add rating history scraping from PDGA history pages - Create custom SVG line charts showing rating progression over time - Add interactive tooltips with date and rating on hover - Include visual highlights when hovering over data points - Implement anti-flicker tooltip system with delayed hiding - Add large hover areas (12px radius) for better user experience - Show grid lines, axis labels, and responsive chart scaling - Cache rating history data to avoid repeated API calls 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Samuel Enocsson
+235
-3
@@ -71,6 +71,55 @@
|
||||
tr:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.expandable-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
.expandable-row:hover {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
.expanded-content {
|
||||
display: none;
|
||||
background-color: #f8f9fa;
|
||||
border-top: 2px solid #007bff;
|
||||
}
|
||||
.expanded-content td {
|
||||
padding: 20px;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
}
|
||||
.chart-title {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
.loading-chart {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
color: #666;
|
||||
}
|
||||
.chart-tooltip {
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
.rating {
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
@@ -217,9 +266,9 @@
|
||||
player.ratingChange < 0 ? 'negative' : 'neutral';
|
||||
|
||||
tableHTML += `
|
||||
<tr id="row-${player.pdgaNumber}">
|
||||
<tr id="row-${player.pdgaNumber}" class="expandable-row" onclick="togglePlayerHistory(${player.pdgaNumber})">
|
||||
<td>${index + 1}</td>
|
||||
<td><a href="https://www.pdga.com/player/${player.pdgaNumber}" target="_blank">${player.name}</a></td>
|
||||
<td><a href="https://www.pdga.com/player/${player.pdgaNumber}" target="_blank" onclick="event.stopPropagation()">${player.name}</a></td>
|
||||
<td class="pdga-number">#${player.pdgaNumber}</td>
|
||||
<td class="rating">${player.rating || 'N/A'}</td>
|
||||
<td class="rating-change ${ratingChangeClass}">${ratingChangeText}</td>
|
||||
@@ -228,7 +277,16 @@
|
||||
</td>
|
||||
<td class="difference ${diffClass}" id="diff-${player.pdgaNumber}">
|
||||
${difference ? diffText :
|
||||
`<button class="calc-btn" onclick="calculatePredictedRating(${player.pdgaNumber})">Predict Rating</button>`}
|
||||
`<button class="calc-btn" onclick="event.stopPropagation(); calculatePredictedRating(${player.pdgaNumber})">Predict Rating</button>`}
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="history-${player.pdgaNumber}" class="expanded-content">
|
||||
<td colspan="7">
|
||||
<div class="chart-title">Rating History for ${player.name}</div>
|
||||
<div class="chart-container" id="chart-${player.pdgaNumber}" style="position: relative;">
|
||||
<div class="loading-chart">Click to load rating history...</div>
|
||||
</div>
|
||||
<div class="chart-tooltip" id="tooltip-${player.pdgaNumber}"></div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
@@ -280,6 +338,180 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function togglePlayerHistory(pdgaNumber) {
|
||||
const historyRow = document.getElementById(`history-${pdgaNumber}`);
|
||||
const chartContainer = document.getElementById(`chart-${pdgaNumber}`);
|
||||
|
||||
if (historyRow.style.display === 'table-row') {
|
||||
historyRow.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
historyRow.style.display = 'table-row';
|
||||
|
||||
// Check if chart is already loaded
|
||||
if (chartContainer.dataset.loaded === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
chartContainer.innerHTML = '<div class="loading-chart">Loading rating history...</div>';
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/rating-history/${pdgaNumber}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.history && data.history.length > 0) {
|
||||
createRatingChart(chartContainer, data.history);
|
||||
chartContainer.dataset.loaded = 'true';
|
||||
} else {
|
||||
chartContainer.innerHTML = '<div class="loading-chart">No rating history available</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading rating history:', error);
|
||||
chartContainer.innerHTML = '<div class="loading-chart">Error loading rating history</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function createRatingChart(container, history) {
|
||||
const width = container.clientWidth - 40;
|
||||
const height = 250;
|
||||
const margin = { top: 20, right: 30, bottom: 40, left: 60 };
|
||||
const chartWidth = width - margin.left - margin.right;
|
||||
const chartHeight = height - margin.top - margin.bottom;
|
||||
|
||||
// Get the tooltip element
|
||||
const pdgaNumber = container.id.replace('chart-', '');
|
||||
const tooltip = document.getElementById(`tooltip-${pdgaNumber}`);
|
||||
|
||||
// Calculate scales
|
||||
const ratings = history.map(h => h.rating);
|
||||
const minRating = Math.min(...ratings) - 10;
|
||||
const maxRating = Math.max(...ratings) + 10;
|
||||
|
||||
const xStep = chartWidth / (history.length - 1 || 1);
|
||||
const yScale = chartHeight / (maxRating - minRating);
|
||||
|
||||
// Create SVG
|
||||
let svg = `<svg width="${width}" height="${height}" style="font-family: Arial, sans-serif;" id="svg-${pdgaNumber}">`;
|
||||
|
||||
// Background
|
||||
svg += `<rect x="0" y="0" width="${width}" height="${height}" fill="white" stroke="#ddd"/>`;
|
||||
|
||||
// Chart area background
|
||||
svg += `<rect x="${margin.left}" y="${margin.top}" width="${chartWidth}" height="${chartHeight}" fill="#f9f9f9" stroke="#ccc"/>`;
|
||||
|
||||
// Grid lines
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
const y = margin.top + (i * chartHeight / 5);
|
||||
const rating = Math.round(maxRating - (i * (maxRating - minRating) / 5));
|
||||
svg += `<line x1="${margin.left}" y1="${y}" x2="${margin.left + chartWidth}" y2="${y}" stroke="#e0e0e0"/>`;
|
||||
svg += `<text x="${margin.left - 5}" y="${y + 4}" text-anchor="end" font-size="12" fill="#666">${rating}</text>`;
|
||||
}
|
||||
|
||||
// Data line
|
||||
let pathData = '';
|
||||
const points = [];
|
||||
|
||||
history.forEach((point, i) => {
|
||||
const x = margin.left + (i * xStep);
|
||||
const y = margin.top + ((maxRating - point.rating) * yScale);
|
||||
|
||||
points.push({ x, y, rating: point.rating, date: point.displayDate });
|
||||
|
||||
if (i === 0) {
|
||||
pathData += `M ${x} ${y}`;
|
||||
} else {
|
||||
pathData += ` L ${x} ${y}`;
|
||||
}
|
||||
});
|
||||
|
||||
// Draw line
|
||||
svg += `<path d="${pathData}" stroke="#007bff" stroke-width="2" fill="none"/>`;
|
||||
|
||||
// Draw points with enhanced hover areas
|
||||
points.forEach((point, i) => {
|
||||
svg += `<circle cx="${point.x}" cy="${point.y}" r="12" fill="transparent" class="hover-area" data-index="${i}" style="cursor: pointer;"/>`;
|
||||
svg += `<circle cx="${point.x}" cy="${point.y}" r="4" fill="#007bff" stroke="white" stroke-width="2" class="data-point" data-index="${i}" style="pointer-events: none;"/>`;
|
||||
});
|
||||
|
||||
// X-axis labels (show every few dates to avoid crowding)
|
||||
const labelStep = Math.max(1, Math.floor(history.length / 6));
|
||||
history.forEach((point, i) => {
|
||||
if (i % labelStep === 0 || i === history.length - 1) {
|
||||
const x = margin.left + (i * xStep);
|
||||
const date = new Date(point.date).toLocaleDateString('en-US', { month: 'short', year: '2-digit' });
|
||||
svg += `<text x="${x}" y="${height - 10}" text-anchor="middle" font-size="11" fill="#666">${date}</text>`;
|
||||
}
|
||||
});
|
||||
|
||||
// Y-axis label
|
||||
svg += `<text x="20" y="${height/2}" text-anchor="middle" font-size="12" fill="#333" transform="rotate(-90, 20, ${height/2})">Rating</text>`;
|
||||
|
||||
svg += '</svg>';
|
||||
|
||||
container.innerHTML = svg;
|
||||
|
||||
// Add event listeners for tooltips after a small delay to ensure DOM is ready
|
||||
setTimeout(() => {
|
||||
const svgElement = document.getElementById(`svg-${pdgaNumber}`);
|
||||
|
||||
if (svgElement) {
|
||||
const hoverAreas = svgElement.querySelectorAll('.hover-area');
|
||||
const dataPoints = svgElement.querySelectorAll('.data-point');
|
||||
|
||||
let currentTooltip = null;
|
||||
let tooltipTimeout = null;
|
||||
|
||||
hoverAreas.forEach((area, i) => {
|
||||
area.addEventListener('mouseenter', (e) => {
|
||||
// Clear any pending hide
|
||||
if (tooltipTimeout) {
|
||||
clearTimeout(tooltipTimeout);
|
||||
tooltipTimeout = null;
|
||||
}
|
||||
|
||||
// Hide current tooltip if different
|
||||
if (currentTooltip !== null && currentTooltip !== i) {
|
||||
dataPoints[currentTooltip].setAttribute('r', '4');
|
||||
dataPoints[currentTooltip].setAttribute('fill', '#007bff');
|
||||
}
|
||||
|
||||
currentTooltip = i;
|
||||
const point = points[i];
|
||||
tooltip.innerHTML = `<strong>${point.date}</strong><br>Rating: ${point.rating}`;
|
||||
tooltip.style.display = 'block';
|
||||
tooltip.style.left = `${e.clientX + 15}px`;
|
||||
tooltip.style.top = `${e.clientY - 35}px`;
|
||||
|
||||
// Highlight the data point
|
||||
dataPoints[i].setAttribute('r', '6');
|
||||
dataPoints[i].setAttribute('fill', '#0056b3');
|
||||
});
|
||||
|
||||
area.addEventListener('mousemove', (e) => {
|
||||
if (currentTooltip === i) {
|
||||
tooltip.style.left = `${e.clientX + 15}px`;
|
||||
tooltip.style.top = `${e.clientY - 35}px`;
|
||||
}
|
||||
});
|
||||
|
||||
area.addEventListener('mouseleave', () => {
|
||||
if (currentTooltip === i) {
|
||||
// Delay hiding to prevent flicker
|
||||
tooltipTimeout = setTimeout(() => {
|
||||
tooltip.style.display = 'none';
|
||||
dataPoints[i].setAttribute('r', '4');
|
||||
dataPoints[i].setAttribute('fill', '#007bff');
|
||||
currentTooltip = null;
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
fetchRatingsWithProgress();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user