Our users collect a lot of data and analyse it in Tulip. When we built our Analytics product in 2016, we chose Plotly for our charting experience. Plotly however does not play well with our current React technology stack, so our team has been working hard to replace Ploty with Recharts. This blog post is the start to a series of posts on how we are using Recharts and extend it in our internal charting library.

Deriving actionable insight from data is a core component of our platform. With Tulip, you can create apps to collect data in your operations from both operators as well as machines. The use cases are vast, as is the structure and type of data we capture.

https://tulip.widen.net/content/t7cj2pnoot

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.

https://tulip.widen.net/content/qxge8y00oj

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:

  1. 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.
  2. 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.
  3. 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.

https://tulip.widen.net/content/dxpii4xonk

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.

https://tulip.widen.net/content/oguvpzwpzu

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.

https://tulip.widen.net/content/eupwujiaas

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 →.