Add metric_visualization/js/charts.js

metric_visualization/js/charts.js

@@ -0,0 +1,118 @@
+"use strict";
+
+/**
+ * @module charts
+ * Visualization logic module for metric_visualization
+ */
+
+/**
+ * Zeichnet ein Linien- oder Scatter-Diagramm basierend auf Δt-Daten.
+ * @param {Array<Object>} analysisData - Analyse-Daten mit {run_id, t_index_visible, t_gate_read, delta_t}.
+ * @param {string} [chartContainerId="chart-area"] - ID des Containers zur Anzeige des Charts.
+ */
+export function renderTimeSeriesChart(analysisData, chartContainerId = "chart-area") {
+  if (!Array.isArray(analysisData) || analysisData.length === 0) {
+    console.warn("renderTimeSeriesChart: No analysis data provided.");
+    return;
+  }
+
+  const container = document.getElementById(chartContainerId);
+  if (!container) {
+    console.error(`Container with id '${chartContainerId}' not found.`);
+    return;
+  }
+
+  container.innerHTML = "";
+  const canvas = document.createElement("canvas");
+  canvas.setAttribute("role", "img");
+  canvas.setAttribute("aria-label", "Δt-Zeitverlauf Diagramm");
+  container.appendChild(canvas);
+
+  const context = canvas.getContext("2d");
+  const labels = analysisData.map(d => d.t_index_visible);
+  const deltaTValues = analysisData.map(d => d.delta_t);
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        label: "Δt Werte",
+        data: deltaTValues,
+        borderColor: "#007acc",
+        backgroundColor: "rgba(0,122,204,0.2)",
+        pointBackgroundColor: highlightNegativeDeltaT(analysisData),
+        fill: false,
+        tension: 0.2
+      }
+    ]
+  };
+
+  const config = {
+    type: "line",
+    data,
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        tooltip: {
+          callbacks: {
+            label: context => {
+              const { label, parsed } = context;
+              return `t=${label}: Δt=${parsed}`;
+            }
+          }
+        },
+        legend: {
+          display: true,
+          labels: {
+            color: "#222"
+          }
+        }
+      },
+      scales: {
+        x: {
+          title: {
+            display: true,
+            text: "Zeitindex"
+          },
+          ticks: {
+            color: "#333"
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: "Δt"
+          },
+          ticks: {
+            color: "#333"
+          }
+        }
+      }
+    }
+  };
+
+  // Chart.js wird hier erwartet, global verfügbar zu sein (z. B. über <script>-Einbindung)
+  if (typeof Chart === "undefined") {
+    console.error("Chart.js not loaded. Please include Chart.js before rendering charts.");
+    return;
+  }
+
+  new Chart(context, config);
+}
+
+/**
+ * Hebt Δt < 0 Punkte visuell hervor.
+ * @param {Array<Object>} analysisData - Analyse-Daten mit Δt-Werten.
+ * @returns {string[]} Farben für jeden Datenpunkt.
+ */
+export function highlightNegativeDeltaT(analysisData) {
+  if (!Array.isArray(analysisData)) {
+    return [];
+  }
+
+  return analysisData.map(item => {
+    if (typeof item.delta_t !== "number") return "#007acc";
+    return item.delta_t < 0 ? "#e74c3c" : "#007acc";
+  });
+}