Spaces:

Mike-BM
/

suepcaf

Running

suepcaf / script.js

# =====================================================

9b1fe6c verified 11 months ago

10.3 kB

document.addEventListener('DOMContentLoaded', function() {
    // Initialize charts with sample data
    initCharts();
    loadNewsFeed();
    setupDarkModeToggle();
});

function initCharts() {
    // Sample data - in a real app, this would come from your API
    const dates = ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06'];
    const inflationData = [5.2, 5.5, 5.8, 6.1, 6.0, 5.9];
    const gdpData = [2.1, 2.3, 2.5, 2.7, 2.9, 3.1];
    const sentimentData = [0.2, -0.1, 0.3, -0.2, 0.1, 0.4];

    // Inflation Chart
    const inflationCtx = document.getElementById('inflationChart').getContext('2d');
    new Chart(inflationCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [{
                label: 'Inflation Rate',
                data: inflationData,
                borderColor: '#ef4444',
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: getChartOptions('Inflation Rate (%)')
    });

    // GDP Chart
    const gdpCtx = document.getElementById('gdpChart').getContext('2d');
    new Chart(gdpCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [{
                label: 'GDP Growth',
                data: gdpData,
                borderColor: '#10b981',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: getChartOptions('GDP Growth (%)')
    });

    // Full Chart
    const fullCtx = document.getElementById('fullChart').getContext('2d');
    new Chart(fullCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [
                {
                    label: 'Inflation',
                    data: inflationData,
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    yAxisID: 'y',
                    tension: 0.3
                },
                {
                    label: 'GDP Growth',
                    data: gdpData,
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    yAxisID: 'y',
                    tension: 0.3
                },
                {
                    label: 'Sentiment',
                    data: sentimentData,
                    borderColor: '#6366f1',
                    backgroundColor: 'rgba(99, 102, 241, 0.1)',
                    yAxisID: 'y1',
                    tension: 0.3
                }
            ]
        },
        options: {
            responsive: true,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Economic Indicators Over Time',
                    color: '#6b7280',
                    font: {
                        size: 16
                    }
                },
                legend: {
                    position: 'top',
                    labels: {
                        color: '#6b7280'
                    }
                },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            scales: {
                x: {
                    grid: {
                        color: 'rgba(209, 213, 219, 0.2)'
                    },
                    ticks: {
                        color: '#6b7280'
                    }
                },
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    grid: {
                        color: 'rgba(209, 213, 219, 0.2)'
                    },
                    ticks: {
                        color: '#6b7280'
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: {
                        drawOnChartArea: false,
                        color: 'rgba(209, 213, 219, 0.2)'
                    },
                    ticks: {
                        color: '#6b7280'
                    }
                }
            }
        }
    });

    // Update text elements
    document.getElementById('sentimentText').textContent = `Current sentiment: Positive (0.42)`;
    document.getElementById('inflationText').textContent = `Forecast: 5.9% (↓ 0.1% from last month)`;
    document.getElementById('gdpText').textContent = `Forecast: 3.1% (↑ 0.2% from last quarter)`;

    // Initialize sentiment gauge
    updateSentimentGauge(0.42);
}

function getChartOptions(title) {
    return {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            },
            title: {
                display: false
            },
            tooltip: {
                enabled: true,
                mode: 'index',
                intersect: false
            }
        },
        scales: {
            x: {
                grid: {
                    display: false
                },
                ticks: {
                    display: false
                }
            },
            y: {
                grid: {
                    display: false
                },
                ticks: {
                    display: false
                }
            }
        },
        elements: {
            point: {
                radius: 0
            }
        }
    };
}

function updateSentimentGauge(value) {
    // Value between -1 and 1
    const gaugeFill = document.createElement('div');
    gaugeFill.className = 'gauge-fill';
    gaugeFill.style.transform = `rotate(${value * 0.5}turn)`;
    
    const gaugeCover = document.createElement('div');
    gaugeCover.className = 'gauge-cover';
    gaugeCover.textContent = value > 0 ? '+' + value.toFixed(2) : value.toFixed(2);
    
    const gaugeBody = document.createElement('div');
    gaugeBody.className = 'gauge-body';
    gaugeBody.appendChild(gaugeFill);
    
    const gaugeContainer = document.createElement('div');
    gaugeContainer.className = 'gauge-container';
    gaugeContainer.appendChild(gaugeBody);
    gaugeContainer.appendChild(gaugeCover);
    
    document.getElementById('sentimentGauge').innerHTML = '';
    document.getElementById('sentimentGauge').appendChild(gaugeContainer);
}

async function loadNewsFeed() {
    try {
        // In a real app, you would fetch this from your API
        const mockNews = [
            {
                title: "Central Bank Announces Interest Rate Hike to Combat Inflation",
                source: "Financial Times",
                date: "2023-06-15",
                sentiment: 0.42
            },
            {
                title: "GDP Growth Exceeds Expectations in Q2",
                source: "Bloomberg",
                date: "2023-06-10",
                sentiment: 0.78
            },
            {
                title: "Unemployment Rates Rise Slightly Amid Economic Slowdown",
                source: "Reuters",
                date: "2023-06-05",
                sentiment: -0.35
            },
            {
                title: "Government Announces New Stimulus Package to Boost Economy",
                source: "Wall Street Journal",
                date: "2023-05-28",
                sentiment: 0.65
            }
        ];

        const newsFeed = document.getElementById('newsFeed');
        newsFeed.innerHTML = '';

        mockNews.forEach(item => {
            const sentimentColor = item.sentiment > 0.5 ? 'text-green-500' : 
                                 item.sentiment < -0.5 ? 'text-red-500' : 'text-yellow-500';
            const sentimentIcon = item.sentiment > 0.5 ? 'trending-up' : 
                                 item.sentiment < -0.5 ? 'trending-down' : 'minus';

            const newsItem = document.createElement('div');
            newsItem.className = 'news-item bg-white dark:bg-gray-800 rounded-lg shadow p-4';
            newsItem.innerHTML = `
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <h3 class="font-medium text-gray-800 dark:text-gray-200">${item.title}</h3>
                        <div class="flex items-center mt-2 text-sm text-gray-500 dark:text-gray-400">
                            <span>${item.source}</span>
                            <span class="mx-2">•</span>
                            <span>${item.date}</span>
                        </div>
                    </div>
                    <div class="flex items-center ml-4 ${sentimentColor}">
                        <i data-feather="${sentimentIcon}" class="w-5 h-5 mr-1"></i>
                        <span>${item.sentiment > 0 ? '+' : ''}${item.sentiment.toFixed(2)}</span>
                    </div>
                </div>
            `;
            newsFeed.appendChild(newsItem);
        });

        feather.replace();
    } catch (error) {
        console.error('Error loading news feed:', error);
        document.getElementById('newsFeed').innerHTML = `
            <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                <i data-feather="alert-circle" class="w-12 h-12 mx-auto mb-4"></i>
                <p>Failed to load news feed. Please try again later.</p>
            </div>
        `;
        feather.replace();
    }
}

function setupDarkModeToggle() {
    const darkModeToggle = document.createElement('button');
    darkModeToggle.className = 'flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200';
    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
    darkModeToggle.addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
        feather.replace();

	document.addEventListener('DOMContentLoaded', function() {
	// Initialize charts with sample data
	initCharts();
	loadNewsFeed();
	setupDarkModeToggle();
	});

	function initCharts() {
	// Sample data - in a real app, this would come from your API
	const dates = ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06'];
	const inflationData = [5.2, 5.5, 5.8, 6.1, 6.0, 5.9];
	const gdpData = [2.1, 2.3, 2.5, 2.7, 2.9, 3.1];
	const sentimentData = [0.2, -0.1, 0.3, -0.2, 0.1, 0.4];

	// Inflation Chart
	const inflationCtx = document.getElementById('inflationChart').getContext('2d');
	new Chart(inflationCtx, {
	type: 'line',
	data: {
	labels: dates,
	datasets: [{
	label: 'Inflation Rate',
	data: inflationData,
	borderColor: '#ef4444',
	backgroundColor: 'rgba(239, 68, 68, 0.1)',
	tension: 0.3,
	fill: true
	}]
	},
	options: getChartOptions('Inflation Rate (%)')
	});

	// GDP Chart
	const gdpCtx = document.getElementById('gdpChart').getContext('2d');
	new Chart(gdpCtx, {
	type: 'line',
	data: {
	labels: dates,
	datasets: [{
	label: 'GDP Growth',
	data: gdpData,
	borderColor: '#10b981',
	backgroundColor: 'rgba(16, 185, 129, 0.1)',
	tension: 0.3,
	fill: true
	}]
	},
	options: getChartOptions('GDP Growth (%)')
	});

	// Full Chart
	const fullCtx = document.getElementById('fullChart').getContext('2d');
	new Chart(fullCtx, {
	type: 'line',
	data: {
	labels: dates,
	datasets: [
	{
	label: 'Inflation',
	data: inflationData,
	borderColor: '#ef4444',
	backgroundColor: 'rgba(239, 68, 68, 0.1)',
	yAxisID: 'y',
	tension: 0.3
	},
	{
	label: 'GDP Growth',
	data: gdpData,
	borderColor: '#10b981',
	backgroundColor: 'rgba(16, 185, 129, 0.1)',
	yAxisID: 'y',
	tension: 0.3
	},
	{
	label: 'Sentiment',
	data: sentimentData,
	borderColor: '#6366f1',
	backgroundColor: 'rgba(99, 102, 241, 0.1)',
	yAxisID: 'y1',
	tension: 0.3
	}
	]
	},
	options: {
	responsive: true,
	interaction: {
	mode: 'index',
	intersect: false,
	},
	plugins: {
	title: {
	display: true,
	text: 'Economic Indicators Over Time',
	color: '#6b7280',
	font: {
	size: 16
	}
	},
	legend: {
	position: 'top',
	labels: {
	color: '#6b7280'
	}
	},
	tooltip: {
	mode: 'index',
	intersect: false
	}
	},
	scales: {
	x: {
	grid: {
	color: 'rgba(209, 213, 219, 0.2)'
	},
	ticks: {
	color: '#6b7280'
	}
	},
	y: {
	type: 'linear',
	display: true,
	position: 'left',
	grid: {
	color: 'rgba(209, 213, 219, 0.2)'
	},
	ticks: {
	color: '#6b7280'
	}
	},
	y1: {
	type: 'linear',
	display: true,
	position: 'right',
	grid: {
	drawOnChartArea: false,
	color: 'rgba(209, 213, 219, 0.2)'
	},
	ticks: {
	color: '#6b7280'
	}
	}
	}
	}
	});

	// Update text elements
	document.getElementById('sentimentText').textContent = `Current sentiment: Positive (0.42)`;
	document.getElementById('inflationText').textContent = `Forecast: 5.9% (↓ 0.1% from last month)`;
	document.getElementById('gdpText').textContent = `Forecast: 3.1% (↑ 0.2% from last quarter)`;

	// Initialize sentiment gauge
	updateSentimentGauge(0.42);
	}

	function getChartOptions(title) {
	return {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	legend: {
	display: false
	},
	title: {
	display: false
	},
	tooltip: {
	enabled: true,
	mode: 'index',
	intersect: false
	}
	},
	scales: {
	x: {
	grid: {
	display: false
	},
	ticks: {
	display: false
	}
	},
	y: {
	grid: {
	display: false
	},
	ticks: {
	display: false
	}
	}
	},
	elements: {
	point: {
	radius: 0
	}
	}
	};
	}

	function updateSentimentGauge(value) {
	// Value between -1 and 1
	const gaugeFill = document.createElement('div');
	gaugeFill.className = 'gauge-fill';
	gaugeFill.style.transform = `rotate(${value * 0.5}turn)`;

	const gaugeCover = document.createElement('div');
	gaugeCover.className = 'gauge-cover';
	gaugeCover.textContent = value > 0 ? '+' + value.toFixed(2) : value.toFixed(2);

	const gaugeBody = document.createElement('div');
	gaugeBody.className = 'gauge-body';
	gaugeBody.appendChild(gaugeFill);

	const gaugeContainer = document.createElement('div');
	gaugeContainer.className = 'gauge-container';
	gaugeContainer.appendChild(gaugeBody);
	gaugeContainer.appendChild(gaugeCover);

	document.getElementById('sentimentGauge').innerHTML = '';
	document.getElementById('sentimentGauge').appendChild(gaugeContainer);
	}

	async function loadNewsFeed() {
	try {
	// In a real app, you would fetch this from your API
	const mockNews = [
	{
	title: "Central Bank Announces Interest Rate Hike to Combat Inflation",
	source: "Financial Times",
	date: "2023-06-15",
	sentiment: 0.42
	},
	{
	title: "GDP Growth Exceeds Expectations in Q2",
	source: "Bloomberg",
	date: "2023-06-10",
	sentiment: 0.78
	},
	{
	title: "Unemployment Rates Rise Slightly Amid Economic Slowdown",
	source: "Reuters",
	date: "2023-06-05",
	sentiment: -0.35
	},
	{
	title: "Government Announces New Stimulus Package to Boost Economy",
	source: "Wall Street Journal",
	date: "2023-05-28",
	sentiment: 0.65
	}
	];

	const newsFeed = document.getElementById('newsFeed');
	newsFeed.innerHTML = '';

	mockNews.forEach(item => {
	const sentimentColor = item.sentiment > 0.5 ? 'text-green-500' :
	item.sentiment < -0.5 ? 'text-red-500' : 'text-yellow-500';
	const sentimentIcon = item.sentiment > 0.5 ? 'trending-up' :
	item.sentiment < -0.5 ? 'trending-down' : 'minus';

	const newsItem = document.createElement('div');
	newsItem.className = 'news-item bg-white dark:bg-gray-800 rounded-lg shadow p-4';
	newsItem.innerHTML = `
	<div class="flex justify-between items-start">
	<div class="flex-1">
	<h3 class="font-medium text-gray-800 dark:text-gray-200">${item.title}</h3>
	<div class="flex items-center mt-2 text-sm text-gray-500 dark:text-gray-400">
	<span>${item.source}</span>
	<span class="mx-2">•</span>
	<span>${item.date}</span>
	</div>
	</div>
	<div class="flex items-center ml-4 ${sentimentColor}">
	<i data-feather="${sentimentIcon}" class="w-5 h-5 mr-1"></i>
	<span>${item.sentiment > 0 ? '+' : ''}${item.sentiment.toFixed(2)}</span>
	</div>
	</div>
	`;
	newsFeed.appendChild(newsItem);
	});

	feather.replace();
	} catch (error) {
	console.error('Error loading news feed:', error);
	document.getElementById('newsFeed').innerHTML = `
	<div class="text-center py-8 text-gray-500 dark:text-gray-400">
	<i data-feather="alert-circle" class="w-12 h-12 mx-auto mb-4"></i>
	<p>Failed to load news feed. Please try again later.</p>
	</div>
	`;
	feather.replace();
	}
	}

	function setupDarkModeToggle() {
	const darkModeToggle = document.createElement('button');
	darkModeToggle.className = 'flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200';
	darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
	darkModeToggle.addEventListener('click', () => {
	document.documentElement.classList.toggle('dark');
	localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
	feather.replace();