Comment Tulip modernise sa plateforme d'analyse avec Recharts

Nos utilisateurs collectent de nombreuses données et les analysent sur Tulip. Lorsque nous avons construit notre produit d'analyse en 2016, nous avons choisi Plotly pour notre expérience graphique. Plotly ne joue cependant pas bien avec notre pile technologique React actuelle, et notre équipe a donc travaillé dur pour remplacer Ploty par Recharts. Ce billet de blog est le début d'une série de billets sur la façon dont nous utilisons Recharts et l'étendons dans notre bibliothèque graphique interne.

L'obtention d'informations exploitables à partir des données est un élément essentiel de notre plateforme. Avec Tulip, vous pouvez créer des applications pour collecter des données dans vos opérations, aussi bien auprès des opérateurs que des machines. Les cas d'utilisation sont vastes, tout comme la structure et le type de données que nous capturons.

Pour permettre à nos clients d'explorer leurs données et d'intégrer les informations générées dans leurs processus quotidiens, nous avons créé de nouvelles fonctionnalités et alertes puissantes. Permettre à nos clients de générer des informations à partir de données est le cœur de Tulip Analytics.

Lorsque nous avons créé notre produit, nous avons choisi d'utiliser Plotly. Depuis, beaucoup de choses ont changé. Nous avons forké Plotly, car nous avons amélioré le comportement par défaut sur de nombreux bugs, mais nous n'avons pas mis à jour notre fork depuis. Non seulement nous avons manqué de nombreuses mises à jour critiques, mais nous avons également couplé le traitement des données avec la visualisation. Cela s'est avéré être un obstacle à l'ajout de nouvelles fonctionnalités telles que Forecasting.

Pour permettre la création de graphiques au-delà de Tulip Analytics, nous voulons créer une bibliothèque interne de graphiques. Dans le cadre de la refonte de notre produit d'analyse, nous avons décidé de commencer par le cœur et d'extraire les graphiques dans une bibliothèque interne de graphiques qui pourra être réutilisée à l'avenir dans l'ensemble du produit, et pas seulement dans notre plateforme d'analyse.

En dissociant le traitement des données de la visualisation, nous sommes en mesure d'ajouter des capacités de traitement avancées et d'effectuer des itérations sur les graphiques de manière indépendante. De plus, comme les graphiques peuvent être utilisés dans l'ensemble du produit, nous serons en mesure de fournir une expérience utilisateur cohérente.

Après une première recherche, nous avons réduit le nombre de candidats potentiels à deux options, Visx et Recharts :

Visx est une collection de primitives de visualisation expressives et de bas niveau pour React et open-source et a des arguments convaincants :

1. Limitez la taille des paquets. visx est divisé en plusieurs paquets. Commencez petit et n'utilisez que ce dont vous avez besoin.

2. C'est à dessein qu'il n'y a pas d'opinion. Apportez votre propre gestion d'état, bibliothèque d'animation ou solution CSS-in-JS. Il y a de fortes chances que votre application React ait déjà une opinion sur la façon dont l'animation, la thématisation ou le stylisme sont réalisés. visx prend soin de ne pas en ajouter une autre et s'intègre à toutes ces solutions.

3. Il ne s'agit pas d'une bibliothèque graphique. Au fur et à mesure que vous utiliserez les primitives de visualisation, vous finirez par créer votre propre bibliothèque de graphiques, optimisée pour votre site cas d'utilisation. Vous avez le contrôle.

Au cours de nos recherches, nous avons été convaincus que Visx est puissante, mais nous avons réalisé qu'elle n'est pas simple à utiliser. Présenté pour la première fois dans un article de blog, le graphique ci-dessous nous rappelle que pour l'instant, nous voulons une bibliothèque simple, qui soit familière à React. Cela permettrait de débloquer le développement de nouvelles fonctionnalités et nous serions toujours en mesure de migrer des graphiques à composant React unique avec Visx dans le futur.

Nous avons découvert que Recharts est facile à utiliser et qu'il s'intègre parfaitement dans notre base de code React. Le comportement par défaut de Recharts permet une migration rapide depuis Plotly, ce qui nous évite d'ajouter des fonctionnalités de visualisation avancées.

La plupart des composants de Recharts permettent de passer un composant React pour remplacer le comportement de rendu par défaut, ce qui nous permettrait d'utiliser notre bibliothèque de composants existante :

• Remplacer la légende

• Surcharge du curseur de l'infobulle

Au lieu d'utiliser Recharts directement dans notre produit, nous encapsulons la dépendance dans une bibliothèque graphique, exposant une interface simple ciblant nos cas d'utilisation. Dans les prochains articles de blog, nous nous pencherons sur ces cas d'utilisation et partagerons la façon dont nous les avons mis en œuvre.

Internationalisation

Comme notre produit dispose d'un paramètre de langue et de traductions, il est nécessaire de traduire les étiquettes des catégories dans les graphiques. Dans l'infobulle, dans la légende et sur les coches de l'axe, les traductions et le formatage personnalisé doivent être respectés.

Séries chronologiques

Les ticks par défaut de Recharts pour les séries temporelles ne répondent pas à nos besoins. Les ticks ne sont pas bien répartis et nous souhaitons influencer davantage leur formatage. De plus, l'interface de sélection des ticks sur l'axe n'est pas simple et certaines combinaisons de propriétés conduisent à un comportement bogué. Notre bibliothèque graphique devrait plutôt détecter automatiquement le bon type d'axe et tracer les ticks en conséquence.

Info-bulles

La bulle d'aide par défaut des graphiques linéaires ne gère pas bien les séries temporelles multiples. En effet, l'infobulle dépasse du graphique et affiche trop de points de données à la fois. Nous voulons au contraire n'afficher que le point de données le plus proche du curseur, en veillant à ce que l'infobulle ne dépasse pas le graphique.

Graphiques avancés

Recharts est simple car il ne vise que la visualisation. Nous souhaitons également proposer des graphiques avancés qui traitent ou agrègent les données avant de les représenter, tels qu'un histogramme, un diagramme de Pareto ou une carte de contrôle.

Alors que nous continuons à construire une plateforme pour nos utilisateurs, nous reconnaissons l'importance de la communauté et du développement open-source. Tout en travaillant à la création de notre nouvelle bibliothèque graphique et en continuant à apporter des fonctionnalités avancées de visualisation et de traitement des données à Tulip, nous avons veillé à rendre service à la communauté des développeurs de Recharts. Les membres de notre équipe contribuent directement à Recharts, en organisant le travail et en définissant l'orientation de la bibliothèque.

La nouvelle expérience graphique est disponible pour tous les clients de Tulip , ainsi que d'autres fonctionnalités analytiques et Apprentissage machine . Visitez notre blog pour en savoir plus →