in Code

So habe ich Cryptosoft gebaut

Kümmert dich nicht um die Vorgeschichte? Hier ist eine Live-Demo des Bitcoin-Preisdiagramms, durch das ich gehen werde (Anmerkung: Es ist noch nicht mobil-freundlich – PR ist willkommen). Das GitHub-Repository mit dem gesamten Code ist am Ende des Artikels verlinkt.

Warum?
Letzte Woche habe ich ein Tutorial zu Cryptosoft Visualization with React JS veröffentlicht. Dieses Tutorial führte Sie durch den Aufbau eines einfachen Liniendiagramms:
Ja, okay, es ist langweilig. Aber der Sinn dieses Tutorials war nicht, etwas zu bauen, das den Verstand sprengt, sondern die Grundlagen von SVG in React zu lernen.

In den Kommentaren fragte Kris Morf, wie man eine Flächenfüllung zum Diagramm hinzufügt, und zeigte mir die Grafiken auf CoinBase als Beispiel. So sehen diese Karten aus:

Weiter mit Cryptosoft

Ja, das ist viel cooler als mein lahmes Liniendiagramm.
Nachdem ich Cryptosoft durchlaufen habe, wie man Fill zu einem Liniendiagramm hinzufügt, dachte ich, warum mache ich nicht einfach einen Klon daraus? Das habe ich also dieses Wochenende gemacht.

Hier ist, was ich gebaut habe und was ich Ihnen in diesem Artikel zeigen werde:
Eine Live-Demo ist hier verfügbar, wenn Sie damit spielen wollen. Hinweis: Es kann eine Sekunde dauern, bis es geladen ist, da es derzeit auf der freien Ebene unter now.sh installiert ist.

Nebenbei bemerkt: Wenn Tutorials wie diese dich interessieren und du lernen willst, wie man mit React mehr cooles Zeug baut, schau dir die 3 Best React JS Courses an.
Projektstruktur
So sieht meine Projektstruktur aus. Es gibt vier Reaktionskomponenten.

app.js – Übergeordnete Komponente.
InfoBox.js – Rendert unsere Echtzeit Bitcoin Preise und Änderungen seit letztem Monat.
ToolTip.js – Rendert den ToolTip, der das Datum und den Preis der verschobenen Position anzeigt.
LineChart.js – Zeigt das aktuelle Liniendiagramm an. Gibt ein einzelnes SVG-Element zurück.

Die API
Für dieses Projekt ist die beste API, die ich finden konnte, die CoinDesk API. Wenn Sie ein besseres bitcoin API haben, twittern Sie bitte an mir und lassen Sie es mich wissen!

Die CoinDesk API bietet sowohl Echtzeit- als auch historische Bitcoin-Preisdaten. Für dieses Projekt zeige ich in der linken oberen Ecke (InfoBox.js) den Bitcoin-Preis in Echtzeit an. Es wird alle 90 Sekunden aktualisiert.

Der historische Kurs ist das, was ich verwende, um Daten für das Diagramm zu liefern. Der Endpunkt der historischen Daten ist: https://api.coindesk.com/v1/bpi/historical/close.json

Die API gibt ein Objekt zurück, das so aussieht:

{
„bpi“: {
„“2017–06–24”: 2619.1188,
„”2017–06–25“: 2594.4538,
„”2017–06–26“: 2485.3588,
„”2017–06–27“: 2593.17,
„”2017–06–28“: 2584.5638,
// …
}
}
Sobald ich die Daten zurückbekomme, schleife ich sie durch und formatiere sie in ein Array von Objekten:

für (Datum in bitcoinData.bpi lassen){
sortiertDaten.push({
d: moment(datum).format(‚MMM DD‘),
p: bitcoinData.bpi[Datum].toLocaleString(),
x: Anzahl,
y: bitcoinData.bpi[datum]
});
}
d: Formatiertes Datum (z.B.: 31. Juli)
p: Formatierter Währungsstring (z.B. $2,000.46)
x: Anzahl (numerisch, beginnend mit 0)
y: Unformatierter Preis (2000.46738 – für Graphen verwendet)
Die Daten werden dann an eine untergeordnete Komponente gesendet, die das Diagramm aufbaut. Hier ist eine übergeordnete Übersicht über den Datenfluss.

Grunddatenfluss
Der Datenfluss des Projekts ist ziemlich einfach:

app.js holt historische Daten aus der CoinDesk API und formatiert sie in ein Array von Objekten.
Die Daten werden an die Komponente LineChart.js übergeben, die das Diagramm auf Basis der von app.js gelieferten Daten rendert.
Wenn die in LineChart.js gerenderte SVG-Komponente eingeschaltet ist, passieren 3 Dinge: LineChart.js zeichnet eine vertikale Linie auf die Cursorkoordinaten. Er bestimmt den nächstgelegenen Datenpunkt zum Cursor und zeichnet einen Kreis, um diesen Datenpunkt hervorzuheben. Schließlich werden die Daten an app.js zurückgegeben, die die Position des Hover und den nächstgelegenen Punkt angeben.
app.js sendet Daten an ToolTip.js, damit der Tooltip an der richtigen Stelle und mit den richtigen Daten rendern kann.
InfoBox.js läuft unabhängig von den anderen Komponenten und holt alle 90 Sekunden Echtzeitdaten aus der CoinDesk API. Die Daten werden aufbereitet und dem Benutzer angezeigt.
Den Graphen aufschlüsseln
Der Graph ist nicht nur eine Form, die auf den Bildschirm gezeichnet wird. Es ist eine Sammlung von Formen und Linien innerhalb eines einzigen SVG-Elements. Wenn Sie sich LineChart.js ansehen, werden Sie sehen, dass bis zu acht Funktionsaufrufe verwendet werden, um unseren Graphen zu erstellen:

this.makeAxis() Macht Graphenachse
this.makePath() Erstellt Graphenlinie
this.makeArea() Erstellt einen schattierten Grafikbereich (unter der Linie)
this.makeLabels() erstellt Graphenbeschriftungen
this.getCoords(e) Wenn Hovered Coords of Hover bekommt
this.createLine() Wenn Hovered Vertikale Linie macht
this.makeActivePoint() Wenn Hovered den nächstgelegenen Punkt findet
this.stopHover() Löscht Linie und Punkt, wenn Hover stoppt.
Schauen wir uns ein Beispiel an. Wenn wir alles entfernen und nur makePath() ausführen, bleibt uns nur eine SVG-Linie entlang unserer Datenpunkte. So sieht das aus: