File size: 3,020 Bytes
2f603b6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
document.addEventListener('DOMContentLoaded', function() {
// Initialize telemetry chart
const ctx = document.getElementById('telemetryChart').getContext('2d');
const telemetryChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
datasets: [
{
label: 'Temperature (°C)',
data: [18, 20, 22, 24, 23, 21, 19],
borderColor: '#0ea5e9',
backgroundColor: 'rgba(14, 165, 233, 0.1)',
tension: 0.3,
fill: true
},
{
label: 'Pressure (kPa)',
data: [101, 101.2, 101.1, 101.3, 101.2, 101.1, 101],
borderColor: '#7e22ce',
backgroundColor: 'rgba(126, 34, 206, 0.1)',
tension: 0.3,
fill: true
},
{
label: 'Radiation (μSv)',
data: [0.8, 0.9, 1.1, 1.3, 1.2, 1.0, 0.9],
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
tension: 0.3,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: '#e2e8f0'
}
}
},
scales: {
x: {
grid: {
color: 'rgba(74, 85, 104, 0.3)'
},
ticks: {
color: '#a0aec0'
}
},
y: {
grid: {
color: 'rgba(74, 85, 104, 0.3)'
},
ticks: {
color: '#a0aec0'
}
}
}
}
});
// Simulate real-time data updates
setInterval(() => {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const timeLabel = `${hours}:${minutes}`;
// Add new data point and remove oldest
telemetryChart.data.labels.push(timeLabel);
telemetryChart.data.labels.shift();
telemetryChart.data.datasets.forEach(dataset => {
const lastValue = dataset.data[dataset.data.length - 1];
const fluctuation = (Math.random() - 0.5) * 2;
const newValue = Math.max(0, lastValue + fluctuation);
dataset.data.push(newValue);
dataset.data.shift();
});
telemetryChart.update();
}, 5000);
}); |