Zum Abschnitt springen
Unsere Benutzer sammeln eine Menge Daten und analysieren sie in Tulip. Als wir 2016 unser Analytics-Produkt entwickelten, wählten wir Plotly für unsere Diagrammerfahrung. Plotly verträgt sich jedoch nicht gut mit unserem aktuellen React-Technologie-Stack, so dass unser Team hart daran gearbeitet hat, Ploty durch Recharts zu ersetzen. Dieser Blogbeitrag ist der Auftakt zu einer Reihe von Beiträgen darüber, wie wir Recharts verwenden und in unserer internen Charting-Bibliothek erweitern.
Die Gewinnung verwertbarer Erkenntnisse aus Daten ist eine Kernkomponente unserer Plattform. Mit Tulip können Sie Anwendungen erstellen, um Daten in Ihrem Betrieb zu sammeln, sowohl von Bedienern als auch von Maschinen. Die Anwendungsfälle sind vielfältig, ebenso wie die Struktur und Art der Daten, die wir erfassen.
Um unsere Kunden in die Lage zu versetzen, ihre Daten zu erforschen und die gewonnenen Erkenntnisse in ihre täglichen Prozesse zu integrieren, haben wir neue leistungsstarke Funktionen und Warnmeldungen entwickelt. Das Herzstück von Tulip Analytics ist es, unseren Kunden zu ermöglichen, Erkenntnisse aus Daten zu gewinnen.
Unsere bestehende Charting-Lösung behinderte die Entwicklung von Funktionen.
Als wir unser Produkt entwickelt haben, haben wir uns für Plotly entschieden. Seitdem hat sich viel geändert. Wir haben Plotly geforkt, da wir das Standardverhalten bei vielen Fehlern verbessert haben, haben es aber seitdem versäumt, unseren Fork zu aktualisieren. Wir haben nicht nur viele wichtige Updates verpasst, sondern auch die Datenverarbeitung mit der Visualisierung gekoppelt. Dies hat die Hinzufügung neuer Funktionen wie z.B. Forecasting behindert.
Um die Erstellung von Diagrammen über Tulip Analytics hinaus zu ermöglichen, möchten wir eine interne Bibliothek für Diagramme erstellen. Als wir uns an die Überarbeitung unseres Analyseprodukts machten, beschlossen wir, beim Kern anzufangen und die Diagramme in eine interne Charting-Bibliothek zu extrahieren, die in Zukunft im gesamten Produkt wiederverwendet werden kann, nicht nur in unserer Analyseplattform.
Durch die Entkopplung der Datenverarbeitung von der Visualisierung sind wir in der Lage, erweiterte Verarbeitungsfunktionen hinzuzufügen und die Diagramme unabhängig zu iterieren. Da die Diagramme im gesamten Produkt verwendet werden können, sind wir außerdem in der Lage, eine einheitliche Benutzererfahrung zu bieten.
Recharts ist erweiterbar und einfach zu benutzen.
Nach anfänglichen Recherchen haben wir die möglichen Kandidaten auf zwei Optionen eingegrenzt: Visx und Recharts:
Visx ist eine Sammlung von ausdrucksstarken Low-Level-Visualisierungsprimitiven für React und Open-Source und hat überzeugende Argumente:
Halten Sie die Größe der Pakete klein. visx ist in mehrere Pakete aufgeteilt. Fangen Sie klein an und verwenden Sie nur das, was Sie brauchen.
Absichtlich nicht rechthaberisch. Bringen Sie Ihre eigene Zustandsverwaltung, Animationsbibliothek oder CSS-in-JS-Lösung mit. Die Chancen stehen gut, dass Ihre React-Anwendung bereits eine Meinung darüber hat, wie Animation, Thematisierung oder Styling erfolgen soll. visx ist darauf bedacht, keine weitere hinzuzufügen und integriert sich mit allen von ihnen.
Keine Charting-Bibliothek. Wenn Sie anfangen, Visualisierungsprimitive zu verwenden, werden Sie am Ende Ihre eigene Charting-Bibliothek erstellen, die für Ihre Anwendungsfall optimiert ist. Sie haben die Kontrolle.
Während unserer Recherche waren wir davon überzeugt, dass Visx leistungsstark ist, aber wir mussten auch feststellen, dass es nicht ganz einfach zu bedienen ist. Das untenstehende Diagramm wurde erstmals in einem Blogbeitrag vorgestellt und erinnert uns daran, dass wir vorerst eine einfache Bibliothek wollen, die mit React vertraut ist. Dies würde die Entwicklung neuer Funktionen freigeben und wir wären immer noch in der Lage, einzelne React-Komponentendiagramme später mit Visx zu migrieren.
Wir haben festgestellt, dass Recharts einfach zu verwenden ist und sich gut in unsere React-Codebasis einfügt. Das Standardverhalten von Recharts ermöglicht einen schnellen Umstieg von Plotly und hindert uns nicht daran, erweiterte Visualisierungsfunktionen hinzuzufügen.
Die meisten Komponenten in Recharts ermöglichen die Übergabe einer React-Komponente, um das Standard-Rendering-Verhalten außer Kraft zu setzen, so dass wir unsere bestehende Komponentenbibliothek verwenden können:
Überschreiben der Legende
Überschreiben des Tooltip-Cursors
Unsere interne Charting-Bibliothek geht über die Funktionen von Recharts hinaus und erfordert eine Erweiterung
Anstatt Recharts direkt in unserem Produkt zu verwenden, kapseln wir die Abhängigkeit in einer Charting-Bibliothek, die eine einfache Schnittstelle für unsere Anwendungsfälle bereitstellt. In den folgenden Blogbeiträgen werden wir auf diese Anwendungsfälle eingehen und Ihnen mitteilen, wie wir sie implementiert haben.
Internationalisierung
Da unser Produkt über eine Spracheinstellung und Übersetzungen verfügt, ist die Übersetzung der Beschriftungen von Kategorien in Diagrammen eine Voraussetzung. Im Tooltip, in der Legende und auf den Achsenhäkchen müssen Übersetzungen und benutzerdefinierte Formatierungen beachtet werden.
Zeitreihen
Die standardmäßigen Recharts-Ticks für Zeitreihen genügen unseren Anforderungen nicht. Die Häkchen sind nicht schön verteilt und wir möchten ihre Formatierung weiter beeinflussen. Außerdem ist die Schnittstelle für die Auswahl der Ticks auf der Achse nicht einfach und einige Kombinationen von Eigenschaften führen zu einem fehlerhaften Verhalten. Stattdessen sollte unsere Charting-Bibliothek automatisch den richtigen Achsentyp erkennen und die Zecken entsprechend darstellen.
Tooltips
Die Standard-Tooltip-Funktion für Liniendiagramme kann nicht gut mit mehreren Zeitreihen umgehen. Stattdessen wächst die QuickInfo über das Diagramm hinaus und zeigt zu viele Datenpunkte auf einmal an. Wir möchten stattdessen nur den Datenpunkt anzeigen, der sich am nächsten zum Cursor befindet, und sicherstellen, dass die QuickInfo nicht über das Diagramm hinauswächst.
Erweiterte Diagramme
Recharts ist einfach, da es nur auf die Visualisierung abzielt. Wir möchten auch fortgeschrittene Diagramme anbieten, die Daten verarbeiten oder aggregieren, bevor sie geplottet werden, z.B. ein Histogramm, ein Pareto-Diagramm oder ein Kontrolldiagramm.
Wir tragen aktiv zum Recharts Repository bei.
Bei der weiteren Entwicklung einer Plattform für unsere Nutzer erkennen wir die Bedeutung der Gemeinschaft und der Open-Source-Entwicklung. Während wir an der Entwicklung unserer neuen Charting-Bibliothek arbeiten und fortschrittliche Funktionen für die Visualisierung und Datenverarbeitung auf Tulip bereitstellen, haben wir sichergestellt, dass wir der Recharts-Entwicklergemeinschaft etwas zurückgeben. Mitglieder unseres Teams tragen direkt zu Recharts bei, indem sie die Arbeit organisieren und die Richtung der Bibliothek mitgestalten.
Das neue Charting-Erlebnis steht allen Tulip Kunden zur Verfügung, zusammen mit weiteren spannenden Analytics- und machine learning Funktionen. Besuchen Sie unsere Blog-Ankündigung, um mehr zu erfahren →.