pdga-rating/public/js/chart.js

function createRatingChart(container, history) {
    const width = container.clientWidth;
    const height = 280;
    const margin = { top: 24, right: 20, bottom: 44, left: 56 };
    const chartWidth = width - margin.left - margin.right;
    const chartHeight = height - margin.top - margin.bottom;

    const pdgaNumber = container.id.replace('chart-', '');
    const tooltip = document.getElementById(`tooltip-${pdgaNumber}`);

    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);

    // Build points array
    const points = [];
    let pathData = '';

    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 });
        pathData += i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`;
    });

    // Area fill path (close to bottom)
    const areaPath = pathData +
        ` L ${points[points.length - 1].x} ${margin.top + chartHeight}` +
        ` L ${points[0].x} ${margin.top + chartHeight} Z`;

    let svg = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="display: block;">`;

    // Defs: gradient + glow
    svg += `<defs>
        <linearGradient id="areaGrad-${pdgaNumber}" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.15"/>
            <stop offset="100%" stop-color="#3b82f6" stop-opacity="0.01"/>
        </linearGradient>
        <linearGradient id="lineGrad-${pdgaNumber}" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stop-color="#3b82f6"/>
            <stop offset="100%" stop-color="#2563eb"/>
        </linearGradient>
    </defs>`;

    // Background
    svg += `<rect x="0" y="0" width="${width}" height="${height}" fill="white" rx="10"/>`;

    // Grid lines
    const gridCount = 5;
    for (let i = 0; i <= gridCount; i++) {
        const y = margin.top + (i * chartHeight / gridCount);
        const rating = Math.round(maxRating - (i * (maxRating - minRating) / gridCount));

        svg += `<line x1="${margin.left}" y1="${y}" x2="${margin.left + chartWidth}" y2="${y}" stroke="#f1f5f9" stroke-width="1"/>`;
        svg += `<text x="${margin.left - 10}" y="${y + 4}" text-anchor="end" font-size="11" font-family="'DM Sans', sans-serif" fill="#94a3b8" font-weight="500">${rating}</text>`;
    }

    // Area fill
    svg += `<path d="${areaPath}" fill="url(#areaGrad-${pdgaNumber})"/>`;

    // Line
    svg += `<path d="${pathData}" stroke="url(#lineGrad-${pdgaNumber})" stroke-width="2.5" fill="none" stroke-linejoin="round" stroke-linecap="round"/>`;

    // Data points
    points.forEach((point, i) => {
        svg += `<circle cx="${point.x}" cy="${point.y}" r="14" fill="transparent" class="hover-area" data-index="${i}" style="cursor: pointer;"/>`;
        svg += `<circle cx="${point.x}" cy="${point.y}" r="3.5" fill="#3b82f6" stroke="white" stroke-width="2" class="data-point" data-index="${i}" style="pointer-events: none;"/>`;
    });

    // X-axis labels
    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 - 12}" text-anchor="middle" font-size="11" font-family="'DM Sans', sans-serif" fill="#94a3b8" font-weight="500">${date}</text>`;
        }
    });

    // Y-axis label
    svg += `<text x="16" y="${height / 2}" text-anchor="middle" font-size="11" font-family="'DM Sans', sans-serif" fill="#94a3b8" font-weight="500" transform="rotate(-90, 16, ${height / 2})">Rating</text>`;

    svg += '</svg>';

    container.textContent = '';
    container.insertAdjacentHTML('beforeend', svg);

    setTimeout(() => {
        const svgElement = document.getElementById(`svg-${pdgaNumber}`) || container.querySelector('svg');
        if (!svgElement) return;

        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) => {
                if (tooltipTimeout) {
                    clearTimeout(tooltipTimeout);
                    tooltipTimeout = null;
                }

                if (currentTooltip !== null && currentTooltip !== i) {
                    dataPoints[currentTooltip].setAttribute('r', '3.5');
                    dataPoints[currentTooltip].setAttribute('fill', '#3b82f6');
                }

                currentTooltip = i;
                const point = points[i];

                tooltip.textContent = '';
                const strong = document.createElement('strong');
                strong.textContent = point.date;
                tooltip.appendChild(strong);
                tooltip.appendChild(document.createElement('br'));
                tooltip.appendChild(document.createTextNode('Rating: ' + point.rating));

                tooltip.style.display = 'block';
                tooltip.style.left = `${e.clientX + 15}px`;
                tooltip.style.top = `${e.clientY - 35}px`;

                dataPoints[i].setAttribute('r', '6');
                dataPoints[i].setAttribute('fill', '#2563eb');
            });

            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) {
                    tooltipTimeout = setTimeout(() => {
                        tooltip.style.display = 'none';
                        dataPoints[i].setAttribute('r', '3.5');
                        dataPoints[i].setAttribute('fill', '#3b82f6');
                        currentTooltip = null;
                    }, 100);
                }
            });
        });
    }, 100);
}