pdga-rating/views/partials/ratings-table.ejs

<%
function renderSparkline(values) {
    if (!values || values.length < 2) return '';
    var w = 96, h = 28;
    var min = Math.min.apply(null, values);
    var max = Math.max.apply(null, values);
    var range = max - min || 1;
    var xStep = w / (values.length - 1);

    var pts = values.map(function(v, i) {
        return {
            x: (i * xStep).toFixed(1),
            y: (((max - v) / range) * (h - 4) + 2).toFixed(1)
        };
    });

    var linePath = pts.map(function(p, i) {
        return (i === 0 ? 'M' : 'L') + ' ' + p.x + ' ' + p.y;
    }).join(' ');

    var last = pts[pts.length - 1];
    var areaPath = linePath + ' L ' + last.x + ' ' + h + ' L 0 ' + h + ' Z';

    return '<svg width="' + w + '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '" style="display:block;overflow:visible">' +
        '<path d="' + areaPath + '" style="fill:var(--accent);fill-opacity:0.10"/>' +
        '<path d="' + linePath + '" style="stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linejoin:round;stroke-linecap:round"/>' +
        '<circle cx="' + last.x + '" cy="' + last.y + '" r="2.5" style="fill:var(--accent)"/>' +
        '</svg>';
}
%>
<% if (ratings.length === 0) { %>
    <p style="text-align: center; color: var(--text-muted); padding: 40px 0;">No ratings found.</p>
<% } else { %>
    <table>
        <thead>
            <tr>
                <th class="mobile-hide">Rank</th>
                <th>Player Name</th>
                <th class="mobile-hide">PDGA #</th>
                <th>Rating</th>
                <th class="mobile-hide">Predicted<span class="th-hint">next official update</span></th>
            </tr>
        </thead>
        <tbody>
            <% ratings.forEach(function(player, index) {
                var ratingChange = player.ratingChange;
                var ratingChangePillText = ratingChange != null ? (ratingChange > 0 ? '+' + ratingChange : ratingChange.toString()) : null;
                var ratingChangePillClass = ratingChange > 0 ? 'up' : ratingChange < 0 ? 'down' : 'flat';

                var deltaPredicted = player.deltaPredicted ?? null;
                var deltaPredictedPillText = deltaPredicted != null ? (deltaPredicted > 0 ? '+' + deltaPredicted : deltaPredicted.toString()) : null;
                var deltaPredictedPillClass = deltaPredicted > 0 ? 'up' : deltaPredicted < 0 ? 'down' : 'flat';

                var sparklineSvg = renderSparkline(player.monthlyHistory || []);
            %>
            <tr id="row-<%= player.pdgaNumber %>" class="expandable-row" tabindex="0" onclick="togglePlayerHistory(<%= player.pdgaNumber %>)">
                <td class="mobile-hide"><%= index + 1 %></td>
                <td class="player-name">
                    <a href="https://www.pdga.com/player/<%= player.pdgaNumber %>" target="_blank" onclick="event.stopPropagation()"><%= player.name %></a>
                    <div class="mobile-only pdga-number" style="font-size: 11px; margin-top: 2px;">PDGA #<%= player.pdgaNumber %></div>
                </td>
                <td class="pdga-number mobile-hide">#<%= player.pdgaNumber %></td>
                <td class="rating">
                    <div class="refresh-section">
                        <span class="rating-value" data-rating="<%= player.rating || '' %>" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>" style="cursor: help;"><%- player.rating || '<span style="color: var(--text-muted); font-style: italic;">Click refresh</span>' %></span>
                        <i class="fas fa-sync-alt refresh-icon" onclick="refreshPlayer(<%= player.pdgaNumber %>)" title="Refresh player data"></i>
                    </div>
                    <% if (ratingChangePillText) { %>
                    <span class="delta-pill <%= ratingChangePillClass %>"><%= ratingChangePillText %></span>
                    <% } %>
                    <% if (sparklineSvg) { %>
                    <span class="sparkline"><%- sparklineSvg %></span>
                    <% } %>
                    <div class="std-dev-tooltip" id="tooltip-rating-<%= player.pdgaNumber %>"></div>
                </td>
                <td class="predicted-rating mobile-hide" id="predicted-<%= player.pdgaNumber %>">
                    <div class="refresh-section">
                        <span class="predicted-value" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>" style="cursor: help;"><%= player.predictedRating || 'N/A' %></span>
                        <i class="fas fa-question-circle debug-icon" onclick="showDebugInfo(<%= player.pdgaNumber %>)" title="Show calculation details" style="margin-left: 5px; color: var(--text-muted); cursor: pointer; opacity: 0.6;"></i>
                        <i class="fas fa-sync-alt refresh-icon" onclick="refreshRoundHistory(<%= player.pdgaNumber %>)" title="Refresh prediction data"></i>
                    </div>
                    <% if (deltaPredictedPillText) { %>
                    <span class="delta-pill delta-predicted-pill <%= deltaPredictedPillClass %>"><%= deltaPredictedPillText %></span>
                    <% } %>
                    <div class="std-dev-tooltip" id="tooltip-stddev-<%= player.pdgaNumber %>"></div>
                </td>
            </tr>
            <tr id="history-<%= player.pdgaNumber %>" class="expanded-content">
                <td colspan="5" class="expanded-cell">
                    <div class="chart-title">
                        <div class="refresh-section">
                            Rating History for <%= player.name %>
                            <i class="fas fa-sync-alt refresh-icon" onclick="refreshRatingHistory(<%= player.pdgaNumber %>)" title="Refresh rating history"></i>
                        </div>
                    </div>
                    <div id="history-content-<%= player.pdgaNumber %>">
                        <div class="loading-chart">Click to load rating history...</div>
                    </div>
                </td>
            </tr>
            <% }); %>
        </tbody>
    </table>
<% } %>