Muster-Bibliothek mit statischen SVG-Beispielgrafiken
ID: REQ-TO-004 · Service: trade-optimizer · Status: 🟢 aktiv · Use Case: UC-TO-006, UC-TO-007
Für jedes definierte Einstiegsmuster existiert eine statische SVG-Grafik die das Muster auf 5-Minuten-Kerzen-Basis illustriert. Die SVGs sind didaktisch aufgebaut: Sie zeigen das Muster im Kontext (vorherige Kerzen, Markierung des Musters, Einstiegspunkt). Zusätzlich gibt es einen strukturierten Erklärungstext je Muster.
Svg Bibliothek
Speicherort: /frontend/public/patterns/
Namenskonvention: {muster_id}_{long|short}.svg
Beispiele
- bullish_engulfing_long.svg
- bearish_engulfing_short.svg
- hammer_long.svg
- shooting_star_short.svg
- morning_doji_star_long.svg
- evening_doji_star_short.svg
- bullish_marubozu_long.svg
- bearish_marubozu_short.svg
- break_retest_support_long.svg
- break_retest_resistance_short.svg
- bull_flag_long.svg
- bear_flag_short.svg
- double_bottom_long.svg
- double_top_short.svg
Svg Gestaltung
Groesse: 300x200px viewBox
Stil: minimalistisch, klare Linien
Farben
| Feld | Wert |
|---|---|
| Bullische Kerze | #26a69a (grün) |
| Bearische Kerze | #ef5350 (rot) |
| Markierung | #ff9800 (orange, Pfeil oder Rahmen) |
| Einstiegspunkt | #2196f3 (blau, gestrichelte Linie) |
| Hintergrund | transparent |
Elemente
- 5-8 Kerzen als Kontext
- Markierung des Musters (farbiger Rahmen oder Pfeil)
- Label "Einstieg" mit gestrichelter Linie
Eintrag 4
| Feld | Wert |
|---|---|
| Optional | Support/Resistance Linie |
Erklaerungstexte
Struktur
| Feld | Wert |
|---|---|
| Was Ist Es | kurze Definition (1 Satz) |
| Woran Erkenne Ich Es | visuelle Merkmale (2-3 Punkte) |
| Warum Ist Es Ein Signal | fachliche Begründung (2-3 Sätze) |
| Worauf Achten | Kontext und Bestätigung (1-2 Punkte) |
Beispiel Bullish Engulfing
Was Ist Es: Eine große grüne Kerze "verschluckt" die vorherige rote Kerze vollständig.
Woran Erkenne Ich Es
- Rote Kerze gefolgt von grüner Kerze
- Grüne Kerze öffnet unter dem Tief der roten Kerze
- Grüne Kerze schließt über dem Hoch der roten Kerze
Warum Ist Es Ein Signal
Das Muster zeigt dass Käufer die Verkäufer vollständig überwältigt haben. Die Stärke der grünen Kerze signalisiert starkes Kaufmomentum. Besonders aussagekräftig an Support-Levels oder nach längerer Abwärtsbewegung.
Worauf Achten
- Bestätigung durch nächste Kerze (ebenfalls grün)
- Volumen/Tick-Volumen sollte bei der grünen Kerze höher sein
UI
Pattern Card
Beschreibung: Karte für erkannte Einstiegsmuster (mit Rank + Match Score)
Elemente
- Rang (#1,
- Muster-Name
- Typ-Badge (Candlestick / Chart-Muster)
- Match Score Bar (farbige Fortschrittsanzeige 50–100%)
Eintrag 5
| Feld | Wert |
|---|---|
| ℹ-Button | öffnet/schließt Inline-Info-Panel |
- SVG-Beispielbild
- "Was ist es?" immer sichtbar
Library Card
Beschreibung: Referenzkarte für Musterbibliothek (kein Rank, kein Match Score)
Elemente
- Muster-Name
- Typ-Badge
Eintrag 3
| Feld | Wert |
|---|---|
| ℹ-Button | öffnet/schließt Inline-Info-Panel |
- SVG-Beispielbild (etwas kleiner als PatternCard)
- "Was ist es?" immer sichtbar
Info Panel
Beschreibung: Inline-Infobox die per ℹ-Button ein- und ausgeklappt wird
Inhalte
- "Woran erkenne ich es?" (Aufzählung)
- "Warum ist es ein Signal?" (Text)
- "Worauf achten?" (Aufzählung)
Musterbibliothek
Beschreibung: Immer sichtbarer Bereich unterhalb der erkannten Muster
Verhalten
| Feld | Wert |
|---|---|
| Long Setup | nur Long-Muster anzeigen |
| Short Setup | nur Short-Muster anzeigen |
| Neutral | Long-Muster und Short-Muster getrennt mit Überschriften anzeigen |
Daten Quelle: GET /api/v1/trade-optimizer/library (einmalig beim Laden)
Api Endpoint Library
Path: GET /api/v1/trade-optimizer/library
Beschreibung: Gibt alle 14 Muster mit vollständigen Metadaten inkl. SVG-Pfad zurück
Response Felder
- id, name, direction, type, relevanz_score, svg
- was_ist_es, woran, warum, achten
Abnahmekriterien
- [ ] SVG für jedes definierte Muster vorhanden (14 SVGs gesamt)
- [ ] SVGs sind klar lesbar und didaktisch aufgebaut
- [ ] Erklärungstext ist in verständlicher Sprache ohne Fachjargon
- [ ] ℹ-Button öffnet/schließt Inline-Info-Panel (ersetzt aufklappbaren Detail-Text)
- [ ] Musterbibliothek ist immer sichtbar – auch wenn keine Muster erkannt wurden
- [ ] {'Bei Long-Setup': 'nur Long-Muster in der Bibliothek'}
- [ ] {'Bei Short-Setup': 'nur Short-Muster in der Bibliothek'}
- [ ] {'Bei Neutral': 'Long- und Short-Muster getrennt mit Überschriften'}
- [ ] SVGs werden einmalig beim Seitenaufruf geladen (nicht bei jedem Pair-Wechsel)
Changelog
Eintrag 1
Version: 1.0
Changes: Initiale Version
Eintrag 2
Version: 1.1
Changes
Aufklappbarer Detail-Text ersetzt durch ℹ-Button + Inline-Info-Panel; Musterbibliothek immer sichtbar (gefiltert nach Setup-Richtung); PatternCard und LibraryCard als separate UI-Komponenten; /library Endpoint