Comment Tulip sa plateforme d'analyse grâce à Recharts

Nos utilisateurs collectent de nombreuses données et les analysent dans Tulip. Lorsque nous avons développé notre produit Analytics en 2016, nous avons choisi Plotly pour la création de graphiques. Cependant, Plotly n'est pas compatible avec notre pile technologique React actuelle ; notre équipe a donc travaillé d'arrache-pied pour remplacer Plotly par Recharts. Cet article marque le début d'une série de publications consacrées à la manière dont nous utilisons Recharts et l'intégrons à notre bibliothèque interne de graphiques.

L'extraction d'informations exploitables à partir des données est au cœur de notre plateforme. Avec Tulip, vous pouvez créer des applications permettant de collecter des données au sein de vos opérations, tant auprès des opérateurs que des machines. Les cas d'utilisation sont nombreux, tout comme la structure et le type des données que nous capturons.

Afin de permettre à nos clients d'explorer leurs données et d'intégrer les informations qui en découlent dans leurs processus quotidiens, nous avons mis au point de nouvelles fonctionnalités d'analyse et d'alertes performantes ; permettre à nos clients de tirer des enseignements de leurs données est au cœur de Tulip .

Lorsque nous avons développé notre produit, nous avons choisi d'utiliser Plotly. Depuis, beaucoup de choses ont changé. Nous avons créé une branche dérivée de Plotly afin d'améliorer le comportement par défaut et de corriger de nombreux bugs, mais nous avons depuis négligé de mettre à jour notre branche. Non seulement nous avons manqué de nombreuses mises à jour essentielles, mais nous avons également couplé le traitement des données à la visualisation. Cela s'est avéré être un frein à l'ajout de nouvelles fonctionnalités telles que les prévisions.

Afin de permettre la création de graphiques au-delà de Tulip , nous souhaitons mettre en place une bibliothèque de graphiques interne. Alors que nous nous apprêtions à refondre notre produit d'analyse, nous avons décidé de commencer par le cœur du système et d'extraire les graphiques pour les regrouper dans une bibliothèque interne qui pourra être réutilisée à l'avenir dans l'ensemble du produit, et pas seulement au sein de notre plateforme d'analyse.

En dissociant le traitement des données de la visualisation, nous sommes en mesure d'ajouter des fonctionnalités de traitement avancées et d'apporter des modifications aux graphiques de manière indépendante. De plus, comme ces graphiques sont susceptibles d'être utilisés dans l'ensemble du produit, nous pourrons offrir une expérience utilisateur cohérente.

Après une première analyse, nous avons réduit la liste des candidats potentiels à deux options, Visx et Recharts :

Visx est une bibliothèque de primitives de visualisation expressives et de bas niveau pour React et l'open source, et présente des arguments convaincants :

1. Veillez à limiter la taille des paquets. visx est divisé en plusieurs paquets. Commencez par le minimum et n'utilisez que ce dont vous avez besoin.

2. Conçu pour rester neutre. Utilisez votre propre système de gestion d'état, votre bibliothèque d'animations ou votre solution CSS-in-JS. Il y a de fortes chances que votre application React ait déjà une approche bien définie en matière d'animations, de thèmes ou de mise en forme. visx veille à ne pas en imposer une autre et s'intègre à toutes ces solutions.

3. Ce n'est pas une bibliothèque de graphiques. À mesure que vous utiliserez les éléments de base de la visualisation, vous finirez par créer votre propre bibliothèque de graphiques, optimisée pour votre cas d'utilisation. C'est vous qui avez le contrôle.

Au cours de nos recherches, nous avons pu constater que Visx est un outil puissant, mais nous avons également réalisé qu’il n’est pas très intuitif à utiliser. Présenté pour la première fois dans un article de blog, le graphique ci-dessous nous rappelle que, pour l’instant, nous souhaitons une bibliothèque simple, qui s’intègre bien à React. Cela permettrait de débloquer le développement de nouvelles fonctionnalités, tout en nous laissant la possibilité de migrer ultérieurement des graphiques constitués de composants React individuels vers Visx.

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

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

• Remplacer la légende

• Remplacer le curseur de l'info-bulle

Au lieu d'utiliser Recharts directement dans notre produit, nous encapsulons cette dépendance dans une bibliothèque de graphiques, en proposant une interface simple adaptée à nos cas d'utilisation. Dans les prochains articles de blog, nous aborderons ces cas d'utilisation en détail et vous expliquerons comment nous les avons mis en œuvre.

Internationalisation

Notre produit disposant d'un paramètre de langue et de traductions, la traduction des libellés des catégories dans les graphiques est obligatoire. Dans l'info-bulle, dans la légende et sur les graduations des axes, les traductions et la mise en forme personnalisée doivent être respectées.

Séries chronologiques

Les graduations par défaut de Recharts pour les séries chronologiques ne répondent pas à nos besoins. Elles ne sont pas réparties de manière optimale, et nous souhaitons pouvoir personnaliser davantage leur mise en forme. De plus, l'interface permettant de sélectionner les graduations sur l'axe n'est pas intuitive, et certaines combinaisons de propriétés entraînent des dysfonctionnements. Notre bibliothèque de graphiques devrait plutôt détecter automatiquement le type d'axe approprié et tracer les graduations en conséquence.

Infobulles

L'info-bulle par défaut des graphiques linéaires ne gère pas correctement les séries chronologiques multiples. En effet, l'info-bulle s'étend au-delà du graphique, affichant ainsi trop de points de données à la fois. Nous souhaitons plutôt n'afficher que le point de données le plus proche du curseur, afin que l'info-bulle ne dépasse pas les limites du graphique.

Graphiques avancés

Recharts est simple, car il se concentre uniquement sur la visualisation. Nous souhaitons également proposer des graphiques avancés qui traitent ou agrègent les données avant de les représenter graphiquement, tels que des histogrammes, des diagrammes de Pareto ou des cartes de contrôle.

Alors que nous continuons à développer une plateforme pour nos utilisateurs, nous sommes conscients de l'importance de la communauté et du développement open source. Tout en travaillant à la création de notre nouvelle bibliothèque de graphiques et en continuant à intégrer des fonctionnalités avancées de visualisation et de traitement des données à Tulip, nous veillons à apporter notre contribution à 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 interface de création de graphiques est désormais accessible à tous Tulip , ainsi que d'autres Apprentissage machine passionnantes liées à l'analyse de données et à Apprentissage machine . Consultez l'annonce sur notre blog pour en savoir plus →