Hola Habr! Les presento la traducción del artículo
"Bibliotecas de visualización de datos para desarrolladores de React en 2019" de Veronika Rovnik.
Durante varios años consecutivos, React no ha perdido terreno y se encuentra entre las tres bibliotecas más queridas de desarrolladores profesionales de todo el mundo, con todas las razones para estarlo.
¿Alguna vez ha enfrentado la necesidad de mejorar su aplicación con funciones analíticas y visuales y tener una idea de los datos?
Para no perderse en la variedad de herramientas, le presento una descripción general de las bibliotecas para React, que puede integrarse fácilmente en su sitio web o aplicación.
Victoria
La victoria es una plataforma de gráficos reutilizables React. Inmediatamente llamativo es su estilo, interactividad y animación suave.
Los componentes se pueden modificar, empaquetar o crear desde cero. La experiencia con la documentación parece conveniente e intuitiva, y los desarrolladores que prefieren personalizar todo se enamorarán de esta biblioteca.
Iniciar un proyecto de visualización es fácil: debe importar la biblioteca Victory en su proyecto, agregar datos e incrustar el componente en una página web y, además, tiene una versión adicional para React Native.
Reaccionar vis
Uber sobresale no solo en el campo del transporte de pasajeros, sino también en el desarrollo de sistemas de visualización.
React-vis es una biblioteca que ofrece una gran colección de diagramas para aplicaciones React. Sus componentes funcionan de manera similar a los componentes habituales de React a los que estamos acostumbrados. Para crear su primera visualización, instale la biblioteca usando
npm , importe los estilos y componentes CSS necesarios, visualícelos en la página y ¡listo! Entre todos los diagramas, el lado gráfico fuerte es lo que más me impresionó.
Las herramientas de gráficos son buenas para uso independiente, pero aún mejores si están conectadas a datos agregados. A juzgar por mi experiencia, los gráficos y las tablas dinámicas dan excelentes resultados si los combina en forma de barra de herramientas.
Entonces, pasemos a las herramientas que lo ayudan a crear informes directamente en su proyecto React.
Tabla dinámica de WebDataRocks
WebDataRocks es un componente de tabla dinámica de JavaScript que es compatible con React y otros marcos. Admite la conexión a fuentes de datos JSON y CSV remotas / locales. Lo que lo hace especial es que es completamente gratuito y personalizable. Con WebDataRocks, puede aprovechar las características clásicas de informes: agregación, filtrado, clasificación, segmentación y división de datos. Para completar el informe, recomiendo seleccionar celdas con formato condicional para enfatizar los valores más importantes.
Para comenzar el primer proyecto de informes, se requieren varios pasos: agregar dependencias al proyecto React, mostrar el componente en la página web y llenarlo con datos. Todo es simple
Tabla y gráficos de pivote Flexmonster
Flexmonster es un componente de tabla dinámica más avanzado y una versión mejorada de WebDataRocks. Sirve como BI (Business Intelligence) integrado para startups y proyectos de nivel empresarial.
Lo que llama la atención es la variedad de fuentes de datos disponibles: CSV, JSON, cubos OLAP, datos SQL / NoSQL y Elasticsearch. Las funciones de agregación, filtrado, clasificación, detalle y agrupación siempre están disponibles en la barra de herramientas. Durante las pruebas, me sorprendió gratamente el rendimiento del componente: procesaba grandes cantidades de datos de la base de datos MongoDB y utilizaba la representación de cuadrícula. Desde el punto de vista del desarrollador, el proceso de integración con el proyecto React es bastante fluido, al igual que el proceso de conexión a la base de datos.
Espero sinceramente que esta crítica haya sido útil. Siéntase libre de compartir sus sugerencias en los comentarios a continuación. ¿Qué otras bibliotecas de React utilizas para tu aplicación?