Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ // Update last update time
+ function updateLastUpdate() {
+ const now = new Date();
+ const options = {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: true
+ };
+ document.getElementById('lastUpdate').textContent = now.toLocaleTimeString('en-US', options);
+ }
+
+ updateLastUpdate();
+ setInterval(updateLastUpdate, 1000);
+
+ // Performance Chart
+ const ctx = document.getElementById('performanceChart').getContext('2d');
+
+ // Simulated data
+ const data = {
+ labels: Array.from({length: 12}, (_, i) => `${i}h`),
+ values: Array.from({length: 12}, () => Math.random() * 100)
+ };
+
+ function drawChart() {
+ const width = ctx.canvas.width;
+ const height = ctx.canvas.height;
+ const padding = 40;
+
+ // Clear canvas
+ ctx.clearRect(0, 0, width, height);
+
+ // Draw line
+ ctx.beginPath();
+ ctx.strokeStyle = '#3498db';
+ ctx.lineWidth = 2;
+
+ data.values.forEach((value, index) => {
+ const x = padding + (index * ((width - padding * 2) / (data.values.length - 1)));
+ const y = height - (padding + (value / 100) * (height - padding * 2));
+
+ if (index === 0) {
+ ctx.moveTo(x, y);
+ } else {
+ ctx.lineTo(x, y);
+ }
+ });
+
+ ctx.stroke();
+
+ // Draw axes
+ ctx.beginPath();
+ ctx.strokeStyle = '#95a5a6';
+ ctx.lineWidth = 1;
+ ctx.moveTo(padding, padding);
+ ctx.lineTo(padding, height - padding);
+ ctx.lineTo(width - padding, height - padding);
+ ctx.stroke();
+
+ // Draw labels
+ ctx.fillStyle = '#7f8c8d';
+ ctx.font = '12px Arial';
+ data.labels.forEach((label, index) => {
+ const x = padding + (index * ((width - padding * 2) / (data.labels.length - 1)));
+ ctx.fillText(label, x - 10, height - padding + 20);
+ });
+ }
+
+ // Initial draw
+ drawChart();
+
+ // Redraw on window resize
+ window.addEventListener('resize', drawChart);
+ });
