Nuestros usuarios recopilan muchos datos y los analizan en Tulip. Cuando construimos nuestro producto Analytics en 2016, elegimos Plotly para nuestra experiencia de creación de gráficos. Plotly sin embargo no juega bien con nuestra pila actual de tecnología React, por lo que nuestro equipo ha estado trabajando duro para reemplazar Ploty con Recharts. Esta entrada de blog es el comienzo de una serie de entradas sobre cómo estamos utilizando Recharts y ampliarlo en nuestra biblioteca de gráficos internos.
Obtener información procesable a partir de los datos es un componente esencial de nuestra plataforma. Con Tulip, puede crear aplicaciones para recopilar datos en sus operaciones, tanto de los operarios como de las máquinas. Los casos de uso son amplios, al igual que la estructura y el tipo de datos que capturamos.
Para que nuestros clientes puedan explorar sus datos e integrar las percepciones generadas en sus procesos diarios, hemos creado nuevas y potentes funciones de percepción y alertas. Permitir a nuestros clientes generar percepciones a partir de los datos es el núcleo de Tulip Analytics.
Nuestra solución de gráficos existente dificultaba el desarrollo de funciones.
Cuando creamos nuestro producto, optamos por utilizar Plotly. Desde entonces, han cambiado muchas cosas. Hicimos un fork de Plotly, ya que mejoramos el comportamiento por defecto en muchos errores, pero desde entonces no hemos actualizado nuestro fork. No sólo nos perdimos muchas actualizaciones críticas, sino que también hemos acoplado el procesamiento de datos a la visualización. Esto resultó obstaculizar la adición de nuevas características como la previsión.
Para permitir la creación de gráficos más allá de Tulip Analytics, queremos crear una biblioteca interna de gráficos. Al abordar la revisión de nuestro producto de análisis, decidimos empezar por el núcleo y extraer los gráficos en una biblioteca de gráficos interna que pueda reutilizarse en todo el producto en el futuro, no sólo en nuestra plataforma de análisis.
Al desvincular el procesamiento de datos de la visualización, podemos añadir capacidades avanzadas de procesamiento e iterar sobre los gráficos de forma independiente. Además, como los gráficos podrían utilizarse en todo el producto, podremos ofrecer una experiencia de usuario coherente.
Recharts es ampliable y fácil de usar.
Tras una investigación inicial redujimos los 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 con argumentos convincentes:
Reduzca el tamaño de los paquetes. visx está dividido en varios paquetes. Empiece con poco y utilice sólo lo que necesite.
Sin opiniones a propósito. Traiga su propia gestión de estados, biblioteca de animación o solución CSS-in-JS. Lo más probable es que su aplicación React ya tenga una opinión sobre cómo se realiza la animación, la tematización o la estilización. visx tiene cuidado de no añadir otra y se integra con todas ellas.
No es una biblioteca de gráficos. A medida que empiece a utilizar las primitivas de visualización, acabará construyendo su propia biblioteca de gráficos optimizada para su caso de uso. Usted tiene el control.
Durante nuestra investigación, nos convencimos de que Visx es potente, pero nos dimos cuenta de que tampoco es sencilla de utilizar. Presentado por primera vez en una entrada de blog, el gráfico de abajo es un recordatorio de que por ahora queremos una biblioteca fácil, que sea familiar a React. Esto desbloquearía el desarrollo de nuevas características y todavía seríamos capaces de migrar gráficos de un solo componente React con Visx más adelante.
Descubrimos que Recharts es fácil de usar y se adapta perfectamente a nuestra base de código React. El comportamiento predeterminado de Recharts permite una rápida migración desde Plotly, lo que nos libera de añadir funciones avanzadas de visualización.
La mayoría de los componentes en Recharts permiten pasar un componente React para anular el comportamiento de renderizado por defecto, lo que nos permitiría utilizar nuestra biblioteca de componentes existente:
Anulación de la leyenda
Sobreescribir el cursor Tooltip
Nuestra biblioteca interna de gráficos va más allá de las funciones de Recharts y requiere una ampliación
En lugar de utilizar Recharts directamente en nuestro producto, encapsulamos la dependencia en una biblioteca de gráficos, exponiendo una interfaz sencilla orientada a nuestros casos de uso. En las siguientes entradas del blog, nos sumergiremos en estos casos de uso y compartiremos cómo los implementamos.
Internacionalización
Dado que nuestro producto tiene un ajuste de idioma y traducciones, traducir las etiquetas de las categorías en los gráficos es un requisito. En la información sobre herramientas, en la leyenda y en los ticks de los ejes, es necesario respetar las traducciones y el formato personalizado.
Series temporales
Los ticks por defecto de Recharts para las series temporales no satisfacen nuestras necesidades. Los ticks no están bien distribuidos y queremos influir más en su formato. Además, la interfaz para seleccionar los ticks en el eje no es sencilla y algunas combinaciones de propiedades dan lugar a comportamientos erróneos. En su lugar, nuestra biblioteca de gráficos debería detectar automáticamente el tipo de eje correcto y trazar las garrapatas en consecuencia.
Información sobre herramientas
La información sobre herramientas predeterminada para los gráficos de líneas no maneja bien las series temporales múltiples. En su lugar, la información sobre herramientas crece más allá del gráfico, mostrando demasiados puntos de datos a la vez. En su lugar, queremos mostrar sólo el punto de datos más cercano al cursor, asegurándonos de que la información sobre herramientas no crezca más allá del gráfico.
Gráficos avanzados
Recharts es sencillo, ya que sólo se centra en la visualización. Queremos ofrecer también gráficos avanzados que procesen o agreguen datos antes de trazarlos, como un histograma, un diagrama de Pareto o un gráfico de control.
Contribuimos activamente al repositorio Recharts.
Mientras seguimos construyendo una plataforma para nuestros usuarios, reconocemos la importancia de la comunidad y del desarrollo de código abierto. Mientras trabajamos para crear nuestra nueva biblioteca de gráficos y seguimos aportando funciones avanzadas de visualización y procesamiento de datos a Tulip, nos hemos asegurado de retribuir a la comunidad de desarrolladores de Recharts. Los miembros de nuestro equipo contribuyen directamente a Recharts, organizando el trabajo y dando forma a la dirección de la biblioteca.
La nueva experiencia de gráficos está disponible para todos los clientes de Tulip junto con más funciones interesantes de análisis y aprendizaje automático. Visite el anuncio de nuestro blog para saber más →.