134 lines
3.4 KiB
JavaScript
134 lines
3.4 KiB
JavaScript
"use strict";
|
|
|
|
/**
|
|
* @file charts.js
|
|
* @description Visualisierung der Analyseergebnisse mittels Chart.js.
|
|
* Verantwortlich für Erstellung und Aktualisierung der Diagramme.
|
|
*/
|
|
|
|
/* global Chart */
|
|
|
|
/** @type {Chart|null} */
|
|
let resultChart = null;
|
|
|
|
/**
|
|
* Erstellt ein neues Chart.js-Diagramm zur Darstellung von Stability- und Correlation-Daten.
|
|
* @param {Object[]} resultData - Datenarray aus der API /api/results.
|
|
* @returns {void}
|
|
*/
|
|
export function renderResultChart(resultData) {
|
|
if (!Array.isArray(resultData)) return;
|
|
|
|
const ctx = document.getElementById("resultChartCanvas");
|
|
if (!ctx) {
|
|
console.error("Canvas-Element mit ID 'resultChartCanvas' wurde nicht gefunden.");
|
|
return;
|
|
}
|
|
|
|
const runLabels = resultData.map(d => d.run_id);
|
|
const stabilityScores = resultData.map(d => d.step_stability_score ?? 0);
|
|
const correlationCoeffs = resultData.map(d => d.correlation_coefficient ?? 0);
|
|
|
|
const chartConfig = {
|
|
type: "bar",
|
|
data: {
|
|
labels: runLabels,
|
|
datasets: [
|
|
{
|
|
label: "Step Stability Score",
|
|
data: stabilityScores,
|
|
backgroundColor: "rgba(75, 192, 192, 0.6)",
|
|
borderColor: "rgba(75, 192, 192, 1)",
|
|
borderWidth: 1
|
|
},
|
|
{
|
|
label: "Correlation Coefficient",
|
|
data: correlationCoeffs,
|
|
type: "line",
|
|
borderColor: "rgba(255, 99, 132, 1)",
|
|
backgroundColor: "rgba(255, 99, 132, 0.2)",
|
|
yAxisID: "y2"
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: "index",
|
|
intersect: false
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
enabled: true,
|
|
callbacks: {
|
|
label: function (context) {
|
|
const label = context.dataset.label || "";
|
|
const value = context.parsed.y;
|
|
return `${label}: ${value.toFixed(3)}`;
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: "bottom"
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
type: "linear",
|
|
display: true,
|
|
position: "left",
|
|
title: {
|
|
display: true,
|
|
text: "Stability Score"
|
|
}
|
|
},
|
|
y2: {
|
|
type: "linear",
|
|
display: true,
|
|
position: "right",
|
|
title: {
|
|
display: true,
|
|
text: "Correlation Coefficient"
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: "Run ID"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
if (resultChart) {
|
|
resultChart.destroy();
|
|
}
|
|
|
|
resultChart = new Chart(ctx, chartConfig);
|
|
}
|
|
|
|
/**
|
|
* Aktualisiert vorhandenes Diagramm mit neu gefilterten Daten.
|
|
* @param {Object[]} filteredResultData - Gefilterte API-Daten.
|
|
* @returns {void}
|
|
*/
|
|
export function updateChartData(filteredResultData) {
|
|
if (!resultChart || !Array.isArray(filteredResultData)) return;
|
|
|
|
const runLabels = filteredResultData.map(d => d.run_id);
|
|
const stabilityScores = filteredResultData.map(d => d.step_stability_score ?? 0);
|
|
const correlationCoeffs = filteredResultData.map(d => d.correlation_coefficient ?? 0);
|
|
|
|
resultChart.data.labels = runLabels;
|
|
if (resultChart.data.datasets?.length >= 2) {
|
|
resultChart.data.datasets[0].data = stabilityScores;
|
|
resultChart.data.datasets[1].data = correlationCoeffs;
|
|
}
|
|
|
|
resultChart.update();
|
|
}
|