Visualización de Datos Poderosa con AG Grid & AG Charts

Bienvenidos de nuevo a todos los que se unen a nosotros. Bienvenidos a la Masterclass de Visualización de Datos Poderosa con aggrid y AgCharts en React Advanced. Esperaré un par de minutos más. Todavía hay gente entrando. Pero mientras tanto, si quieren, adelante y dejen en el chat de dónde son. Mi nombre es Brian, y estoy ubicado aquí en los Estados Unidos. Y estoy en la Costa Oeste en Oregón, en una ciudad llamada Bend. Realmente es un placer conocerlos a todos.

Bien, son las cinco pasadas, así que podríamos tener un par de personas más uniéndose a nosotros mientras comenzamos. Pero vamos a empezar. Sí, bienvenidos a React Advanced. Esta es la Visualización de Datos Poderosa con aggrid y agcharts. Esta va a ser una masterclass de tres horas. Estoy aquí en los EE.UU., y estoy en la hora de la Costa Oeste. Estoy en la zona horaria del Pacífico. Así que tengo de 0900 a 1200. Sé que va a ser diferente para ustedes, pero verán en mi reloj que son las 9:05 de la mañana. Así que usaremos eso como referencia a medida que avancemos a lo largo de la masterclass de hoy. Tenemos tres horas de contenido, y tenemos muchos ejercicios prácticos para que ustedes comiencen con aggrid y agcharts. Vamos a tomar dos descansos cortos a lo largo de la mañana o a lo largo de la noche para ustedes. Y así siéntanse libres de... Usaremos eso como un tiempo establecido para... Me alejaré y tomaré un descanso, solo para tomar un poco de agua y estirar las piernas. Pero siéntanse libres de tomar un descanso en cualquier momento que lo necesiten. También he dejado un par de enlaces en el chat, y los verán aquí arriba. Así que el primero es liveloveapp.com.courses. Y ahí es donde está todo el contenido del curso para hoy. Vamos a estar haciendo la masterclass de aggrid y agcharts. Los verán, y voy a estar guiándolos a través de eso. También dejé un par de enlaces de GitHub aquí también. Si quieren ir directamente al código y ver cómo están configuradas las cosas por completo con todo, pueden hacerlo. Pero no necesitan clonar el repositorio ni hacer nada con el repositorio. Eso es solo para su referencia y para mi referencia también, por si nos quedamos atascados en un ejercicio y necesito referirme a una solución. Y ustedes también pueden hacer lo mismo, y lo verán. Así que lo explicaré aquí en un segundo. La otra cosa que quiero hacer rápidamente es presentarme. Así que mi nombre es Brian Love. Vivo aquí en los Estados Unidos, y vivo en el estado de Oregón. Así que eso está en el noroeste del Pacífico. Así que está en la parte superior izquierda de los Estados Unidos. Y vivo en una ciudad llamada Bend. Bend es conocida por el esquí de aventura, el senderismo y el ciclismo de montaña, y ese tipo de cosas. He sido desarrollador full stack por un tiempo ahora, y estoy aprendiendo a ser piloto, lo cual es algo divertido de compartir. No sé si alguna vez me convertiré en piloto comercial, pero por si acaso los señores de la IA toman el control de la ingeniería de software y estoy desempleado en unos años, creo que podría no ser un mal plan de respaldo tener porque alguien todavía necesitará volar los aviones hasta que la IA pueda hacer eso también. Eso es todo solo por diversión. Sí, eso fue todo solo por diversión. Y también me encanta esquiar y estoy emocionado por nosotros aquí. La temporada de esquí comenzará en un par de semanas, así que estoy emocionado de hacer eso. Así que vamos a sumergirnos de lleno. Así que voy a cambiar a mi navegador y voy a ir al sitio web. Esto es liveloveapp.com slash courses. Déjenme dejar ese enlace por si se lo perdieron y se unieron a nosotros. Lo dejaré ahora mismo en el chat para ustedes. Una vez que lleguen allí, adelante y hagan clic en Ag grid con React aquí abajo a la izquierda. Y esto es lo que vamos a estar viendo hoy. Este es todo el contenido que tenemos. Y luego vamos a entrar en los Ag charts también. Vamos a saltarnos el estilo para tener tiempo para los Ag charts. Y creo que realmente lo apreciarán. El estilo, este contenido siempre está aquí para que lo usen y lo consulten. Así que si quieren volver y consultar algo del estilo, siéntanse libres de hacerlo. Vamos a sumergirnos de lleno. Así que si hacen clic en Comenzando con Ag Grid, verán que el contenido aparece. Y si quieren seguir, siéntanse libres de seguir en el sitio web del curso. También pueden presionar el punto o la tecla de punto en su teclado. Y eso convertirá el sitio web en una especie de modo de presentación. Y luego si presionan escape, eso los sacará de él. Así que es bastante fácil si quieren seguir con las diapositivas reales. Y luego voy a quitar esta ventana de chat de mi camino. Excelente. Bien. Así que hoy, vamos a aprender un poco sobre Ag Grid. Vamos a comenzar con la instalación de Ag Grid, definición de columnas. Vamos a ver la ordenación, el filtrado, el arrastre, la fijación y la extensión usando Ag Grid. Y luego vamos a entrar en otras cosas a lo largo de la mañana y a lo largo de la noche. Vamos a ver cosas como la definición de columna por defecto y algunas de las características más avanzadas de Ag Grid. Y luego vamos a profundizar un poco en AgCharts, que es el nuevo producto de gráficos de Ag Grid. Y eso cubrirá gráfico de líneas, gráfico de barras y gráfico de pastel cuando lleguemos a eso. Quiero dejarlo claro, por si tienen curiosidad. Así que soy consultor de software. Trabajo para Live.Luv app. No trabajo para Ag Grid. Así que lo que eso significa es que soy un desarrollador como ustedes. Uso Ag Grid. Muchos de los clientes con los que trabajo usan Ag Grid. Pero no me pagan si compran Ag Grid. Así que no estoy aquí para convencerlos. Y ni siquiera soy como un devrel, ¿verdad? No me pagan.

Y la esperanza es que después de la masterclass, si necesitas ayuda en tu trabajo y quieres que alguien se una a tu proyecto, es que tal vez pienses en nosotros y te pongas en contacto con nosotros y nos contrates para ayudarte con tu proyecto de Ag Grid. Así es como ganamos dinero en todo esto. Y Ag Grid es un gran producto. Lo respaldo, simplemente porque lo he usado como desarrollador durante muchos, muchos años. Pero no estoy aquí para convencerte de que compres nada. No conozco todos los entresijos de sus precios y cómo funciona todo eso. Sabes, estoy seguro de que si estás interesado en comprar Ag Grid, les encantaría tenerte en una llamada y hablar contigo al respecto, pero yo no soy la persona para hacer eso. Estoy aquí solo para contarte lo que sé sobre Ag Grid y cómo lo he usado con mucho éxito en proyectos de React durante muchos años. Y espero divertirme contigo.

Bien, entonces para comenzar con Ag Grid, lo primero que haces es instalarlo con npm, bastante obvio. Instalarás el módulo Ag Grid React. También está el módulo Ag Grid Community. Puede que necesites instalar eso también, porque eso viene con algunas de las interfaces adicionales y cosas así para TypeScript. Así que solo ten en cuenta eso si en algún momento estás trabajando con Ag Grid y estás como intentando importar este tipo o esta interfaz y no está funcionando, no puedo encontrarlo, puede que necesites instalar ag-grid-community también. Así que solo ten en cuenta eso.

Lo siguiente que necesitas hacer con Ag Grid es comenzar a estilizarlo. Y así importas la base necesaria en los archivos CSS del tema. Así que importas ese archivo CSS de Ag Grid así como un archivo de tema. Ag Grid viene con un montón de temas que tienen tanto modo claro como modo oscuro. Puedes verlos en su sitio web. Y también puedes personalizar todo este estilo. Así que cualquier aspecto y sensación que veas con Ag Grid, una de las cosas que es realmente genial es que puedes extenderlo y personalizarlo e incluso construir como un sistema de diseño alrededor de él.

Lo primero que necesitamos hacer con Ag Grid antes de comenzar, antes de que podamos mostrar cualquier dato en nuestra cuadrícula es que necesitamos definir una definición de columna. Y eso se llama la interfaz col-def. Y así cada columna se define por un objeto col-def. Y por defecto, las columnas se posicionan en el orden que coincide con la definición de columna especificada. Así que verás que crearemos un array de estos objetos col-def. Y vamos a vincular eso a la propiedad para el componente del elemento Ag Grid. Y eso le dice a Ag Grid, aquí están mis columnas. Y cualquiera que sea ese orden, por defecto, ese es el orden en que la cuadrícula las mostrará. Ahora, por supuesto, puedes cambiar el orden y los usuarios pueden mover las columnas. Y veremos eso.

Bien, aquí hay un ejemplo rápido. Así que aquí, tengo mi componente de cuadrícula. Nota que tengo que envolver mi cuadrícula en algún tipo de elemento. Y así Ag Grid React, el componente en sí, tomará la altura y el ancho y heredará la altura y el ancho del tamaño de ese elemento padre. Y luego también necesito especificar el tema. Así que aquí, tengo un elemento div con la clase AgThemeQuartzAutoDark.

Y eso le dice a Ag Grid que le da todo el estilo que necesita. Y luego tengo la propiedad de definiciones de columna. Y la tengo configurada en mi propiedad col-definitions que he definido en mi componente React. Así que esto es lo que va a parecer en un sentido más amplio. Así que aquí, he definido una interfaz llamada rowData. Tiene un nombre y un color. Y luego he usado useState para establecer la propiedad de definiciones de columna. Así que voy a usar el hook, useState, y voy a configurarlo para que sea un array de estos objetos col-def. Y cada objeto col-def va a tener un field, y eso le va a decir a Ag Grid que cuando te dé todos estos datos, quiero que busques la propiedad name en cada objeto. Y quiero que uses eso en la columna name. Y luego lo mismo para field para color, columna, quiero que uses el field color dentro de mis datos de fila. Y quiero que muestres color en esa columna. Y haremos una demostración aquí muy pronto para mostrarte cómo funciona eso. Así que en la forma más simple, una definición de columna especifica el nombre del encabezado para ser mostrado así como los fields. Y el field es como una cadena que le dice a Ag Grid dónde obtener los datos para esa columna dentro del objeto de datos de fila. Y puedes usar una especie de notación de punto aquí. Así que si tengo una especie de objeto anidado, tal vez que se devuelve de mi API o GraphQL o lo que sea, y tengo un objeto user que tiene un objeto account dentro de él, y ese objeto account tiene una propiedad first name, puedo hacer user.account.firstName, y Ag Grid va a profundizar en eso y obtener esos datos para mostrar en esa columna para ti.

Bien, así que ahora que hemos hablado de manera muy simple sobre cómo configurar algunas columnas, ahora hablemos un poco sobre los datos. Así que en términos generales, hay dos modelos de fila proporcionados por Ag Grid. Tienen un modelo de fila del lado del cliente, lo que significa que le das todos los datos en el cliente y dices, Hey, Ag Grid, aquí tienes 10,000 filas de datos. Quiero que muestres en esta cuadrícula. Y le das todos los datos a la cuadrícula en el cliente, y puedes gestionar los datos en el cliente si quieres. Pero en general, la cuadrícula va a esperar que cuando haga cosas como filtrar y ordenar, que ya conozca todos los datos, ¿verdad? Y luego está la otra opción, que es el modelo de fila del lado del servidor, que funciona muy bien cuando tienes conjuntos de datos grandes. Así que como puedes imaginar, puede que no quieras enviar, como tal vez 10,000 filas en mi ejemplo, es aceptable enviar al cliente. Tu experiencia puede variar allí solo en términos del tamaño de la carga útil y cuántos datos y cuánto tiempo lleva en tu aplicación. Pero cuando se trata de conjuntos de datos realmente grandes, tal vez conjuntos de datos financieros o algo así, donde simplemente tienes una tonelada de datos que están en tu base de datos o lo que sea, quieres usar algo un poco más avanzado, y ese es el modelo de fila del lado del servidor. En ese caso, Ag Grid va a asumir que cuando hace cosas como filtrar u ordenar, que no tiene todos los datos, y que va a usar una interfaz a lo que se llama una tienda de datos para ir y decir, hey, tienda de datos, quiero ordenar por color, enviando, dame todos los datos, o al menos dame el siguiente fragmento de datos para que muestre, y lo hará. Y es un proceso algo asincrónico que espera, y usan funciones de callback para hacer eso. De esa manera, puedes salir asincrónicamente, obtener esos datos, filtrarlos u ordenarlos en tu base de datos, y luego devolverlos a Ag Grid. Así que el modelo de fila del lado del cliente está disponible en la Community Edition completamente gratis, y luego el modelo de fila del lado del servidor es lo que requiere la Enterprise Edition de Ag Grid, y ahí es donde tienes que empezar a pagar por el producto. Así que hoy, generalmente vamos a estar usando el modelo de fila del lado del cliente en este curso. Simplemente lo hace realmente fácil. Muchas de las cosas que aprendimos, podrás transferirlas al modelo de fila del lado del servidor para esos escenarios más avanzados, donde realmente necesitas, necesitas ese poder del modelo de fila del lado del servidor.

Bien, aquí está nuestro ejemplo de antes donde tenía un nuevo estado y configuré mis definiciones de columna. Ahora también he configurado mis datos de fila. Y así, lo que estoy haciendo en este ejemplo aquí es simplemente traer un montón de productos. Y así tengo un conjunto de datos de muestra que vas a ver una vez que comencemos a cargarlos en el navegador y mirando las demostraciones y los ejercicios. Y así, esto va a ser un array de nuestros objetos de datos de fila, y voy a poner esto en el estado y va a ser datos de fila. Y voy a continuar, y en mi componente Ag Grid React, voy a tener la propiedad de datos de fila así como la propiedad de definiciones de columna.

Así que echemos un vistazo a este ejemplo en StackBlitz. Vamos a dejar que esto se inicie. El código es todo el mismo. Así que es un poco pequeño aquí. Déjame ocultar la barra lateral y aumentemos esto un poco para que podamos ver el código. Así que tengo mis definiciones de columna y mis datos de fila, y aquí están mis definiciones de columna, y aquí están mis datos de fila. Nota que estoy importando datos de un archivo JSON. Así que solo estoy haciendo eso para los propósitos de este curso. Tú, por supuesto, podrías estar obteniendo esos datos de un backend. Podrías usar lo que necesites hacer para obtener esos datos en tu cliente y luego vincular eso a tu cuadrícula. Y aquí puedes ver que tengo mi columna de nombre y tengo mi columna de color. Y si hago clic en estos, puedo ver que va a ordenar, y también puedo arrastrar la columna de color y puedo moverla de un lado a otro, ¿verdad? Y así, por defecto, el orden de las columnas de izquierda a derecha es el mismo orden que especifiqué en mis definiciones de columna. Y el orden de clasificación por defecto es cualquier orden en que los datos regresaron de mi backend o de mi fuente de datos. Y así, en este ejemplo particular, en mi archivo JSON, este es el orden en el que se están mostrando.

Genial. Así que con solo un par de minutos en el curso, creo, y un poco de mi introducción en 10 minutos aquí, ya hemos aprendido un poco sobre Aggigrid. Sabemos que tenemos que envolverlo en algún tipo de elemento contenedor. Tenemos que proporcionar un tema. Y puedo personalizar esos temas, y vamos a tocar un poco el estilo más adelante en el curso. Y puedes referirte a la documentación de Aggigrid para más detalles sobre el estilo. He definido algunas columnas. Tengo algunos datos y los estoy mostrando. Y puedes ver aquí que mientras me desplazo por la cuadrícula, no estoy seguro exactamente, tal vez un par de cientos de elementos. Así que no hay muchos datos, pero es muy suave. Buena tasa de fotogramas, muy buen rendimiento, mostrando datos muy fácilmente, y estoy en funcionamiento. Así que sí, bastante simple.

Así que revisando rápidamente eso, los datos se proporcionan a la cuadrícula usando la propiedad row data. Los datos están vinculados a una columna basada en la propiedad field de las definiciones de columna. Hablamos de eso. Hablamos de cómo podemos usar, en cierto modo, le damos una cadena que hace referencia a una propiedad dentro de esos datos. Y vamos a aprender más sobre técnicas avanzadas para la representación de celdas más adelante en el curso. Déjame mostrar los datos, me acabo de dar cuenta rápidamente. Déjame entrar en ese archivo data.json. Y solo para que puedas ver los datos que estamos representando. Así que en mis datos, tengo datos de órdenes aquí. Así que son órdenes y cuentas y clientes y productos. Y así cuando dije, oye, para los datos de fila, quiero que muestres los datos del producto, de aquí es de donde está extrayendo esos datos. Y cuando dije para la definición de columna usar el campo name, de aquí es de donde está obteniendo el nombre. Y lo mismo ocurre con color, y de ahí es de donde va a obtener el color. Y así puedes ver, así es como se ve mi conjunto de datos. Por supuesto, tu conjunto de datos va a ser diferente, pero en el curso de hoy, vamos a usar este conjunto de datos de muestra que generé. Así que sí, así que sí, espero que eso ayude a dar un poco de contexto.

Bien, de inmediato, quiero que empieces a escribir en el teclado y comiences a jugar con ADGrid. No quiero hablar todo el tiempo. Quiero que aprendas tanto como puedas sobre ADGrid en las próximas horas. Así que vamos a seguir adelante y vamos a abrir un ejercicio. Voy a dejar este enlace. Si estás siguiendo, de nuevo, en el sitio web, ya deberías tener ese enlace. Pero déjame ir y obtener ese enlace para ti, por si acaso. Aquí está el enlace para comenzar con el desafío. Y así, muy simple, esto va a ser hacer justo lo que ya hicimos. Vamos a especificar la propiedad de definición de columna, y vamos a vincular eso al componente ADGrid, y luego vamos a establecer también los datos de fila. Así que vamos a hacer este primer ejercicio juntos, solo para que te acostumbres al flujo. Voy a abrir StackBlitz, y luego si presionas Command B o Control B, puedes ocultar este menú a la izquierda. También puedes simplemente hacer clic en el icono del proyecto. Voy a mover eso fuera del camino porque tengo mi fuente un poco aumentada aquí. Déjame subir otro clic por si acaso. Sí. Y así, si abres el ejercicio, deberías ver básicamente lo que tengo justo aquí frente a mí. Y ya he importado el CSS para nosotros, verás. Ya he importado los datos y la definición de columna. Y como mencioné al principio del curso, instalas AGGrid React, pero algunos de los tipos también vienen de AGGrid Community, así que querrás instalar eso también si estás usando TypeScript. Si no estás usando TypeScript, no necesitas hacer eso. Y he definido una interfaz para mis datos de fila. Y he dicho que cada fila en mi cuadrícula va a tener un nombre y una columna. Y esos van a ser de TypeScript. Así que lo primero que queremos hacer en este ejercicio es especificar la definición de columna. Así que lo que vamos a hacer aquí es seguir adelante y establecer la definición de columna. Voy a llamar a esto call def. Ese call def, vamos a usar state. Y va a ser un array de objetos. Y vamos a tener una propiedad de campo en él. Y esto va a ser name. Y vamos a tener otra propiedad de campo, y esto va a ser color. Ahora puedo entrar aquí, y puedo decir que esto va a ser un array de datos de fila si quiero establecer el genérico de TypeScript en mi use state, obtener un poco más de seguridad de tipo o tipado estricto alrededor de eso. Pero ahora que tenemos nuestras definiciones de columna, ahora necesitamos vincular eso y establecer la propiedad en nuestro componente AGGrid React. Así que voy a llamar a esto call defs, y eso va a ser igual a nuestro, ¿cómo lo llamé? Vamos a llamarlo call defs. Podemos acortar esto un poco aquí, ¿eh? Genial. Así que ahora tengo mis columnas, y puedo ver aquí que tengo mi columna de nombre y mi columna de color, pero todavía obtengo carga porque aún no he proporcionado ningún dato a la cuadrícula. Y así necesitamos hacer eso a continuación. Así que vamos a establecer los datos de fila. Así que vamos a hacer const rowData, y vamos a usar state, y esto va a venir de mis datos.productos. Y luego vamos a bajar aquí. Es row data, y vamos a vincular eso. Déjame solo construir color. No tendré mi, oh, tengo un espacio allí. Ahí vamos. Eso lo hará. Bien, genial. Así que en nuestro primer ejercicio, configuramos las definiciones de columna, y configuramos los datos de fila. Y estamos trayendo esos datos ahora mismo en este ejemplo de ese archivo JSON. Por supuesto, podríamos usar una fuente de datos externa, obtener eso, y luego establecer esos datos en el estado. Y ahora que tenemos esos datos de fila en el cliente, ahora podemos establecer esos datos de fila y proporcionarlos a la cuadrícula. Y tenemos nuestras definiciones de columna que especifican cómo mostrar esas columnas y dónde encontrarlas. Ahora, notarás que no especifiqué el nombre del encabezado, y eso fue algo que te mostré al principio aquí. Y así puedo hacer header name, y puedo decir nombre del producto, digamos. Y ahora puedes ver que el nombre del encabezado es nombre del producto. Por defecto, AzGrid va a usar, tienen una especie de estrategia de reemplazo de cadenas, por así decirlo, de inferir esos nombres de encabezado basados en el campo. Así que cuando no tenía esto configurado antes, solo decía nombre, y capitalizaba la N en nombre. Y puedes ver aquí en la columna de color que ha capitalizado la C en color. Y solo hace eso basado en el campo y trata de adivinar lo que querrías que fuera. Creo que si estos son campos en camel case, pondrá el espacio para ti y tratará de inferir. Pero también podemos anular eso y establecer explícitamente el valor del encabezado usando la propiedad header name. Genial. Bueno, ese fue nuestro primer ejercicio. Espero que todos hayan disfrutado eso y hayan podido seguir. Si tienes alguna pregunta en este punto, quiero darnos un pequeño descanso aquí. Déjame saber si tienes alguna pregunta, déjalas en el chat. Nos encantaría responder cualquiera de esas preguntas que puedas tener. Pero espero que aquí en los primeros minutos, hayas podido ver rápidamente, oye, instalamos AzGrid, lo traemos a nuestro proyecto, configuramos nuestras definiciones de columna, traemos nuestros datos, y podemos mostrar una cuadrícula muy rápida y fácilmente. Estamos usando un tema incorporado así que no hemos personalizado el aspecto y la sensación de él, pero podremos hacer eso más tarde. Y hay muchas oportunidades para extender AzGrid con componentes personalizados y renderizadores y cosas así.

Okay, great. Sigamos adelante. Si hay alguna pregunta, déjala en el chat. Me encanta responderlas. Siempre estoy dispuesto a responder cualquier pregunta que puedas tener. Sí, así que vamos a comenzar con la ordenación de filas. Veamos, tengo una pregunta. Ben Gutes, ¿qué me estoy perdiendo? Sí, no estoy seguro. Vuelve y revisa el ejercicio que hice. Si te quedaste atascado en ese ejercicio, sé que lo hicimos juntos, y vamos a tener más ejercicios para hacer. Si entras y echas un vistazo a todas las ramas en el repositorio, así que este es el enlace que dejé en el chat, déjame hacerlo de nuevo. Y puedes entrar, y así estábamos trabajando en el desafío de definición de columna O1, y puedes ver que estos solo se van a acumular. Vamos a hacer un par de ejercicios alrededor de las definiciones de columnas. Y luego entraremos en el renderizado de celdas y la edición de celdas más tarde en la masterclass. Y si alguna vez te quedas atascado, siempre puedes ir a la rama de soluciones. Así que puedo hacer clic aquí, ir a la rama de soluciones. Déjame ir a source. Déjame ir a la grid. Y ahora puedo ver que está la solución. Así que si alguna vez te quedas atascado y no estás seguro, o tal vez cambio de pantalla un poco demasiado rápido, definitivamente intentaré, cuando lleguemos a algunas de las soluciones en el futuro, asegurarme de que tengas tiempo para captar eso. Pero si alguna vez te quedas atascado o estás escribiendo y piensas, ah, esto es demasiado para escribir. Solo quiero copiar y pegar, siéntete libre de ir a las soluciones. Y luego siempre puedes entrar en el mismo archivo en el que estoy. Vamos a estar trabajando en este componente grid.tsx, creo que prácticamente todo el tiempo. Y así podrás simplemente entrar, tomar esa solución y colocarla en los stack books en los que estás trabajando.

Gracias. Por supuesto. ¿Hasta cuántas filas se pueden recuperar? Sí, esa es una gran pregunta. Así que Abel tiene una pregunta aquí sobre cuántas filas se pueden recuperar. Así que en términos de, ya sabes, esto es más como una pregunta teórica o, sí, una pregunta en esa línea. Así que en términos de, hay, recuerda, en términos generales, hay dos modelos de filas diferentes para AG Grid. Está el modelo de filas del lado del cliente y el modelo de filas del lado del servidor. Y el modelo de filas del lado del cliente es donde vas a dar todos los datos a la grid por adelantado. De esa manera, cuando el usuario hace cosas como filtrar o ordenar, la grid asume que tiene todos los datos. Y si estás buscando, si estás ordenando o filtrando por un valor particular, ya sabes, el usuario va a asumir que va a filtrar y ordenar basado en los datos que le has dado. En el modelo de filas del lado del servidor, va a usar una estrategia asincrónica y va a depender de lo que se llama una fuente de datos, que se comunicará con tu backend o cualquier otra solución que estés usando para realmente obtener eso y hacer la, obtener los datos, ordenar los datos, filtrar los datos, ese tipo de cosas. Puedes imaginar si estás mostrando como muchos datos financieros y tienes, digamos, ya sabes, 10 millones de filas de datos, no querrías descargar todos esos datos por la red y poner todo eso en tu cliente. Lo más probable es que sería una especie de memoria, probablemente una restricción de memoria allí, y tal vez solo rendimiento y tiempo, cuánto tiempo lleva obtener todos esos datos. Sí, y luego cuando se trata de filtrar y ordenar, podría llevar mucho tiempo revisar 10 millones de registros para encontrar lo que el usuario está buscando. Mientras que si usamos el modelo de filas del lado del servidor, deferimos a nuestro servidor o a una API para, ya sabes, filtrar, ordenar todos esos datos. Así que en términos de cuánto, cuántas filas se pueden recuperar, realmente puedes, tantas como estés dispuesto a, a recuperar de tu backend y mostrar. Así que va a ser, tu experiencia puede variar dependiendo de cuán grande sea tu conjunto de datos y ese tipo de cosas. Pero en general, AG Grid es realmente eficiente en términos de la visualización de los datos dentro de la grid. Así que AG Grid utiliza virtualización de filas así como virtualización de columnas. Así que incluso si tengo un modelo de filas del lado del cliente con 10,000 registros o 10,000 filas, no va a construir, ya sabes, 10,000 filas de datos en el DOM y mostrar todo eso, y luego cuántas columnas tenga también, ¿verdad? Y así lo que hace es que puedes pensar en ello casi como algunos de, si alguna vez has hecho desplazamiento parallax o cosas así, básicamente tiene como una ventana y renderizará datos por delante y por debajo. De esa manera, a medida que el usuario se desplaza, siempre está por delante del usuario para mostrar esos datos. Y luego cuando el usuario está desechando los datos y desplazándose hacia arriba y hacia abajo en la grid, sabe cómo renderizar esos datos eficientemente dentro del DOM porque el DOM es costoso, ¿verdad? Y así cuando se trata de renderizar elementos en el DOM, aggrid es realmente inteligente al solo renderizar lo que cree que necesita. Y hace eso tanto en términos de filas como de columnas. Así que si tienes muchos datos que tal vez tienen como 20 o 50 columnas de ancho, verás que no va a realmente renderizar todos esos elementos en el DOM, pero a medida que te desplazas de un lado a otro mientras el usuario se desplaza, comenzará a construir esas columnas por delante. De esa manera, cuando entren en vista, están listas para funcionar, si eso tiene sentido. Y puedes aprender más sobre la virtualización de columnas y cómo funciona dentro de los documentos de aggrid. Y también puedes desactivarlo si eso es algo que te está causando problemas o algo así, puedes desactivar algunas de estas características, pero por supuesto, ya sabes, tienes compensaciones cuando se trata de ese tipo de cosas.

¿Puedes filtrar y ordenar por múltiples columnas? Vincent hizo la pregunta. Sí, absolutamente. Puedes filtrar y ordenar por múltiples columnas y vamos a echar un vistazo a eso. Sí, claro. Y vamos a entrar en la ordenación ahora mismo. Así que hagámoslo.

Bien, podemos habilitar y luego deshabilitar la capacidad de ordenar una fila usando la propiedad sortable en el objeto de definición de columna. Y por defecto, sortable está configurado en false. También puedes proporcionar una ordenación personalizada usando una propiedad comparadora. Y eso va a ser una función de callback que proporciona, proporcionaste una función de ordenación que es muy similar a array.sort, ¿verdad? Así que por defecto, la ordenación viene lista para usar de ADGrid y he hecho una pequeña demostración de eso y te lo mostraré. Y podemos desactivarlo si queremos en la definición de columna, podemos configurarlo en false. Y ordenará basado en tu configuración regional.

Así que la ordenación alfanumérica ocurrirá basada en tu configuración regional en el navegador. Pero si necesitas algún tipo de ordenación personalizada y estás mostrando algunos datos complejos o algún tipo de elemento visual en una celda, pero aún quieres que el usuario pueda ordenar sobre eso, tal vez sea como productos químicos o mod, sí, cosas así, podrías tener que proporcionar una función comparadora personalizada. Y ahí es donde implementarías la función de ordenación tú mismo. Así que echemos un vistazo a eso. Aquí tengo mi grid de nuevo. Y todo lo que he hecho es agregar la propiedad sortable y configurarla en true. Así que estoy diciendo explícitamente a ADGrid que esta columna se puede ordenar. Nuevamente, la ordenación es true por defecto. Así que esto es solo una especie de demostración, pero también puedo configurarlo en false y desactivarlo. El orden de clasificación por defecto se establecerá inicialmente en ascendente, descendente y ninguno. Y ninguno representa el tipo de datos que se proporcionó originalmente a la grid. Y podemos anular eso configurando la propiedad de definición de columna de orden de clasificación para cambiar ese comportamiento si queremos. Así que en este ejemplo, voy a especificar un orden de clasificación personalizado. Y así proporciono la propiedad de orden de clasificación en un array. Y aquí estoy diciendo, solo quiero permitir la ordenación del campo de nombre para ser ascendente o descendente y no volver a ese valor por defecto de null. También puedes hacer una ordenación por múltiples columnas, tal como preguntabas, Vincent. Así que puedes ordenar múltiples columnas manteniendo presionada la tecla shift y haciendo clic en los encabezados de las columnas. También podemos especificar la anulación, la tecla que queremos usar. Y así podrías querer permitir que el usuario use la tecla control o la tecla command. Así que control en Windows o command en Mac o algo así. Y así puedes especificar eso con la opción de tecla de multi-ordenación para anular ese comportamiento. Y así es como se ve eso.

En el componente aggrid-react, vamos a establecer la multi-sort key. Y voy a decir, oye, quiero que sea la tecla command en Mac OS o la tecla control en Windows. Y eso anulará ese comportamiento predeterminado.

Bien, vamos a sumergirnos en un ejercicio rápido. Y este, te voy a dar un par de minutos para trabajar por tu cuenta. Así que adelante y abre el desafío en StackBlitz. Vas a añadir la propiedad sortable a una definición de columna, y luego anular el orden de clasificación predeterminado especificando la propiedad de orden de clasificación en la definición de columna. Y luego, si quieres, adelante y anula la tecla de clasificación por múltiples columnas especificando la propiedad multi-sort key en el componente aggrid-react. Y déjame dejar el enlace a esto en el chat también, y deberías tener esto. Por si acaso te uniste tarde, déjame dejar un enlace al sitio en el que estamos. Así que encontrarás todo el contenido aquí mismo que estoy compartiendo. Así que estoy en aggrids, o disculpa, estoy en LiveLoveApp. Esa es la empresa para la que trabajo. Tenemos un curso de aggrid con React, y estamos viendo la sección de clasificación de filas. Y acabamos de cubrir este contenido, y ahora estamos aquí en el ejercicio. Y aquí está la solución para ti. Y si quieres seguir en una especie de modo de diapositivas, solo presiona la tecla punto o el punto en tu teclado, y eso traerá esta vista. Puedes presionar escape para salir de ella. Así que adelante y abre ese desafío en StackBlitz. Voy a hacer lo mismo. Así que lo que queremos hacer para este ejercicio es que vamos a añadir la propiedad sortable a la definición de columna, y luego simplemente vamos a anular el orden de clasificación predeterminado especificando la propiedad de orden de clasificación en la definición de columna.

Vamos adelante, si hago clic en una columna, ahora mismo puedes ver que sortable está configurado en true por defecto. Y puedo hacer una clasificación por múltiples columnas manteniendo presionada la tecla Shift. Así que puedo mantener Shift, y puedo clasificar primero por nombre y luego por color. Y verás que AGGrid añade estos uno y dos enteros aquí, y eso informa al usuario que estoy clasificando primero la columna de nombre, ascendente, y la columna de color en segundo lugar, descendente. Y luego puedo restablecer eso. Y luego cuando volvemos al estado original donde no hay flecha hacia arriba o hacia abajo, ese es el estado nulo, o la clasificación se restablece a lo que sea que fuera la clasificación de los datos que se proporcionaron al usar el modelo de fila del lado del cliente. Así que establezcamos sortable aquí, y sortable, simplemente configurémoslo en false. Y ahora estoy haciendo clic en este encabezado, y no puedo clasificarlo, pero aún puedo clasificar mi columna. Y puedo bajar aquí, y puedo anular esa multi-sort key, y puedo configurarla para que sea la tecla Control. Así que ahora en lugar de Shift, en Windows será la tecla Control, y en Mac será la tecla Command. Y ahora si quiero hacer, si tengo que configurar esto de nuevo a true, ahora puedo clasificar, voy a mantener la tecla Command, y ahora puedo hacer una clasificación por múltiples columnas. Sí, usando una tecla diferente. Fantástico, si hay alguna pregunta, déjalas en el chat, y estaré encantado de responderlas. También tenemos la solución aquí en el contenido del curso, si quieres referirte a eso. Oh, no configuré el orden de clasificación. Déjame revisar eso rápidamente. Sí, así que aquí está mi orden de clasificación, y puedo anular eso, configurar esa propiedad en la definición de columna, y puedo configurarla para, en este caso, voy a anularla para que vaya ascendente, luego descendente, y no permitir que vuelva al estado predeterminado.

Bien, genial. Hablemos sobre las definiciones de columnas predeterminadas. Entonces, para evitar algún tipo de repetición innecesaria al configurar definiciones de columnas, tal vez quieras desactivar la clasificación para todas las columnas, o quieras anular el orden de clasificación para todas las columnas. Podemos usar lo que se llama una definición de columna predeterminada. Así que cada columna heredará primero la definición de columna predeterminada, y luego cada definición de columna puede anular esos, disculpa, anular esos valores predeterminados.

Veamos un ejemplo. Así que aquí he definido mi definición de columna predeterminada, y esto va a ser de tipo column definition, y he especificado el genérico tdata aquí para ser mi interfaz de datos de fila, y voy a configurar sortable en true. Ahora, cuando tengo mis definiciones de columnas, todas esas columnas van a heredar esa definición de columna predeterminada que he especificado, y necesito configurar la propiedad default column def en el componente AG Grid React para proporcionarle la definición de columna predeterminada. Acabamos de ver eso, así que voy a saltarme esa diapositiva.

Bien, volvamos directamente a otro ejercicio. Este es bastante fácil. Así que adelante y abre ese ejercicio en StackBlitz. Vamos a definir una nueva constante default call def en la función del componente.

Vamos a establecer la propiedad sortable en true, y quiero que vincules la constante default call def a la propiedad default call def en el componente AG Grid React, y luego podemos anular esa propiedad sortable a false para una de las columnas si queremos. Déjame tomar este enlace y dejarlo en el chat para ti. Así que, ¿por qué no abres ese ejercicio, y luego lo haremos juntos. Vamos a abrir el ejercicio en StackBlitz. Vamos a definir una nueva constante de definición de columna predeterminada, así que hagámoslo primero. Así que voy a venir aquí. Veamos, const default. Haré punto. Y esto va a ser de tipo call def, y luego puedo especificar el genérico T data para ser mis datos de fila, y voy a establecer sortable en true. Baja a mi componente, y vamos a establecer la definición de columna predeterminada así. Y así debería poder ordenar todos estos. Ahora voy a anular eso, y voy a decir para el campo de nombre, establezcamos sortable en false. Y ahora, ¿qué hice aquí? Permitir sortable. Tal vez no se recargó. Oh, no guardé. Bien, ahora puedo, si estoy haciendo clic en el nombre, columna, encabezado, puedo ver que no puedo ordenarlo, pero aún puedo ordenar por color. Y puedes usar la definición de columna predeterminada. Lo que me gusta hacer aquí en un proyecto a menudo es que podrías tener un par de diferentes predeterminados basados en diferentes estilos o tipos de cuadrículas, pero es realmente genial poder poner esos en un módulo, o una biblioteca, o algo así, y exportar eso, y luego puedes compartir eso a través del proyecto. Si tienes como múltiples proyectos en múltiples repositorios, también puedes publicar un NPM tal vez a un repositorio interno, o algo usando un artefacto, como lo que es el artifactory, o lo que sea, tratando de pensar en el nombre del producto. Puedes tener tu propio NPM privado, o podrías, si trabajas para una gran empresa que tiene muchas cosas on-prem, puedes construir tu propio tipo de repositorio personalizado, y publicar una biblioteca, y puedes exportar esas definiciones de columna predeterminadas, usarlas en múltiples proyectos en toda tu organización, y luego si estás usando una solución, como un mono repositorio, puedes tener una biblioteca que exporta esa constante de definición de columna predeterminada, y luego puedes usar eso en todas tus implementaciones de AG Grid, y todos tus proyectos. Y eso se vuelve realmente útil solo para hacer cumplir, o para proporcionar, algo de la misma funcionalidad, porque solo estamos viendo aquí un poco los comienzos de AG Grid con sortable. Como puedes imaginar, hay muchas características, y cosas que puedes hacer con AG Grid más allá de ordenar, y con la definición de columna predeterminada es donde realmente podrías conectar y proporcionar alguna funcionalidad avanzada que quieras en todas tus cuadrículas, y compartir eso a través de tus proyectos.

Bien, entremos en algo de filtrado. Así que AG Grid viene con varios filtros proporcionados. Puedes filtrar valores de texto, números y fechas, y luego también hay algunos filtros adicionales que vienen con la Edición Enterprise, como el filtrado de conjuntos. El filtro de texto es el predeterminado, y podemos habilitar el filtrado configurando la propiedad de definición de columna filter en true. Así que solo activamos esa función en una base por columna, y por supuesto, acabamos de aprender sobre las definiciones de columna predeterminadas, así que podríamos habilitar el filtrado para todas las columnas por defecto configurando esa propiedad en nuestra definición de columna predeterminada. Bien, echemos un vistazo al filtro de texto. Así que bastante fácil aquí. Aquí está nuestra definición de columna para nuestro campo de nombre, y voy a establecer filter en true. También podemos usar explícitamente el filtro de texto proporcionado, y verás esto cuando lleguemos al filtro de fecha y al filtro de número. Los filtros se registran usando una cadena, y AG Grid proporciona algunos proporcionados, como los filtros integrados, y esos siempre comenzarán con ag en minúsculas, y puedes registrar y construir tus propios filtros. Y así en este caso, puedo establecer explícitamente el filtro para ser el filtro de columna de texto ag si quiero. Nuevamente, el valor booleano true usará el filtro de columna de texto. También podemos usar el filtro de número. Así que si queremos poder filtrar en base a enteros y flotantes, podemos usar el filtro de columna de número ag. Así que en este caso, tengo mis productos, y mi producto tiene un precio asociado, y así puedo habilitar el filtro de columna de número para esa columna de precio. De esa manera, el usuario puede filtrar en base al precio de los productos, y eso les permitirá filtrar en base a como mayor que menor que, igual a, y esos tipos de opciones de filtro. Y veremos eso aquí una vez que entremos en el ejercicio. También tengo un filtro de fecha.

Así que AG Grid viene de fábrica con un filtro de fecha proporcionado, y para usar eso establezco el filtro en filtro de columna de fecha ag. Bien, entremos directamente en un ejercicio. Así que lo que queremos hacer en este ejercicio es que vamos a establecer la columna de nombre del cliente para usar el filtro de texto. Vamos a establecer la columna de número de cuenta para usar el filtro de número. Y vamos a establecer la columna de fecha de pedido para usar el filtro de fecha proporcionado. Y luego para la columna total, también usaremos el filtro de texto. Así que adelante y configura eso. Nuevamente, vamos a configurar la propiedad filter en base a las cadenas. Así que lo que voy a hacer es darte un par de estos, voy a dejarlos en el chat. Nuevamente, siempre puedes mirar la solución si no recuerdas exactamente cómo se escriben, no espero que lo hagas. Pero déjame dejarlos en el chat para que también los tengas. Y recuerda, el filtro de texto es, ups, déjame volver. El filtro de texto, puedes simplemente configurarlo en true o puedes usar el nombre completo del filtro. También está ese. Así que volveremos a nuestro ejercicio. Adelante y abre ese ejercicio en StackBlitz. Déjame copiar ese enlace para ti. Abre ese ejercicio en StackBlitz. Y verás que tenemos un montón de columnas especificadas. Y agreguemos algunos filtros a esas columnas. Así que agreguemos el filtro de texto al nombre del cliente, filtro de número al número de cuenta, el filtro de fecha a la fecha de pedido, y el filtro de texto a la columna total. Y luego haré ese ejercicio. Lo haremos juntos aquí en un minuto o dos. ¿Por qué no tomas un par de minutos y trabajas en ese pequeño ejercicio? Como siempre, si necesitas referirte a GitHub para echar un vistazo a la solución, siéntete libre de hacerlo. Sí, es un filtro realmente agradable, poder agregar rápidamente algunos filtros a las columnas. Y por supuesto, podemos, como mencioné antes, podemos habilitar, digamos que solo queremos tener un filtro de texto disponible en todas las columnas por defecto. Y luego tal vez solo algunas de nuestras columnas, queremos anular eso para ser tipos específicos de filtros. Y de fábrica, obtienes un filtro de texto, un filtro de número y un filtro de fecha. Y vamos a hablar sobre un pequeño matiz aquí con el filtro de fecha en un segundo. Porque podrías encontrarte con un problema con ese. Pero sí, realmente agradable tener ese filtrado simple directamente de fábrica para que nuestros usuarios lo usen. Adelante y deja un pulgar arriba en el chat. Quiero asegurarme de que tengas suficiente tiempo para estos ejercicios. Al principio, me muevo un poco rápido a través de estos solo porque no quiero que, el punto de estos ejercicios no es, ¿obtienes tus músculos y tus dedos, no es un curso de mecanografía. No estoy tratando de enseñarte a escribir definiciones de columna. Así que si sientes que, ah, solo quiero ir a copiar-pegar cosas, no te preocupes, así es como se hace aquí con algunas de estas cosas. Así que sí, déjame un pulgar arriba, genial. Eso me dice que estás listo para el ejercicio. E incluso si no hiciste el ejercicio y solo estás como, sigamos adelante, Brian, creo que lo tengo. No necesito hacerlo o lo que sea. Solo dame un pulgar arriba, eso me dice que todos están listos para seguir adelante para que no me mueva demasiado rápido. Quiero asegurarme de que tengas tiempo para jugar con este producto y aprender algo de él. Bien, tengo una pregunta de Artem. ¿Podemos usar algunos componentes personalizados en los filtros? Absolutamente. Quiero decir, insertar entrada personalizada para algún campo con lógica o diseño personalizado que filtre datos en la cuadrícula. Sí, es la respuesta. Como puedes imaginar implementando eso, entraremos en algunos de los componentes personalizados hoy, pero puedes implementar componentes personalizados para filtrar, para editar, para renderizar celdas, todo tipo de cosas.

Así que puedes usar un componente personalizado para el filtro. Puedes usar un componente personalizado para la barra de filtro flotante si lo deseas. Así que hay muchas oportunidades allí para desarrollar filtros personalizados. Sí, porque puedes imaginar todo tipo de escenarios avanzados donde digamos que estás construyendo como un producto financiero y tal vez tienes como una celda de fórmula donde los usuarios pueden ingresar como una fórmula para calcular algún tipo de valor. Y podrías querer tener un filtro personalizado para que puedan filtrar esas fórmulas, digamos que solo muéstrame las fórmulas que están referenciando este otro valor o algo así. Y así querrías construir un filtro personalizado para hacer eso.

Bien, vamos a sumergirnos en ese ejercicio. Bien, así que vamos a configurar el filtro de texto en el nombre del cliente. Voy a venir aquí. Aquí están mis datos de fila. Vamos a bajar aquí al nombre del cliente. Voy a establecer el filtro en verdadero. Y tan pronto como haga eso, ahora tengo este menú de hamburguesa, como quieras llamarlo, menú contextual, y puedo bajar aquí y ahora puedo filtrar esto. Y puedes decir, solo muéstrame los que contienen la cadena Jones. Y puedo construir estos como ves. Y así ahora está filtrando y mostrando. Y obtengo este pequeño icono aquí, y esto le dice a AGGrid que, oye, esto está filtrado. Este nombre de cliente está filtrado. Y entro aquí, puedo borrar esto y puedo volver y mostrar todo. Y vengo al número de cuenta. No tengo menú porque no he configurado el filtrado en esto. Así que vamos a seguir adelante y vamos a establecer el filtro. Y creo que dijimos para el número de cuenta, vamos a hacer AG number column filter. Así que vamos a venir aquí. Y ahora llego al filtro de columna numérica y se ve un poco diferente, ¿verdad? Puedo hacer igual a, mayor que, menor que, entre, ese tipo de cosas, ¿verdad? Así que eso es realmente útil de hacer. Y por supuesto, todavía tengo ordenación aquí. Y para el, por qué sigue apareciendo, lo siento por eso. Debo haber presionado algo para obtener la contraseña de iCloud aquí. AG date column filter, no creo que iCloud vaya a poder saber cómo hacer eso. Vamos a nuestra fecha de pedido. Y ahora obtengo un filtro de fecha. Sí, bastante genial. Y así ahora puedo, el usuario puede proporcionar una fecha. Nota que esto está usando el calendario incorporado y ese tipo de cosas. Así que vas a ver que esto va a estar formateado como ENUS para mí. Para ti, va a estar basado en tu configuración regional porque viene del navegador. Si no quieres construir, si quieres tener como un selector de fecha personalizado o algo así, por supuesto, aquí es donde puedes construir un filtro personalizado y podrías usar MUI o podrías usar Chakra o podrías usar algún otro componente donde tal vez tengas tu propio calendario o selector de fecha o algo así. Y así esto es un poco diferente aquí. Puedo ver que puedo filtrar basado en la fecha del pedido. Y luego para el total, también puedo bajar aquí y voy a decir, oye, vamos a usar el AG text column filter. Escribo todo en lugar de verdadero, no sé por qué sigue apareciendo. En lugar de verdadero, voy a usar el filtro de columna de texto. Eso es solo un poco más explícito si quieres. Y aquí está mi filtro de columna de texto que me permite filtrar los valores. Y aquí está nuestra solución. Así que una de las cosas que mencioné es cuando se trata de filtrado de fechas y usar fechas y marcas de tiempo, podrías preguntarte, ¿cómo uso el filtrado de fechas si tengo como cadenas ISO o algo así? Y esa es una gran pregunta. Así que de fábrica, el filtro de fecha usa JavaScript y es realmente fácil de usar. Así que de fábrica, el filtro de fecha usa objetos de fecha de JavaScript. Así que si tu backend te está dando como fechas ISO o algún otro tipo de cadena de representación de fecha, vas a necesitar analizar esos valores, ¿verdad? Así que antes de conectar los datos a la cuadrícula, vas a usar como un used memo o tal vez estás usando Redux o algo así. Y vas a tener un selector o algo que depende de lo que estés haciendo. Vas a querer calcular esa fecha y vas a querer hacer como, si estás usando Luxembourg o date FNS o moment o algo así, una biblioteca de fechas, vas a querer analizar esa cadena de fecha ISO y convertirla en un objeto de fecha, un objeto de fecha nativo de JavaScript. Y así es como AGGrid trabaja con esos valores de fábrica para poder hacer el filtrado. Y veremos lo mismo cuando se trata de ordenación también. Porque de lo contrario, solo va a asumir si le das una cadena, que es una cadena ISO, no sabe que es una fecha y solo la filtraría basado en como lo que sea que tu configuración regional de ordenación alfanumérica esté configurada. ¿Verdad? La otra cosa que puedes hacer es si no quieres usar como un selector de Redux o como un used memo o algo así para calcular los datos y cambiarlos de, analizarlos y todo eso, también puedes usar otro método. Y ese es donde puedes especificar esa función de comparador. Recuerda que al hacer filtrado o ordenación, podemos decirle a AGGrid, oye, puedes seguir adelante y puedes especificar una función de comparador real. Y esa función de comparador va a usar la misma implementación que array dot sort. Así que vas a darle una función de devolución de llamada y vas a devolver ya sea negativo uno, cero o positivo uno para decirle que A o B es menor que o igual a o mayor que para ese valor. Así que cuando se trata de filtrado y ordenación de marcas de tiempo, si no quieres convertirlas en objetos de fecha en tus datos de fila, puedes usar esa función de comparador. Y AGGrid va a llamar a esa función de comparador para calcular el filtrado. Y la llamará con A y B y todo eso. Y tendrás que implementar esa función de comparador para hacer algún tipo de filtrado o ordenación personalizada. Y no necesariamente tiene que ser solo con fechas. Puedes usar esa función de comparador para cualquier tipo de filtrado u ordenación. Y esa función de comparador es algo que puedes aprovechar para hacer eso. Así que si solo estás dando tus datos como cadenas ISO en tu función de comparador, obtendrás acceso a esos datos. Y luego puedes decir, ya sabes, analizar A, analizar B, devolver el valor apropiado y ese tipo de cosas. Así que, sí, eso es muy útil saber cuando se trata de filtrado de fechas. Así que tienes como dos opciones. Puedes usar memo o Redux o algo así y ya sabes, obtener esas marcas de tiempo ISO en objetos de fecha de JavaScript. Y luego de fábrica, el filtro de fecha funciona, o puedes usar esa función de comparador personalizada. Y aquí hay un ejemplo de esa función de comparador personalizada. Así que en este ejemplo, estoy usando el agdate column filter y hay una propiedad llamada filter params. También hay como un sort params. Hay otros como cell renderer params. Hay otras cosas como esta que existen en la definición de columna. Y así aquí está mi columna de fecha de pedido. La tengo conectada a un campo y en mi fecha de pedido, solo tengo cadenas de fecha ISO. Y así aquí está mi función de comparador que me dan. Y así me dan el valor del filtro así como el valor de la celda. Y luego voy a seguir adelante y como analizar ese valor de celda y voy a devolver el valor apropiado basado en el valor de la celda comparado con el valor del filtro que el usuario ha establecido. Así que un poco de matiz allí, pero quiero asegurarme de destacar eso. Así que cuando se trata del filtro y las fechas, ya sea usar objetos de datos de JavaScript en tus datos de fila o usar la función de comparador para permitirte hacer el filtrado en este ejemplo con el filtro de columna de fecha.

Y creo que tal vez me perdí una pregunta rápidamente. Lo siento por unirme tarde a la sesión, ¿puedes compartir los enlaces de recursos de referencia en el panel de discusión? Absolutamente. Así que sí, dejaste un enlace allí para nosotros y luego déjame darte un enlace de dónde estamos aquí. Estamos terminando las definiciones de columna y estamos a punto de entrar en la representación de celdas. Ahora te daré un enlace al contenido del curso, carga eso. Y ahí es donde estamos. Bien, son cinco minutos después de la hora y dije que tomaríamos dos descansos cortos. Así que vamos a tomar un breve descanso de cinco minutos aquí y luego nos sumergiremos en la representación de celdas. Así que me alejaré por un par de minutos. Voy a dejar la grabación y dejar todo funcionando como está aquí. Solo voy a silenciarme y alejarme, tomar un breve descanso. Y luego volvamos aquí en cinco minutos. Así que para mí, eso será alrededor de las 10 después de la hora. Así que 10, 10 para mí. Y luego vamos a retomar y sumergirnos directamente en la representación de celdas. Así que toma un breve descanso, toma un poco de agua, estira las piernas. Tenemos mucho más contenido para sumergirnos con la representación de celdas y echaremos un vistazo a los componentes de edición y luego entraremos en AG charts hacia el final. Así que emocionado de hacer eso. Así que nos vemos en unos minutos.

Muy bien, estamos de vuelta. Es un poco después de las 10 después y tuvimos un buen descanso allí. Espero que todos estén emocionados y listos para volver a empezar. Y si no, si necesitas hacer más trabajo o ponerte al día con cosas, no te preocupes. La masterclass está siendo grabada por los organizadores de React advanced. Y así podrán enviarla y recibirás un enlace, estoy seguro, de la grabación. El contenido del curso que he compartido contigo en el sitio web liveloveapp.com es completamente gratuito y está disponible para ti después del curso. Y si alguna vez necesitas ayuda con la implementación de AG grid, contáctanos, nos encantaría ayudarte. Así que puedes ir a liveloveapp.com. Proporcionamos una revisión de arquitectura gratuita. Así que pasaremos alrededor de cinco a ocho horas, así que un buen día completo de nuestro esfuerzo. Echaremos un vistazo a cómo está funcionando tu aplicación, el rendimiento, miraremos algunas de las cosas en las que estás interesado que miremos, o ayuda con la implementación de AG grid. Y al final de esa revisión de arquitectura gratuita, te proporcionamos un PDF con algunas recomendaciones. Eres bienvenido a usar eso como quieras, y esperamos que puedas volver y trabajar con nosotros, porque nos encantaría ayudarte con tu proyecto de AG grid. Bien, echemos un vistazo a la representación de celdas.

Así que sin ninguna personalización, y en la forma más simple, cada celda en AG grid se representa como una cadena basada en el campo especificado en la fila proporcionada. Y verás que AG grid realmente establece ese valor dentro de un elemento div. Así que si vamos e inspeccionamos la cuadrícula, miramos cada celda en la cuadrícula, veremos un div con algunas clases en él, como agcell, o agod. Para las filas, supongo, las filas, todas las celdas estarán dentro de un elemento div de fila. Y dentro de cada celda está solo la cadena, es solo el texto. Así que solo establecen el valor del texto programáticamente en ese elemento div. Así que crean el elemento div, establecen el valor del texto, y lo establecen para basarse en los datos de la fila y el campo, lo establecen en el valor. Y es bastante simple, ¿verdad? Pero a menudo cuando estamos trabajando con AG grid, no queremos solo mostrar cadenas genéricas realmente simples. Y cuando se vuelve un poco más complicado que eso, es cuando podemos comenzar a aprovechar la canalización para renderizar celdas. Y vamos a echar un vistazo a esa canalización de renderizado de celdas hoy. Así que lo primero que vamos a ver es la función value getter, luego vamos a ver la función value formatter, y luego vamos a ver un cell renderer function o componente personalizado.

Excelente. Así que la función value getter es una función de devolución de llamada que proporcionamos a AG grid que nos permite proporcionar datos a una celda basada en esa función. Y así podemos usar la función value getter para obtener datos de fila para columnas donde el uso de tal vez la propiedad field simplemente no es una opción. Y recuerda que la propiedad field puede tomar una cadena de notación de puntos. Y así, incluso si tienes datos de fila algo complejos, si necesitas profundizar desde como un objeto de usuario a un objeto de cuenta o algo así para obtener una propiedad específica, puedes hacer eso. Y, pero la propiedad field, puedes establecer en la definición de columna, podrías establecer esa propiedad field para ser una, como una cadena notada con puntos que especifica dónde obtener ese campo para tal vez algunos objetos anidados o algo así. Pero también podemos usar la función value getter donde podríamos querer tal vez mutar los datos o algo así, antes de proporcionar realmente los datos a la cuadrícula, o tal vez queremos calcular esos datos. Y así la función value getter es invocada por aggrid para cada celda. Y la función va a ser invocada con un objeto value getter params. Y eso va a ser del tipo value getter params. Y luego el genérico es cualquiera que sea el genérico T data que especificamos para la definición de columna.

Y echaremos un vistazo a eso aquí en un segundo. Así que echemos un vistazo a la interfaz value getter params. Así que de nuevo, este value getter es una función de devolución de llamada que proporcionamos, y aggrid invoca eso para cada celda en nuestro nombre. Y esa función value getter va a ser llamada por aggrid con un objeto que podemos usar para calcular ese valor o algo así. Y así obtenemos un montón de cosas en este objeto value getter params. Algunas de estas cosas ahora mismo podrían ser como, no estoy seguro de para qué usaría eso, y eso está bien. Y luego otras cosas tienen mucho sentido. Así que de inmediato, obtenemos los datos. Así que para los datos de fila, mientras está iterando sobre el array de los datos de fila, obtenemos el objeto de datos completo de vuelta para esa fila para la celda que estamos tratando de renderizar. Y así podemos acceder realmente a otras propiedades en esos datos de fila. Y cuando estás construyendo tus datos de fila, podrías meter otras cosas allí, ¿verdad? Y podrías necesitar un valor y una etiqueta y tal vez algún indicador que quieras mostrar dentro de una celda, ¿verdad? Y así cuando usamos la función value getter, obtenemos todos los datos para esa fila, y podemos concatenar estas cosas juntas o if statements o switch statements o lo que necesitemos hacer dentro de esta función. Y es solo una función de JavaScript, no hay nada especial al respecto, pero podemos calcular lo que necesitemos hacer. También obtenemos la grid API, hablaremos un poco más sobre eso en el futuro. La grid API nos permite interactuar directamente con la cuadrícula programáticamente, la definición de columna para la columna actual con la que estamos trabajando. Tenemos el objeto de columna, obtenemos la column API, que es otra API que nos permite interactuar directamente con esa columna programáticamente. Context es una cosa más grande que podemos conectar similar a React, podemos proporcionar contexto para nuestra cuadrícula, y así podemos tener algún contexto global, que está disponible para nosotros en estos value getter params. Hablamos sobre los datos que se nos proporcionarán. También tenemos una función get value que proporciona. Así que podemos decir, oye, dame el valor para este campo en mis datos de fila, y nos proporcionará esos datos. Y luego también obtenemos acceso al row node subyacente para esta celda en particular. He esbozado eso aquí en esta siguiente diapositiva, así que siéntete libre de referenciar esto en el futuro. De nuevo, como mencioné, la grid API es realmente útil porque nos permite interactuar programáticamente con la cuadrícula, podemos agregar event listeners a la cuadrícula, podemos acceder al portapapeles y muchas otras cosas. La column API también es muy útil y nos permite interactuar programáticamente con una columna específica. Así que podemos programáticamente, digamos que ponemos un botón dentro de una de nuestras celdas. Así que tenemos una cuadrícula, hemos definido una columna, tal vez queremos una columna llamada acciones o algo así. Y tenemos botones dentro de eso. Recuerda, porque ya no estamos mostrando solo texto con nuestro cell rendered, tal vez queremos realmente invocar algún tipo de acción o algo así. Así que ahí es donde podemos comenzar a interactuar con una column API y hacer cosas como mover columnas, fijar columnas, dimensionar y cosas así. Y luego también hay un row node, y un row node representa la fila única en la cuadrícula. Y eso nos permite hacer cosas como selección de filas, actualización de los datos de la fila, agregar event listeners a la fila y más. Bien, eso fue mucho. Así que echemos un vistazo a un buen ejemplo claro de usar el value getter. Así que en este ejemplo, tenemos nuestra cuadrícula y estoy especificando nuestras definiciones de columna.

Y tengo una columna de precio. Y lo que quiero hacer es calcular el valor del precio, en lugar de simplemente conectar a un campo y establecer el precio para mi producto. Quiero hacer algún tipo de cálculo para este precio. Y en este caso, lo que quiero hacer es redondear ese valor. Así que voy a proporcionar una función value getter. Se llama por ad grid con mi objeto params. Y voy a decir que si no tengo ningún dato, params.datas.undefined, simplemente devuelve cero. Y podrías preguntarte, bueno, ¿cuándo van a estar params.data indefinidos? Cuando entras en cosas como agrupación de filas, por ejemplo, hay momentos en que una celda podría no tener, o una fila podría no tener ningún dato. Así que necesitamos verificar eso primero. Y necesitamos decir, antes de comenzar a acceder al precio en los datos de la fila, necesitamos asegurarnos de que params.data no esté indefinido. De lo contrario, obtendremos una clásica excepción de tiempo de ejecución en JavaScript. Intentaste acceder al precio de indefinido. Y veríamos eso en nuestra consola. Así que vamos a verificar eso de antemano. Y luego, de lo contrario, vamos a usar una función math.round y vamos a redondear el precio. Y ahora estamos calculando este valor para esa celda. Ahora, por supuesto, podrías hacer esto si quieres de antemano para todos tus datos. Podrías usar el hook use memo o el selector de redux que crea otro, calcula el precio o agrega impuestos, o el usuario ingresa específicamente como aquí en los Estados Unidos, podrías seleccionar como tu estado o tu provincia o tu región de donde eres. Y podría haber varios impuestos que se aplican a ese precio y luego puedes calcularlo. Y podrías hacer todo eso de antemano con todos tus datos si quieres. Esto nos permite hacerlo de una manera más perezosa. Y luego este value getter va a ser invocado cada vez que esa celda se esté renderizando.

Así que tomemos un ejemplo o un ejercicio. Y echemos un vistazo a la función value getter y realmente pongamos manos a la obra. Así que abramos el ejercicio en stack blitz y notemos que la columna total está actualmente vacía. Quiero que uses el value getter para sumar el total de cada pedido. Ahora esto es un poco complicado aquí. Así que definitivamente quiero referenciar nuestra solución. Así que déjame entrar en la representación de celdas. Echemos un vistazo a nuestra solución. Espera. Estamos en el value getter. Bien. Voy a sacar un poco de este código aquí para ti y te lo daré porque es un poco complicado sumar los datos del pedido en nuestro conjunto de datos de muestra. Y voy a dejar esto aquí en el chat y déjame darte el enlace también. Porque no quiero que tengas que escribir una declaración reduce o filtrar y todo eso. Pero lo que vamos a hacer es que nuestros datos nos van a proporcionar como un pedido y vamos a para ese pedido ese artículo, necesitamos ir y buscar el producto. Necesitamos tomar el producto y luego necesitamos obtener el precio de él. Y así he escrito el código aquí para hacer esto. Y no quiero que tengas que preocuparte por escribir ese código. Si quieres escribir ese código, adelante y echa un vistazo a las pistas que tengo para ti aquí. Pero realmente quiero que aprendas cómo usar una función value getter, no cómo sumar el precio del producto para este modelo de datos en particular. Y así vamos a implementar el value getter y luego vamos a usar ese pequeño fragmento de código que te envié para realmente calcular el total de ese pedido. Así que adelante y abre ese stack blitz. Voy a copiar el enlace también y dejarlo aquí para ti y vamos a bajar a nuestra columna total. Aquí vamos, genial. Así que podemos ver que no tengo una propiedad de campo establecida para mi columna total. Si me desplazo, veré que mi columna total está vacía. Y entonces lo que quiero hacer es calcular esta columna total, ¿verdad? Así que si volvemos a nuestros datos y echamos un vistazo a data.json. Tenemos nuestros clientes, tenemos cuentas, productos, y para un pedido, puedes ver que en nuestro pedido, tenemos elementos de pedido, que hacen referencia al ID del pedido, el ID del producto y la cantidad. Así que aquí tengo mi pedido con un nombre de cliente, un número de cuenta, la fecha del pedido y quiero el total. Y así ese pedido, voy a necesitar sumar todos los artículos que están en ese pedido basado en el ID del pedido. Voy a necesitar buscar el producto y determinar ese total del pedido. Y así no quiero que tengas que escribir ese código y por eso te lo he dado. Déjame cambiar de nuevo a grid.gsx. Y así adelante y añade un value getter a esto. Así que haremos value getter. Siento que tengo que apagar esto de alguna manera. Y el value getter va a ser una función que obtiene los params. Y dentro de esos params es donde vamos a devolver ese valor. Si solo hago value getter y devuelvo cero, puedo ver que obtengo ceros para todos ellos. Y así lo que queremos hacer es seguir adelante y escribir el value getter. Vas a verificar los datos. Vas a hacer algo como esto, const data equals params.data. Y verás que params.data puede, puede ser indefinido. O va a ser parte de nuestros datos de fila. Y así vamos a verificar si params.data es indefinido. Y si lo es, simplemente devolveremos una cadena vacía o un cero. De lo contrario, vamos a calcular ese total. Así que ¿por qué no sigues adelante y lo intentas? Te voy a dar un par de minutos para trabajar en eso. Y luego volveré y terminaré el ejercicio. Nuevamente, aquí, la conclusión no es aprender sobre cómo los pedidos y productos están relacionados en estos datos falsos que generé. La conclusión aquí es que podemos usar un value getter. Podemos obtener acceso a los datos de la fila con los params. Y a partir de esos datos de la fila, podemos calcular el valor que queremos que se renderice dentro de una celda.

Muy bien, vamos a sumergirnos en este ejercicio juntos. Así que tengo mis datos y voy a decir, si no tengo ningún dato, simplemente devolvamos null. Y luego quiero obtener los elementos del pedido de esos datos. Así que voy a decir order items equals params.data.orderitems. Y luego voy a devolver este cálculo, ¿verdad? Voy a tomar todos los artículos, los productos y ese tipo de cosas, y luego sumar todos los precios de los productos. Y. Params, eso es útil. Ahí vamos, ahora estamos recibiendo algo de buena ayuda aquí. Y de hecho, solo hago eso, me desharé de ese. ¿Qué hice mal aquí? Data.products no existe en el tipo row data. Oh, creo que es porque me equivoqué. Tengo datos aquí arriba. Déjame arreglar eso. Así que no queremos hacer un local, hagamos params.data, y si no, params.data. Eso debería ayudar. Veamos si tenemos un total ahora, excelente. Ahora no lo hemos formateado aún, así que no parece una moneda, no tiene Euro o USD o algo así, solo tiene números. Pero estoy calculando en tiempo de ejecución el valor de esas celdas. Y esa función se va a llamar y a medida que desplazo hacia abajo en la cuadrícula, va a recordar nuevamente que estamos haciendo virtualización aquí. No es como si estuviera renderizando todos los datos de antemano dentro de la cuadrícula. Así que si pusiera un punto de interrupción o un registro aquí, y luego cargamos la consola. Eso es divertido. Genial. Así que ahí puedo empezar a ver mis pruebas. No estoy seguro si esto viene de otra cosa. Y a medida que desplazo hacia abajo, estoy obteniendo estos, estos otros errores. No estoy seguro de qué está pasando. Pero puedes ver que mi prueba está entrando. Además, a medida que desplazo, podemos ver que estamos obteniendo más de estos. Eso es debido a la virtualización de filas, ¿verdad? Así que AgGrid es realmente inteligente sobre qué, solo va a intentar renderizar en el DOM lo que necesita ser renderizado en el DOM para hacerlo realmente altamente eficiente. Y así, a medida que desplazo los datos hacia arriba y hacia abajo, va a ir y renderizar esas celdas. Y para renderizar esas celdas, sabe que tengo un value getter proporcionado. Y va a decir, está bien, ahora que sé que tengo una función value getter, déjame ir y llamar a ese value getter, obtener ese valor, y luego voy a usar eso para realmente renderizar la celda. Y así lo hace en tiempo de ejecución mientras estás renderizando cada una de estas celdas.

Bien, lo único de lo que quería hablar rápidamente es que también puedes construir value getters reutilizables. Y esto es solo, de nuevo, aprendizajes a lo largo de años de trabajar con clientes en AgGrid. A menudo vemos que las personas están copiando y pegando value getters de cuadrícula a cuadrícula, y luego terminan, podrías terminar con una regresión porque arreglas algo en un value getter, lo ajustas aquí, no se mueve al otro. Y así puedes terminar teniendo como código implementado. Sabes, este value getter es solo una función pura, ¿verdad? Es solo, con suerte es una pura, debería ser una función pura, donde si, ya sabes, dados los mismos parámetros, devuelve el mismo valor. Y así, a menudo, hemos aprendido que con el tiempo, es realmente importante construir una especie de catálogo o una biblioteca de value getters reutilizables que puedas compartir entre tu base de código.

Y así proporcionar un value getter en línea, ciertamente es perfectamente razonable hacerlo. Sin embargo, puede que desees tener una solución más reutilizable. Y ahí es donde entramos en la construcción tal vez de algo como una función de orden superior. Así que en este caso, hay un poco de TypeScript aquí. Así que tal vez solo difumina eso por un segundo. Realmente lo que quiero hacer es tener un multiplicador, y quiero decir, oye, quiero multiplicar este valor por algo, y tal vez sea como impuestos, impuestos o una tasa de impuestos o lo que sea para mi columna total. Y así lo que voy a hacer, voy a crear una función de orden superior que devuelva la función value getter. Y así aquí puedo proporcionarle tal vez como un multiplicador específico que sale de mis datos de fila. Así que esto podría llamarse mejor campo. Así que este es el campo para calcularlo, este es el multiplicador para calcularlo. Así que tal vez mis datos de fila, tengo como un total, y tengo una tasa de impuestos o algo así. Y quiero calcular eso en tiempo de ejecución. Y así puedes crear una función de orden superior para hacer eso. Y luego exportar esto y luego usar esto en todas tus cuadrículas. Y luego la función realmente va a ser invocada por un grado con esos params. Y ahí es donde puedo referenciar cosas como el campo que configuré y el multiplicador que configuré para realmente calcular y calcular cómo podría verse eso.

Tengo una buena explicación aquí. No voy a leer o pasar por todo esto. Así que echa un vistazo a esto con un poco más de detalle si quieres. Aquí está cómo podría verse esa implementación. Digamos que quiero usar un value getter multiplicador para mis datos de fila. Quiero usar la columna de precio y la columna de impuestos para calcular ese valor. Y así abrimos este ejercicio de stack plus, supongo que demo, echaremos un vistazo a esto. Podemos ver que estoy trayendo esta función value getter multiplicador. Y luego voy a usar ese value getter multiplicador en mi precio. Y voy a decir usa este value getter multiplicador. Vamos a echar un vistazo a continuación al value formatter. Y aquí es donde puedo ir a mi columna de precio. Y puedo ver que esto se está calculando usando el precio y la tasa de impuestos. Y luego lo estoy formateando a dos valores decimales usando mi función value formatter decimal reutilizable también. Y así estos son solo buenos hábitos que hemos aprendido a lo largo de los años en Live.Love.App en términos de cómo realmente hacer que la cuadrícula sea realmente funcional y reutilizable a través de múltiples implementaciones en un solo proyecto o a través de múltiples proyectos. Tal vez tu organización, lidias con muchas de estas cosas y no quieres implementar este value getter en cada cuadrícula y luego tener que mantener ese código. Y así esta es una buena manera de hacerlo.

Esta es la forma que encontramos que funciona muy bien para nuestros clientes.

Muy bien, genial. Así que ese fue el value getter. Veamos ese value formatter a continuación. Ahora bien, esta canalización, por supuesto, se llama en orden, ¿verdad? Y así, ya sabes, AgGrid va primero, si tienes una propiedad de campo, va a obtener esos datos, conectar los datos basados en el campo. Si tienes un value getter, lo va a usar para obtener el valor. Y luego, posteriormente, va a usar un formatter. Y luego, posteriormente, usará un render. Y así, esos están en secuencia en la canalización. Y así ahora que hemos, usamos value getter para obtener un valor, o tenemos la propiedad de campo para obtener un valor, también podemos usar un value formatter para realmente formatear ese valor.

Nuevamente, no estamos renderizando ningún HTML ni haciendo nada personalizado dentro de esta cuadrícula todavía de todos modos, pero podríamos querer hacer cosas como formatear el valor para que sea moneda, o queremos formatear el valor según las necesidades de nuestra aplicación. Así que después de que se conoce el valor de la celda, podemos opcionalmente especificar ese valor para formatear nuestra función de callback para formatear el valor. La función value formatter es invocada por AgGrid para cada celda. Y también va a ser invocada con este objeto params. Y así es como se ve ese objeto params. Va a, muchas de las mismas cosas que vimos en el value getter, ¿verdad? Tenemos nuestra API de cuadrícula, tenemos nuestra definición de columna, nuestra columna, nuestra API de columna, obtenemos los datos. Esta vez no obtenemos, no hay una función get value que se proporcione como parte de este valor, el objeto params. Aquí, el valor ya ha sido calculado o conocido.

Y así obtenemos el valor así como los datos completos de la fila. Y así podemos usar eso para determinar cómo queremos formatear el valor.

Saltemos esa diapositiva, acabo de hablar de eso. Así que veamos un ejemplo. Así que aquí está mi columna de precio. Y quiero tener un value formatter, y voy a recibir ese objeto params. Y voy a crear un nuevo formateador de números usando la clase international.numberFormatter. Así que voy a instanciar eso. Y voy a usar en-US para mi formateador. Tu experiencia puede variar según tus necesidades, por supuesto. Y voy a tener, proporcionar un número mínimo de dígitos fraccionarios y un número máximo de dígitos fraccionarios. Y si el valor es indefinido, simplemente voy a devolver cero. De lo contrario, voy a llamar a esa función format. Y estoy usando la clase number aquí con una función constructor para convertir el valor de una cadena a un número para pasarlo a mi formateador de números. Así que si no has usado esto antes, o tal vez estás usando una biblioteca para hacer algún formateo de números, podrías usar eso aquí también. Y puedes, en este caso, esto es lo que estoy haciendo para formatear mis valores. Y así quiero crear números con un número mínimo y máximo de dígitos o fracciones.

Fantástico, vamos a abrir un ejercicio y aprendamos cómo usar la función value getter. Así que abre este ejercicio en StackBlitz. Voy a dejar el enlace en el chat. Adelante, añade un value formatter a la columna total. Y vamos a formatear el valor usando la clase number format. Déjame volver, o en realidad creo que tengo la solución justo aquí.

Y quiero darte este fragmento de código. Pero no quiero que tengas que, si nunca has usado esto antes, no te preocupes por ello. Quiero que aprendas a usar el formatter. Eso creará una nueva instancia. Y luego verás que vas a llamar a un punto format en eso con el valor. Así que adelante, abre ese StackBlitz, añade el value formatter a la columna total.

Y vamos a formatear el valor usando ese number format que está integrado en el navegador que nos permite formatear esos números según nuestras necesidades. Así que adelante, inténtalo. Siéntete libre de cambiar la moneda si quieres. Estoy usando USD, puedes usar euros o lo que sea, o libras británicas, lo que sea con lo que quieras jugar. También puedes cargar la documentación para esto. Así que si lo haces, ups, no quería hacer eso, lo siento.

Haz mdn number formatter. Aquí vamos. Aquí están nuestros documentos, el buen viejo Mozilla. Y ahí es donde puedes ver qué son algunos de ellos. Aquí está tu, sé que teníamos a alguien que es originalmente de Alemania, tal vez quieras hacer algo así. Siéntete libre de hacer lo que sea. El objetivo aquí es aprender el valor, o value formatter. Oh, ¿lo hice, me equivoqué aquí. Creo que esto es un error tipográfico. Debería ser, decir, value formatter. Y vamos a sumergirnos directamente en nuestro value formatter. Así que vamos a añadir esto a la columna total. Así que eso va a ser una función que se llamará con los params. Puedes usar una función de flecha, o no, aquí. Voy a decir, si no params.value. No tengo un valor. Simplemente devolvamos una cadena vacía. De lo contrario, vamos a devolver nuevo, number format. Y vamos a hacer currency, US, ¿crees que es así como va esto? Estoy intentando esto directamente aquí. Veamos cómo va. Veamos si eso sale bien. Eso no se ve bien. Hay otra cosa aquí. ¿Cómo se llama? Currency, sign, no. Déjame volver a mi solución aquí. Style currency, eso es lo que es. Ahí vamos, genial. Ahora tenemos moneda de EE.UU., y tenemos el signo de dólar, nos da algunas comas, y todo eso. Se ve genial, buen value formatter. Nuevamente, podemos usar value formatters reutilizables creando una función de orden superior. En este caso, lo que voy a hacer, es proporcionar el número de dígitos, y luego voy a permitir que eso formatee el valor. Así que esto va a ser una función de orden superior. Luego la llamaré dentro de mi definición de columna. Voy a decir, oye, quiero que uses un decimal value formatter con dos dígitos, o cuatro dígitos, o cero. Y luego, tengo esto más o menos configurado y fácil de usar, porque está haciendo referencia a los dígitos en el closure. Y un ejemplo de esto es que puedo usar value formatter, y luego simplemente puedo llamar a mi decimal value formatter función de orden superior, y decir que quiero que el precio se formatee con dos lugares decimales.

Bien, hablemos sobre cell rendering a continuación. Entonces, después de que se determina el valor para la celda, y podemos obtener el valor para la celda usando la propiedad field, obtenemos el valor para la celda usando la función value gather. También podemos formatearlo opcionalmente, tal como aprendimos con el value formatter. También podemos entonces, en esto, como el tercer paso en nuestra tubería, es donde podemos usar un cell renderer. Y esto realmente nos da control total sobre cómo se renderiza la celda en AG grid. Recuerda, cada celda en AG grid es con un div. Y ahora mismo, sin ningún tipo de renderizado personalizado, solo está poniendo texto dentro de esa cuadrícula. Ahora, podemos formatear ese texto, y podemos formatearlo como moneda, o números, o lo que sea, ¿verdad? Pero aún no hemos hecho nada realmente sofisticado, ¿verdad?

Quiero señalar que los cell renders pueden ser costosos. Así que ten cuidado aquí, porque estás proporcionando la función cell renderer. Y que un cell renderer, recuerda, tal como vimos en esa demostración donde hice el console log, cada vez que se renderiza una celda, AG grid va a invocar esta función. Así que si esta función está haciendo algo realmente pesado, o conectando algo, o usando un componente realmente, realmente pesado, o algo así dentro de esa celda, vas a enfrentar esa penalización de rendimiento cuando se trata de renderizar realmente cada una de esas celdas. Puedes, por supuesto, hay formas de evitar esto. Podemos usar un componente realmente ligero, podemos simplemente usar HTML, CSS, y JavaScript vanilla dentro de nuestro cell renderer. Eso va a ser bastante eficiente. Podemos usar componentes React, esos son bastante eficientes. Si queremos hacer algo como usar Lit o Lit HTML, o Stencil para nuestros componentes, esos tienden a ser bastante eficientes. Así que hay muchas formas de abordar esto, pero solo ten en cuenta, si te encuentras con un desplazamiento lento.

Así que si estás desplazando la cuadrícula, y ves tasas de fotogramas realmente bajas, se están perdiendo fotogramas, la experiencia del usuario parece que la cuadrícula está lenta, o, ya sabes, no muy fluida. Muchas veces eso puede deberse a un cell renderer. Y estos cell renderers son, ya sabes, muy poderosos. Como dice el tío de Spiderman, ya sabes, con gran poder viene gran responsabilidad. Y por eso necesitamos tener cuidado al usar las funciones cell renderer, porque se invoca cada vez que estamos renderizando una celda. Así que un cell renderer para una definición de columna acepta lo siguiente. Podemos obtener undefined cuando renderizamos la celda, y eso solo la renderizará como contenido de texto. También podemos devolver una cadena que hace referencia a un cell renderer registrado, o podemos usar un componente React.

Así que echemos un vistazo a eso. Lo siento, vamos a echar un vistazo, para el cell renderer, si simplemente haces cell renderer: undefined, simplemente volverá al predeterminado. Así que la razón por la que menciono esto, quiero aclarar este primer punto rápidamente. Si en tu definición de columna predeterminada, tienes como un cell renderer personalizado para renderizar todas las celdas de una manera específica, podrías querer sobrescribir eso. Y ahí es donde puedes decir, en tu definición de columna, puedes decir cell renderer: undefined. Y eso le dirá a AgGrid, no, no, no, no uses, solo quiero que vuelvas a lo que estabas haciendo antes, solo renderiza este contenido de texto. También podemos especificar una cadena para un cell renderer registrado, y la razón por la que podrías querer hacer eso es que podrías querer serializar tu definición de columna y almacenar eso o persistirlo ya sea en un backend o almacenamiento local o almacenamiento de sesión o algo así. Y si estás haciendo referencia a un componente React, como la opción tres, no puedes serializar eso. Así que aquí es donde podrías querer que tu definición de columna sea serializable. Y podrías referenciar una cadena, y luego en un contexto más global, registras desde esa cadena a un componente React, si eso tiene sentido. Y no serializarías esa parte, ¿verdad? Pero podrías decir, podrías permitir que un usuario cambie cosas, como personalizar su cuadrícula, y quieren tener como un botón de guardar para guardar cómo se ve su cuadrícula, ¿verdad? Tal vez eligieron para esta columna, quieren mostrar una cosa particular o lo que sea. Y así quieres que sea serializable. Y por eso tenemos la opción número dos, y luego la opción número tres, es en lo que vamos a entrar.

Así que antes de echar un vistazo a esa función, echemos un vistazo a los params. Estos son los cell render params. Creo que tengo otro error tipográfico aquí que debería corregir. Los cell render params se llamarán con muchas de las mismas cosas que la función value formatter, que obtendremos el valor, obtenemos los datos y ese tipo de cosas. Y podremos usar ese objeto params para renderizar nuestra celda. Así que aquí hay un ejemplo. Así que aquí tengo mi precio, y en esta instancia, realmente estoy haciendo exactamente lo mismo que estaba haciendo con value formatter. Solo quería como cerrar la brecha entre estos dos. Así que aquí estoy diciendo para cell render, aquí está mi objeto params. Si no tengo un valor, devuelve null, de lo contrario, devolvamos esa moneda. Y aquí, eso es todo lo que estoy haciendo. No he devuelto ni hecho nada sofisticado.

Así que lo que quiero que hagas es, en lugar de usar este tipo de formato de número, como hicimos antes con el value formatter, también podemos devolver desde la función cell render. Aún no estamos usando un componente, solo estamos teniendo, solo hay una función vanilla. En realidad podemos devolver una cadena que es HTML que se renderizará como HTML dentro de ese elemento div. Y así, echemos un vistazo a un ejemplo de hacer eso y hacerlo juntos como un ejercicio. Así que el objetivo de este ejercicio es aprender cómo usar la función cell render. Así que vamos a abrir este ejercicio en StackBlitz, y vamos a agregar un cell render a la columna de fecha de pedido. Y lo que vamos a hacer es devolver un icono. Vamos a devolver algo de JSX que incluye un icono material junto a la cadena de fecha formateada. Así que echemos un vistazo a este ejercicio en StackBlitz juntos. Voy a copiar este enlace y ponerlo en el chat para nosotros. Cierra esto. Ups. Voy a agarrar, quiero devolver este fragmento de código aquí. Y voy a soltar esto también para que puedas seguir el ejercicio. No quiero que te enredes tratando de devolver un montón de estilos y ese tipo de cosas. Así que volvamos aquí. Y abre el ejercicio en StackBlitz. Y queremos hacer esto para la columna de fecha de pedido. Así que bajemos a la fecha de pedido, y vamos a hacer cell render. Y vamos a obtener un objeto params. Y nuevamente, podemos devolver HTML en cadena, o podemos devolver JSX. Pero voy a devolver solo una pequeña prueba aquí primero. Y veamos cómo sale esto. Esta es mi fecha de pedido. Puedo ver que ahora estoy renderizando prueba. Y lo que quiero hacer es inspeccionar esto. Y déjame sacar esta ventana de chat del camino. Y quiero entrar en este elemento. Voy a aumentar, ups. ¿Puedo simplemente aumentar la fuente aquí? Ahora esto va a ser un poco complicado aquí, pero hagamos nuestro mejor esfuerzo. Bien, así que aquí tengo mi div, ¿verdad? Y puedes ver que esta es una celda, ¿verdad? Si subo a la celda anterior, podemos ver que esto tiene un valor dentro de ella, este 497. Y nota que esto solo se está renderizando como contenido de texto. Así que AgGrid tomó el valor, lo puso dentro de este div y aquí está mi contenido de texto. Pero ahora, mira lo que he hecho aquí, es porque estoy devolviendo este JSX. Y nuevamente, también puedes devolver una cadena HTML. Creo que también puedes devolver un elemento HTML. Así que si eres realmente bueno con Vanilla JS, y quieres hacer como document.createElement, crear un div y agregar los hijos y hacer eso. Ahora es muy eficiente. Podrías hacer eso. Pero lo que te estoy mostrando aquí es que dentro de la celda, en realidad estoy renderizando como un HTML complejo. Ahora mismo solo lo envolví en un div, pero podría querer como, hacer un botón. Y ahora si vengo y miro esto, puedes ver que en realidad estoy renderizando botones dentro de mi cuadrícula, ¿verdad? Nada súper sofisticado aquí, pero lo que quería que te llevaras aquí es que con un cell renderer, como el mundo es tu ostra. Puedes hacer lo que quieras dentro de este div, ¿verdad? Así que lo que devuelva del cell renderer se renderizará dentro de este div. Y puedo agregar botones, puedo hacer cosas interactivas, puedo construir todo tipo de celdas realmente hermosas con estilo y CSS e interactividad y realmente lo que necesites hacer. Nuevamente, ten en cuenta, que podría haber una aplicación de rendimiento de todo esto, porque si tengo un componente realmente pesado que está haciendo muchas cosas dentro de él, y luego estoy desplazando mi cuadrícula, podríamos ver que a medida que desplazo la cuadrícula, cuando está creando todos estos elementos, que se vuelve un poco lento o cosas así. Pero aquí está mi botón y aquí tengo pruebas dentro de él. Así que nada súper sofisticado allí. Déjame deshacerme de estos, hacer más espacio para nosotros. Y lo que queremos hacer es decir, si no tenemos un valor, simplemente devolvamos null, de lo contrario, vamos a devolver este bonito icono. Y así que simplemente copié y pegué de la solución, algo del JSX aquí con un icono material y formateando la fecha. Y así ahora si vengo a mi fecha de pedido, obtengo este bonito icono y ahí está mi fecha formateada. Y estoy usando EN US. Y lo que es realmente agradable de esto es que con el cell render puedo renderizar lo que necesite hacer dentro de aquí. Y solo tengo algo de estilo en línea, podría hacer CSS en JS si quisiera aquí, podría, lo que necesites hacer. Así que sé que hicimos ese ejercicio juntos. Espero que hayas podido seguir mientras lo hacía. Quería realmente explicar eso para que realmente te llevaras una buena lección aquí y que el cell renderer es realmente poderoso y que nos permite construir celdas interactivas realmente geniales, exactamente lo que necesitamos tipo de cuadrículas. Así que no solo estamos mostrando datos ahora. Ahora, realmente estamos empezando a entrar en algunos escenarios complejos y divertidos donde estamos construyendo grandes implementaciones que están mostrando cosas realmente, realmente geniales si necesitamos. Así que solo un resumen rápido. Así que render es una función, se llama con nuestro objeto params y estamos devolviendo JSX que se va a renderizar dentro de esa celda. Y tenemos acceso al valor, tenemos acceso a otras cosas como parte de este objeto params, como hablamos, y podemos usar eso para renderizar celdas personalizadas. Y el cell render es lo último que sucede. Así que primero tenemos el value getter, luego el value formatter y luego un cell renderer. Déjame saber si tienes alguna pregunta sobre eso.

Sé que hicimos el ejercicio juntos. Espero que eso haya sido útil. Y sí, así que deja cualquier pregunta que tengas en el chat. Feliz de responderlas. Muy bien, vamos a echar un vistazo a la edición de celdas y parte de ese contenido. Quiero asegurarme de que estamos a tiempo. Así que estamos entrando en la edición de celdas y tenemos un par de ejercicios en la edición de celdas y luego vamos a cambiar a AG Charts aquí en un segundo. Así que comencemos con la edición de celdas. Tomaremos un breve descanso de cinco minutos. Volveremos, terminaremos la edición de celdas y luego entraremos en gráficos.

Así que podemos habilitar la edición de celdas configurando la propiedad editable en la definición de columna. Así que lo configuramos a un booleano para habilitar o deshabilitar la edición de celdas. Y también podemos configurarlo a una función para determinar si la edición está habilitada. Así que podría ser que quieras determinar programáticamente si puedes editar una celda o no. Así que una implementación muy simple es simplemente editable true y eso permitirá al usuario editar el valor dentro de la celda. También puedes determinar programáticamente si el usuario puede habilitar la edición. Así que podrías tener cosas como activar y desactivar la edición y ese tipo de cosas. También puedes habilitar la edición a través de la API de la cuadrícula. Así que programáticamente desde fuera de la cuadrícula, puedes acceder a la API de la cuadrícula y en la API de la cuadrícula, puedes alternar eso. Así que tal vez hay algún tipo de interruptor fuera de tu cuadrícula que activa el modo de edición y desactiva el modo de edición. Podrías hacer eso usando la API de la cuadrícula.

También podrías usar una definición de columna predeterminada si quisieras, y usar use memo y tener eso basado en el estado de edición activado y desactivado como quieras para resolver ese problema. Echemos un vistazo a la edición del nombre del cliente. Así que bastante simple, simplemente configuro editable a true y ahora el usuario puede editar el nombre del cliente. Aquí está cómo hacemos esto con la API de la cuadrícula. Así que con la API de la cuadrícula, invocamos start editing cell. Le damos un número de índice de fila así como la clave de columna. Puedes especificar la clave de columna cuando configuras tus definiciones de columna, verás que hay la capacidad de configurar esa propiedad col ID en el objeto de definición de columna. Y eso es a lo que me refiero aquí. La clave de columna también se genera como el nombre del encabezado que mencioné al principio de la masterclass basado en el campo. Así que si el campo está configurado a name, la clave de columna también será name. También puedes sobrescribir eso para que no te encuentres con conflictos.

Eso comenzará a editar la celda en esa fila y para esa columna, así que llegará a esa celda y luego también podemos detener la edición programáticamente usando la API de la cuadrícula. De fábrica, ag-grid proporciona un montón de editores de celdas al igual que los filtros. Así que obtenemos un editor de texto, un editor de texto grande, que es como un pop-up. Obtenemos un editor de fecha, un editor de selección y también hay un editor de selección rica y eso es solo para la versión enterprise. El editor de celdas de texto es el predeterminado. Así que cuando configuramos editable a true, obtendremos el editor de celdas de texto. También podemos usar la propiedad de definición de columna del editor de celdas para especificar un editor de celdas proporcionado o personalizado, al igual que hicimos con el filtro. Así que aquí puedo configurar editable a true y puedo decir para el editor, quiero que uses el ag-large-text-cell-editor y puedes encontrar en la documentación las referencias para cada uno de estos y también puedes crear tus propios editores de celdas. Recuerda que hablamos sobre cómo podemos registrar esos directamente con una referencia de componente o podríamos usar una referencia de cadena para la serialización de nuestra definición de columna. Aquí está el ejemplo de usar el editor de celdas de selección. Muy bien, echemos un vistazo a un ejercicio. Así que les daré un par de minutos para trabajar en este. Abre el ejercicio en StackBlitz.

Quiero que habilites la edición de celdas en la columna de nombre del cliente, habilita la edición de celdas para la columna de número de cuenta y luego usemos el ag-large-text-cell-editor para la columna de número de cuenta y veamos cómo funciona. Así que déjame dejarte este enlace en el chat y también voy a poner este texto en el chat para que no tengas que recordar cómo, cuál es el nombre de ese editor de celdas. Nuevamente, también puedes ir a la documentación y encontrarlo allí. Así que, ¿por qué no tomas un par de minutos, trabajaremos en esto y luego tomaremos un breve descanso y volveremos y aprenderemos un poco más sobre la edición de celdas y luego nos sumergiremos en AG Charts. ¿Tienes alguna pregunta? Ponlas en el chat y luego haremos el ejercicio juntos. Recibí un par de pulgares arriba y también una pregunta de Darren. Sí, Darren, llegaremos a eso justo al final de este ejercicio aquí, nos sumergiremos en la persistencia pero en general, AG Grid te da algunos callbacks o algunos eventos a los que puedes escuchar cuando se detiene la edición y ese tipo de cosas y eso te da la oportunidad como desarrollador de engancharte a ese tipo de ciclo de vida, por así decirlo, o engancharte a esa experiencia de edición y luego persistir esas actualizaciones en un backend. AG Grid no, AG Grid es como una biblioteca de JavaScript y por lo tanto no viene con ningún tipo de soluciones listas para usar para esa persistencia y depende de tu backend y tu stack tecnológico. Pero sí, podrás, serás notificado por así decirlo y puedes saber cuándo ocurrió ese cambio y luego puedes crear una mutación GraphQL, enviar una solicitud HTTP o publicar esos datos en tu backend, tal vez persistirlo dentro del almacenamiento local o la memoria. Sí, y veremos por defecto, cuando estás editando una celda, AG Grid en realidad solo muta los datos dentro de tus datos. Lo cual quizás no sea lo más útil pero sí, cuando realmente cambio esos datos, está cambiándolos dentro del objeto de datos de fila que he proporcionado a AG Grid, lo cual nuevamente, solo está mutando ese objeto pero sí, podrías conectarlo, sí, usar una solución Redux aquí, algo así, hay formas de hacerlo.

Muy bien, abramos ese ejercicio. Vamos a añadir edición de celdas a la columna de nombre del cliente. Nombre del cliente. Muy bien, si lo configuro a true y luego hago doble clic, veamos, ahí vamos. Así que todo lo que hice fue añadir editable, configurarlo a true en la definición de columna para el comp de nombre del cliente y ahora al hacer doble clic en las celdas, puedo entrar y realmente editar ese valor. Digamos que el nombre del cliente es Brian Love. Presiono enter, nuevamente, está mutando esos datos, ¿verdad? dentro de esa fila, los datos de fila que he especificado aquí. Sí, pero hay, como has preguntado, Darren, hay la capacidad de ser notificado y tener alguna idea, como cuándo ocurre ese cambio y te lo mostraré aquí en un segundo. Nah, bueno, un par de minutos, supongo. Bien, lo otro que queríamos hacer era aprender a habilitar la edición y vamos a usar el editor de celdas de texto grande en el número de cuenta. Así que en el número de cuenta, voy a venir aquí y editar esto. Parece que a veces tengo que refrescar. ¿Lo hice? No debería tener que guardarlo. Oh, ahí vamos. Ahí vamos. Y también hice pop up troop. Eso nos da un campo de texto, como en una experiencia de modal emergente para editar ese valor. Al hacer doble clic en esos, también hay algunos atajos de teclado. Creo que si lo resalto y presiono enter en mi teclado, aparece, presiono escape, se va. Así que también hay algunos oyentes de teclas allí.

Ups. Muy bien. Este es el componente del editor de celdas. Quiero ser consciente de nuestro tiempo para que podamos entrar en el tema de los gráficos. Así que voy a saltarme esta sección de componentes. Lo que quiero hacer aquí es simplemente mencionarlo rápidamente es que, así como muchas de las características de las que ya hemos hablado con Agygrid es que vienen, Agygrid viene de fábrica con algunos filtros proporcionados, editores proporcionados, pero también podemos construir editores de celdas personalizados. Y así, a menudo queremos construir un editor de celdas personalizado y queremos usar React para hacerlo. Y así, lo que quiero mostrarte es un, hagamos la demostración rápidamente. Y luego bajemos. Y puedes ver aquí que ahora para el color del producto, si hago doble clic en esto, obtengo el editor de celdas donde estoy editando usando un selector de color. Y solo estoy usando el selector de color de JavaScript incorporado de Chrome aquí en este ejemplo. Así que este es un ejemplo bastante simple de donde estoy usando un editor de celdas personalizado para realmente elegir un color diferente allí, configurarlo a rojo. Y ahora también puedo renderizar este mismo, este bloque usando un renderizador de celdas personalizado para renderizar este color, ¿verdad? Así que he combinado, déjame mostrarte de nuevo, vendré aquí, hagamos rojo de nuevo. Voy a elegir eso. Y luego cuando salga de aquí, ahora estoy renderizando eso como rojo también. Así que he combinado un renderizador de celdas aquí con un editor de celdas personalizado. Tengo este editor de color con esta entrada en él. Y eso es solo usando la experiencia de color incorporada de JavaScript. Probablemente querrías construir algo un poco mejor o más elegante en tu ejemplo. Pero el punto de eso es, es que podríamos construir experiencias de edición personalizadas también. Y luego antes de tomar un breve descanso y luego concluir con algunos gráficos, quiero mostrarte que hay la capacidad de hacer la persistencia. Y así, de fábrica por defecto, el campo está vinculado a los datos de fila, se actualiza o muta. Tenemos una función de value setter. Así que al igual que value getter, hay una función de value setter, y eso nos permite saber cuándo se ha establecido un valor. También podemos usar la API de la cuadrícula para registrar oyentes de eventos en on cell value change y on cell edit request para engancharse a esa experiencia de edición. Y eso nos permite realmente saber, hey, cuando obtenemos un nuevo valor. Así que tenemos un valor antiguo y un nuevo valor. Si son iguales, no hay problema. De lo contrario, podríamos querer realmente ir adelante y hacer algo como, en el cambio de nombre y la función de callback que se ha proporcionado a mi componente de cuadrícula. Y quiero ir yo mismo y mutar ese valor en una tienda Redux o algo así. Y así, esa es una solución bastante común. Y así, el value setter es una gran manera de hacerlo. Y luego también tenemos el on cell value changed, que registras a un nivel más alto en lugar de en un nivel de columna. Lo registras en toda la cuadrícula. Y eso nos da la oportunidad de saber cuándo se están cambiando los valores de las celdas. Pausamos allí por, tomemos solo un breve, como tres, cuatro minutos de descanso. Eso nos dará un poco de tiempo para saltar al producto AG charts que ha sido lanzado por AG Grid. Y vamos a echar un vistazo a AG charts. Vamos a echar un vistazo a un gráfico de líneas y un gráfico de barras. Y veremos si tenemos tiempo en los próximos 45 minutos para entrar en el gráfico de pastel también. Pero quiero mostrarte eso también. Porque es realmente genial lo que tienen aquí. Una gran manera de tomar esos datos que se visualizan en una cuadrícula, tomar esos datos, visualizarlos también en gráficos. Así que vamos, me detendré allí. Tomemos solo dos minutos, tres minutos. Un cuarto después volveré y comenzaremos de nuevo y nos sumergiremos en AG charts. Muy bien, vamos a concluir la masterclass de hoy con unos 45 minutos aquí. Vamos a echar un vistazo a AG charts. Déjame realmente abrir el sitio web para nosotros. Porque quiero mostrarte esto. Así que cuando vas a aggrid. com, verás que obtienes esta agradable experiencia de JavaScript. Están mostrando la cuadrícula. Puedes obtener una cita realmente genial de mí justo aquí abajo. Tengo la oportunidad de, supongo, sentarme junto a algunas leyendas realmente y grandes personas aquí, ciertamente. Creo que Tanner y Ryan son contribuyentes asombrosos al ecosistema de JavaScript. Creo que lo divertido de esto es que creo que tengo la oportunidad de compartir mi experiencia trabajando específicamente con AG Grid.

Pero definitivamente me he divertido mucho conociendo a la gente de AG Grid y aprendiendo los entresijos de realmente construir visualizaciones de datos de alto rendimiento en JavaScript. Pero echemos un vistazo a su producto AG Charts. Así que si vas a productos, y cambias esto a AG Charts ahora, aquí es donde vas a empezar a ver sus gráficos. Y tienen algunas demostraciones aquí, gráfico de barras. Aquí hay una demostración realmente genial de datos financieros. Y realmente puedes, puedes acercarte a esto. Puedes alejarte de esto, todo tipo de cosas realmente geniales. Hay una galería así como entrar en la documentación. Y si estás buscando una biblioteca de gráficos, que funcione realmente bien con su producto Grid. AG Charts es un gran lugar para mirar.

Bien, cerremos esto y sumerjámonos de lleno. Voy a cambiar y dejar un enlace para ti en el chat. Aquí está nuestro enlace a nuestro repositorio de AG Charts. Nuevamente, esto es público. Voy a dejar esto aquí mismo. Y tenemos todos los desafíos y las soluciones. También hemos creado PRs para estos. Así que vamos a echar un vistazo al gráfico de líneas. Y cuando entremos en el ejercicio, podrás entrar y ver exactamente de qué trata ese ejercicio. Pero sumerjámonos de lleno en AG Charts.

Así que al igual que AG Grid, instalar AG Charts es una instalación de NPM con AG Grid. Disculpa. Encontré otro error tipográfico hoy. AG Charts React. Y también puedes instalar el módulo comunitario de AG Charts también. Eso te dará algunos de los tipos adicionales que vas a necesitar. Hoy, nos vamos a centrar principalmente en construir algunos gráficos basados en series. Así que tienen gráficos financieros y gráficos geográficos. Pero vamos a ver gráficos basados en coordenadas X-Y cartesianos que están basados en series. Y usaremos el componente AG Charts en lugar del componente AG Grid. Usaremos el componente AG Charts. Y la forma en que conectamos las cosas en AG Charts es usando la propiedad options, y eso contiene los datos así como las definiciones de series. Así que un poco diferente de AG Grid. En AG Grid, teníamos definiciones de columnas y datos de filas. Establecíamos esas propiedades en el componente. En este caso, le damos el objeto options. Y dentro de ese objeto de opciones de AG Chart, tenemos una propiedad de datos así como una definición de series. Y vamos a echar un vistazo a eso ahora mismo. Así que veamos los datos. Así que en este caso, tengo algunos datos de series temporales con algunos valores. Así que no muy diferente de nuestros datos de filas, ¿verdad? Así que aquí tengo una fecha así como un valor. Y así en esta fecha, este valor, y voy a trazar eso en mi gráfico cartesiano. Así que aquí estoy creando un componente. Voy a llamar a esto Chart. Y voy a seguir adelante y con el hook use memo, voy a definir mis opciones de gráfico. Y mis opciones van a ser del tipo AG Chart options. Y he establecido mis datos. Y luego voy a devolver el componente AG Chart, y voy a establecer la propiedad options. Así que es bastante fácil comenzar con AG Charts, al igual que AG Grid. Me encanta la belleza de lo rápido y fácil que es trabajar con estas cosas. Lo siguiente que necesito hacer es especificar la serie. Así que en este ejemplo, voy a crear un gráfico de líneas. Y así en mis opciones, voy a especificar los datos así como una propiedad adicional llamada series. Y esto va a ser un array de series porque puedo apilarlas. Puedo tener múltiples líneas, o podría tener un gráfico de barras como un gráfico combinado, como un gráfico de barras con un gráfico de líneas también dibujado en él. Y así aquí en la forma más simple, lo que voy a hacer es especificar el tipo para ser line. Y eso le va a decir a AG Charts que quiero construir un gráfico de líneas. Y luego necesito especificar las propiedades X y Y key. Y un poco como lo que aprendimos con AG Grid donde tenemos una propiedad de campo, esto necesito especificar, en lugar de solo un campo único, necesito especificar para mi eje X así como para mi eje Y. Necesito especificar qué campos o como dónde en mis datos obtener esto. Y así la X key va a ser mi fecha, y luego mi Y key va a ser mi valor. Así que a lo largo del eje X, voy a tener mis datos de series temporales, y en mi eje Y es donde voy a trazar o graficar ese valor. Y luego devuelvo los gráficos AG o los renderizo. No tiene que ser devuelto desde este componente. Podrías tener esto como, ya sabes, lo que necesites hacer, puedes usar ese componente de gráfico AG dentro de lo que estés construyendo con React. Y así es como comenzamos con AG Charts. Creamos los datos, proporcionamos los datos al gráfico, y luego comenzamos a proporcionar series. Y en este ejemplo, tenemos una sola serie que es una serie de líneas, y luego le hemos dicho a AG Charts que use la X key y la Y key basadas en los datos que he proporcionado. Vamos a profundizar un poco más en eso y echemos un vistazo a un ejemplo. Así que en estos ejemplos, vamos a construir algunos gráficos, vamos a hacer gráficos de líneas, gráficos de barras y gráficos de pasteles. Y usamos la biblioteca AG Charts para hacer eso. Y vamos a mostrar datos de vuelos. Así que nuestro modelo de datos es realmente simple. Está basado en la siguiente interfaz. Tengo un vuelo y el vuelo está asociado con una fecha y el tiempo o la duración de ese vuelo. Así que la fecha y el tiempo, así que tengo datos de series temporales. La propiedad de fecha va a ser un objeto de datos de JavaScript que representa la fecha del vuelo. Y el tiempo es un número que representa la duración del vuelo en horas. Así que comencemos construyendo un gráfico de líneas básico que muestre nuestros datos de vuelos. Así que aquí están mis datos. Voy a usar una función que estoy exportando llamada get data. Y al igual que AG grid, básicamente voy a darle todos los datos aquí y decir, hey, quiero que representes estos datos en un gráfico de líneas. Aquí está mi serie. Y eso está especificado. El tipo es line. Mi X key es esa fecha. Eso es lo que va a estar en el eje X, mi serie temporal. Y luego la Y key es el tiempo o la duración del vuelo. Y luego también puedo dar como una etiqueta o un nombre y eso será útil para las herramientas. Así que dirá tiempo de vuelo, dos puntos, lo que sea que sea ese tiempo.

Y eso va a renderizar nuestra aplicación de gráficos. Así que por defecto, AG Charts generará automáticamente los ejes para el gráfico. Así que no le hemos dicho explícitamente a AG Grid cómo hacer los ejes. Por defecto, generará esos ejes para nosotros. También podemos especificar el tipo de ejes a usar para cada dimensión. Y hay tres tipos básicos de ejes disponibles. Tenemos number para datos numéricos continuos. Tenemos category para datos discretos, lo cual es realmente útil para gráficos de barras, gráficos de pastel, cosas así, donde podrías estar haciendo agrupaciones de datos en categorías discretas. Y luego también tenemos time para datos basados en tiempo o datos de series temporales. Un eje numérico se usa para mostrar esos datos numéricos continuos. Así que usemos nuestro gráfico de líneas, actualicemos nuestro gráfico de líneas para usar un eje numérico para el lado izquierdo del eje Y. Así que aquí está mi gráfico de líneas. Además de series y datos, también voy a proporcionar la propiedad de ejes a mis opciones. Y voy a decir, tengo un eje de tipo number, y ese va a ser el eje Y a la izquierda. Y sigamos construyendo eso con nuestros datos de vuelos. Y ahora voy a añadir otro eje. Y voy a especificar que este sea un eje de tiempo. Y ese va a ser mi eje X. Voy a posicionarlo en la parte inferior. Y luego también voy a configurar algunos intervalos, lo cual es bastante genial. Cuando estás usando ejes de tiempo en comparación con ejes numéricos, obtienes un par de opciones adicionales, y puedes especificar que quiero que el intervalo sea cada mes, por ejemplo, aquí. Y también puedo formatear la etiqueta para ese eje basado en un formato específico que es proporcionado por AG Charts. Y puedes encontrar eso en su documentación.

Bien, entonces queremos crear, queremos hacer nuestro primer desafío en StackBlitz, y vamos a hacer este juntos. Así que comencemos. Lo primero que queremos hacer es, añadamos un título al gráfico, y luego vamos a crear una serie de tipo line. Y vamos a establecer las propiedades X key, Y key, y Y name. Y luego entraremos en la adición de los ejes. Así que adelante, abre ese desafío en StackBlitz. Déjame dejar ese enlace en el chat para ti. Y sigamos adelante y comencemos a construir algunos gráficos juntos.

Bien, ahora mismo puedes ver que no tengo nada mostrado porque aún no he conectado nada. Así que lo primero que necesito hacer es que voy a entrar aquí a mi serie, y voy a especificar series, voy a decir que esto va a ser un gráfico de líneas. Y luego voy a especificar la X key, y la X key va a ser mi fecha. Mi Y key va a ser el tiempo, el valor de ese vuelo. Y ejecutar gráfico de líneas. Démosle un título también. Y el texto, vamos a llamar a esto tiempo de vuelo. Y debo tener, ah sí, necesito realmente renderizar el gráfico AGI. Déjame hacer eso. Así que vamos a hacer gráfico AGI, y vamos a especificar las opciones, y vamos a vincular eso a nuestra prop de opciones. Ups, gráfico AGI. Y gráficos AGI. Y cerrarlo automáticamente. Ahí vamos. Así que ahí está nuestro tiempo de vuelo. Y tengo mi serie, tipo igual a line, déjame asegurarme de que tengo esto correcto, gráfico de líneas. Tipo igual a line, déjame asegurarme de que tengo esto correcto, línea fecha hora. X key, Y key. Déjame tomar esto. En caso de que haya cometido un error aquí. Vamos a deshacernos de los ejes por ahora. Y esto está realmente ajustado con algunas etiquetas realmente ajustadas. Pero tengo, tengo un gráfico de líneas aquí. No diría que esto es utilizable. Esto parece, sí, esto parece difícil. Así que tenemos trabajo por hacer. Así que comencemos especificando los ejes. Aquí están nuestros ejes. Y lo primero que queremos hacer es que vamos a poner un eje. Déjame solo tomar esto en el lado izquierdo. ¿Eso está bien? Bien, ahora estamos empezando a mejorar un poco aquí. Así que tengo ejes a la izquierda y puedo pasar el cursor sobre. No he dibujado un eje inferior. Así que realmente limpié las cosas porque tenía todas esas etiquetas realmente largas que eran difíciles de leer, ¿verdad? Pero de inmediato, puedo ver aquí que obtengo un buen gráfico. Es realmente eficiente. Puedo desplazarme un poco. Estoy obteniendo un buen tooltip aquí. Es bastante grande porque las fechas son realmente largas aquí. Así que adelante y configuremos nuestros otros ejes. Así que vamos a usar un eje de tiempo. Y vamos a venir aquí y dejar eso. Bien, y ahora las cosas se ven mucho mejor. Así que ahora tenemos nuestros ejes de tiempo en la parte inferior. Estoy agrupando estos, los intervalos por mes. Así que todavía los está dibujando como entre los meses, ¿verdad? No es como si estuviéramos haciendo algún tipo de resumen o categorización o todavía estamos mostrando cada elemento en nuestros datos de series temporales. Pero estamos mostrando la parte inferior es como por el intervalo del eje inferior, eje X, es por mes. Y hago eso especificando el paso y traemos este tiempo y el tiempo se importa, si podemos encontrarlo desde la biblioteca de la comunidad AGCharts. Así que traemos este tiempo, es una constante, traemos eso y estamos haciendo referencia a la propiedad del mes. Y eso es lo que le dice a AGCharts que el intervalo sea por mes. Y luego también tengo una propiedad de etiqueta para mis ejes y he especificado el formato y uso esta cadena de formato y puedes encontrar referencia para esto en el sitio web de AGCharts. Y ahora puedes ver que a medida que paso el cursor sobre estos y estoy mirando cada uno de los elementos en mi gráfico, tengo este gráfico realmente bonito de tiempo de vuelo basado en la fecha y la duración de ese tiempo. Y ese es el desafío para el gráfico de líneas. Así que lo que quiero hacer es que ya lo recorrí, pero quiero darte la oportunidad de comenzar a jugar con este StackBlitz y comenzar a jugar con AGCharts. Así que ya dejé el enlace en nuestro chat. Así que una vez que vayas y completes este ejercicio tú mismo. Así que ya lo recorrí, así que espero que eso haya ayudado. Así que adelante y abre ese ejercicio. Puedes añadir el título del gráfico, establecer eso en tiempo de vuelo. Esa es la prop de título que viste. Déjame dejar este enlace también, esto es útil mientras estamos sumergiéndonos rápidamente en una nueva API. Ese PR, te mostraré la diferencia entre el desafío, sí, el desafío y la solución. Así que podrás mirar eso y referenciar eso. Y una vez que entres y comiences a construir ese gráfico de líneas. Así que me encantaría que tuvieras la oportunidad de comenzar a jugar con AGCharts. Así que ¿por qué no tomamos unos cinco minutos, te dejamos trabajar en este desafío tú mismo. Y luego, una vez que tengas el desafío y estés listo para continuar, adelante y dame un pulgar arriba en el chat. Y luego vamos a seguir adelante y echaremos un vistazo al gráfico de barras a continuación. Si tienes alguna pregunta, déjalas en el chat también y me encantaría responder cualquier pregunta que pueda. Déjame también, por si acaso te lo perdiste, aquí hay un enlace a donde estamos en el contenido del curso. Por si acaso estás regresando, tomaste un descanso. Nos hemos movido de AGGrid, ahora estamos viendo AGCharts y visualizando algunos de estos datos en un gráfico de líneas. Y tenemos un ejercicio divertido para que trabajes. Suena genial, parece que un par de personas ya han terminado, increíble, me encanta. Déjame darte un par de minutos más para trabajar en eso. Y luego entraremos en el gráfico de barras y el gráfico de pastel. También puedes, aquí está la solución también. Como sacarlo en StackBlitz y seguiremos adelante con el gráfico de barras. Bien, genial. Así que construyamos un gráfico de barras básico que muestre algunos datos de vuelos. Así que en este caso, vamos a estar como categorizando cosas en categorías usando nuestros datos que tenemos, nuestros datos de vuelos, y vamos a estar mostrando gráficos de barras. Así que, como probablemente ya adivinaste, cambiar entre un gráfico de líneas y un gráfico de barras es bastante sencillo. Tenemos que como resumir nuestros datos.

Así que hay algunos cálculos que se realizan en tiempo de ejecución, y te mostraré eso aquí cuando lleguemos a StackBlitz. Pero en general, lo que vamos a hacer es establecer nuestros datos, y luego también vamos a especificar la serie para nuestro gráfico de barras. Y el tipo se establecerá en bar, y tenemos nuestra X key así como una Y key. Y esto, para esto, la X key seguirá siendo una especie de nuestra serie temporal, pero será una especie de serie temporal completa que se categorizará por mes. Así que vamos a tener una key en nuestro valor llamada month, y luego una Y key para nuestro eje Y llamada time en nuestros datos también. Y luego he especificado un Y name para esto. Así que se usa un eje de categoría para mostrar puntos de datos discretos.

En este ejemplo, estamos usando la propiedad month como el eje de categoría. Así que echemos un vistazo a nuestros ejes. Así que aquí tengo lo mismo que teníamos antes. A la izquierda en nuestro eje Y, tengo tipo de número. Y luego esta vez, en lugar de una serie temporal para nuestro eje X, tengo categoría como el tipo. Así que he especificado tipo y he especificado categoría. Y he posicionado esto en la parte inferior. Y para la etiqueta, en lugar de un formato, he proporcionado un formatter. Y así para la propiedad de etiqueta, tengo un formatter, que es muy similar a lo que aprendimos en AV Grid con nuestro value formatter, en que eso se llama con nuestros params. Y usando esos params, puedo decir de nuestros datos en el índice particular, quiero que vayas y obtengas la etiqueta.

Así que he determinado la etiqueta como de antemano en nuestros datos. Así que saltemos al desafío aquí. De hecho, voy a ir directamente a la solución. Y quiero mostrarte cómo se ve ese tipo de datos y mostrarte el ejemplo. Y luego te voy a dejar que trabajes en el desafío. Bien, así que esto es lo que parece nuestro gráfico de barras. Así que ahora hemos agrupado o agrupado o resumido, como quieras pensarlo, nuestros datos en grupos discretos o categorías por mes. Así que he sumado los datos para junio, julio, agosto, septiembre y octubre. Y tengo este bonito tooltip, y tenemos nuestras etiquetas en la parte inferior, se ve muy bien, gráfico de barras muy bonito. Y estoy usando este use roll up data. Así que quiero saltar rápidamente a esto. No es importante mirar todo este código. Pero lo que estoy haciendo es tomar esos datos de series temporales, y voy a reducir eso y crear un array de objetos de datos que tiene una etiqueta, un mes y un tiempo en él. Así que eso es lo que parece mi datum. Y he definido bar chart datum como una interfaz. Así que cada datum en mi gráfico va a tener una etiqueta. Va a tener un mes y un tiempo.

Y ese tiempo es la duración, el valor sumado. Quizás hubiera sido mejor llamar a esto simplemente valor o tiempo total o algo así. Y así es donde el valor de tiempo es 4.5. La etiqueta es junio. Y luego el mes es un número. Así que, seis, siete, ocho, nueve, diez, en este ejemplo. Y así es de donde provienen mis datos. Volvamos al gráfico de barras. Y así es como obtengo mis datos resumidos. Podrías querer resumir los datos en el backend. Aquí lo estoy haciendo todo en el cliente. Oh, ¿hay un junio? Sí, hay un error aquí. Buen hallazgo, hombre. Debo, Darren, sí, buen llamado ahí. Parece que aquí, ¿qué hice para la etiqueta? Así que esto está haciendo daytime desde el objeto mes, número mes. Que debería estar viniendo de allí a locale string mes largo. Y luego el mes es ese número.

Debo haber hecho algo mal con mi, las fechas son difíciles. Sí, debo haber hecho algo mal con mi análisis aquí para crear esa etiqueta. Porque eso debería haber sido junio, julio, sí. O tal vez hice algo en el tooltip real. Podría tener que profundizar un poco más en eso para ver qué está pasando allí. Así que tengo mi formatter para la parte inferior, que es correcto, junio, julio, agosto, septiembre. Pero en el tooltip, está mostrando lo incorrecto. Sí, eso es un buen hallazgo. Tendré que arreglar eso. Podría ser un error tipográfico o podría ser que hice algo mal aquí. Bien, echemos un vistazo. Así que tenemos nuestros datos.

Especifiqué el título con el texto flight time by month. Y eso se muestra en la parte superior del gráfico. Tengo mi serie y tengo el tipo configurado en bar. Tengo mi X key de month, mi Y key es time. Nuevamente, eso se remonta a nuestro datum. Así que tengo el número del mes y tengo el tiempo que es como el valor o el tiempo total para ese mes. Y luego mi etiqueta. Y luego el Y name es flight time. Y es por eso que cuando paso el cursor sobre esto, esto se ve correcto de todos modos, que en el flight time, los valores son correctos. Hay 5.9, pero todavía dice June. Pero veo que la etiqueta aquí dice flight time en ese tool tip. Y así es de donde viene eso. Y luego el eje, tengo tipo de number y lo he posicionado en el lado izquierdo. Y aquí es donde estoy usando ese category axis y lo estoy posicionando y configurando la posición en la parte inferior para poner el category axis en la parte inferior de mi gráfico. Y luego he especificado una función de callback para formatter, que va a formatear la etiqueta que se va a mostrar aquí en el eje. Y luego estoy devolviendo AG charts y he configurado las opciones. Así que así es como se ve nuestro gráfico de barras.

Así que quiero que sigas adelante y ejecutes nuestro desafío aquí. Debería tomar un par de minutos. Nos quedan unos 15 minutos en nuestra masterclass juntos. Así que adelante, abre el desafío en StackBlitz. Y este, también puedes venir aquí a las pull requests en nuestro AG charts con React 2024. Y echemos un vistazo al gráfico de barras y vamos a los archivos. Y voy a tomar este enlace y se los dejaré aquí. ¿Y cómo cambio esto a media group chat? Genial, así que ahí está el PR. Así que realmente podrías ver la solución si necesitas referenciar eso. Pero, ¿por qué no tomas un par de minutos? ¿Por qué no tomas cinco minutos y comienzas a trabajar en este desafío y construyendo el gráfico de barras.

Ahora no necesitas preocuparte por los datos, ¿verdad? Porque si vuelves al desafío, puedes ver que ya hemos conectado los datos para ti que están usando los datos acumulados. Así que no te preocupes por escribir el mapeo y filtrado y reduciendo y lo que sea que esté dentro de ese hook. Los datos ya están traídos para ti y el título ya está ahí. Tu objetivo es configurar la serie y los ejes. Y te daré un par de minutos para trabajar en eso. Y luego, una vez que hayas terminado con eso, o estés listo para continuar, deja un pulgar arriba en el chat y sabré que estás listo. Y luego echaremos un vistazo al gráfico de pastel. Si quieres bifurcar mi solución y arreglar mi representación del tool tip, también puedes, no profundizamos mucho en AD charts en esta masterclass, pero puedes, con la representación del tooltip, también puedes proporcionar una función de renderizado personalizada. Similar a lo que aprendimos sobre AG Grid con self-renderers. Así que, de alguna manera, de fábrica, los tool tips son, ya sabes, son geniales. Están formateados. Te muestran como, aquí está el nombre y aquí está el actual, ya sabes, valor, y todo eso basado en lo que conectas en el gráfico. Pero ciertamente es útil si quieres hacer algún tipo de estilo realmente avanzado o ese tipo de cosas. También hay una oportunidad allí para construir eso y personalizar el tool tip. También notarás que en la, creo que esta es la solución, ¿verdad? Sí, también he conectado un tema como una propiedad en las opciones del gráfico. Y así, si has estado curioseando en esto, probablemente viste, oh, esto es un poco, se ve un poco diferente de tal vez algunas de las demos que obtendrás cuando vayas directamente a la galería o lo revises en el sitio web de AG Charts. Y lo hice a través de este tema y dentro del archivo de tema, lo abro para ti rápidamente, puedes ver que le he dado una paleta con varios colores para el relleno. Y luego he sobrescrito algunas de las cosas comunes como el fondo, el título, el padding, el tool tip, le he dado una clase personalizada, y así es como hice gran parte del estilo para el tool tip, darle este aspecto vidrioso, que creo que es bastante genial. Y creo que quité la flecha, de lo contrario puedes mostrar como una flecha en la parte inferior o lo que sea. Actualicé un poco la leyenda, y luego puedes entrar específicamente en cada tipo de eje. Recuerda que aprendimos sobre los diferentes tipos de ejes de categoría numérica tiempo. Y así para cada uno de estos, puedo estilizar cosas como las líneas, los trazos, tech, etiquetas, líneas de cuadrícula, y ese tipo de cosas. Y así es como se hace aquí. Y luego para cada tipo de gráfico, también puedes sobrescribir cosas como se muestra ese gráfico. Así que en el gráfico de líneas, la forma del punto era un círculo, puedes cambiarlo a como un cuadrado y otras cosas así. Aquí está tu gráfico de barras, configurando el color de la etiqueta y eso. Y luego aquí hay algo de configuración para el gráfico de pastel también que hace parte del estilo. Y así puedes crear este tema y compartirlo nuevamente, exportarlo. Es solo una constante que puedes conectar en tus varios gráficos y lo llevas al gráfico de barras en las opciones, solo especificas tema y luego usas eso como estilo personalizado. Y luego también tengo algo de CSS para el tool tip y cosas así también. Si quieres curiosear en las muestras aquí.

Okay, good. Vamos a seguir adelante y avanzar y cubramos el gráfico de pastel. El gráfico de pastel es muy similar a nuestro gráfico de barras, una configuración un poco diferente, pero honestamente muy similar. Vamos a llenar nuestros datos por mes. Vamos a proporcionar nuestros datos a las opciones de AG chart. Y luego también vamos a proporcionar nuestra serie. Y en este caso, para nuestra serie, vamos a establecer el tipo como un gráfico de pastel. Y luego aquí, en lugar de X key o Y key, se llama angle key, lo cual tiene mucho sentido y esto vamos a usar esa propiedad de tiempo de nuestros datos para esos valores. Y luego devolvemos nuestro componente de AG charts con la propiedad de opciones configurada. También podemos especificar algunas etiquetas también. Así que las propiedades de clave de etiqueta de llamado se utilizan para mostrar la etiqueta de la porción del gráfico de pastel y las propiedades de clave de elemento de leyenda se utilizan para mostrar la etiqueta de la leyenda. También puedes poner una etiqueta dentro del gráfico de pastel, que creo que se llama clave de etiqueta de sector o una etiqueta de sector. Y puedes configurarlo también. Y en este caso, estoy haciendo referencia a la propiedad de etiqueta en mis datos para la leyenda en el llamado. Y déjame mostrarte eso aquí, haremos una demostración de la solución y te daré algo de tiempo para hacer el desafío tú mismo. Nuevamente, estoy trayendo esos datos acumulados. Tengo mi título. Y luego aquí está mi serie donde he especificado la clave de ángulo y las diversas etiquetas. Y así los tool tips funcionan esta vez en términos de que al pasar el cursor sobre estos, puedo ver cada uno de los valores para cada categoría. Y no obtengo una leyenda. Creo que porque no hay suficiente espacio y luego ahora al pasar el cursor sobre cada uno de estos, también obtengo la etiqueta correctamente para junio, julio, agosto, septiembre, octubre aquí en mi gráfico de pastel. Así que, ¿por qué no tomas un par de minutos? Voy a volver aquí. Déjame dejarte el enlace al stack blitz así como echar un vistazo a las solicitudes de extracción. Si quieres echar un vistazo a la solución para el gráfico de pastel te doy ese enlace también. ¿Por qué no tomas unos dos minutos rápidamente antes de que terminemos las cosas? Vuelve aquí. Y para este desafío, vas a actualizar el gráfico de pastel para mostrar el tiempo total de vuelo por mes usando el conjunto de datos proporcionado. Nuevamente, no necesitas hacer ese acumulado. Ya tienes los datos definidos y usamos el hook para obtener esos datos. Así que vas a crear una serie de tipo pastel. Establece la clave de ángulo en tiempo. Esto representa el tiempo de vuelo para cada porción y luego establece esa clave de elemento de leyenda en etiqueta así como una clave de etiqueta de llamado en etiqueta. De esa manera podemos establecer la etiqueta para la leyenda así como el tipo de llamado que se apunta desde cada una de las porciones del gráfico de pastel. Y si quieres, puedes jugar con los documentos y también puedes poner una clave de etiqueta de sector allí. Si quieres realmente poner el valor dentro de cada uno de los, los llamo porciones, pero dentro de cada sector del gráfico de pastel. ¿Por qué no tomas un par de minutos, trabaja en eso. Y luego una vez que hayas terminado con el desafío o estés listo para continuar, dame un pulgar arriba en el chat.

Bien, así que vamos a crear una serie de tipo pastel. Ven aquí, crea una serie. El tipo va a ser pastel. Así que de inmediato, tenemos eso en marcha. Y luego vamos a hacer la clave de etiqueta de llamado. Esta va a ser nuestra etiqueta. Ahora obtenemos nuestras etiquetas de llamado. No tenemos ninguna de la leyenda. Supongo que se está extrayendo del mismo. Debe heredar allí, ¿eh? Eso es genial. Creo que siempre he especificado esto. Pero parecía que la leyenda lo trajo. Supongo que si quisieras etiquetas diferentes de la leyenda al llamado, eso te da una oportunidad de personalizar eso también, lo cual es realmente agradable. Pero genial, ese es nuestro gráfico de pastel. Se ve realmente bien. Fantástico. Bien, genial, terminaremos aquí. Solo déjame dejarte el enlace aquí también. Siempre puedes volver y revisar el contenido del curso aquí en liveloveapp. com slash courses. Y si estás buscando una revisión de arquitectura gratuita, si estás buscando a alguien que venga, mire la arquitectura de tu aplicación, te ayude con alguna implementación de AG grid, ven a echar un vistazo a nuestro sitio web liveloveapp. com. Nos encantaría ayudarte con tu proyecto de AG grid o tu proyecto de AG charts. Hacemos mucha visualización de datos. Trabajamos con muchas empresas FinTech y financieras y startups, bancos, ese tipo de cosas. Mostrando realmente muchos datos ricos y realmente complejas visualizaciones de datos donde el rendimiento es realmente importante. Y eso es algo que hacemos. Nos encantaría ayudarte con eso. Pero muchas gracias por asistir a mi masterclass. Gracias a todos por trabajar en los ejercicios. Espero que hayas obtenido un buen manejo de algunas de las características y cómo simplemente comenzar y trabajar con AG grid. Nos saltamos un poco de esa edición de celdas. Así que si quieres, vuelve y repasa eso, puedes ver cómo puedes engancharte en esa edición de celdas para realmente persistir esa edición y los datos. Y sí, por supuesto, también puedes consultar los documentos. Déjame dejarte un último enlace aquí también. Aquí están los documentos para AG grid y AG charts. Recuerda, si necesitas cambiar entre los productos, ven aquí a esta pantalla de productos, a veces lo olvido, y luego presiona AG charts, y luego puedes ir a los documentos, y luego puedes bajar aquí y puedes echar un vistazo a lo que sea, PyChart. Y tienen algunas buenas demostraciones para ti. Echa un vistazo al código, entra y aprende cómo hacerlo. Con eso, muchas gracias. Fue un placer conocer a todos. Disfruta el resto de tu día, tu noche, y la Conferencia React Advanced. Y gracias a AG grid por permitir que level of app presente esta masterclass. Y gracias a los organizadores de React Advanced. Cuídense, todos. Nos vemos.