From c6bd83a9931920499c4e14cc696becc4fc2b9d1e Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 3 May 2026 02:07:36 +0000 Subject: [PATCH] Add data_visualization/js/visualization.js --- data_visualization/js/visualization.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 data_visualization/js/visualization.js diff --git a/data_visualization/js/visualization.js b/data_visualization/js/visualization.js new file mode 100644 index 0000000..9ab4af5 --- /dev/null +++ b/data_visualization/js/visualization.js @@ -0,0 +1 @@ +/*\n * visualization.js\n * Chart-Logik zur Darstellung akustischer und Umwelt-Frequenzdaten der Donau\n * Verantwortlich für das Rendern und Aktualisieren von Charts basierend auf JSON-Daten\n * © 2026 Donau2Space.de\n */\n\n/**\n * @typedef {Object} VisualizationData\n * @property {string} canvasId - ID des Canvas-Elements, das für das Chart verwendet wird\n * @property {string} type - Chart-Typ (z. B. 'line', 'bar')\n * @property {Array} labels - Zeit- oder Frequenz-Achsen-Beschriftung\n * @property {Array} datasets - Datensätze für das Chart (mit label, data, color etc.)\n * @property {Object} [options] - Optionale Chart.js Konfigurationselemente\n */\n\nconst chartInstances = {};\n\n/**\n * Erstellt oder aktualisiert ein Chart.js Diagramm auf Basis der übergebenen JSON-Daten.\n * \n * @param {VisualizationData} data - Strukturierte Visualisierungsdaten\n */\nexport function renderChart(data) {\n try {\n const { canvasId, type, labels, datasets, options } = data;\n if (!canvasId || !Array.isArray(datasets)) {\n console.warn('renderChart: Ungültige Eingabedaten');\n return;\n }\n\n const canvas = document.getElementById(canvasId);\n if (!canvas) {\n console.error(`Canvas mit ID \"${canvasId}\" nicht gefunden.`);\n return;\n }\n\n const ctx = canvas.getContext('2d');\n\n if (chartInstances[canvasId]) {\n chartInstances[canvasId].data.labels = labels;\n chartInstances[canvasId].data.datasets = datasets;\n chartInstances[canvasId].update();\n } else {\n chartInstances[canvasId] = new Chart(ctx, {\n type: type || 'line',\n data: { labels, datasets },\n options: Object.assign(\n {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: 'index', intersect: false },\n scales: {\n x: {\n title: { display: true, text: 'Zeit / Frequenz' }\n },\n y: {\n title: { display: true, text: 'Intensität / Amplitude' }\n }\n },\n plugins: {\n legend: { display: true, position: 'bottom' },\n tooltip: {\n mode: 'nearest',\n intersect: false\n }\n }\n },\n options || {}\n )\n });\n }\n } catch (error) {\n console.error('Fehler beim Rendern des Diagramms:', error);\n }\n}\n\n/**\n * Optional: Funktion zur Aktualisierung durch Filter-Event\n * @param {VisualizationData} newData - Neue Daten nach Filterung\n */\nexport function updateVisualization(newData) {\n renderChart(newData);\n}\n \ No newline at end of file