Introduction
La visualisation de données est au cœur de DoiT Console Analytics : nous nous appuyons largement sur les graphiques pour aider nos utilisateurs à décrypter des données complexes. À mesure que nos clients réclamaient des jeux de données toujours plus volumineux, notre bibliothèque graphique d'alors, Highcharts, a montré ses limites, provoquant des blocages de l'interface et dégradant l'expérience utilisateur.
Face à cette demande croissante, nous nous sommes mis en quête d'une bibliothèque alternative, capable de gérer efficacement de grands volumes de données tout en offrant les performances et les fonctionnalités attendues par nos utilisateurs.
Dans cet article, nous revenons sur notre parcours et notre retour d'expérience lors du passage d'une bibliothèque graphique en SVG à une solution en canvas, en détaillant les défis et les avantages de chaque approche.
Les limites du rendu SVG face aux grands volumes de données
Le format Scalable Vector Graphics (SVG) a longtemps été un choix de prédilection pour les graphiques et la visualisation de données. Mais dès qu'il s'agit de jeux de données volumineux, les bibliothèques SVG révèlent d'importants goulots d'étranglement. La cause tient à la façon dont elles gèrent les éléments graphiques.
Chaque élément étant représenté par un nœud du DOM, plus le graphique en contient, plus l'arborescence DOM s'alourdit. JavaScript peine alors à parcourir efficacement ces structures volumineuses, ce qui se traduit par des blocages de l'interface et d'autres dégradations de l'expérience utilisateur.
Exemple : un rapport aussi simple que celui-ci génère plus de 10 000 nœuds DOM.
Graphique Analytics simple
En inspectant une seule barre du graphique dans le navigateur, on constate que chacune est représentée par une balise SVG
Structure du graphique dans le DOM
Les atouts d'une approche canvas pour les graphiques volumineux
Canvas est une technologie web qui fournit une zone de dessin dans une page et permet de créer et manipuler des objets graphiques en JavaScript. S'agissant d'une technologie de dessin bitmap, elle restitue le contenu directement sur l'élément canvas, ce qui se traduit par un seul nœud DOM.
C'est donc un excellent choix pour les graphiques dynamiques et interactifs, ainsi que pour les visualisations complexes. En tirant parti du GPU, Canvas produit en outre des graphiques plus fluides et réactifs, pour une expérience plus engageante et agréable.
Comparaison des temps de rendu : SVG et Canvas
Comparer les bibliothèques et choisir la plus adaptée
Vu la multitude de bibliothèques canvas disponibles, identifier la meilleure relève du casse-tête. Nous avons relevé le défi en testant plusieurs candidates sur de grands volumes de données et en évaluant leurs performances, leurs fonctionnalités, leur documentation, leur popularité et leur flexibilité. Au terme d'une analyse approfondie, Apache ECharts s'est imposée comme la bibliothèque idéale pour notre projet, grâce à ses performances exceptionnelles, ses options de personnalisation et le soutien solide de sa communauté.
Intégration de la nouvelle bibliothèque et analyse des résultats
Nous avons intégré Apache ECharts par étapes successives, en laissant d'abord les nouveaux graphiques cohabiter avec l'ancienne bibliothèque pour assurer une migration progressive. Cette approche a limité les risques d'erreur et garanti que les nouveaux graphiques répondaient à nos exigences. Une fois en place, nous avons comparé les performances des deux bibliothèques sur des données de production réelles, afin de mesurer les gains en performance et en efficacité.
Exemple : gain de performance observé lors de la génération d'un rapport très volumineux à partir de données de production réelles.
Ancienne et nouvelle expérience graphique
Synthèse et conclusion
Le passage d'une bibliothèque graphique en SVG à une solution en canvas s'est révélé exigeant, mais payant. Notre ancienne bibliothèque ne suivait plus la demande croissante de nos clients pour des jeux de données volumineux, ce qui entraînait des problèmes de performance. Après des recherches et des tests poussés, Apache ECharts s'est imposée comme la meilleure solution. Son intégration progressive a permis une transition en douceur et des gains de performance significatifs. La nouvelle bibliothèque offre une expérience utilisateur plus interactive et visuellement plus aboutie, même avec de grands volumes de données, et dépasse les attentes de nos clients.