Zum Inhalt

Frontend Architektur Trend Analysis

ID: REQ-TA-016 · Service: trend-analysis · Status: 🟢 aktiv · Use Case: UC-TA-001, UC-TA-002, UC-TA-003, UC-TA-012

Die Chart-Oberfläche ist eine neue Seite innerhalb der bestehenden Frontend-Plattform-App (kein eigenständiger Service/Container) — wie alle übrigen Bereiche (Trading Journal, Analyse & Bewertung, Log-Anzeige, ...). Die gesamte Visualisierung läuft im Browser des Nutzers um den Raspberry Pi 4 zu entlasten. TradingView Lightweight Charts übernimmt das Rendering.

Tech Stack

Feld Wert
Framework React (Teil der bestehenden Frontend-App, frontend/src/components/TrendAnalysis.jsx)
Styling CSS mit den bestehenden CSS-Custom-Properties (kein Tailwind, konsistent zu den übrigen Komponenten)
Chart Library TradingView Lightweight Charts (npm-Paket lightweight-charts)
State Management lokaler React State (useState/useEffect/useRef), kein Context/Zustand — wie der Rest der App
Http Client Fetch API

Layout

  • Titel "Trend-Analyse"
  • Zeitstempel "Aktualisiert HH:MM" + Refresh-Button

Controls

  • Währungspaar Auswahl (Chip-Reihe, 4 Paare)
  • Zeitrahmen Auswahl (Chip-Gruppe 15M/1H/4H/1D)
  • Candlestick / Heikin-Ashi Toggle
  • Button "Heute" (zurück zur aktuellen Ansicht)

Main

  • Hauptchart (Candlestick / Heikin-Ashi)
  • Platzhalter-Sektion "Indikatoren" (Coming-Soon, bis Phase 2 die Indikator-Panels liefert)
Feld Wert
Position eigener Top-Level-Menüpunkt "Trend-Analyse" in der Sidebar (nicht verschachtelt)
Begründung Auf dem Smartphone (PWA) soll die Seite mit einem Tap aus dem Hamburger-Menü erreichbar sein, ohne ein Untermenü aufklappen zu müssen.

Responsive

Feld Wert
Mobile ja (Hamburger-Menü, Chip-Reihen umbrechen per flex-wrap)
Desktop ja
Chart Height min(60vh, 500px)

Docker

Feld Wert
Hinweis kein eigener Container — Build läuft als Teil des bestehenden frontend-Containers (frontend/Dockerfile)

Abnahmekriterien

  • [ ] Layout ist responsiv auf Desktop und Mobile
  • [ ] Chart nimmt einen Großteil der verfügbaren Höhe ein (min(60vh, 500px))
  • [ ] Dark Mode (einziges Theme der Plattform, kein Toggle nötig)
  • [ ] Seite ist mit einem Tap aus dem Hauptmenü erreichbar

Changelog

Eintrag 1

Version: 1.0

Changes: Initiale Version