99 lines
No EOL
2.9 KiB
JavaScript
99 lines
No EOL
2.9 KiB
JavaScript
let metricChartInstance = null;
|
|
let spikeChartInstance = null;
|
|
|
|
function renderMetricCharts(metricReport) {
|
|
if (!metricReport || !metricReport.metrics || !Array.isArray(metricReport.metrics)) {
|
|
console.warn('renderMetricCharts: invalid metricReport');
|
|
return;
|
|
}
|
|
|
|
const ctxMetrics = document.getElementById('metricChart');
|
|
const ctxSpikes = document.getElementById('spikeChart');
|
|
if (!ctxMetrics || !ctxSpikes) {
|
|
console.error('Chart canvas elements not found');
|
|
return;
|
|
}
|
|
|
|
if (metricChartInstance) {
|
|
metricChartInstance.destroy();
|
|
}
|
|
if (spikeChartInstance) {
|
|
spikeChartInstance.destroy();
|
|
}
|
|
|
|
const labels = metricReport.metrics.map(m => m.name);
|
|
const dataValues = metricReport.metrics.map(m => m.value);
|
|
|
|
metricChartInstance = new Chart(ctxMetrics, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Metrik-Werte',
|
|
data: dataValues,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.6)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { position: 'top' },
|
|
title: { display: true, text: 'Migrationsmetriken (nach Setup)' }
|
|
},
|
|
scales: {
|
|
y: { beginAtZero: true }
|
|
}
|
|
}
|
|
});
|
|
|
|
const spikeLabels = metricReport.spikes ? metricReport.spikes.map(s => s.timestamp) : [];
|
|
const spikeValues = metricReport.spikes ? metricReport.spikes.map(s => s.intensity) : [];
|
|
spikeChartInstance = new Chart(ctxSpikes, {
|
|
type: 'line',
|
|
data: {
|
|
labels: spikeLabels,
|
|
datasets: [{
|
|
label: 'Spike Intensität',
|
|
data: spikeValues,
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.3)',
|
|
tension: 0.3,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { position: 'top' },
|
|
title: { display: true, text: 'Migrationsspitzen über Zeit' }
|
|
},
|
|
scales: {
|
|
y: { beginAtZero: true }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateSummaryCards(metricReport) {
|
|
if (!metricReport || !metricReport.metrics || !Array.isArray(metricReport.metrics)) {
|
|
console.warn('updateSummaryCards: invalid metricReport');
|
|
return;
|
|
}
|
|
|
|
const avgValue = metricReport.metrics.reduce((acc, m) => acc + (m.value || 0), 0) / metricReport.metrics.length;
|
|
const maxValue = Math.max(...metricReport.metrics.map(m => m.value || 0));
|
|
const minValue = Math.min(...metricReport.metrics.map(m => m.value || 0));
|
|
|
|
const cardAvg = document.getElementById('card-average');
|
|
const cardMax = document.getElementById('card-max');
|
|
const cardMin = document.getElementById('card-min');
|
|
|
|
if (cardAvg) cardAvg.textContent = avgValue.toFixed(2);
|
|
if (cardMax) cardMax.textContent = maxValue.toFixed(2);
|
|
if (cardMin) cardMin.textContent = minValue.toFixed(2);
|
|
}
|
|
|
|
window.renderMetricCharts = renderMetricCharts;
|
|
window.updateSummaryCards = updateSummaryCards; |