Maison / Technologie / Choix d'une bibliothèque de visualisation de données pour React

Choix d'une bibliothèque de visualisation de données pour React

Au début de ma carrière chez Apple, j'ai beaucoup appris sur la construction de produits. Je me suis familiarisé avec les processus de fabrication de classe mondiale qui ont permis à Apple de fournir ses produits matériels dans les délais et en qualité, et de se transformer par la suite en la société la plus précieuse au monde.

Mon expérience chez Apple m'a également appris comment les principes de l'optimisation de la fabrication pourraient être appliqués au génie logiciel et à la conception d'architecture.

Le développement de logiciels continue de tendre vers des composants réutilisables et interopérables plutôt que sur une ingénierie sur mesure pour tout. À l'instar de l'optimisation des processus de fabrication, choisir les bons frameworks et bibliothèques est la clé d'un développement rapide et efficace.

Si vous construisez une application avec des visualisations de données, vous devez d'abord choisir d'utiliser D3 ou une bibliothèque de diagrammes React.

Si vous n’êtes pas familier avec D3, c’est une bibliothèque Javascript qui fournit les éléments de base nécessaires à la création de visualisations de données en manipulant SVG et HTML. Il est devenu la colonne vertébrale des bibliothèques de visualisation de données réutilisables les plus populaires – telles que ChartJS, eCharts, C3, NVD3 et Plotly – qui facilitent la génération de graphiques D3 avec moins de code. La plupart de ces bibliothèques ont une bibliothèque wrapper à utiliser dans les frameworks populaires, tels que Ember, React, Vue ou Angular.

Si vous souhaitez minimiser l'écriture de code et d'heure personnalisés, je vous recommande d'utiliser une bibliothèque de graphiques React plutôt que de créer vos propres graphiques dans D3.

Mais une fois que vous avez décidé d'utiliser une bibliothèque existante, la décision d'investir du temps et de l'énergie dans une nouvelle bibliothèque de cartes peut être accablante. Par où commence tu

React est un écosystème relativement nouveau et il existe peut-être moins d'options de bibliothèque de cartes que pour Javascript, ce qui peut vous donner l'impression d'être un peu limité. Comme point de départ, je vous suggère de regarder ces bibliothèques spécifiques à React:

  • Recharts
  • La victoire
  • React-Vis
  • Nivo
  • VX

Il existe également d'excellents emballages, tels que réagir-chartjs-2 et Réagir aux Highcharts. Mais avant de peser le pour et le contre de chaque bibliothèque, je vais décrire ci-dessous les critères les plus importants pour votre décision.

Principaux critères pour choisir une bibliothèque

Votre première étape devrait être de définir clairement vos cas d'utilisation. Cela semble évident, mais savoir ce que vous recherchez est le critère le plus important dans votre décision.

Quels types de graphique votre application nécessite-t-elle? Selon le type d’application que vous créez, vous aurez peut-être besoin de graphiques simples et non complexes. Souvent, les courbes de lignes / surfaces, les barres groupées / empilées et les diagrammes à secteurs / en anneau suffisent pour la plupart des applications.

Quel type de personnalisation, de formatage et d'interactivité avez-vous besoin dans votre conception? Avez-vous besoin de pouvoir personnaliser les graduations? Qu'en est-il de montrer ou de cacher des grilles et des axes? Aurez-vous besoin d'info-bulles, de légendes et de marges personnalisées? Aurez-vous besoin de formater et de styler vos graphiques de manière significative? Ce sont toutes des questions importantes que vous devriez également poser.

Après avoir défini concrètement vos besoins, voici les quatre principales questions à prendre en compte:

  1. Est le projet bien documenté avec des exemples?
  2. Comment actif est le projet?
  3. Est le projet libre ou sous licence commerciale?
  4. Comment facilement personnalisable sont les composants de graphique, comme les info-bulles et les légendes?

Documentation et exemples

Une bonne bibliothèque de graphiques devrait avoir un site de documentation dédié, à la fois interactif et comprenant de nombreux exemples. Raphaël Benitte a réalisé un travail remarquable en construisant le site de documentation pour Nivo. Il vous permet de personnaliser les attributs et de visionner une simulation en direct de chaque graphique avec des données aléatoires directement dans l'interface utilisateur du site de documentation, ce qui accélère le prototypage et l'itération de la conception. Nivo et React-Vis utilisent tous deux Livre de contes pour les démonstrations d'interface utilisateur de leurs divers exemples, ce qui peut considérablement réduire le temps nécessaire à la création d'un graphique.

le Nivo Le site de documentation vous permet de personnaliser facilement les attributs à partir de l'interface utilisateur.

Activité de projet

Avant d’investir trop de temps, vous devez vous assurer que la bibliothèque est activement maintenue. La plupart des bibliothèques de graphiques ont 1 ou 2 responsables actifs. Vous devriez vérifier depuis combien de temps et à quelle fréquence le projet est mis à jour. La date du dernier commit dans GitHub peut être un bon indicateur. Les bibliothèques de diagrammes spécialement conçues pour React sont généralement mises à jour plus fréquemment que leurs homologues javascript.

Les bibliothèques de graphiques ont été classées en fonction du nombre de jours écoulés depuis leur dernier commit lors d’un instantané en janvier.

Gratuit vs commercial

Bien qu'il existe de nombreuses bonnes bibliothèques gratuites, certains diront qu'une licence payée pourrait valoir le temps que vous gagnez, en particulier si vous construisez un produit commercial. HighCharts sont trois bibliothèques de graphiques payantes populaires avec un wrapper React. ce est l'emballage officiel), ZingChart, et FusionCharts. Une licence pour Highcharts, connue pour son ampleur et sa flexibilité, commence à 1 510 USD pour un seul développeur pour la suite Highcharts.

Personnalisabilité

Il est important que vous passiez suffisamment de temps à rechercher toutes les capacités de la bibliothèque. En particulier, veillez à consulter la documentation pour les info-bulles, les légendes, les axes et les titres. La lisibilité de la base de code peut être importante ici si vous devez aller sur GitHub et trouver le code que vous essayez de personnaliser.

Comme je l'ai déjà mentionné, vous devez porter une attention particulière aux types de graphiques pris en charge, en particulier si vous devez aller au-delà des graphiques à courbes, à barres, à secteurs, à dispersion et autres. Besoin d'une ligne et d'un diagramme à barres ensemble? Recharts a un graphique linéaire et à barres. Besoin d'un graphique à barres groupées et empilées? Recharts a un diagramme à barres mixte ainsi que. Si vous souhaitez avoir une application cohérente visuellement et rendre votre code réutilisable, vous devrez choisir une bibliothèque de graphiques prenant en charge tous les types de graphiques dont vous avez besoin.

Recharts convient aux graphiques composés de plusieurs types de graphique.

Une contrainte que vous pourriez rencontrer est le nombre et la variété des graphiques. À mon avis, les accords, sankeys et autres tableaux complexes peuvent être source de confusion et ne sont généralement pas nécessaires pour la plupart des applications.

Si vous recherchez une bibliothèque plus proche du métal, je recommanderais VX. Les formes sont l’élément central de VX (le importation du paquet principal est @ vx / forme). Si vous observez les constructions du code dans le package, Harrison Hoff utilise également des composants de base D3 tels que xScale et yScale.

Autres critères à prendre en compte

Il existe un certain nombre d'autres critères importants à comparer lors du choix d'une bibliothèque. En termes de popularité, vous devriez également consulter les étoiles, les fourchettes et les contributeurs de chaque bibliothèque sur GitHub. Parmi les bibliothèques spécifiques à React, Recharts avait le plus grand nombre d’étoiles (10,7K) fin janvier, suivies de Victory (6,7K), VX (5,6K), React-Vis (4,9K) et Nivo (4,8K).

Les étoiles GitHub pour les bibliothèques de graphiques populaires

Un autre bon proxy pour la popularité est le téléchargement de paquets sur NPM.

Graphique généré en utilisant Graphiques NPM

J'aime aussi voir la rapidité avec laquelle les demandes d'extraction sont ouvertes et fusionnées, ce qui est un bon indicateur de la rapidité des nouvelles demandes de fonctionnalités. La fréquence de validation dans GitHub Insights est un bon indicateur d'activité, bien que vous puissiez trouver des responsables très utiles et réactifs avec des mises à jour moins fréquentes.

VX est un repo activement maintenu avec des commits hebdomadaires

L'un des avantages du choix d'un produit payant est que vous aurez accès à une assistance. Si vous choisissez une bibliothèque gratuite à code source ouvert, vous devrez vous fier à d’autres personnes prêtes à aider et à partager des exemples. Bien que vous trouviez généralement plus d'aide d'une communauté plus large sur Stack Overflow, je considère également si la bibliothèque a ou non un forum de communauté actif. Nivo, par exemple, a une communauté de discours active et Victory en a une sur Gitter.

Si vous travaillez dans React, le fait de pouvoir thématiser votre bibliothèque de diagrammes est une autre grande victoire. Alors que Chartist, par exemple, utilise un fichier Sass hautement personnalisable, Nivo vous permet de créer votre propre constante de thème dans l’ensemble de vos graphiques, comme dans cet exemple ci-dessous.

https://medium.com/media/06ac2a5abe5e810b1ee70fc7bcc42796/href

Vous devez également rechercher si votre bibliothèque prend en charge le rendu côté serveur. Certaines bibliothèques supposent que votre code ne sera exécuté que dans un environnement côté client. Si vous souhaitez produire des graphiques en dehors de l'interface utilisateur de votre application, par exemple dans un client de messagerie ou dans un blog intégré, vous devez être en mesure de restituer vos graphiques côté serveur. Certaines bibliothèques prennent en charge le rendu de vos graphiques en SVG, HTML et Canvas, ce qui peut vous donner davantage de flexibilité et de contrôle sur l'emplacement d'affichage de vos graphiques.

Ne pas oublier la compatibilité des navigateurs et des appareils. Si vous créez une application de bureau avec l’intention de créer une application mobile à l’aide de React Native, La victoire est la seule bibliothèque qui fabrique des composants pour React Native. En outre, si votre application est réactive, certaines bibliothèques de graphiques pourraient fonctionner mieux que d'autres. Nivo est livré avec des composants réactifs prêts à l'emploi, tandis que React-Vis, par exemple, peut nécessiter un wrapper personnalisé avec des points d'arrêt.

Un dernier critère que j'aime bien considérer est le fractionnement du code, ce qui rend vos importations plus faciles à gérer et à gérer. Certaines bibliothèques de diagrammes (telles que VX et Nivo) sont regroupées dans plusieurs packages plus petits qui vous permettent de charger des composants de diagramme individuels au lieu de la totalité de la bibliothèque, ce qui peut améliorer les performances. Si vous n'avez besoin que d'un graphique en courbes, il serait dommage d'importer une bibliothèque entière. Par exemple, Nivo vous permet d'utiliser import {ligne} depuis @ nivo / line au lieu d'importer l'intégralité du package.

Choisir Nivo

Dans le projet sur lequel je travaille (Code Time), nous avons commencé avec React-Chartist parce que la documentation était claire et simple. Cependant, nous avons finalement décidé de passer à Nivo, car il répondait à tous nos cas d'utilisation et disposait d'un site de documentation complet.

La partie la plus frustrante des expériences avec une nouvelle bibliothèque consiste à modifier un attribut et à ne pas savoir si le changement fonctionne ou non. Nivo vous permet de modifier les attributs dans l'interface utilisateur et de voir rapidement l'effet, ce qui accélère mon développement. Certaines choses pourraient encore être améliorées, comme pouvoir voir vos propres données dans l'interface utilisateur et créer des variables pour les formats, mais ce sont des détails mineurs que je suis impatient de voir améliorer à l'avenir, à mesure que la bibliothèque grandit.


Choix d'une bibliothèque de visualisation de données pour React a été publié à l'origine dans Hacker midi sur Medium, où les gens poursuivent la conversation en soulignant et en répondant à cette histoire.

Source

A propos lenewstrotteur

Découvrez également

xcloud-project-xbox.jpg

Project xCloud supportera les schémas de contrôle personnalisés et les modifications de polices AI

Après la présentation impressionnante par Stadia de Google, cette GDC, la propre révélation de Microsoft …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *