Zum Hauptinhalt springen

Preisdiagramme

Interaktive 30-Tage-Preisentwicklungsdiagramme für Krypto-Projekte.

Übersicht​

Die Preisdiagramm-Komponente zeigt historische Preisdaten für jedes Krypto-Projekt auf dem Dashboard an. Sie verwendet Daten aus der Marktchart-API von CoinGecko, die für optimale Leistung zwischengespeichert werden.

Funktionen​

  • 30-Tage-Verlauf: Tägliche Preisdaten für den letzten Monat
  • Preisänderungs-Badge: Zeigt prozentuale Änderung an (grün/rot farbcodiert)
  • Hover-Tooltips: Genaue Preisangabe an jedem Datum
  • Responsives Design: Passt sich jeder Bildschirmgröße an

API-Endpunkt​

GET /api/crypto/chart/{slug}?days=30

Parameter:

  • slug: CoinGecko Projekt-Slug (z.B. bitcoin, ethereum)
  • days: Länge des Verlaufs (1-365, Standard: 30)

Antwort:

{
  "slug": "bitcoin",
  "days": 30,
  "prices": [
    [1705536000000, 43250.50],
    [1705622400000, 43180.25],
    ...
  ],
  "market_caps": [...],
  "total_volumes": [...]
}

Cache-Strategie​

DatentypCache-Dauer
Diagrammdaten (≤7 Tage)1 Stunde
Diagrammdaten (>7 Tage)1 Stunde
Projektdaten24 Stunden

Zeitbereiche​

Derzeit unterstützt:

  • 7T: Wöchentlicher Trend
  • 30T: Monatlicher Trend (Standard)
  • 90T: Vierteljährlicher Trend
  • 1J: Jährlicher Trend

Visuelles Design​

Das Diagramm verwendet ein sauberes, minimalistisches Design:

  • Flächenfüllung: Dezenter Farbverlauf, der die Preisbewegung anzeigt
  • Gitternetzlinien: Gestrichelte horizontale Linien als Referenz
  • Farbschema:
    • Grün (#22c55e) für positive Änderung
    • Rot (#ef4444) für negative Änderung

Technischer Stack​

  • Bibliothek: Nivo ResponsiveLine
  • Datenquelle: CoinGecko API
  • Caching: Redis (1 Stunde TTL)