Files
watcher/Watcher/wwwroot/js/CpuChart.js

118 lines
4.8 KiB
JavaScript

let cpuChartInstance = null; // This will hold your Chart.js instance globally
function fetchDataAndRenderChart() {
console.log('fetchDataAndRenderChart wird aufgerufen...');
fetch('/monitoring/cpu-usage', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({})
})
.then(response => {
if (!response.ok) {
return response.text().then(text => { throw new Error(text || `HTTP error! status: ${response.status}`); });
}
return response.json();
})
.then(data => {
console.log('Daten erfolgreich geparst:', data);
// --- Crucial check for empty/invalid data ---
if (!data || !Array.isArray(data) || data.length === 0) {
console.warn('Keine Datenpunkte vom Server erhalten oder Datenarray ist leer oder nicht im erwarteten Format. Chart wird nicht gezeichnet/aktualisiert.');
// If there's an existing chart but no data, destroy it to clear the canvas
if (cpuChartInstance) {
cpuChartInstance.destroy(); // Destroy the chart instance
cpuChartInstance = null; // Reset the reference
}
return; // Exit the function as there's nothing to plot
}
// --- Data preparation ---
const timestamps = data.map(item => {
// Ensure you're parsing the timestamp string correctly if not ISO 8601 from backend
// Example: '2025-07-30 16:19:58' -> luxon.DateTime.fromFormat(item.timestamp, 'yyyy-LL-dd HH:mm:ss')
// If backend sends ISO 8601 (e.g., '2025-07-30T16:19:58Z'), Luxon handles it automatically:
return item.timestamp; // If already ISO 8601, pass directly
});
const cpuUsages = data.map(item => parseFloat(item.cpuUsage)); // Always ensure CPU usage is a number
console.log('Extrahierte Zeitstempel:', timestamps);
console.log('Extrahierte CPU-Werte:', cpuUsages);
const ctx = document.getElementById('cpuUsageChart')?.getContext('2d');
if (!ctx) {
console.error("Canvas-Element mit ID 'cpuUsageChart' nicht gefunden!");
return;
}
// --- Chart Creation/Update Logic ---
if (cpuChartInstance) {
// Chart already exists, just update its data and refresh
console.log('Bestehender Chart wird aktualisiert...');
cpuChartInstance.data.labels = timestamps;
cpuChartInstance.data.datasets[0].data = cpuUsages;
cpuChartInstance.update(); // Re-render the chart with new data
} else {
// No chart exists yet, create a new one
console.log('Neuer Chart wird erstellt...');
cpuChartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: timestamps,
datasets: [{
label: 'CPU Auslastung (%)',
data: cpuUsages,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
fill: false
}]
},
options: {
responsive: true,
scales: {
x: {
type: 'time',
time: {
unit: 'minute', // Or 'hour', 'day'
tooltipFormat: 'HH:mm:ss',
displayFormats: {
minute: 'HH:mm'
}
},
title: {
display: true,
text: 'Zeit'
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: 'CPU Auslastung (%)'
},
max: 100
}
},
plugins: {
tooltip: {
callbacks: {
label: function (context) {
return context.dataset.label + ': ' + context.parsed.y + '%';
}
}
}
}
}
});
}
})
.catch(error => {
console.error('Catch-Block ausgelöst:', error);
});
}
// Initial call when the DOM is ready
document.addEventListener('DOMContentLoaded', fetchDataAndRenderChart);
// Subsequent calls for real-time updates
setInterval(fetchDataAndRenderChart, 20000); // Update every 20 seconds