pdga-rating/public/js/chart.js

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;
    
    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);
    
    let svg = `<svg width="${width}" height="${height}" style="font-family: Arial, sans-serif;" id="svg-${pdgaNumber}">`;
    
    svg += `<rect x="0" y="0" width="${width}" height="${height}" fill="white" stroke="#ddd"/>`;
    svg += `<rect x="${margin.left}" y="${margin.top}" width="${chartWidth}" height="${chartHeight}" fill="#f9f9f9" stroke="#ccc"/>`;
    
    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>`;
    }
    
    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}`;
        }
    });
    
    svg += `<path d="${pathData}" stroke="#007bff" stroke-width="2" fill="none"/>`;
    
    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;"/>`;
    });
    
    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>`;
        }
    });
    
    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;
    
    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) => {
                    if (tooltipTimeout) {
                        clearTimeout(tooltipTimeout);
                        tooltipTimeout = null;
                    }
                    
                    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`;
                    
                    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) {
                        tooltipTimeout = setTimeout(() => {
                            tooltip.style.display = 'none';
                            dataPoints[i].setAttribute('r', '4');
                            dataPoints[i].setAttribute('fill', '#007bff');
                            currentTooltip = null;
                        }, 100);
                    }
                });
            });
        }
    }, 100);
}