Bonjour, Habr! Je vous présente la traduction de l'article
«Bibliothèques de visualisation de données pour les développeurs React en 2019» par Veronika Rovnik.
Pendant plusieurs années consécutives, React n'a pas perdu de terrain et figure parmi les trois bibliothèques de développeurs professionnels les plus appréciées à travers le monde, avec toutes les raisons de l'être.
Avez-vous déjà fait face à la nécessité d'améliorer votre application avec des fonctions analytiques et visuelles et d'avoir une idée des données?
Afin de ne pas vous perdre dans la variété des outils, je vous présente un aperçu des bibliothèques pour React, qui peuvent être facilement intégrées dans votre site ou application.
Victoire
Victory est une plateforme de cartographie réutilisable React. Leur style, leur interactivité et leur animation fluide sont immédiatement frappants.
Les composants peuvent être modifiés, emballés ou créés à partir de zéro. L'expérience de la documentation semble pratique et intuitive, et les développeurs qui préfèrent tout personnaliser tomberont amoureux de cette bibliothèque.
Le démarrage d'un projet de visualisation est facile - vous devez importer la bibliothèque Victory dans votre projet, ajouter des données et intégrer le composant dans une page Web, et en plus, il a une version supplémentaire pour React Native.
Réagissez vis
Uber excelle non seulement dans le domaine du transport de passagers, mais également dans le développement de systèmes de visualisation.
React-vis est une bibliothèque qui propose une large collection de diagrammes pour les applications React. Ses composants fonctionnent de manière similaire aux composants React habituels auxquels nous sommes habitués. Pour créer votre première visualisation, installez la bibliothèque à l'aide de
npm , importez les styles et composants CSS nécessaires, visualisez-les sur la page et le tour est joué! Parmi tous les diagrammes, le côté graphique fort est ce qui m'a le plus impressionné.
Les outils de cartographie sont bons pour une utilisation indépendante, mais encore mieux s'ils sont connectés à des données agrégées. À en juger par mon expérience, les graphiques et les tableaux croisés dynamiques donnent des résultats intéressants si vous les combinez sous la forme d'une barre d'outils.
Passons maintenant aux outils qui vous aident à créer des rapports directement dans votre projet React.
Tableau croisé dynamique WebDataRocks
WebDataRocks est un composant de tableau
croisé dynamique JavaScript compatible avec React et d'autres frameworks. Il prend en charge la connexion à des sources de données JSON et CSV distantes / locales. Ce qui le rend spécial, c'est qu'il est entièrement gratuit et personnalisable. Avec WebDataRocks, vous pouvez tirer parti des fonctionnalités de rapport classiques: agrégation, filtrage, tri, découpage et fractionnement des données. Pour terminer le rapport, je recommande de sélectionner des cellules en utilisant une mise en forme conditionnelle pour souligner les valeurs les plus importantes.
Pour démarrer le premier projet de rapport, plusieurs étapes sont nécessaires: ajouter des dépendances au projet React, afficher le composant sur la page Web et le remplir de données. Tout est simple.
Tableau et graphiques de pivot Flexmonster
Flexmonster est un composant de tableau
croisé dynamique plus avancé et une version améliorée de WebDataRocks. Il sert de BI (Business Intelligence) intégrée pour les startups et les projets au niveau de l'entreprise.
Ce qui attire l'attention, c'est la variété des sources de données disponibles: CSV, JSON, cubes OLAP, données SQL / NoSQL et Elasticsearch. Les fonctions d'agrégation, de filtrage, de tri, de détail et de regroupement sont toujours disponibles sur la barre d'outils. Pendant les tests, j'ai été agréablement surpris par les performances du composant - il a traité de grandes quantités de données de la base de données MongoDB et utilisé le rendu de la grille. Du point de vue du développeur, le processus d'intégration avec le projet React est assez fluide, tout comme le processus de connexion à la base de données.
J'espère sincèrement que cette critique a été utile. N'hésitez pas à partager vos suggestions dans les commentaires ci-dessous. Quelles autres bibliothèques React utilisez-vous pour votre application?