100 lines
No EOL
3.1 KiB
JavaScript
100 lines
No EOL
3.1 KiB
JavaScript
'use strict';
|
|
|
|
(function() {
|
|
let chartInstance = null;
|
|
|
|
/**
|
|
* Berechnet statistische Kennzahlen aus den Spike-Daten.
|
|
* @param {Array<{timestamp:number, type:string, cpu:int, value:number}>} spikeData
|
|
* @returns {{median:number, p99:number, deltaTail:number}}
|
|
*/
|
|
function computeStats(spikeData) {
|
|
if (!Array.isArray(spikeData) || spikeData.length === 0) {
|
|
return { median: 0, p99: 0, deltaTail: 0 };
|
|
}
|
|
const sorted = [...spikeData].sort((a, b) => a.value - b.value);
|
|
const n = sorted.length;
|
|
const median = sorted[Math.floor(n / 2)].value;
|
|
const p99 = sorted[Math.floor(n * 0.99) - 1 >= 0 ? Math.floor(n * 0.99) - 1 : 0].value;
|
|
const deltaTail = p99 - median;
|
|
return { median, p99, deltaTail };
|
|
}
|
|
|
|
/**
|
|
* Erstellt oder aktualisiert das Diagramm mit neuen Spikedaten.
|
|
* @param {Array<{timestamp:number, type:string, cpu:int, value:number}>} spikeData
|
|
*/
|
|
function renderSpikeChart(spikeData) {
|
|
const container = document.getElementById('chart-container');
|
|
if (!container) return;
|
|
|
|
// Falls eine vorhandene Instanz existiert, diese löschen
|
|
if (chartInstance && typeof chartInstance.destroy === 'function') {
|
|
chartInstance.destroy();
|
|
}
|
|
|
|
// Daten für Chart.js vorbereiten
|
|
const labels = spikeData.map(d => new Date(d.timestamp).toLocaleTimeString());
|
|
const values = spikeData.map(d => d.value);
|
|
|
|
const canvas = document.createElement('canvas');
|
|
container.innerHTML = '';
|
|
container.appendChild(canvas);
|
|
|
|
// Chart.js Initialisierung
|
|
if (window.Chart) {
|
|
chartInstance = new Chart(canvas.getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'P99 Spike Werte',
|
|
data: values,
|
|
borderColor: '#007ACC',
|
|
backgroundColor: 'rgba(0, 122, 204, 0.2)',
|
|
fill: true,
|
|
pointRadius: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
x: { title: { display: true, text: 'Zeit' } },
|
|
y: { title: { display: true, text: 'Spike Wert' } }
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
// Fallback: einfache Textanzeige
|
|
const info = document.createElement('div');
|
|
info.textContent = 'Chart-Komponente nicht verfügbar. Werteanzeige deaktiviert.';
|
|
container.innerHTML = '';
|
|
container.appendChild(info);
|
|
}
|
|
|
|
const stats = computeStats(spikeData);
|
|
updateStatsPanel(stats);
|
|
}
|
|
|
|
/**
|
|
* Aktualisiert statistische Kennwerte im UI.
|
|
* @param {{median:number, p99:number, deltaTail:number}} stats
|
|
*/
|
|
function updateStatsPanel(stats) {
|
|
const panel = document.querySelector('.stats-panel');
|
|
if (!panel) return;
|
|
|
|
const medianEl = panel.querySelector('.stat-median');
|
|
const p99El = panel.querySelector('.stat-p99');
|
|
const deltaEl = panel.querySelector('.stat-delta');
|
|
|
|
if (medianEl) medianEl.textContent = stats.median.toFixed(2);
|
|
if (p99El) p99El.textContent = stats.p99.toFixed(2);
|
|
if (deltaEl) deltaEl.textContent = stats.deltaTail.toFixed(2);
|
|
}
|
|
|
|
window.ui = {
|
|
renderSpikeChart,
|
|
updateStatsPanel
|
|
};
|
|
})(); |