script.js

// Chart.js Configuration

// Global defaults for FAANG-like aesthetic
Chart.defaults.font.family = "'Inter', system-ui, sans-serif";
Chart.defaults.color = '#4b5563';
Chart.defaults.scale.grid.color = '#f3f4f6';

// 1. Global Market Shift Chart (Line Chart)
const marketShiftCtx = document.getElementById('marketShiftChart').getContext('2d');
new Chart(marketShiftCtx, {
    type: 'line',
    data: {
        labels: ['2020', '2022', '2024', '2026', '2028', '2030', '2032', '2035'],
        datasets: [
            {
                label: 'Routine/Manual Jobs',
                data: [100, 95, 88, 75, 60, 50, 40, 30], // Normalized index
                borderColor: '#ef4444', // Red for decline
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3
            },
            {
                label: 'Creative/Strategic Jobs',
                data: [40, 45, 55, 70, 85, 100, 120, 150], // Normalized index
                borderColor: '#2563eb', // Blue for growth
                backgroundColor: 'rgba(37, 99, 235, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'top',
                align: 'end',
                labels: {
                    usePointStyle: true,
                    boxWidth: 8
                }
            },
            title: {
                display: true,
                text: 'Workforce Composition Index (2020-2035)',
                font: {
                    size: 16,
                    weight: '600'
                },
                align: 'start',
                padding: {
                    bottom: 20
                }
            },
            tooltip: {
                mode: 'index',
                intersect: false,
                backgroundColor: 'rgba(17, 24, 39, 0.9)',
                padding: 12,
                cornerRadius: 8
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Job Volume Index'
                }
            }
        },
        interaction: {
            mode: 'nearest',
            axis: 'x',
            intersect: false
        }
    }
});

// 2. Automation Potential Chart (New)
const automationPotentialCtx = document.getElementById('automationPotentialChart').getContext('2d');
new Chart(automationPotentialCtx, {
    type: 'bar',
    data: {
        labels: ['Office Support', 'Production', 'Food Service', 'Transportation', 'Sales', 'Management', 'Education'],
        datasets: [{
            label: '% of Tasks Automatable',
            data: [85, 80, 75, 65, 55, 30, 20],
            backgroundColor: [
                'rgba(239, 68, 68, 0.8)', // High risk
                'rgba(239, 68, 68, 0.8)',
                'rgba(239, 68, 68, 0.8)',
                'rgba(245, 158, 11, 0.8)', // Medium risk
                'rgba(245, 158, 11, 0.8)',
                'rgba(16, 185, 129, 0.8)', // Low risk
                'rgba(16, 185, 129, 0.8)'
            ],
            borderRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            title: {
                display: true,
                text: 'Automation Potential by Sector (Current Tech)',
                align: 'start',
                font: { size: 16, weight: '600' }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                max: 100,
                title: { display: true, text: 'Percentage (%)' }
            }
        }
    }
});

// 3. Industry Impact Radar Chart
const industryRadarCtx = document.getElementById('industryRadarChart').getContext('2d');
new Chart(industryRadarCtx, {
    type: 'radar',
    data: {
        labels: ['Finance', 'Healthcare', 'Manufacturing', 'Retail', 'Tech', 'Education'],
        datasets: [{
            label: 'Automation Risk',
            data: [85, 40, 90, 75, 50, 30],
            fill: true,
            backgroundColor: 'rgba(239, 68, 68, 0.2)',
            borderColor: '#ef4444',
            pointBackgroundColor: '#ef4444',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: '#ef4444'
        }, {
            label: 'AI Augmentation Potential',
            data: [90, 95, 60, 50, 100, 85],
            fill: true,
            backgroundColor: 'rgba(37, 99, 235, 0.2)',
            borderColor: '#2563eb',
            pointBackgroundColor: '#2563eb',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: '#2563eb'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        },
        scales: {
            r: {
                angleLines: {
                    color: '#e5e7eb'
                },
                grid: {
                    color: '#e5e7eb'
                },
                pointLabels: {
                    font: {
                        size: 12,
                        weight: '500'
                    }
                },
                suggestedMin: 0,
                suggestedMax: 100
            }
        }
    }
});

// 4. Productivity vs Wages (Bar/Line Combo)
const productivityCtx = document.getElementById('productivityChart').getContext('2d');
new Chart(productivityCtx, {
    type: 'bar',
    data: {
        labels: ['2015', '2017', '2019', '2021', '2023', '2025 (Proj)', '2027 (Proj)', '2030 (Proj)'],
        datasets: [
            {
                label: 'Productivity Output',
                data: [100, 104, 109, 115, 125, 140, 165, 210],
                type: 'line',
                borderColor: '#10b981', // Emerald green
                borderWidth: 3,
                tension: 0.4,
                yAxisID: 'y'
            },
            {
                label: 'Median Wage Growth',
                data: [100, 102, 105, 107, 109, 112, 116, 122],
                backgroundColor: '#9ca3af', // Gray
                yAxisID: 'y'
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: {
                display: true,
                text: 'The Great Divergence: Productivity vs. Wages',
                align: 'start',
                font: {
                    size: 16,
                    weight: '600'
                }
            }
        },
        scales: {
            y: {
                beginAtZero: false,
                min: 90,
                title: {
                    display: true,
                    text: 'Index (2015 = 100)'
                }
            }
        }
    }
});

// 5. GDP Impact Chart (New)
const gdpImpactCtx = document.getElementById('gdpImpactChart').getContext('2d');
new Chart(gdpImpactCtx, {
    type: 'doughnut',
    data: {
        labels: ['Traditional Growth', 'AI-Driven Productivity', 'New AI Products/Services'],
        datasets: [{
            data: [55, 30, 15],
            backgroundColor: [
                '#9ca3af', // Gray
                '#2563eb', // Blue
                '#10b981'  // Green
            ],
            hoverOffset: 4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'right'
            },
            title: {
                display: true,
                text: 'Projected Sources of GDP Growth (2030)',
                align: 'start',
                font: { size: 16, weight: '600' }
            }
        },
        cutout: '60%'
    }
});