Add results_visualization/js/charts.js

results_visualization/js/charts.js

@@ -0,0 +1,134 @@
+"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();
+}