Ir a la sección
Nuestros usuarios recopilan una gran cantidad de datos y los analizan en Tulip. Cuando desarrollamos nuestro producto de análisis en 2016, elegimos Plotly para la visualización de gráficos. Sin embargo, Plotly no se integra bien con nuestra pila tecnológica actual basada en React, por lo que nuestro equipo ha estado trabajando intensamente para sustituir Plotly por Recharts. Esta entrada de blog es el inicio de una serie de publicaciones sobre cómo estamos utilizando Recharts y ampliando su funcionalidad en nuestra biblioteca interna de gráficos.
Obtener información útil a partir de los datos es un componente fundamental de nuestra plataforma. Con Tulip, puedes crear aplicaciones para recopilar datos de tus operaciones, tanto de los operarios como de las máquinas. Las posibilidades de aplicación son muy amplias, al igual que la estructura y el tipo de datos que recopilamos.
Para que nuestros clientes puedan analizar sus datos e integrar los conocimientos obtenidos en sus procesos diarios, hemos creado nuevas y potentes funciones de análisis y alertas; permitir a nuestros clientes extraer información útil de los datos es la esencia de Tulip .
Nuestra solución de gráficos actual obstaculizaba el desarrollo de nuevas funciones.
Cuando desarrollamos nuestro producto, decidimos utilizar Plotly. Desde entonces, han cambiado muchas cosas. Creamos una bifurcación de Plotly para corregir el comportamiento predeterminado y solucionar numerosos errores, pero desde entonces no hemos actualizado nuestra bifurcación. No solo nos hemos perdido muchas actualizaciones fundamentales, sino que además hemos vinculado el procesamiento de datos con la visualización. Esto ha acabado dificultando la incorporación de nuevas funciones, como la de previsión.
Para poder crear gráficos más allá de Tulip , queremos desarrollar una biblioteca interna de gráficos. Al plantearnos la renovación de nuestro producto de análisis, decidimos empezar por la base y extraer los gráficos a una biblioteca interna que pueda reutilizarse en todo el producto en el futuro, y no solo en nuestra plataforma de análisis.
Al separar el procesamiento de datos de la visualización, podemos añadir funciones de procesamiento avanzadas y realizar modificaciones en los gráficos de forma independiente. Además, dado que los gráficos pueden utilizarse en todo el producto, podremos ofrecer una experiencia de usuario coherente.
Recharts es ampliable y fácil de usar.
Tras una primera investigación, redujimos la lista de posibles candidatos a dos opciones: Visx y Recharts:
Visx es una colección de primitivas de visualización expresivas y de bajo nivel para React, de código abierto, y cuenta con argumentos convincentes:
Intenta que los paquetes sean lo más pequeños posible. visx se divide en varios paquetes. Empieza con lo básico y utiliza solo lo que necesites.
Sin preferencias predeterminadas a propósito. Trae tu propio sistema de gestión de estado, biblioteca de animaciones o solución CSS-in-JS. Es muy probable que tu aplicación React ya tenga una preferencia sobre cómo se gestionan las animaciones, los temas o el estilo. visx se cuida mucho de no añadir otra más y se integra con todas ellas.
No es una biblioteca de gráficos. A medida que empieces a utilizar primitivas de visualización, acabarás creando tu propia biblioteca de gráficos, optimizada para tu caso de uso. Tú tienes el control.
Durante nuestra investigación, nos convencimos de que Visx es una herramienta potente, pero nos dimos cuenta de que tampoco es fácil de usar. Tal y como ya se presentó en una entrada del blog, el gráfico que se muestra a continuación nos recuerda que, por ahora, queremos una biblioteca sencilla que resulte familiar para los usuarios de React. Esto facilitaría el desarrollo de nuevas funciones y nos permitiría migrar los gráficos de componentes individuales de React a Visx más adelante.
Recharts, tal y como lo hemos descubierto, es fácil de usar y se integra perfectamente en nuestro código React. El comportamiento predeterminado de Recharts permite una rápida migración desde Plotly, lo que nos permite añadir funciones de visualización avanzadas.
La mayoría de los componentes de Recharts permiten pasar un componente de React para anular el comportamiento de renderizado predeterminado, lo que nos permitiría utilizar nuestra biblioteca de componentes existente:
Anular la leyenda
Sobrescribir el cursor de la información sobre herramientas
Nuestra biblioteca interna de gráficos va más allá de las funciones de Recharts y requiere una extensión
En lugar de utilizar Recharts directamente en nuestro producto, encapsulamos esa dependencia en una biblioteca de gráficos, ofreciendo una interfaz sencilla adaptada a nuestros casos de uso. En las próximas entradas del blog, analizaremos estos casos de uso y explicaremos cómo los hemos implementado.
Internacionalización
Dado que nuestro producto cuenta con una configuración de idioma y traducciones, es imprescindible traducir las etiquetas de las categorías en los gráficos. En las descripciones emergentes, en la leyenda y en las marcas de los ejes, deben respetarse las traducciones y el formato personalizado.
Series temporales
Las marcas predeterminadas de Recharts para las series temporales no satisfacen nuestras necesidades. Las marcas no están bien distribuidas y queremos poder personalizar aún más su formato. Además, la interfaz para seleccionar las marcas en el eje no es intuitiva y algunas combinaciones de propiedades provocan errores. En su lugar, nuestra biblioteca de gráficos debería detectar automáticamente el tipo de eje adecuado y trazar las marcas en consecuencia.
Información sobre herramientas
La información sobre herramientas predeterminada de los gráficos de líneas no gestiona bien las series temporales múltiples. En lugar de eso, la información sobre herramientas se extiende más allá del gráfico, mostrando demasiados puntos de datos a la vez. Lo que queremos es mostrar únicamente el punto de datos más cercano al cursor, asegurándonos de que la información sobre herramientas no se extienda más allá del gráfico.
Gráficos avanzados
Recharts es sencillo, ya que se centra exclusivamente en la visualización. Queremos ofrecer también gráficos avanzados que procesen o agreguen los datos antes de representarlos, como histogramas, diagramas de Pareto o gráficos de control.
Estamos colaborando activamente en el repositorio de Recharts.
A medida que seguimos desarrollando una plataforma para nuestros usuarios, somos conscientes de la importancia de la comunidad y del desarrollo de código abierto. Mientras trabajamos en la creación de nuestra nueva biblioteca de gráficos y seguimos incorporando funciones avanzadas de visualización y procesamiento de datos a Tulip, nos hemos asegurado de contribuir a la comunidad de desarrolladores de Recharts. Los miembros de nuestro equipo colaboran directamente con Recharts, organizando el trabajo y marcando el rumbo de la biblioteca.
La nueva experiencia de creación de gráficos está disponible para todos Tulip , junto con otras interesantes funciones de análisis y aprendizaje automático. Visita el anuncio en nuestro blog para obtener más información →