JAVASCRIPT site-analytics-inline.js

(function() {
    var dataEl = document.getElementById('data-site-analytics');
    var data = dataEl ? JSON.parse(dataEl.textContent) : {};
    var analyticsData = data.analytics || [];
    var days = data.days || 7;
    var analyticsUrl = data.analyticsUrl || '';

    // Build a simple bar chart from the analytics data
    function renderChart(data, days) {
        const svg = document.getElementById('chart');
        if (!data || data.length === 0) {
            svg.innerHTML = '<text x="50%" y="50%" text-anchor="middle" fill="#999">No data yet</text>';
            return;
        }

        const container = document.getElementById('chartContainer');
        const width = container.clientWidth;
        const height = 200;
        const pad = { top: 20, right: 20, bottom: 40, left: 50 };
        const chartW = width - pad.left - pad.right;
        const chartH = height - pad.top - pad.bottom;

        const maxVal = Math.max(...data.map(d => d.submission_count), 1);
        const barW = Math.max(chartW / data.length - 4, 4);

        let html = '';

        // Y-axis gridlines
        for (let i = 0; i <= 4; i++) {
            const y = pad.top + (chartH / 4) * i;
            const val = Math.round(maxVal * (1 - i / 4));
            html += `<line x1="${pad.left}" y1="${y}" x2="${width - pad.right}" y2="${y}" class="chart-axis"/>`;
            html += `<text x="${pad.left - 8}" y="${y + 4}" text-anchor="end" class="chart-label">${val}</text>`;
        }

        // Bars
        data.forEach((d, i) => {
            const x = pad.left + (chartW / data.length) * i + 2;
            const h = (d.submission_count / maxVal) * chartH;
            const y = pad.top + chartH - h;

            // Clean submissions bar
            html += `<rect x="${x}" y="${y}" width="${barW}" height="${h}" class="chart-bar" rx="2"/>`;

            // Spam bar (stacked on top)
            if (d.spam_count > 0) {
                const sh = (d.spam_count / maxVal) * chartH;
                html += `<rect x="${x}" y="${y}" width="${barW}" height="${sh}" class="chart-bar-spam" rx="2" opacity="0.6"/>`;
            }

            // X-axis label (every nth label to avoid overlap)
            const step = Math.max(1, Math.floor(data.length / 10));
            if (i % step === 0 || i === data.length - 1) {
                html += `<text x="${x + barW / 2}" y="${height - 10}" text-anchor="middle" class="chart-label">${d.day.slice(5)}</text>`;
            }
        });

        svg.innerHTML = html;
    }

    renderChart(analyticsData, days);

    // Impressions vs submissions chart
    function renderImpChart(data) {
        const svg = document.getElementById('impChart');
        if (!data || data.length === 0) {
            svg.innerHTML = '<text x="50%" y="50%" text-anchor="middle" fill="#999">No impression data yet</text>';
            return;
        }

        const container = document.getElementById('impChartContainer');
        const width = container.clientWidth;
        const height = 200;
        const pad = { top: 20, right: 20, bottom: 40, left: 50 };
        const chartW = width - pad.left - pad.right;
        const chartH = height - pad.top - pad.bottom;

        const maxVal = Math.max(...data.map(d => Math.max(d.impressions, d.submissions)), 1);
        const barW = Math.max(chartW / data.length - 6, 4);

        let html = '';

        // Y-axis gridlines
        for (let i = 0; i <= 4; i++) {
            const y = pad.top + (chartH / 4) * i;
            const val = Math.round(maxVal * (1 - i / 4));
            html += `<line x1="${pad.left}" y1="${y}" x2="${width - pad.right}" y2="${y}" class="chart-axis"/>`;
            html += `<text x="${pad.left - 8}" y="${y + 4}" text-anchor="end" class="chart-label">${val}</text>`;
        }

        // Bars (grouped)
        data.forEach((d, i) => {
            const groupX = pad.left + (chartW / data.length) * i + 2;

            // Impressions bar
            const impH = (d.impressions / maxVal) * chartH;
            const impY = pad.top + chartH - impH;
            html += `<rect x="${groupX}" y="${impY}" width="${barW}" height="${impH}" class="chart-bar-imp" rx="2"/>`;

            // Submissions bar
            const subH = (d.submissions / maxVal) * chartH;
            const subY = pad.top + chartH - subH;
            html += `<rect x="${groupX + barW + 1}" y="${subY}" width="${barW}" height="${subH}" class="chart-bar" rx="2"/>`;

            // X-axis labels
            const step = Math.max(1, Math.floor(data.length / 10));
            if (i % step === 0 || i === data.length - 1) {
                html += `<text x="${groupX + barW}" y="${height - 10}" text-anchor="middle" class="chart-label">${d.day.slice(5)}</text>`;
            }
        });

        svg.innerHTML = html;
    }

    const impData = data.impData || [];
    if (impData.length > 0) {
        renderImpChart(impData);
    }

    window.loadAnalytics = function(days) {
        window.location.href = analyticsUrl + '?days=' + days;
    };
})();