스크립트
00:00:00TanStack hat es wieder getan und löst dieses Mal Diagramme in JavaScript mit TanStack Charts.
00:00:04Es verspricht eine geringere Bundle-Größe als Bibliotheken wie ReCharts, es bietet SVG- und
00:00:08Canvas-Ausgaben, Animationen, Tooltips, Interaktionen und hat, wie die meisten TanStack-Bibliotheken, einen
00:00:13Framework-unabhängigen Kern, Typsicherheit und eine großartige Entwicklererfahrung. Und obwohl es so neu ist,
00:00:18kann man damit bereits so viele Diagrammtypen erstellen, angefangen bei einem einfachen Liniendiagramm
00:00:22oder Balkendiagramm bis hin zu komplexeren wie Sankey-Diagrammen, Treemaps, Heatmaps, Radardiagrammen,
00:00:27Donut-Diagrammen, Tachos und sogar echten Weltkarten. Es kann wahrscheinlich bereits alles erstellen, was Sie brauchen.
00:00:32Als Erstes möchte ich darauf eingehen, wie TanStack Charts Diagramme tatsächlich angeht,
00:00:41denn ähnlich wie ggplot2 in R verwendet es eine Grammatik der Grafik. Dieser
00:00:47Ansatz behandelt ein Diagramm nicht als festen Typ, sondern sie sind eine Komposition aus Markierungen,
00:00:51Skalen und Zuordnungen. Anstatt also nach einem Balkendiagramm zu fragen, geben Sie an: Platziere einige Balken
00:00:56hier, ordne diese Variable x zu, jene Variable y und wende diese Skalen an, und aus dieser Beschreibung
00:01:01entsteht ein Diagramm. Es ist ein sehr feiner Unterschied, aber er trägt dazu bei, dass diese Bibliothek extrem
00:01:05flexibel ist. Jemand twitterte und fragte, ob damit ein Diagramm wie dieses möglich sei, und die Antwort war ja.
00:01:11Dies ist kein eingebauter Diagrammtyp, die Bibliothek ist einfach flexibel genug, um ihn zu erstellen.
00:01:14Um zu sehen, wie das funktioniert, betrachten wir diese Balkendiagramm-Demo hier, die die Häufigkeit von
00:01:18englischen Buchstaben abbildet. Der wichtigste Code dafür umfasst nur 20 Zeilen. Es beginnt mit einer Diagramm-
00:01:23definition über die Funktion define chart, und darin beginnen wir mit Markierungen. Sie können sich
00:01:28Markierungen als das vorstellen, was tatsächlich gezeichnet wird, also Ihre Linien, Punkte oder Balken. Ich habe eine Demo-
00:01:32Website erstellt, die versucht, alle in TanStack Charts verfügbaren Markierungen zu nutzen, und es gibt schätzungsweise 55 davon,
00:01:37sodass dies ein ziemlich gutes Beispiel für die Diagramme sein sollte, die Sie in TanStack Charts erstellen können,
00:01:40und es gibt einfach so viele davon. Sie müssen jetzt dranbleiben,
00:01:43aber wie Sie sehen, haben wir unsere normalen Balkendiagramme, egal ob horizontal oder vertikal,
00:01:47das Gleiche gilt für Linien und Flächen. Dann haben wir auch unsere Punktdiagramme,
00:01:51eine Regellinie, die quer durch das Diagramm verläuft und die Sie auch vertikal ausrichten können,
00:01:54Sie können ein Tick-Diagramm erstellen (wieder x oder y), Sie haben Rechtecke, Zellen, Bänder,
00:01:59Pfeile, Vektoren, sodass Sie ein Windfeld erstellen können, Verknüpfungen, Sechsecke,
00:02:04Text (Markierungen können also Text sein, um diesen an beliebiger Stelle im Diagramm darzustellen). Wir haben Rahmen,
00:02:08Linien, Differenzen, Diagramme für lineare Regression, Boxplots, Violin-
00:02:13diagramme und Waffeldiagramme. Sie können damit bereits Konturdiagramme erstellen. Übrigens,
00:02:17diese Bibliothek ist seit einer Woche auf dem Markt, es ist verrückt, sie hat so viele Funktionen, und die Liste geht weiter.
00:02:22Wir können dieses Diagramm erstellen, was zum Teufel das auch sein mag, ich weiß nicht einmal, wofür das gut ist.
00:02:25Wir haben ein Treemap-Diagramm, ein Sunburst-Diagramm, Sankey-Diagramme, einen Fadenkreuz-Fokus,
00:02:29radiale Diagramme wie Kreisdiagramme, Donuts oder Radars, und schließlich hier unten
00:02:33haben wir auch geoshape, falls Sie Weltkartendiagramme wünschen. Wie gesagt, es gibt so viele davon,
00:02:38die Sie kombinieren können, um so ziemlich jedes benötigte Diagramm zu erstellen. Zurück zu unserem Balkendiagramm-
00:02:42beispiel: Die einzige Markierung, die ich brauche, ist bar y, und darin übergeben Sie dann Ihre Daten,
00:02:47dieses Array von Objekten. Danach definieren Sie, welcher Schlüssel der x-Schlüssel und welcher der y-
00:02:51Schlüssel sein soll. Das ist großartig, da Sie Ihre Daten dadurch nicht an eine bestimmte Struktur anpassen müssen,
00:02:56sondern sie einfach hier definieren können. Es ist zudem typsicher, sodass ein Tippfehler in einem dieser Schlüssel
00:03:00mir sofort angezeigt wird – genau die Typsicherheit, die wir an TanStack schätzen gelernt haben.
00:03:04Nachdem wir die gewünschten Markierungen definiert haben, folgen unsere x- und y-Achse. Für die x-Achse
00:03:08ist das super einfach. Ich habe angegeben, dass ich space band möchte, was für Kategorien gedacht ist, sodass unsere Buchstaben
00:03:12gleichmäßig verteilt werden, und ich habe auch etwas Abstand zwischen ihnen. Für unsere y-Achse verwende ich scale
00:03:17linear, was für Zahlen gedacht ist, und ich habe auch nice auf true gesetzt, was einfach bedeutet,
00:03:21dass die Achse auf eine sinnvolle Zahl gerundet wird, anstatt beim höchsten vorhandenen Wert aufzuhören. Wenn ich dies auf false setze,
00:03:26sehen Sie, dass das obere Ende der Achse einfach dort endet, wo der oberste Balken endet. Hier
00:03:30habe ich der Achse außerdem eine Beschriftung sowie ein Format gegeben, damit diese Zahlen als Prozentsätze
00:03:34anstatt als Dezimalzahlen formatiert werden. All diese Definitionen bilden den Framework-unabhängigen Teil, aber um dies
00:03:39in React darzustellen, müssen wir lediglich die Chart-Komponente importieren, unsere Definition übergeben,
00:03:43eine Höhe und dann ein Label festlegen, und das ist alles, um unser Diagramm zu erstellen. Was ich jedoch
00:03:47ganz deutlich machen möchte: Wir haben hier kein Balkendiagramm verwendet. Wir haben in unserem Code definiert, wo wir
00:03:51unsere Markierungen rendern möchten, und es ergibt sich eben als Endergebnis ein Balkendiagramm. Das ist ein sehr feiner
00:03:55Unterschied, aber das ist die Anwendung der Grammatik der Grafik. Als Beispiel für diese Flexibilität:
00:04:00Angenommen, ich möchte eine Durchschnittslinie in meinem Balkendiagramm, muss ich lediglich in das Markierungs-Array gehen und eine
00:04:04neue Markierung hinzufügen, diesmal rule Y. Als weiteres schnelles Beispiel: Angenommen, ich möchte ein Liniendiagramm mit Punkten und einer
00:04:09Fläche darunter – nun, ich kann all das einfach als Markierungen definieren, und sehen Sie da, ich habe jetzt einen Graphen
00:04:14unserer Abonnentenzahl, was der perfekte Zeitpunkt ist, um Sie zu bitten zu abonnieren und bei KI- und
00:04:18Entwickler-News wie diesen auf dem Laufenden zu bleiben. Wenn Sie noch mehr Beispiele für die Verwendung dieser Markierungen sehen möchten,
00:04:22um all die verschiedenen Diagramme aufzubauen, die ich vorhin gezeigt habe, können Sie einen Blick in deren Dokumentation werfen; sie bietet Unmengen
00:04:26an Beispielen und ist unglaublich detailliert. Tatsächlich habe ich ein paar weitere Beispiele aus deren Dokumentation
00:04:30hier herausgegriffen, um Ihnen genau zu zeigen, wozu TanStack Charts fähig ist, da ich keine Zeit habe, alle
00:04:34Funktionen im Detail durchzugehen – das würde buchstäblich etwa 20 Stunden dauern. Eines der coolsten ist jedoch dieses Globus-
00:04:38diagramm; es gefällt mir einfach richtig gut, und ich finde es super cool, dass man das in einer erst eine Woche alten Bibliothek machen kann.
00:04:42Dann haben wir auch Interaktionen, was super cool ist. Wir haben diesen Pinsel hier, wir können diesen über
00:04:46unseren Plot ziehen und auch den Bereich von jeder Seite aus verändern. Wir haben das Heranzoomen an unser Diagramm, sodass wir
00:04:51nahe an dieses Liniendiagramm heranzoomen können. Wir haben eine tastengestützte Auswahl plus Tastaturauswahl: Wenn ich mit der Maus über eines
00:04:56davon fahre und die Leertaste drücke, funktioniert alles einwandfrei, und Sie sehen, dass der Wert dessen, was wir ausgewählt haben,
00:05:00hier unten ausgelesen wird. Dann haben wir auch ein Fadenkreuz, sodass beim Entlangfahren angezeigt wird, auf welches tatsächliche
00:05:04Datum auf der Achse unten mein Zeiger gerade gerichtet ist. Es gibt auch Tooltips mit unzähligen Konfigurationsmöglichkeiten,
00:05:09sodass Sie sehen, dass dies im Moment auf nearest X eingestellt ist, sodass nur der horizontale Abstand zählt, um zu bestimmen, welcher Punkt
00:05:14ausgewählt wird. Wir könnten auch eine Strategie wie group X wählen, sodass mir all diese
00:05:18Werte angezeigt werden, wenn ich mich über einen beliebigen Bereich hier bewege. Man kann es auch so einstellen, dass ein Tooltip angeheftet werden kann: Wenn ich
00:05:22über diese Balkendiagramme hier fahre, ändert sich der Tooltip, aber wenn ich auf einen klicke, wird der Tooltip
00:05:26angeheftet und zeigt zudem einige zusätzliche Details an. Hier drüben sehen Sie ebenfalls, dass wir zwar keinen Tooltip haben,
00:05:31aber die Werte direkt unten ausgelesen werden, sodass Sie diese Information abrufen können; hier
00:05:35rendern wir einen benutzerdefinierten Tooltip: Wenn ich zum Anheften klicke, erscheint ein eigener Schließen-Button, und all dies
00:05:39geschieht in React. Diese Bibliothek deckt auch Ihre Bedürfnisse ab, wenn Sie Animationen wünschen: Wenn ich also die
00:05:43Werte dieser Balken hier ändere, sehen Sie, wie fließend zwischen diesen veränderten Werten animiert wird.
00:05:48Wir können auch auf Replay klicken und sehen, dass unsere Balkendiagramme versetzt einblenden können,
00:05:51und wenn ich einige der Balken unten entferne, wird das Hinzufügen oder Entfernen dieser Balken
00:05:55wunderschön animiert. Wir können sogar eine Streaming-Animation durchführen, bei der neue Daten eintreffen
00:06:00und die Linie bzw. der Balken einfach verschoben wird, anstatt ihn neu zu zeichnen. Und kurz bevor ich zu dem Punkt komme,
00:06:03wie diese Diagramme gestaltet werden, war die letzte Funktion, die ich zeigen wollte, die Exportfunktion. Sie sehen, dass ich
00:06:07hier Buttons für den Download als SVG und PNG habe, und wenn ich darauf klicke, erhalte ich dieses Endergebnis.
00:06:12Kommen wir nun dazu, wie wir diese Diagramme mit Themes versehen und stylen, denn wenn ich die Stile aus
00:06:16diesem Diagramm entferne, ist dies das standardmäßige Basisdesign, da es von Haus aus keine Stile besitzt und einfach
00:06:21current color für den Vordergrund verwendet, während der Hintergrund transparent ist. Es gibt drei Ebenen
00:06:25des Stylings in TanStack Charts: Die erste sind Ihre CSS-Variablen. Dies sind Ihre kategorialen Farben
00:06:30aus sechs benutzerdefinierten Eigenschaften, und Sie können diese auf jedem beliebigen Container überschreiben. Wenn ich diese
00:06:35Werte hier ändere, sehen Sie, wie das Diagramm all seine Farben aktualisiert. Die zweite Ebene betrifft dann den
00:06:39Theme-Block, der sich in der eigentlichen Diagrammdefinition befindet. Dieser ist für das sogenannte Diagramm-
00:06:43mobiliar anstelle der Daten gedacht, also Dinge wie Ihren Text, Ihre Gitterlinien, den Hintergrund
00:06:47und so weiter. Die dritte Ebene befindet sich schließlich auf den Markierungen selbst, sodass Sie Eigenschaften wie Füllung,
00:06:51Kontur, Deckkraft, Linienenden, Striche, Eckenradius, Schriftarten und mehr festlegen können. Diese können auch feste Werte sein oder
00:06:57datengesteuert, sodass Sie einen Balken danach färben können, ob er über einem bestimmten Ziel liegt. Sie können sogar
00:07:01Verläufe mithilfe Ihrer Daten erstellen. Wie gesagt, diese Bibliothek ist super flexibel. Sie ist außerdem super leicht.
00:07:06In diesem Benchmark-Paket sind Dinge wie Fadenkreuze, Brushing, Zoomen und Auswahl enthalten,
00:07:10und zwar alles. Die Bundle-Größe liegt zwischen 36 und 43 Kilobyte. Vergleichen wir das mit Chart.js oder
00:07:16Recharts: Chart.js kommt auf 45 bis 58 Kilobyte und Recharts auf 153 bis 168 Kilobyte. TanStack
00:07:24Charts ist also deutlich kleiner. Ein weiterer großartiger Aspekt ist diese Philosophie. Sie haben dies tatsächlich
00:07:28für zwei Dinge entwickelt: Erstens sollen Anwender polierte Diagramme aus einer kurzen Deklaration erhalten,
00:07:32und zweitens soll KI in der Lage sein, Diagramme zu erstellen, zu untersuchen und zu modifizieren, ohne ein anwendungsspezifisches
00:07:38Serienmodell erlernen zu müssen. Sie haben diese API also so konzipiert, dass ein Agent Diagramme schreiben kann, ohne die
00:07:42Doku gelesen zu haben, und ehrlich gesagt habe ich Claude verwendet, um die meisten der vorhin gezeigten Demos zusammenzubauen, und obwohl ich das
00:07:47überprüft habe, was heutzutage ziemlich selten ist, stimmte es größtenteils mit allem überein, was ich erwartet hatte. Ich musste nur sehr
00:07:52wenige Änderungen vornehmen, was für eine brandneue Bibliothek ziemlich überraschend ist. Das ist also TanStack Charts. Es ist meine
00:07:57neue Lieblings-Diagrammbibliothek und sie verbessert sich rasant. Lassen Sie mich in den Kommentaren unten wissen,
00:08:01was Sie denken. Wenn Sie schon da sind, lassen Sie ein Abo da. Wie immer, bis zum nächsten Mal.