Add data_visualization/js/app.js

data_visualization/js/app.js

@@ -0,0 +1,61 @@
+import { fetchData } from './api.js';
+import { processData } from './dataHandler.js';
+import { renderCharts, updateCharts } from './chartRenderer.js';
+
+/**
+ * Initialisiert die Anwendung, ruft Daten ab und rendert die Diagramme.
+ * @returns {Promise<void>}
+ */
+export async function initApp() {
+  try {
+    const rawData = await fetchData();
+    const processedData = processData(rawData);
+    renderCharts(processedData);
+    registerEventListeners();
+  } catch (error) {
+    console.error('Fehler beim Initialisieren der Anwendung:', error);
+    const errorContainer = document.querySelector('#error-message');
+    if (errorContainer) {
+      errorContainer.textContent = 'Fehler beim Laden der Daten. Bitte versuchen Sie es erneut.';
+    }
+  }
+}
+
+/**
+ * Bindet Benutzerinteraktionen, z.B. Filteränderungen oder Refresh.
+ */
+function registerEventListeners() {
+  const filterForm = document.querySelector('#filter-form');
+  const refreshButton = document.querySelector('#refresh-data');
+
+  if (filterForm) {
+    filterForm.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      const formData = new FormData(filterForm);
+      const filters = Object.fromEntries(formData.entries());
+      await handleDataUpdate(filters);
+    });
+  }
+
+  if (refreshButton) {
+    refreshButton.addEventListener('click', async () => {
+      await handleDataUpdate();
+    });
+  }
+}
+
+/**
+ * Lädt aktualisierte Daten mit optionalen Filtern und aktualisiert die Diagramme.
+ * @param {Object} [filters] - Optional Filterparameter.
+ */
+async function handleDataUpdate(filters = {}) {
+  try {
+    const rawData = await fetchData(filters);
+    const processedData = processData(rawData);
+    updateCharts(processedData);
+  } catch (error) {
+    console.error('Fehler beim Aktualisieren der Daten:', error);
+  }
+}
+
+window.addEventListener('load', initApp);