diff --git a/index.html b/index.html index 2a30981..e42923e 100644 --- a/index.html +++ b/index.html @@ -506,20 +506,37 @@

레드판다스컴퍼니 주식회사 (Red Pandas Company)

const dataPoints = 600; const funds = ['Fund A', 'Fund B', 'Fund C']; const colors = ['#8884d8', '#82ca9d', '#ffc658']; - let data = Array.from({ length: dataPoints }, () => ({ time: 0, values: [0, 0, 0] })); - + const timeRange = 3000; // 5분 (300초) 범위를 표시 + let data = []; + let startTime = Date.now(); + function resizeCanvas() { width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; } - + function updateData() { - const newTime = data[data.length - 1].time + 5; - const newValues = data[data.length - 1].values.map(v => Math.max(-10, Math.min(10, v + (Math.random() - 0.5) * 2))); - data.push({ time: newTime, values: newValues }); - if (data.length > dataPoints) data.shift(); + const currentTime = Date.now(); + const elapsedTime = currentTime - startTime; + + // 새로운 데이터 포인트 추가 + const newValues = data.length > 0 + ? data[data.length - 1].values.map(v => Math.max(-10, Math.min(10, v + (Math.random() - 0.5) * 0.5))) + : [0, 0, 0]; + data.push({ time: elapsedTime, values: newValues }); + + // 시간 범위를 벗어난 데이터 제거 + while (data.length > 0 && data[0].time < elapsedTime - timeRange) { + data.shift(); + } + + // 3000초(5분)가 지나면 시작 시간 리셋 + if (elapsedTime > timeRange) { + startTime = currentTime; + data = data.map(point => ({ ...point, time: point.time - timeRange })); + } } - + function drawGraph() { ctx.clearRect(0, 0, width, height); @@ -530,7 +547,7 @@

레드판다스컴퍼니 주식회사 (Red Pandas Company)

ctx.lineTo(50, height - 30); ctx.lineTo(width - 20, height - 30); ctx.stroke(); - + // Draw Y-axis label ctx.save(); ctx.translate(20, height / 2); @@ -539,31 +556,30 @@

레드판다스컴퍼니 주식회사 (Red Pandas Company)

ctx.textAlign = 'center'; ctx.fillText('Return Rate (%)', 0, 0); ctx.restore(); - + // Draw X-axis label ctx.fillStyle = '#ffffff'; ctx.textAlign = 'center'; ctx.fillText('Time (seconds)', width / 2, height - 10); - + // Draw graph lines - const xStep = (width - 70) / (dataPoints - 1); + const xStep = (width - 70) / (timeRange / 1000); const yMiddle = (height - 50) / 2; - funds.forEach((fund, fundIndex) => { ctx.strokeStyle = colors[fundIndex]; ctx.beginPath(); data.forEach((point, index) => { - const x = 50 + index * xStep; + const x = 50 + (point.time / 1000) * xStep; const y = height - 30 - (yMiddle + point.values[fundIndex] * yMiddle / 10); if (index === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); }); ctx.stroke(); }); - + // Draw legend funds.forEach((fund, index) => { - ctx.fillStyle = colors[index]; + ctx.fillStyle = colors[fundIndex]; ctx.fillRect(width - 100, 20 + index * 20, 15, 15); ctx.fillStyle = '#ffffff'; ctx.textAlign = 'left'; @@ -576,11 +592,10 @@

레드판다스컴퍼니 주식회사 (Red Pandas Company)

drawGraph(); requestAnimationFrame(animate); } - + window.addEventListener('resize', resizeCanvas); resizeCanvas(); - - setInterval(animate, 1000); + animate(); })();