Wie Tulip seine Analyseplattform mit Recharts Tulip

Unsere Nutzer sammeln große Datenmengen und analysieren diese in Tulip. Als wir 2016 unser Analytics-Produkt entwickelten, entschieden wir uns für Plotly als Diagrammlösung. Da Plotly jedoch nicht gut mit unserem aktuellen React-Technologie-Stack zusammenarbeitet, hat unser Team intensiv daran gearbeitet, Plotly durch Recharts zu ersetzen. Dieser Blogbeitrag ist der Auftakt zu einer Reihe von Beiträgen darüber, wie wir Recharts einsetzen und es in unserer internen Diagrammbibliothek erweitern.

Die Gewinnung umsetzbarer Erkenntnisse aus Daten ist ein zentraler Bestandteil unserer Plattform. Mit Tulip können Sie Apps erstellen, um in Ihrem Betrieb Daten sowohl von Bedienern als auch von Maschinen zu erfassen. Die Anwendungsfälle sind vielfältig, ebenso wie die Struktur und Art der von uns erfassten Daten.

Um unseren Kunden die Möglichkeit zu geben, ihre Daten zu analysieren und die daraus gewonnenen Erkenntnisse in ihre täglichen Arbeitsabläufe zu integrieren, haben wir neue leistungsstarke Analysefunktionen und Benachrichtigungen entwickelt. Die Ermöglichung der Gewinnung von Erkenntnissen aus Daten bildet den Kern von Tulip .

Als wir unser Produkt entwickelten, entschieden wir uns für Plotly. Seitdem hat sich viel verändert. Wir haben einen Fork von Plotly erstellt, um das Standardverhalten in Bezug auf zahlreiche Fehler zu verbessern, haben es aber versäumt, unseren Fork zu aktualisieren. Dadurch haben wir nicht nur viele wichtige Updates verpasst, sondern auch die Datenverarbeitung mit der Visualisierung verknüpft. Dies hat sich als Hindernis für die Einführung neuer Funktionen wie beispielsweise der Prognosefunktion erwiesen.

Um die Erstellung von Diagrammen über Tulip hinaus zu ermöglichen, möchten wir eine interne Diagrammbibliothek aufbauen. Als wir uns an die Überarbeitung unseres Analyseprodukts machten, beschlossen wir, am Kern anzusetzen und die Diagramme in eine interne Diagrammbibliothek auszulagern, die künftig produktübergreifend wiederverwendet werden kann – nicht nur in unserer Analyseplattform.

Durch die Entkopplung der Datenverarbeitung von der Visualisierung können wir erweiterte Verarbeitungsfunktionen hinzufügen und die Diagramme unabhängig voneinander weiterentwickeln. Da Diagramme zudem produktübergreifend zum Einsatz kommen können, sind wir in der Lage, eine einheitliche Benutzererfahrung zu bieten.

Nach ersten Recherchen haben wir die Auswahl auf zwei Optionen eingegrenzt: Visx und Recharts:

Visx ist eine Sammlung ausdrucksstarker, low-level Visualisierungsprimitive für React und Open Source und hat überzeugende Argumente:

1. Halten Sie die Paketgrößen gering. visx ist in mehrere Pakete aufgeteilt. Fangen Sie klein an und nutzen Sie nur das, was Sie brauchen.

2. Absichtlich neutral. Bringen Sie Ihre eigene Zustandsverwaltung, Animationsbibliothek oder CSS-in-JS-Lösung mit. Die Wahrscheinlichkeit ist groß, dass Ihre React-App bereits eine bestimmte Vorstellung davon hat, wie Animationen, Theming oder Styling umgesetzt werden. visx achtet darauf, keine weitere Vorgabe hinzuzufügen, und lässt sich in alle diese Lösungen integrieren.

3. Keine Diagrammbibliothek. Wenn Sie anfangen, Visualisierungsprimitive zu nutzen, werden Sie am Ende Ihre eigene Diagrammbibliothek erstellen, die für Ihren Anwendungsfall optimiert ist. Sie haben die Kontrolle.

Im Laufe unserer Recherchen haben wir uns davon überzeugt, dass Visx zwar leistungsstark ist, aber auch nicht ganz einfach zu bedienen ist. Die untenstehende Grafik, die ursprünglich in einem Blogbeitrag vorgestellt wurde, verdeutlicht, dass wir vorerst eine einfache Bibliothek suchen, die mit React vertraut ist. Dies würde die Entwicklung neuer Funktionen ermöglichen, und wir hätten später immer noch die Möglichkeit, einzelne React-Komponenten-Diagramme mit Visx zu migrieren.

Wir haben festgestellt, dass Recharts benutzerfreundlich ist und sich nahtlos in unsere React-Codebasis einfügt. Das Standardverhalten von Recharts ermöglicht eine schnelle Migration von Plotly und eröffnet uns damit die Möglichkeit, erweiterte Visualisierungsfunktionen zu integrieren.

Die meisten Komponenten in Recharts ermöglichen es, eine React-Komponente zu übergeben, um das standardmäßige Rendering-Verhalten zu überschreiben, was uns die Nutzung unserer bestehenden Komponentenbibliothek ermöglichen würde:

• Überschreiben der Legende

• Den Tooltip-Cursor überschreiben

Anstatt Recharts direkt in unserem Produkt zu verwenden, kapseln wir die Abhängigkeit in einer Diagrammbibliothek ein und stellen eine einfache Schnittstelle bereit, die auf unsere Anwendungsfälle zugeschnitten ist. In den folgenden Blogbeiträgen werden wir näher auf diese Anwendungsfälle eingehen und erläutern, wie wir sie umgesetzt haben.

Internationalisierung

Da unser Produkt über eine Spracheinstellung und Übersetzungen verfügt, ist die Übersetzung der Bezeichnungen der Kategorien in Diagrammen erforderlich. Im Tooltip, in der Legende und auf den Achsenmarkierungen müssen die Übersetzungen und benutzerdefinierten Formatierungen berücksichtigt werden.

Zeitreihen

Die standardmäßigen Recharts-Ticks für Zeitreihen entsprechen nicht unseren Anforderungen. Die Ticks sind ungleichmäßig verteilt, und wir möchten ihre Formatierung weiter anpassen. Zudem ist die Benutzeroberfläche zur Auswahl der Ticks auf der Achse nicht intuitiv, und bestimmte Kombinationen von Eigenschaften führen zu Fehlern. Stattdessen sollte unsere Diagrammbibliothek den richtigen Achstyp automatisch erkennen und die Ticks entsprechend darstellen.

Tooltips

Der Standard-Tooltip für Liniendiagramme ist für mehrere Zeitreihen nicht gut geeignet. Stattdessen ragt der Tooltip über das Diagramm hinaus und zeigt zu viele Datenpunkte auf einmal an. Wir möchten stattdessen nur den Datenpunkt anzeigen, der dem Cursor am nächsten liegt, um sicherzustellen, dass der Tooltip nicht über das Diagramm hinausragt.

Erweiterte Diagramme

Recharts ist einfach, da es sich ausschließlich auf die Visualisierung konzentriert. Wir möchten jedoch auch komplexere Diagramme anbieten, die Daten vor der Darstellung verarbeiten oder aggregieren, wie beispielsweise Histogramme, Pareto-Diagramme oder Regelkarten.

Während wir weiter an der Entwicklung einer Plattform für unsere Nutzer arbeiten, sind wir uns der Bedeutung der Community und der Open-Source-Entwicklung bewusst. Bei der Entwicklung unserer neuen Diagrammbibliothek und der kontinuierlichen Erweiterung von Tulip um fortschrittliche Funktionen für die Visualisierung und Datenverarbeitung haben wir darauf geachtet, der Recharts-Entwickler-Community etwas zurückzugeben. Mitglieder unseres Teams leisten direkte Beiträge zu Recharts, organisieren die Arbeit und gestalten die Ausrichtung der Bibliothek mit.

Das neue Diagramm-Erlebnis steht allen Tulip zur Verfügung, zusammen mit weiteren spannenden Analyse- und machine learning . Besuchen Sie unseren Blog-Beitrag, um mehr zu erfahren →