67 lines
2.3 KiB
Markdown
67 lines
2.3 KiB
Markdown
# Metric Visualization – Δt Analysis Frontend
|
||
|
||
## Zweck
|
||
Dieses Web-Frontend dient der Darstellung und Auswertung von Zeitreihenanalysen mit Fokus auf **Δt<0-Fälle**. Es unterstützt Forschende und Analysten darin, Trends, Warnraten und Anomalien interaktiv zu untersuchen.
|
||
|
||
## Hauptziele
|
||
- Visualisierung von Analyseergebnissen aus dem Backend (`/api/analysis`)
|
||
- Interaktive Diagramme für Δt-Zeitverläufe
|
||
- Hervorhebung und Filterung von Δt<0-Datenpunkten
|
||
- Anzeige von aggregierten Statistikwerten (Warn- und Unknown-Rates)
|
||
- Responsives und zugängliches UI-Design für Desktop, Tablet und Mobilgeräte
|
||
|
||
## API-Nutzung
|
||
**Endpunkt:** `/api/analysis`
|
||
**Methode:** `GET`
|
||
**Erwarteter Rückgabewert:** Array von Objekten im Format:
|
||
```json
|
||
[
|
||
{
|
||
"run_id": "string",
|
||
"t_index_visible": "number",
|
||
"t_gate_read": "number",
|
||
"delta_t": "number",
|
||
"warn_rate": "number",
|
||
"unknown_rate": "number"
|
||
}
|
||
]
|
||
```
|
||
**Verwendung:**
|
||
Die API wird von den Modulen `js/api.js` (Abruf der Daten) und `js/app.js` (Darstellung im UI) genutzt.
|
||
|
||
## Verzeichnisstruktur
|
||
```
|
||
project-root/
|
||
├── index.html
|
||
├── css/
|
||
│ ├── base.css
|
||
│ └── layout.css
|
||
├── js/
|
||
│ ├── api.js
|
||
│ ├── app.js
|
||
│ └── charts/
|
||
│ └── deltaTChart.js
|
||
├── README.md
|
||
└── LICENSE
|
||
```
|
||
|
||
## Funktionaler Ablauf
|
||
1. **Initialisierung** – Beim Laden der Anwendung werden Basis-Layouts und UI-Komponenten aufgebaut.
|
||
2. **API-Abruf** – Die Anwendung ruft Analyseergebnisse von `/api/analysis` ab.
|
||
3. **Verarbeitung** – Clientseitig werden die Daten für Diagramme und Statistiken umgewandelt.
|
||
4. **Visualisierung** – Zeitverläufe und Ausreißer (Δt<0) werden hervorgehoben.
|
||
5. **Interaktion** – Nutzer können Datenpunkte selektieren, Tooltips einsehen und Filter anwenden.
|
||
|
||
## Responsives Design
|
||
- **Mobile-first Ansatz**
|
||
Layouts passen sich an Viewportgrößen ab 640px, 1024px an.
|
||
- **Barrierefreiheit**
|
||
Nutzung semantischer HTML-Strukturen, ARIA-Attribute und ausreichender Farbkontraste.
|
||
|
||
## Weiterentwicklung
|
||
- Erweiterung auf zusätzliche Metriken (bspw. Δt>0-Trends)
|
||
- Exportfunktionen für Daten und Diagramme
|
||
- Vergleichsansichten zwischen Laufserien
|
||
|
||
## Lizenz und Rechte
|
||
© 2026 Donau2Space.de – Alle Rechte vorbehalten.
|