Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const analyzeBtn = document.getElementById('analyzeBtn');
+ const stockInput = document.getElementById('stockInput');
+ const resultsSection = document.getElementById('resultsSection');
+
+ let chart = null;
+
+ analyzeBtn.addEventListener('click', analyzeStock);
+ stockInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') analyzeStock();
+ });
+
+ function analyzeStock() {
+ const ticker = stockInput.value.trim().toUpperCase();
+ if (!ticker) {
+ alert('Please enter a valid stock ticker');
+ return;
+ }
+
+ // Simulate loading data
+ showLoadingState();
+
+ // Simulate API call with setTimeout
+ setTimeout(() => {
+ const mockData = generateMockData();
+ updateMetrics(mockData);
+ drawChart(mockData);
+ }, 1000);
+ }
+
+ function showLoadingState() {
+ document.querySelectorAll('.metric-card p').forEach(p => {
+ p.textContent = 'Loading...';
+ });
+ }
+
+ function generateMockData() {
+ return {
+ dailyVol: (Math.random() * 2 + 1).toFixed(2) + '%',
+ annualVol: (Math.random() * 15 + 10).toFixed(2) + '%',
+ beta: (Math.random() + 0.5).toFixed(2),
+ sharpe: (Math.random() * 2 + 0.5).toFixed(2),
+ chartData: Array.from({length: 30}, () => Math.random() * 100)
+ };
+ }
+
+ function updateMetrics(data) {
+ document.getElementById('dailyVol').textContent = data.dailyVol;
+ document.getElementById('annualVol').textContent = data.annualVol;
+ document.getElementById('beta').textContent = data.beta;
+ document.getElementById('sharpe').textContent = data.sharpe;
+ }
+
+ function drawChart(data) {
+ const ctx = document.getElementById('volatilityChart').getContext('2d');
+
+ if (chart) {
+ chart.destroy();
+ }
+
+ chart = createVolatilityChart(ctx, data.chartData);
+ }
+
+ function createVolatilityChart(ctx, data) {
+ // Simple line drawing implementation
+ const width = ctx.canvas.width;
+ const height = ctx.canvas.height;
+ const points = data.length;
+ const max = Math.max(...data);
+ const min = Math.min(...data);
+
+ ctx.clearRect(0, 0, width, height);
+ ctx.beginPath();
+ ctx.strokeStyle = '#3498db';
+ ctx.lineWidth = 2;
+
+ data.forEach((value, index) => {
+ const x = (width / (points - 1)) * index;
+ const y = height - ((value - min) / (max - min)) * height;
+
+ if (index === 0) {
+ ctx.moveTo(x, y);
+ } else {
+ ctx.lineTo(x, y);
+ }
+ });
+
+ ctx.stroke();
+
+ return {
+ destroy: () => {
+ ctx.clearRect(0, 0, width, height);
+ }
+ };
+ }
+ });
