# Web-Interface für Magnetfeld-Analyse in Passau

## Zweck
Diese Webanwendung dient zur **Visualisierung und Analyse von Magnetometerdaten** aus Messungen in Passau. Die Benutzeroberfläche erlaubt es, zeitabhängige Magnetfeldverläufe und spektrale Auswertungen zu betrachten, Analysemetriken wie Durchschnittswerte oder Rauschanteile zu vergleichen und Daten interaktiv zu filtern.

---

## Hauptfunktionen
- Visualisierung von Magnetometerdaten in Zeitreihen- und Spektraldiagrammen
- Anzeige von Analyseergebnissen wie Durchschnittswerten, Peaks und Noise-Statistiken
- Filterung nach Zeitfenster und Magnetometer
- Interaktive Diagramme mit Zoom- und Hover-Funktion
- Automatisches Nachladen neuer Analyseergebnisse per API
- Responsives Layout, optimiert für Desktop- und Mobilgeräte

---

## Setup
### Voraussetzungen
- Moderner Webbrowser (Chrome, Firefox, Edge, Safari)
- Node.js (>= 18) empfohlen zum lokalen Hosting

### Lokale Entwicklung
```bash
# Repository klonen
git clone <repository-url>
cd data_visualization_web_ui

# Lokalen Server starten (z. B. mit serve)
npm install -g serve
serve .
```

### Deployment
Die Anwendung kann auf jedem statischen Webserver betrieben werden. API-Endpunkte müssen unter derselben Domain oder mit CORS-Konfiguration erreichbar sein.

---

## API-Routen

| Route | Methode | Beschreibung | Erwartete Parameter | Antwortstruktur |
|-------|----------|---------------|---------------------|------------------|
| `/api/data` | GET | Abruf der Magnetometer-Messdaten | `time_range`, `sensor_id` | Array von Objekten `{ timestamp, sensor, Bx, By, Bz }` |
| `/api/analysis` | GET | Abruf der Analysemetriken (Durchschnitt, Peaks etc.) | – | Objekt `{ mean, peaks, noise, drift }` |

### Beispiel: Anfragen
```js
// Abruf der Messdaten
fetch('/api/data?time_range=last_24h&sensor_id=1')
  .then(res => res.json())
  .then(console.log);

// Abruf der Analyseergebnisse
fetch('/api/analysis')
  .then(res => res.json())
  .then(console.log);
```

---

## Datenfluss
1. JavaScript-Module laden die Daten asynchron über `/api/data` und `/api/analysis`.
2. Die Daten werden gefiltert, analysiert und an die Visualisierungskomponenten weitergegeben.
3. HTML-Komponenten werden dynamisch aktualisiert, um Diagramme und Statistiken anzuzeigen.
4. Benutzerinteraktionen (Zoom, Filter) lösen neue API-Anfragen aus und aktualisieren die Visualisierungen.

---

## Strukturübersicht
```
project_root/
├── index.html
├── css/
│   ├── main.css
│   └── responsive.css
├── js/
│   ├── app.js          # Einstiegspunkt, Initialisierung
│   ├── api.js          # API-Requests (fetch /api/data, /api/analysis)
│   ├── charts.js       # Visualisierung (Zeitreihen, Spektren)
│   └── ui.js           # DOM-Updates, Filter, Interaktion
└── README.md           # Diese Datei
```

---

## Sicherheit & Datenschutz
- Keine personenbezogenen Daten werden übertragen oder gespeichert.
- API-Zugriffe beschränken sich auf wissenschaftliche Messdaten.
- Kommunikation mit Backend sollte über HTTPS erfolgen.

---

## Barrierefreiheit & Responsiveness
- Nutzung semantischer HTML-Elemente (`<main>`, `<section>`, `<nav>`, `<footer>`)
- Anpassung der Layouts an verschiedene Viewports (Mobile First)
- ARIA-Attribute zur Unterstützung von Screenreadern

---

## Lizenz & Copyright
© 2026 Donau2Space.de