83 lines
No EOL
3.1 KiB
Markdown
83 lines
No EOL
3.1 KiB
Markdown
# Δt<0‑Analyse‑Visualisierung
|
||
|
||
## Projektbeschreibung
|
||
Dieses Projekt stellt ein webbasiertes Frontend zur Visualisierung der Analyseergebnisse von Δt<0‑Fällen in Near‑Expiry‑Unpinned‑Datenszenarien dar. Ziel ist die übersichtliche Aufbereitung und interaktive Untersuchung der Analyseergebnisse, um kritische Zeitabweichungen sichtbar zu machen und Trends je Run‑Typ zu erkennen.
|
||
|
||
## Ziel und Funktionsübersicht
|
||
**Ziel:** Visualisierung und interaktive Analyse der Δt‑Ergebnisse.
|
||
|
||
**Kernfunktionen:**
|
||
- Abruf der Analyseergebnisse über die API‑Route `/results`.
|
||
- Tabellarische Darstellung mit den Feldern: **Δt**, **Status**, **Run‑Typ**.
|
||
- Dynamische farbliche Hervorhebung von Datensätzen mit Δt<0.
|
||
- Interaktive Diagramme zur Verteilung und Entwicklung der Messwerte.
|
||
- Filterung nach Run‑Typ und wählbaren Zeitintervallen.
|
||
- Responsives Layout für Desktop‑ und Mobilgeräte.
|
||
|
||
## Datenflussübersicht
|
||
1. **Fetch‑Operation:** Beim Laden der Seite wird ein GET‑Request an `/results` ausgeführt.
|
||
2. **Verarbeitung:** Die Antwortdaten werden im JavaScript zu einem strukturierten Objektmodell umgewandelt.
|
||
3. **Darstellung:**
|
||
- Tabelle listet alle Runs mit relevanten Attributen.
|
||
- Diagramme visualisieren die zeitliche Entwicklung und Häufigkeit.
|
||
4. **Filterung:** Änderungen durch Nutzereingaben führen zu einer dynamischen Neudarstellung der Datensicht.
|
||
|
||
## API‑Schnittstelle
|
||
**Endpoint:** `/results`
|
||
|
||
**Methode:** `GET`
|
||
|
||
**Erwartete Query‑Parameter:**
|
||
- `filter` — optionaler Filter nach Run‑Typ
|
||
- `time_range` — Zeitintervall für die angefragte Auswertung
|
||
|
||
**Erwartete Antwort:** Array von Objekten:
|
||
```json
|
||
[
|
||
{
|
||
"run_id": "string",
|
||
"category": "string",
|
||
"delta_t": "number",
|
||
"timestamp": "string (ISO)",
|
||
"status": "string"
|
||
}
|
||
]
|
||
```
|
||
**Verwendung im Code:**
|
||
- `js/api.js`: führt den Fetch‑Request aus.
|
||
- `js/app.js`: verarbeitet die Daten, rendert Tabelle und Diagramm.
|
||
|
||
## Strukturübersicht
|
||
```
|
||
📁 visualization_tool
|
||
├── index.html
|
||
├── css/
|
||
│ ├── style.css
|
||
├── js/
|
||
│ ├── api.js → API‑Kommunikation
|
||
│ ├── app.js → Steuerung, Rendering, Filterlogik
|
||
├── README.md → Projektdokumentation
|
||
```
|
||
|
||
## Bedienungsanleitung
|
||
1. Öffne die Weboberfläche im Browser.
|
||
2. Die Übersichtstabelle und die Diagramme werden automatisch mit Daten aus `/results` befüllt.
|
||
3. Verwende die Filteroptionen zur Einschränkung nach **Run‑Typ** oder **Zeitintervallen**.
|
||
4. Farbkennzeichnung:
|
||
- **Rot / Warnfarbe:** Δt<0 (kritischer Fall)
|
||
- **Neutral / Blaugrün:** Δt≥0
|
||
5. Änderungen der Filter führen ohne Neuladen zu einer aktualisierten Darstellung.
|
||
|
||
## Responsives Design & Barrierefreiheit
|
||
- **Layout:** Mobile‑first konzipiert.
|
||
- **Komponenten:** Verwendung semantischer HTML‑Elemente.
|
||
- **Zugänglichkeit:** ARIA‑Labels für dynamische Elemente, ausreichende Farbkontraste.
|
||
|
||
## Weiterentwicklung
|
||
- Erweiterung der Diagrammtypen (z. B. Histogramm, Trendanalyse).
|
||
- Unterstützung zusätzlicher API‑Filter.
|
||
- Exportfunktionen der Ergebnisse.
|
||
|
||
---
|
||
|
||
© 2026 Donau2Space.de |