118 lines
3 KiB
JavaScript
118 lines
3 KiB
JavaScript
"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";
|
|
});
|
|
}
|