Introduzione
La data visualization è un elemento centrale di DoiT Console Analytics: i grafici sono lo strumento principale con cui aiutiamo i nostri utenti a leggere dati complessi. Man mano che i clienti hanno iniziato a chiedere set di dati sempre più ampi all'interno dei grafici, la libreria che utilizzavamo, Highcharts, ha cominciato a mostrare i propri limiti, con blocchi della UI e un evidente impatto sull'esperienza utente.
Per rispondere a queste esigenze in costante crescita, abbiamo avviato la ricerca di una libreria alternativa, capace di gestire grandi set di dati in modo efficiente senza rinunciare alle prestazioni e alle funzionalità che i nostri utenti si aspettano.
In questo articolo raccontiamo il percorso che ci ha portati dal passaggio da una libreria di grafici basata su SVG a una basata su canvas, con sfide e vantaggi di entrambi gli approcci.
I limiti dei grafici SVG con grandi set di dati
Scalable Vector Graphics (SVG) è da tempo una delle scelte più diffuse per grafici e data visualization. Quando però si lavora con set di dati di grandi dimensioni, le librerie basate su SVG possono diventare un serio collo di bottiglia in termini di prestazioni. Il motivo è legato al modo stesso in cui queste librerie gestiscono gli elementi del grafico.
Poiché ogni elemento corrisponde a un nodo del DOM, più elementi contiene un grafico, più il DOM si appesantisce. Di conseguenza, JavaScript fatica a muoversi in modo efficiente all'interno di alberi DOM molto estesi, e il risultato sono blocchi della UI e altri problemi di esperienza utente.
Un esempio: un report semplice come questo genera oltre 10.000 nodi DOM.
Un semplice grafico di Analytics
Ispezionando una singola barra del grafico nel browser, si nota che ogni barra corrisponde a un singolo tag SVG
Struttura del grafico nel DOM
I vantaggi di un approccio Canvas per grafici con grandi set di dati
Canvas è una tecnologia web che offre un'area di disegno all'interno della pagina e consente di creare e manipolare oggetti grafici tramite JavaScript. Trattandosi di una tecnologia bitmap, il rendering dei contenuti avviene direttamente sull'elemento canvas, che resta un unico nodo del DOM.
È quindi una scelta ideale per grafica dinamica e interattiva e per visualizzazioni complesse. Inoltre, sfruttando la GPU, Canvas restituisce grafici più fluidi e reattivi, per un'esperienza più coinvolgente e user-friendly.
Confronto dei tempi di rendering tra SVG e Canvas
Confronto tra librerie e scelta della soluzione migliore
Con l'ampio numero di librerie basate su canvas oggi disponibili, individuare la migliore non è affatto banale. Abbiamo affrontato la sfida mettendo alla prova diverse librerie con grandi set di dati e valutandone prestazioni, funzionalità, documentazione, diffusione e flessibilità. Al termine di un'analisi approfondita, la scelta è ricaduta su Apache ECharts: la libreria ideale per il nostro progetto, grazie a prestazioni eccezionali, ampie possibilità di personalizzazione e una community solida alle spalle.
Integrazione della nuova libreria e analisi dei risultati
Abbiamo integrato Apache ECharts in modo incrementale, partendo dalla coesistenza dei nuovi grafici con la libreria precedente, per consentire una migrazione graduale. Questo approccio ha ridotto al minimo il rischio di errori e ci ha permesso di verificare che i nuovi grafici soddisfacessero i nostri requisiti. A integrazione completata, abbiamo confrontato le prestazioni della nuova libreria con quelle della precedente utilizzando dati reali di produzione, misurando così i miglioramenti in termini di prestazioni ed efficienza.
Esempio: miglioramento delle prestazioni utilizzando dati reali di produzione per generare un report di grandi dimensioni.
Vecchia vs. nuova esperienza di visualizzazione dei grafici
Sintesi e conclusioni
Il passaggio da una libreria di grafici basata su SVG a una basata su canvas è stato impegnativo, ma alla fine ha ripagato pienamente lo sforzo. La libreria precedente non riusciva più a stare al passo con la richiesta crescente di set di dati più ampi da parte dei nostri clienti, generando problemi di prestazioni. Dopo un lavoro accurato di ricerca e test, abbiamo individuato in Apache ECharts la soluzione migliore. L'integrazione graduale della nuova libreria ha garantito una transizione fluida e miglioramenti significativi sul fronte delle prestazioni. La nuova libreria offre un'esperienza utente più curata sul piano visivo e più interattiva, anche con grandi volumi di dati, andando incontro alle aspettative dei nostri clienti e superandole.