Mika/donau_data_listener
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add data_visualization/js/visualization.js

Browse source
This commit is contained in:
Mika 2026-05-03 02:07:36 +00:00
parent c4394be145
commit c6bd83a993
1 changed files with 1 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
data_visualization/js/visualization.js Normal file
View file

@ -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<string>} labels - Zeit- oder Frequenz-Achsen-Beschriftung\n * @property {Array<Object>} 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