Olá Habr! Apresento a você a tradução do artigo
“Bibliotecas de visualização de dados para desenvolvedores de reagentes
em 2019” de Veronika Rovnik.
Por vários anos consecutivos, o React não perdeu terreno e está entre as três bibliotecas mais amadas de desenvolvedores profissionais do mundo, com todas as razões para estar.
Você já enfrentou a necessidade de melhorar seu aplicativo com funções analíticas e visuais e ter uma idéia dos dados?
Para não se perder na variedade de ferramentas, apresento uma visão geral das bibliotecas do React, que podem ser facilmente integradas ao seu site ou aplicativo.
Vitória
Victory é uma plataforma de gráficos reutilizáveis do React. Impressionante é o estilo, a interatividade e a animação suave.
Os componentes podem ser modificados, empacotados ou criados do zero. A experiência com a documentação parece conveniente e intuitiva, e os desenvolvedores que preferem personalizar tudo se apaixonarão por esta biblioteca.
É fácil iniciar um projeto de visualização - você precisa importar a biblioteca Victory para o seu projeto, adicionar dados e incorporar o componente em uma página da web e, além disso, possui uma versão adicional para o React Native.
Reagir vis
O Uber se destaca não apenas no campo do transporte de passageiros, mas também no desenvolvimento de sistemas de visualização.
O React-vis é uma biblioteca que oferece uma grande coleção de diagramas para aplicativos React. Seus componentes funcionam de maneira semelhante aos componentes usuais do React aos quais estamos acostumados. Para criar sua primeira visualização, instale a biblioteca usando o
npm , importe os estilos e componentes CSS necessários, visualize-os na página e pronto! Entre todos os diagramas, o forte lado gráfico é o que mais me impressionou.
As ferramentas de gráficos são boas para uso independente, mas ainda melhor se estiverem conectadas a dados agregados. A julgar pela minha experiência, gráficos e tabelas dinâmicas fornecem resultados interessantes se você os combinar na forma de uma barra de ferramentas.
Então, agora vamos às ferramentas que ajudam a criar relatórios diretamente no seu projeto React.
Tabela dinâmica WebDataRocks
WebDataRocks é um componente da tabela dinâmica JavaScript compatível com o React e outras estruturas. Ele suporta conexão com fontes de dados JSON e CSV remotas / locais. O que o torna especial é que é totalmente gratuito e personalizável. Com o WebDataRocks, você pode aproveitar os recursos clássicos de geração de relatórios: agregação, filtragem, classificação, fatia e divisão de dados. Para concluir o relatório, recomendo selecionar células usando formatação condicional para enfatizar os valores mais importantes.
Para iniciar o primeiro projeto de relatório, são necessárias várias etapas: adição de dependências ao projeto React, exibição do componente na página da web e preenchimento de dados. Tudo é simples.
Tabela dinâmica e gráficos de Flexmonster
O Flexmonster é um componente mais avançado da tabela dinâmica e uma versão aprimorada do WebDataRocks. Ele serve como um BI (Business intelligence) incorporado para startups e projetos de nível empresarial.
O que chama a atenção é a variedade de fontes de dados disponíveis: cubos CSV, JSON, OLAP, dados SQL / NoSQL e Elasticsearch. As funções de agregação, filtragem, classificação, detalhamento e agrupamento estão sempre disponíveis na barra de ferramentas. Durante o teste, fiquei agradavelmente surpreendido com o desempenho do componente - ele processou grandes quantidades de dados do banco de dados MongoDB e usou a renderização em grade. Do ponto de vista do desenvolvedor, o processo de integração com o projeto React é bastante tranquilo, assim como o processo de conexão com o banco de dados.
Espero sinceramente que este comentário tenha sido útil. Sinta-se livre para compartilhar suas sugestões nos comentários abaixo. Quais outras bibliotecas do React você usa para seu aplicativo?