Mais performance na visualização de dados: nossa migração para gráficos em canvas

A visualização de dados é peça-chave do DoiT Console Analytics, e os gráficos são fundamentais para que nossos usuários consigam interpretar dados complexos. Conforme nossos clientes passaram a demandar conjuntos de dados cada vez maiores, nossa biblioteca de gráficos, o Highcharts, começou a dar sinais de fadiga, travando a UI e prejudicando a experiência do usuário.

Diante dessa demanda crescente, partimos em busca de uma biblioteca alternativa capaz de lidar com grandes volumes de dados de forma eficiente, sem abrir mão da performance e dos recursos que nossos usuários esperam.

Neste post, contamos como foi a transição de uma biblioteca baseada em SVG para uma baseada em canvas, com os desafios e benefícios de cada abordagem.

O Scalable Vector Graphics (SVG) sempre foi uma das opções mais populares para gráficos e visualização de dados. Mas, com grandes volumes de dados, bibliotecas baseadas em SVG podem virar um gargalo de performance — e o motivo está na forma como elas tratam os elementos do gráfico.

Como cada elemento vira um nó no DOM, quanto mais elementos no gráfico, maior fica a árvore do DOM. E percorrer árvores muito grandes em JavaScript fica lento, o que se traduz em travamentos na UI e outros problemas de experiência.

Um exemplo: um relatório simples como este gera mais de 10.000 nós no DOM.

Gráfico simples do Analytics

Ao inspecionar uma única barra do gráfico no navegador, dá para ver que cada uma é representada por uma tag SVG .

Estrutura do gráfico no DOM

Canvas é uma tecnologia web que disponibiliza uma área de desenho na página e permite criar e manipular objetos gráficos via JavaScript. Por ser uma tecnologia de desenho baseada em bitmap, ela renderiza o conteúdo diretamente no elemento canvas, resultando em um único nó no DOM.

Isso faz dele uma ótima escolha para gráficos dinâmicos, interativos e visualizações complexas. Além disso, por usar a GPU, o Canvas entrega gráficos mais fluidos e responsivos, com uma experiência mais envolvente para o usuário.

Comparação do tempo de renderização entre SVG e Canvas

Com tantas bibliotecas baseadas em canvas no mercado, escolher uma não é tarefa fácil. Para encarar esse desafio, testamos várias delas com grandes volumes de dados e avaliamos performance, recursos, documentação, popularidade e flexibilidade. Depois de uma análise detalhada, o Apache ECharts se mostrou a opção ideal para o nosso projeto, pela performance excepcional, pelas opções de customização e pelo forte suporte da comunidade.

Integramos o Apache ECharts em etapas, deixando os novos gráficos rodarem em paralelo com a biblioteca antiga para viabilizar uma migração gradual. Essa abordagem reduziu o risco de erros e garantiu que os novos gráficos atendessem aos nossos requisitos. Depois da implementação, comparamos a performance das duas bibliotecas usando dados reais de produção, o que nos permitiu mensurar com precisão os ganhos de performance e eficiência.

Exemplo: ganho de performance usando dados reais de produção para gerar um relatório bem extenso.

Experiência de gráficos: antes vs. depois

A transição de uma biblioteca baseada em SVG para uma baseada em canvas foi desafiadora, mas valeu cada esforço. Nossa biblioteca anterior não dava conta da demanda crescente dos clientes por conjuntos de dados maiores, o que comprometia a performance. Depois de muita pesquisa e testes, encontramos no Apache ECharts a melhor solução. A integração gradual permitiu uma transição tranquila e ganhos expressivos de performance. A nova biblioteca entrega uma experiência mais bonita e interativa, mesmo com grandes volumes de dados, atendendo e superando as expectativas dos nossos clientes.