스크립트
00:00:00TanStack lo ha vuelto a hacer, esta vez resolviendo los gráficos en JavaScript con TanStack Charts.
00:00:04Promete un tamaño de paquete menor que el de bibliotecas como ReCharts, tiene salidas de SVG y
00:00:08canvas, animaciones, tooltips, interacciones y, como la mayoría de las bibliotecas de TanStack, cuenta con un
00:00:13núcleo independiente del framework, seguridad de tipos y una gran experiencia de desarrollo. Y a pesar de ser tan nueva,
00:00:18ya puedes construir muchísimos tipos de gráficos con ella, desde un gráfico de líneas básico
00:00:22o de barras, hasta otros más complejos como un diagrama de Sankey, un mapa de árbol, mapas de calor, gráficos de radar,
00:00:27gráficos de dona, medidores e incluso mapas mundiales muy geniales. Probablemente ya pueda hacer lo que necesites
00:00:32ahora mismo. Lo primero que quiero revisar es cómo TanStack Charts aborda realmente los gráficos,
00:00:41porque lo hace de forma similar a una biblioteca como ggplot2 en R, utilizando una gramática de gráficos. Este
00:00:47enfoque no trata un gráfico como un tipo fijo, sino que en realidad son una composición de marcas,
00:00:51escalas y asignaciones; así que en lugar de pedir un gráfico de barras, especificas algo como pon unas barras
00:00:56aquí, mapea esta variable a x, esa variable a y, y aplica estas escalas, y a partir de esa descripción,
00:01:01surge un gráfico. Es una diferencia muy sutil, pero es parte de lo que hace que esta biblioteca sea sumamente
00:01:05flexible. Digo, alguien tuiteó preguntando si podía hacer un gráfico como este, y la respuesta fue que sí.
00:01:11Este no es un tipo de gráfico integrado, la biblioteca es simplemente lo suficientemente flexible para crearlo.
00:01:14En cuanto a cómo funciona esto, si echamos un vistazo a esta demostración de gráfico de barras que mapea la frecuencia de
00:01:18las letras en inglés, el código más importante para esto es de solo 20 líneas. Comienza con una definición
00:01:23de gráfico usando la función define chart, y dentro de aquí empezamos con las marcas. Puedes pensar
00:01:28en las marcas como las cosas que realmente se dibujan, como tus líneas, puntos o barras. De hecho, construí un sitio de demostración
00:01:32intentando usar todas las marcas disponibles en TanStack Charts, y creo que hay alrededor de 55,
00:01:37así que este debería ser un ejemplo bastante bueno de los gráficos que puedes construir en TanStack Charts,
00:01:40y hay simplemente muchos de ellos. Van a tener que tenerme paciencia aquí,
00:01:43pero pueden ver que tenemos nuestros gráficos de barras normales, ya sea que los quieran horizontales o verticales,
00:01:47lo mismo con cosas como líneas y áreas. Luego también tenemos nuestros gráficos de puntos aquí,
00:01:51tenemos una regla que es la línea punteada que atraviesa el gráfico, donde puedes tenerla vertical,
00:01:54puedes crear un gráfico de marcas (tick chart), de nuevo en x o y, tienes un rectángulo, una celda, bandas,
00:01:59flechas, vectores para crear un campo de viento, enlaces, hexágonos,
00:02:04texto, de modo que las marcas pueden ser texto para renderizarlas donde quieras dentro del gráfico. Tenemos marcos,
00:02:08líneas, diferencias, gráficos de regresión lineal, cajas, gráficos de violín
00:02:13y gráficos de waffle. Ya puedes hacer mapas de contorno con esto. Por cierto,
00:02:17esta biblioteca lleva una semana de haber salido, es una locura que tenga tantas características, y la lista continúa.
00:02:22Podemos crear este gráfico, sea lo que diablos sea eso, ni siquiera sé para qué sirve.
00:02:25Tenemos un mapa de árbol, un gráfico de sol, diagramas de Sankey, una guía de enfoque con retícula,
00:02:29nuestros gráficos radiales como los de pastel, donas o radares, y luego
00:02:33finalmente aquí abajo, también tenemos geoshape por si quieres gráficos de mapas mundiales. Como dije, hay muchísimos
00:02:38de ellos que puedes combinar para crear prácticamente cualquier gráfico que necesites. Volviendo a nuestra demostración de gráfico de barras
00:02:42sin embargo, la única marca que necesito es bar y, y dentro de esta, pasas tus datos,
00:02:47esta matriz de objetos. Luego de eso, defines cuál debe ser la clave x y cuál debe ser la clave y,
00:02:51y esto es genial porque significa que no tienes que adaptar tus datos a una estructura específica,
00:02:56sino que puedes simplemente definirla aquí. También tiene seguridad de tipos, lo que significa que si escribo mal una de estas claves,
00:03:00me lo avisaría de inmediato, y esa es la seguridad de tipos que nos encanta de TanStack.
00:03:04Después de definir las marcas que queremos, tenemos nuestros ejes x e y. Para el eje x,
00:03:08es superfácil. He dicho que quiero space band, que es para categorías, por lo que nuestras letras se espacian
00:03:12equitativamente, y también tengo algo de relleno entre ellas. Para nuestro eje y, uso scale
00:03:17linear, que es para números, y también tengo la propiedad nice configurada en true, lo que simplemente significa redondear
00:03:21el eje a un número sensato en lugar de detenerse en el valor más alto que tenemos. Si pongo esto en falso,
00:03:26puedes ver que la parte superior del eje aquí simplemente termina donde está la punta de la barra más alta. Aquí,
00:03:30también le he dado al eje una etiqueta y un formato, para poder formatear estos números como porcentajes
00:03:34en lugar de puntos decimales. Toda esa definición es la parte independiente del framework, pero para renderizar
00:03:39esto en React, todo lo que necesitamos hacer es importar el componente chart, pasarle nuestra definición,
00:03:43darle una altura y una etiqueta, y eso es todo lo que necesitamos para hacer nuestro gráfico. Pero lo que quiero
00:03:47dejar muy claro es que no hemos usado un gráfico de barras aquí. Hemos definido en nuestro código dónde queremos
00:03:51renderizar nuestras marcas, y da la casualidad de que nuestro resultado final es un gráfico de barras, pero es una distinción
00:03:55muy sutil, y ese es el uso de la gramática de gráficos. Como ejemplo de la flexibilidad de esto,
00:04:00digamos que quisiera una línea de promedio en mi gráfico de barras, todo lo que tengo que hacer es ir a la matriz de marcas y añadir una
00:04:04nueva marca, esta vez siendo rule Y. Como otro ejemplo rápido, digamos que quisiera un gráfico de líneas con puntos y un
00:04:09área debajo, bueno, puedo definir todos ellos como marcas, y miren eso, ahora tengo un gráfico de
00:04:14nuestro recuento de suscriptores, lo cual es el momento perfecto para decirles que se suscriban y se mantengan al día con noticias de IA y
00:04:18de desarrolladores como esta. Si quieren ver aún más ejemplos del uso de estas marcas para construir
00:04:22todos esos diversos gráficos que mostré antes, pueden revisar su documentación; tienen montones
00:04:26de ejemplos y es increíblemente detallada. De hecho, tomé algunos ejemplos más de su documentación
00:04:30aquí solo para mostrarles exactamente lo que TanStack Charts puede hacer, ya que no tengo tiempo para repasar todas las
00:04:34características a fondo, eso tomaría literalmente unas 20 horas, pero una de las más geniales es este gráfico de globo,
00:04:38simplemente me encanta, creo que es súper genial que puedas hacer esto en una biblioteca que tiene una semana de vida.
00:04:42Luego también tenemos interacciones, lo cual es súper genial; tenemos este pincel (brush) aquí, podemos arrastrarlo a través de
00:04:46nuestro gráfico y también cambiar su rango desde cada lado. Tenemos el zoom en nuestro gráfico, por lo que podemos acercarnos
00:04:51muy bien en este gráfico de líneas. Tenemos selección por tecla más selección por teclado, así que si paso el cursor sobre uno de
00:04:56estos y presiono espacio, todo funciona de maravilla, y pueden ver que lee el valor de lo que hemos seleccionado
00:05:00aquí abajo. Luego también tenemos una retícula (crosshair), para que a medida que avanzo, puedan ver que imprime cuál es la fecha
00:05:04real sobre la que estoy pasando el cursor en el eje de abajo. También tiene tooltips con un montón de configuración,
00:05:09por lo que pueden ver que en este momento está configurado en nearest X, por lo que solo cuenta la distancia horizontal para qué punto
00:05:14va a elegir. También podríamos elegir una estrategia como group X, por lo que me va a mostrar todos esos
00:05:18valores cuando pase el cursor sobre cualquier área aquí. También puedes hacer que un tooltip se fije (pin), así que si paso el cursor sobre
00:05:22estos gráficos de barras aquí, pueden ver que el tooltip está cambiando, pero si hago clic en uno, eso fija el
00:05:26tooltip y también muestra algunos detalles adicionales. Por aquí, también pueden ver que no tenemos un tooltip, pero
00:05:31está leyendo esos valores directamente abajo, por lo que pueden extraer esa información, y aquí estamos
00:05:35renderizando un tooltip personalizado, así que si hago clic para fijarlo, tenemos un botón de cierre personalizado, y todo esto es
00:05:39hecho en React. Esta biblioteca también te respalda si quieres hacer algunas animaciones, así que si cambio los
00:05:43valores de estas barras aquí, pueden ver que se anima muy bien entre esos valores modificados.
00:05:48También podemos hacer clic en reproducir (replay) aquí, y pueden ver que podemos tener una entrada escalonada de nuestros gráficos de barras,
00:05:51y si sigo adelante y elimino algunas de las barras de abajo, pueden ver que se anima maravillosamente entre
00:05:55añadir o quitar esas barras. Incluso podemos hacer una animación en tiempo real (streaming), por lo que a medida que entran nuevos datos,
00:06:00simplemente desplaza esa barra de líneas en lugar de redibujarla. Y justo antes de pasar a cómo
00:06:03se diseñan estos gráficos, la última característica que quería mostrar era la función de exportación. Pueden ver que tengo
00:06:07botones aquí para descargar como SVG y PNG, y si hago clic en ellos, este es el resultado final que obtengo
00:06:12de vuelta. Así que ahora hablemos de cómo aplicamos temas y estilos a estos gráficos, porque si elimino los estilos de
00:06:16este gráfico aquí, este es el aspecto base predeterminado, porque listo para usar no tiene estilos, simplemente
00:06:21usa el color actual (current color) para el primer plano, y el fondo es transparente. Hay tres niveles
00:06:25de estilo en TanStack Charts, y el primero son tus variables CSS. Estos son tus colores categóricos
00:06:30a partir de seis propiedades personalizadas, y puedes anularlas en cualquier contenedor que desees. Así que si cambio estos
00:06:35valores aquí, pueden ver cómo este gráfico actualiza todos sus colores. El segundo nivel está en el
00:06:39bloque de temas, que está en la definición real del gráfico. Esto está pensado para lo que se llama el mobiliario del gráfico
00:06:43(chart furniture) en lugar de los datos, por lo que son cosas como tu texto, tus líneas de cuadrícula, tu fondo,
00:06:47y así sucesivamente. Luego, el tercer nivel está en las marcas mismas, por lo que puedes configurar cosas como relleno,
00:06:51trazos, opacidad, remate de línea (line cap), guiones, radio de esquinas, fuentes y más. Estos también pueden ser valores fijos o
00:06:57impulsados por datos, por lo que podrías colorear una barra según si supera cierto objetivo. Incluso puedes construir
00:07:01degradados utilizando tus datos. Como dije, esta biblioteca es súper flexible. También es súper ligera.
00:07:06En ese conjunto completo de pruebas comparativas, incluye cosas como retículas, selección con pincel, zoom, selección,
00:07:10todo. El tamaño del paquete está entre 36 y 43 kilobytes. Si comparamos eso con Chart.js o
00:07:16Recharts, Chart.js pesa de 45 a 58 kilobytes, y Recharts de 153 a 168 kilobytes. Así que TanStack
00:07:24Charts es significativamente más pequeño. Otra parte increíble de esto es su filosofía. En realidad han
00:07:28construido esto para dos cosas. Primero, la gente debería obtener gráficos pulidos a partir de una declaración corta,
00:07:32y segundo, la IA debería poder componer, inspeccionar y modificar gráficos sin aprender un modelo de series específico de la aplicación.
00:07:38Así que han diseñado esta API para que un agente pueda escribir gráficos sin haber leído la
00:07:42documentación, y honestamente, usé Claude para configurar la mayoría de las demostraciones que hice antes, y aunque lo verifiqué dos veces,
00:07:47lo cual es bastante raro hoy en día, se alineó casi por completo con todo lo que esperaba. Tuve que hacer muy
00:07:52pocos cambios, lo cual es bastante sorprendente para una biblioteca completamente nueva. Así que eso es TanStack Charts. Es mi
00:07:57nueva biblioteca de gráficos favorita, y está mejorando rápidamente. Déjenme saber qué piensan en los comentarios
00:08:01aquí abajo. Mientras estén ahí, suscríbanse. Como siempre, nos vemos en el próximo.