Potente Visualización de Datos con AG Grid y AG Charts

Vamos a empezar. Primero, me gustaría presentarme. Mi nombre es Mike Ryan. Soy un experto desarrollador de Google en Angular y tecnologías web. Soy uno de los creadores de NGRX. Es una de las bibliotecas de gestión de estado más populares en el ecosistema de Angular. Pero hoy estamos aquí para hablar sobre cómo usar Aggrid con React.

Así que primero comenzaré con por qué Aggrid. Bueno, si has visitado el sitio web de Aggrid, tienen este titular de marketing de ser la cuadrícula de JavaScript más rápida del mundo. Y realmente creo que eso es cierto. Es de un rendimiento extremadamente alto. Utiliza muchas características de rendimiento útiles bajo el capó, como la virtualización y mucho almacenamiento en caché pesado para ofrecer a los usuarios una gran experiencia al ordenar, filtrar y agregar a través de grandes conjuntos de datos. Personalmente, he usado Aggrid con algunas de las compañías bancarias y financieras más grandes en los Estados Unidos y he visto a estas compañías poner millones de registros en Aggrid y los usuarios aún pueden acceder a esos datos a una velocidad increíble.

Pero no se trata solo de velocidad y rendimiento. Aggrid también tiene muchas características integradas que creo que son esenciales al intentar construir esas características similares a Excel en nuestras aplicaciones. Como ya he mencionado, hace filtrado y ordenación. También hace agregación, agrupación y pivote. Puede exportar resultados a Excel u otros formatos. Puedes adjuntar gráficos realmente bonitos para visualizar los datos que pones en Aggrid. Y lo mejor de todo, funciona muy bien con React. Así que si quieres incorporarlo a tu proyecto de React, es una de las mejores cuadrículas por esa razón.

Hoy vamos a usar diapositivas del sitio web de LiveLab App. LiveLab App es mi consultoría. Yo, junto con Brian Love, otro experto desarrollador de Google en tecnologías web, ofrecemos formación, masterclasses y servicios de consultoría a través de LiveLab App. Así que si quieres ver más sobre LiveLab App, eres bienvenido a unirte o revisar nuestro contenido. Pero para las diapositivas, puedes usar este enlace. Para todas las diapositivas de hoy, lo que haremos es ir pasando por esta masterclass y todas estas secciones tendrán diferentes desafíos presentados a través de StackBlitz. Así que cuando lleguemos a los ejercicios, los abrirás en StackBlitz. Traerá un entorno de desarrollo completo de React para que realicemos esos desafíos. Así que con eso, comencemos con Aggrid.

Entonces, si estás tratando de incorporar Aggrid en tu propio proyecto, comienza ejecutando npm install dash save aggrid react. Y eso traerá el conjunto de módulos comunitarios necesarios para comenzar a usar Aggrid en tu proyecto. Además, necesitas traer un par de archivos CSS. Así que debería haber el archivo CSS base. Y luego Aggrid realmente viene con una serie de temas diferentes. Hay un tema material, un tema quartz. Hay un nuevo tema de Aggrid en el que acaban de trabajar y lanzar el año pasado que trae un modo oscuro. Puedes explorar todos los diferentes temas en la documentación de Aggrid para ver si alguno de los integrados es de tu agrado. Y si no te gusta ninguno de los integrados, está muy bien documentado cómo crear tu propio tema. Así que nuevamente, Aggrid es flexible. Está diseñado para ser integrado en tu aplicación y para que se vea y se sienta como tu aplicación. Y sus capacidades de tematización ciertamente apoyan esa característica.

Vamos a comenzar con cómo realmente obtener datos en Aggrid desde nuestro proyecto React. Y cada implementación de Aggrid comienza definiendo las columnas que se mostrarán en tu cuadrícula. Cada columna se define usando este objeto call def. Es una abreviatura de definición de columna. Por defecto, las columnas se posicionarán en el orden que coincide con la definición de columna especificada. Así que vamos a crear un array de definiciones de columnas, y vamos a suministrarlas a Aggrid. Y ese orden en ese array dictará en qué orden se mostrarán dentro de la cuadrícula. Para hacer eso, vamos a crear ese array, y luego lo vincularemos a la prop column defs en el componente Aggrid React. Vamos a importar ese componente Aggrid React del paquete Aggrid React. Además, como puedes notar, también tendremos que poner algunas clases de tema en un elemento contenedor. Así que aquí tengo un div con un nombre de clase de ag-theme-quartz-auto-dark. Eso significa que vamos a aplicar ese tema quartz. Va a hacer la transición automáticamente entre claro y oscuro, pero comenzará en oscuro, basado en las preferencias del sistema.

A continuación, necesitamos definir esas definiciones de columnas. Mi forma favorita de hacer esto es primero definir una interfaz para los datos reales que vamos a vincular en nuestra cuadrícula. Así que espero que la mayoría de ustedes estén familiarizados con TypeScript. Si no, intentaremos mantener TypeScript algo ligero aquí en esta masterclass. Pero para nuestros desarrolladores de TypeScript, en este caso, nuestros datos de fila aquí serán una colección de colores. Esos colores tendrán un nombre y, por supuesto, el color asociado. Luego, para nuestras definiciones de columnas, voy a usar el hook use date. ¿Por qué es esto? Bueno, en futuros desafíos, querremos poder actualizar las columnas que estamos mostrando en nuestra cuadrícula. Y así, ponerlas en un hook use date nos permitirá primero suministrar ese valor inicial al componente AGGridReact. Y luego, cada vez que queramos cambiar o actualizar estas definiciones de columnas, tendremos esa función de callback set column defs que podemos llamar para cambiarlas. Y para el tipo de esto, voy a importar la interfaz call def directamente de AGGridReact. Y acepta un parámetro de tipo genérico, que es el tipo de datos que realmente estamos vinculando. Así que puedes ver aquí que voy a pasar un array de definiciones de columnas basado en esta interfaz de datos de fila que definí arriba. Para cada uno de estos, vamos a suministrar al menos dos valores. Vamos a decirle a AGGrid cuál es el nombre de esta columna, y luego qué campo en nuestra interfaz de datos de fila debería usar para renderizar las celdas para esa columna en particular.

Así que, por ejemplo, aquí tengo un encabezado llamado nombre. Y va a usar el campo nombre para mostrar datos. Así que para cada elemento de datos que tenemos, tendremos una columna llamada nombre. Y va a buscar esa propiedad de nombre de nuestros datos de fila para poblar esa celda. Vamos a tener una segunda columna llamada color. Nuevamente, al igual que el campo nombre, va a tener un título color y luego va a usar la propiedad color en nuestros datos de fila para poblar esas celdas. Así que en su forma más simple, ¿qué está haciendo una definición de columna? Bueno, está diciendo a AGGrid, aquí está el nombre que deberíamos usar para el encabezado de la columna. Y aquí está cómo buscar datos dentro de nuestros datos de fila para realmente poblar esas celdas. Puede que hayas notado que uso la cadena para ese campo.

Y estoy emocionado de informarte que admite referencias anidadas o profundas. Así que puedes usar la notación de punto si estás tratando de recorrer objetos complejos. También puedes, como veremos más adelante en la masterclass, usar otros medios de realmente poblar esas celdas además de solo un campo basado en cadena. Así que si quieres usar la función de callback, por ejemplo, quédate. Vamos a llegar allí. Solo vamos a comenzar con la forma más simple de definiciones de columnas primero. Así que ahora hablemos de los datos de fila. En general, habrá dos modelos de filas diferentes proporcionados por AGGrid. Hay un modelo de filas del lado del cliente y un modelo de filas del lado del servidor. Para esta masterclass, porque estamos usando la edición comunitaria de AGGrid, estaremos limitados a usar el modelo de filas del lado del cliente. Lo que significa el modelo de filas del lado del cliente es que depende de nosotros como desarrolladores o implementadores de AGGrid realmente ir y obtener todos los datos que queremos renderizar dentro de nuestro AGGrid.

El otro modelo de filas listado aquí, modelo de filas del lado del servidor, es una característica empresarial de AGGrid. Pero permite a AGGrid saber cómo obtener datos. Y es realmente mejor para el rendimiento porque a medida que comenzamos a aplicar cosas como filtros, ordenaciones, agregados, grupos, pivotes, cosas de esa naturaleza, no queremos cargar millones de registros solo para poblar una vista inicial para AGGrid. Y entonces lo que hace el modelo de filas del lado del servidor es que va a preguntar inteligentemente a nuestro back-end cómo obtener solo el conjunto de filas que son visibles en la pantalla. Y a medida que el usuario pivota y desplaza y filtra y hace todo lo que quiere hacer con su AGGrid, va a ir a buscar solo los datos que necesita, haciéndolo mucho más eficiente. Pero como verás, el modelo de filas del lado del cliente sigue siendo extremadamente rápido. Creo que es realmente suficiente para muchos proyectos.

Yo puedo decirte como consultor, hay varias veces que he entrado en un proyecto, me han dicho, oye, realmente queremos usar el modelo de filas del lado del servidor porque hemos oído que es más rápido. Pero luego te adentras en ello y te das cuenta de que el modelo de filas del lado del cliente era lo suficientemente rápido para empezar y no había necesidad de que asumieran esa complejidad. Así que solo quiero lanzar ese pequeño asterisco ahí. De esa manera entiendes que, sí, hay dos de ellos. Uno es gratuito, el otro es de pago, pero el gratuito es realmente, realmente bueno. Así que en general, usaremos el modelo de filas del lado del cliente en este curso. Intentaré tocar el modelo de filas del lado del servidor. También hay algunos otros. Hay un modelo de filas de desplazamiento infinito que está incluido en la Community Edition. Así que también vale la pena echarle un vistazo.

Así que echemos un vistazo ahora a cómo sería comenzar a vincular algunos datos. Voy a abrir esto en StackBlitz. De esa manera podemos comenzar a jugar con ello. Así que dentro de aquí, tengo mis definiciones de columnas que vimos antes para nombre y color. Y luego también voy a usar un hook useState para vincular mis datos de filas a este componente. De esa manera, nuevamente, a medida que mis datos de filas puedan cambiar, puedo actualizar esos datos de filas y hacer que aggrid-react responda a ello. Con esto funcionando ahora, podemos echar un vistazo y ver cómo se ve una implementación básica de AG grid. Así que tenemos todos nuestros nombres y colores aquí. Puedo desplazarme por la lista. Podemos ver que estamos obteniendo un rendimiento realmente fantástico. Si tienes curiosidad, siempre puedes abrir esas herramientas de desarrollador. Puedes saltar a la pestaña de renderizado y averiguar exactamente la tasa de fotogramas aquí. Así que, por ejemplo, si quisiéramos ver qué tan rápido es esto realmente con todos estos datos, podemos activar las estadísticas de renderizado de fotogramas aquí y avanzar a través de ello y ver exactamente cuál es nuestra tasa de fotogramas. Así que es realmente rápido, realmente eficiente, y no se necesita mucho código para comenzar con ello. Así que nuevamente, ¿qué está pasando aquí? Bueno, tenemos nuestras definiciones de columnas que hemos suministrado previamente. Y ahora hemos configurado nuestros datos de filas, la lista real de productos que queremos vincular a aggrid-react. Hemos actualizado nuestro componente ag-grid-react para que ahora estemos vinculando tanto las definiciones de columnas que estábamos suministrando previamente como los datos de filas. No necesitamos especificar el modelo de filas. Por defecto, va a usar el modelo de filas del lado del cliente. Y así está usando ese modelo de filas del lado del cliente para tomar todos esos datos y renderizarlos en nuestra cuadrícula. Así que los datos se proporcionan a la cuadrícula usando esa prop de datos de filas. Los datos se vinculan a una columna basándose en ese campo de definiciones de columnas. Y luego veremos más formas en que realmente podemos vincular datos o conectar datos a celdas más adelante en este curso. Pero por ahora, ¿por qué no lo intentas?

Vas a ir a la sección de datos de fila, y hay un ejercicio en stack-blitz. Y vamos a echarle un vistazo. Así que en este ejercicio, primero se te pedirá que especifiques las definiciones de columnas para este componente. Nuevamente, echa un vistazo a esa interfaz de datos de fila. Vamos a querer usar el name y color como nuestras dos diferentes columnas. Así que ten eso en mente. Y luego, para el paso dos, vas a configurar los datos de fila. Ya hemos importado los datos de un archivo JSON aquí. Y así vas a usar data.products como los datos que quieres vincular a él. Una vez que hayas configurado ambos, entonces puedes pasarlos a las props de column depths y row data en el componente AG Grid React.

Estaremos haciendo muchos de estos ejercicios, así que intentaré mantenerlos rápidos. Para este primero, te daré solo un par de minutos, y luego lo revisaré e implementaré el ejercicio junto a ti. Así que supongo que daré unos minutos para darte tiempo de trabajar en este ejercicio. Además, si tienes alguna pregunta en cualquier momento, no dudes en encender tu cámara y micrófono y preguntarme directamente si te sientes cómodo haciéndolo. Si solo quieres usar la función de chat, estoy monitoreando el chat todo el tiempo. Así que siéntete libre de dejar preguntas en el chat y las responderé. Espero que ese desafío no haya sido demasiado difícil. Si todavía estás trabajando en ello, no te preocupes. Solo voy a repasar la solución y hacer el desafío también. Así que puedes seguirme y ver cómo voy a abordar esto. Así que para el primer paso, necesitamos especificar las definiciones de columnas y luego vincularlas al componente AG Grid React. Como vimos en las diapositivas, voy a usar el hook useState para esto. De esa manera, en el futuro, si necesito hacer estas definiciones de columnas dinámicas o los datos de fila dinámicos, tengo eso disponible para mí simplemente usando la función de callback setState para actualizar esas definiciones de columnas o esos datos de fila.

Así que voy a crear un objeto columnDefs aquí usando el hook useState. Y para el tipo de esto, voy a usar el tipo callDef de AG Grid Community. Esto acepta un parámetro genérico, y el parámetro genérico que acepta, o este parámetro de tipo, es la interfaz para nuestros datos de fila. Así que esto le va a decir a AG Grid qué tipo de datos estamos vinculando aquí. Y estaría proporcionando un array de definiciones de columnas. Así que ahora que he hecho eso, debería obtener algo de ayuda de mi IDE en términos de lo que realmente va aquí, así que voy a crear un objeto aquí. Podemos ver todas las diversas cosas que podríamos suministrar a una definición de columna. Si no lo he mencionado ya, AG Grid está lleno de características. Hay muchas capacidades aquí sobre cómo se renderizan estas celdas, cómo los usuarios pueden interactuar con ellas, cómo podrían ser estilizadas. Y así es una buena vista previa para ver todas las diferentes opciones que podemos usar para configurar estas definiciones de columnas. Pero por ahora, voy a estar suministrando el header name.

Pero por ahora, voy a suministrar el header name. Así que usemos name para el nombre de este header. Y luego para el field, voy a suministrar name. Y como ya habrás visto, si suministro un name aquí que no tiene sentido, como este, claramente no es una propiedad en mis row data. Obtendré un error de tipo aquí. Así que sé que parece una cadena, pero hay algo de seguridad de tipo real aquí y va a analizar la cadena y asegurarse de que haya una propiedad en nuestra interfaz que realmente coincida con estas.

Así que tenemos una muy buena seguridad de tipo alrededor de esta API. Hacemos lo mismo para color a continuación. Y suministramos color como el nombre del field. Así que esto es todo lo que tengo que hacer para crear la versión más simple de definiciones de columnas para un G-Grid.

A continuación, quiero establecer los row data. Y nuevamente, para eso, voy a hacer row data aquí y voy a usar el state hook. Y esto voy a usar data dot products, así que este es un array de productos que podemos realmente saltar a este archivo JSON y echarle un vistazo. Hay un par de cosas que quiero mostrarte. Así que voy a saltar a este archivo JSON y echarle un vistazo. Hay muchos datos aquí. Hay algunos customers con los que podríamos jugar más tarde, esas cuentas con las que podríamos jugar pero nos vamos a centrar en products ahora mismo. Y podemos ver que tenemos tanto un name como un color en estos products. Así que volviendo a mi grid, ahora que tengo mis definiciones de columnas y mis row data, puedo seguir adelante y vincular estos al componente A-G-Grid. Así que puedo decir columnDefs equals columnDefs, rowData equals my rowData. Con eso fuera del camino, puedo presionar guardar en esto, recargar la aplicación, y ahora mi grid está mostrando todos los products que están en ese JSON con su name en la primera columna y su color en la segunda columna. Pausa aquí por un segundo, veamos, ¿hay alguna pregunta?

¿Está siguiendo hasta ahora? Y si no, seguiremos adelante. Muy bien. Y como dije, si tienes alguna pregunta, siéntete libre de encender tu cámara o micrófono. Y si eso es un poco intimidante, eres bienvenido a usar el chat de la reunión. Estoy manteniendo mis ojos en él toda la mañana. Así que siéntete libre de poner tus preguntas allí también.

Así que ahora que tenemos algunos datos siendo mostrados en nuestro grid, hagámoslo un poco más interactivo. Y la primera forma en que vamos a hacerlo interactivo es que vamos a dejar que nuestros usuarios ordenen las filas. Así que podemos habilitar la ordenación de filas usando la propiedad sortable en una definición de columna. Vamos a ir a esas column defs, establecer sortable en true. Y si es true, entonces podemos de repente ordenar por esa columna. Por defecto, ese valor es false.

Podemos suministrar una propiedad comparator. Así que esta va a ser el mismo tipo de función de callback que suministrarías a array.sort. Si no te gusta la forma incorporada en que aggrid ordena. Así que si tienes tu propia lógica de ordenación personalizada, es posible personalizar cómo aggrid va a comparar realmente diferentes filas dentro de nuestra grid para la ordenación. Así que echemos un vistazo a un ejemplo.

Este es el mismo ejemplo que hemos tenido hasta ahora, pero hemos hecho un cambio y hemos hecho que sortable sea true en la columna name. Vamos a seguir adelante aquí y vamos a probar eso. Así que voy a establecer sortable en true y veamos qué sucede. Así que al ser sortable, ahora, si hago clic en la columna name, puedes ver que ahora tenemos una dirección de ordenación y ha ordenado todos nuestros productos basándose en ese name. Comenzó en un estado no ordenado y ahora se ha vuelto ascendente, ahora descendente y de vuelta al estado original. Así que permite a los usuarios alternar entre los dos. También viene con una bonita animación incorporada, que creo que es bastante genial.

Como mencioné, el orden de ordenación predeterminado es, bueno, comienza en ninguno. Y luego la primera vez que haces clic en él, va a ir a ascendente, segundo clic, descendente y luego tercer clic de vuelta a ninguno. En realidad podemos cambiar este orden o especificar las opciones que se permiten especificando la columna de ordenación para cada una de las diferentes opciones. Esto nos va a permitir cambiar ese comportamiento predeterminado para que podamos controlar cómo el usuario cicla a través de diferentes ordenaciones. Así que echemos un vistazo a otro ejemplo rápidamente, volvamos a mi ejemplo aquí y voy a establecer el orden de ordenación.

Permíteme ir adelante y desglosar esto en un par de líneas diferentes, limpiar esto. Así que digamos que para nuestro primer orden, vamos a elegir uno de nuestros productos, digamos que para nuestro orden de clasificación, queríamos hacer descendente primero y luego ascendente segundo. Ahora, si vuelvo a ejecutar el proyecto, el primero, hago clic en él, vamos a estar en modo descendente y luego cambiar de nuevo a ascendente en ese segundo clic. Así que esa propiedad de orden de clasificación te permite controlar los ciclos o por qué va a pasar mientras el usuario interactúa con este encabezado de columna.

Una de las cosas geniales de AG Grid es que los usuarios pueden ordenar varias columnas manteniendo presionada la tecla shift y haciendo clic en los encabezados de columna. Así que esto nos va a permitir ordenar por nombre y color si quisiéramos dejar que el usuario haga eso. Podemos especificar la opción de tabla multi sort key para anular este comportamiento. Así que si no queremos que la tecla shift sea la que realmente haga multi sort, podemos controlar qué tecla en particular haría eso. Eso no es algo que vamos a poner en una definición de columna, por lo que en realidad va a ser una opción de configuración a nivel de grid. Así que en nuestro componente AG Grid React, tenemos esa multi sort key para ser la tecla control en su lugar, y eso nos permitiría controlar ese comportamiento. Así que si saltamos aquí y hacemos esto también ordenable. Ahora puedo ordenar por color o nombre, y si quisiera ordenar por ambos, voy a mantener presionada esa tecla shift y puedo controlar la ordenación de esa manera.

Y ahora estamos ordenando por ambos. Y si quisiera cambiar esa clave de ordenación nuevamente, podríamos usar esta propiedad multi sort key en nuestro componente AG Grid React. Así que este es un poco difícil de demostrar, por lo que no puedes ver qué tecla estoy realmente presionando, pero si configuro esto para control ahora, en lugar de usar la tecla shift, tengo que presionar control para poder ordenar a través de estos. Así es como funciona.

Ahora te lo voy a dar para que lo intentes de nuevo. Entonces, nuevamente, si recién te unes a nosotros, estamos revisando las diapositivas en el sitio web de la aplicación Level Up. Aquí hay un enlace a la diapositiva específica en la que estamos trabajando actualmente y hay un desafío que puedes abrir en StackBlitz. Entonces, ¿qué tienes que hacer para este desafío? Bueno, para este desafío, te vamos a pedir que agregues la propiedad sortable a cualquiera de las definiciones de columna. Así que vamos a abrir una definición de columna de StackBlitz. Agrega la propiedad sortable a cualquiera de las definiciones de columna, luego anula el orden de clasificación predeterminado especificando la propiedad de orden de clasificación en esa definición de columna que elegiste. Y luego, opcionalmente, anula la clave de ordenación de múltiples columnas predeterminada especificando esa propiedad multi-sort key en el componente AG Grid React. Así que te damos solo un par de minutos para familiarizarte con cómo habilitar la ordenación en estas definiciones de columna. Echemos un vistazo a este desafío y veamos cómo podemos resolverlo.

Así que esto es un poco más libre, puedes elegir cuál de estas definiciones de columna quieres hacer ordenable. Recibimos una buena pregunta en el chat durante este desafío sobre cómo aplicar la funcionalidad de ordenación a solo una columna. Así que por defecto, todas las columnas no son ordenables. Así que como no he configurado sortable para que sea true en ninguna de estas columnas, supongo que algo...podríamos tener algo ya configurado aquí. Queremos configurarlo para que no sea ordenable, pero podemos configurar sortable para que sea false aquí. Y me doy cuenta de que AG Grid podría haber cambiado algún comportamiento predeterminado en mí. Así que déjame decir eso rápidamente, recargar la aplicación. Y al configurar sortable para que sea false, si hago clic en esta columna de nombre, ahora va a cambiar el orden de clasificación para mí. Lo configuro para que sea true, y es cuando se convierte en una columna ordenable. Así que con sortable configurado en true, podemos cambiar esto. Y una de las cosas o técnicas que vamos a ver más adelante en esta masterclass es esta idea de una definición de columna predeterminada. Lo que hace una definición de columna predeterminada es que nos permite especificar estos ajustes o parámetros predeterminados. Así que si siempre quisieras que estas columnas fueran ordenables o no ordenables por defecto, quédate, vamos a ver algunas técnicas. Pero sí, parece que algo ha cambiado en mí desde la última vez que ejecuté esto en AG Grid es ordenar estos por defecto. Además, pedimos cambiar el orden de clasificación. Y así, si quisieras recorrer, mostramos esto antes. Podemos configurar la propiedad de orden de clasificación aquí para hacer, por ejemplo, solo descendente.

Esto me va a permitir controlar o alternar ahora descendente, ascendente, y sin clasificación aplicada. Así es como controlas el orden de clasificación. Como mencioné, hay una pregunta, ¿es posible mostrar un icono de clasificación si la clasificación está habilitada para una columna? Sí, hay una manera de controlar la forma en que se renderizan estos encabezados completos. Así que puedes hacer mucho más que solo mostrar un icono personalizado. Podrías reemplazar todo el encabezado con tu propio componente de React que puede renderizar como quieras. No vamos a llegar a eso en esta masterclass, es un tema un poco más avanzado. Pero quiero decir que sí, eso es totalmente posible.

Como mencionamos, también hay clasificación múltiple, así que puedo ordenar por nombre y color manteniendo presionada la tecla shift. Podríamos cambiar esa tecla de ordenación aquí. O si en realidad no queremos tener clasificación múltiple, esta es otra pregunta que nos hicieron durante el descanso. Puedo aplicar suppress multi-sort en esta cuadrícula y establecer esto en true. Así que ahora que hemos suprimido la clasificación múltiple. Ya no podré mantener presionada esa tecla shift y ordenar múltiples columnas a la vez. Solo un segundo para cargar. Así que ahora mantener presionada la tecla shift no me pone en modo de clasificación múltiple. Solo puedo ordenar por una columna. Así que muchas configuraciones de control con la clasificación. Otra característica aquí que mencionamos y que quiero destacar nuevamente es que puedes proporcionar una función comparadora. Así que si quisieras controlar la forma en que se renderiza el encabezado, puedes hacerlo. Si quisieras controlar la forma exacta en que Agigrid está comparando diferentes elementos, tienes eso disponible a través de este comparador.

Bien, sigamos adelante. Definición de columna predeterminada, eso es lo siguiente, perfecto.

Una de las cosas que vas a descubrir de inmediato cuando comiences a integrar Agigrid en tu proyecto es que muchas de tus columnas, a pesar de mostrar datos diferentes, van a necesitar muchos de los mismos comportamientos para cómo queremos permitir que los usuarios interactúen con ellas. Y la clasificación es un gran ejemplo de eso. Agigrid nos permite especificar los valores predeterminados para todas nuestras columnas proporcionando lo que se llama una definición de columna predeterminada. Esto nos va a permitir evitar algunas repeticiones innecesarias, por lo que no necesitamos realmente establecer sortable en true para todas nuestras columnas que queremos hacer ordenables. Además, estos son solo valores predeterminados, por lo que cada definición de columna puede luego ir y anular los valores predeterminados que estamos proporcionando en estas definiciones de columna. Así que puedes establecer sortable en true para todas nuestras columnas, y luego aún podemos establecerlo en false en una definición de columna individual para anular ese valor predeterminado. Veamos un ejemplo, este va a hacer que todas las columnas sean ordenables por defecto. Así que proporcionamos lo que se llama este default column def, y solo lo voy a asignar a un const aquí en la parte superior. Todavía va a implementar esta interfaz call def. Y luego, una vez que tengamos nuestro default call def, lo vinculamos a nuestro componente React de Agigrid proporcionando esto al prop default call def en ese componente.

Así que si entramos aquí, solo voy a crear un default call def rápido aquí. Y vamos a establecer sortable en false por defecto. Y luego voy a proporcionar este default call def como un prop al componente React de Agigrid. Así que ahora esto funciona de la manera que había anticipado que funcionara desde el principio, donde ninguna de estas columnas es ordenable ahora porque nuestro valor predeterminado es que estas no deberían ser ordenables. Y luego puedo ir a la de nombre y establecer sortable en true para esta columna individual. Así que ahora color no se puede ordenar, pero puedo ordenar por nombre. Así que ese default column def nos está permitiendo proporcionar algunas de estas opciones predeterminadas. Así que revisando rápidamente, primero definimos un nuevo const default column def, y está implementando esa misma interfaz call def. Todo lo que está en esa interfaz call def podemos proporcionar un valor inicial para. Y luego, a continuación, vamos a vincular eso al prop default call def en el componente React de Agigrid. Te lo voy a dar. Mantendremos este realmente corto, pero nuevamente, si acabas de unirte a nosotros, aquí hay un enlace a las diapositivas en las que estamos. Puedes desplazarte hacia abajo y abrir el ejercicio en StackBlitz. Y para este ejercicio, vas a hacer lo mismo que acabo de hacer. Vas a encontrar un nuevo const default call def en la función del componente. Va a ser un objeto de tipo call def con row data que proporciona ese parámetro de tipo. Vas a establecer esa propiedad sortable en true, y luego vas a vincular el const default call def al prop default call def en el componente React de Agigrid, y luego anular esa propiedad sortable a false para una de las columnas. No debería tomar más de un minuto, así que solo te voy a dar unos pocos para trabajar en esto, y luego pasaré por la solución. Así que lo que queremos hacer aquí es configurar una definición de columna predeterminada que vamos a usar para proporcionar valores predeterminados a Agigrid. Para hacer eso, dentro de mi componente, voy a configurar un objeto default call def, y va a implementar esa interfaz call def. Esta interfaz acepta un parámetro de tipo, y va a ser el tipo de datos que estamos mostrando en nuestro Agigrid, así que voy a proporcionar row data como ese parámetro de tipo genérico. Desde aquí, solo voy a establecer sortable en true. Así que ahora todas mis columnas siempre serán ordenables por defecto si tomo este objeto default call def y lo vinculo al prop default call def en este componente. Así que ahora que he hecho eso, todas estas van a ser ordenables, pero no quiero que color sea ordenable, así que voy a establecer esta en sortable en false. Ejecuta el proyecto. Estas son ordenables ahora. Nuestro nombre es ordenable, mientras que color no puedo interactuar con él. ¿Hay alguna pregunta que pueda responder antes de que pasemos a la siguiente sección?

De cualquier manera funciona para mí. Estoy mirando ambos.

Hemos hecho la clasificación. Ahora echemos un vistazo al filtrado. Agigrid nos permite filtrar usando nuestras columnas de inmediato, y viene con varios filtros proporcionados. Así que en la Community Edition, de forma gratuita, puedes ordenar usando texto, números o fechas, y luego en la Enterprise Edition, hay un filtro basado en conjuntos también. Por defecto, va a usar el filtro de texto, que es el que podemos escribir y va a comparar lo que hemos escrito con todos los valores en las filas de abajo y solo muestra los que contienen el texto dentro de ese filtro de texto. Para habilitar el filtrado, vamos a establecer la propiedad de definición de columna de filtro en true. Así que para cualquier columna donde queramos que el filtrado esté habilitado, todo lo que hacemos es establecer filter en true para esa columna en particular. Así que echemos un vistazo al filtro de texto. Déjame entrar aquí, y en este de Name, voy a establecer filterable o filter en true. Así que ahora que he establecido filter en true, voy a volver a ejecutar la aplicación aquí, y hay una nueva caja que ha aparecido junto a Name. Abro esto y puedes ver que me han dado un control de filtro. Así que este filtro de texto ya admite algo de lógica. Puedo filtrar basándome en cosas que contienen el tipo que escribo. Así que si solo quiero ver cosas que contienen frozen, puedo escribir frozen y tenemos todos los productos que son frozen o lo tienen. Y hagamos combinaciones en nuestros filtros. Así que podría decir, bueno, quiero todo lo que contenga frozen, todo lo que sea un fish. Y ahora tengo esa capacidad donde está suministrando a través. Puedo elegir cómo está combinando estos filtros también. Así que puedo elegir entre y o para esa lógica. Así que ahora estoy viendo todos los productos que tienen frozen en el nombre o tienen fish en el nombre. Y hay otros tipos de controles que puedo tener. Así que si no quiero ver ninguno de los fish, así que ahora tengo todos los productos que tienen frozen en el nombre, pero no contienen fish en él. Y puedes ver todas las opciones disponibles aquí, esto contiene, no contiene, iguala, no iguala, comienza con, termina con, en blanco y no en blanco. Así que muchas capacidades directamente de la caja de ese filtro de texto que no tienes que construir que vienen con AG Grid por defecto. Y nuevamente, la única otra cosa que necesitaba hacer para habilitar esto fue establecer filter en true en esa definición de columna de nombre. Si queremos, en lugar de solo establecer true, podemos realmente proporcionar el nombre del filtro explícito que queremos usar. Así que como mencioné, viene con un par de filtros de inmediato para fechas, números y texto. Puedo proporcionar el nombre específico del filtro que quiero usar aquí.

Así que si quiero ser más explícito con esto, puedo decir filter, pero usemos ese AG text column filter. Nuevamente, ninguno de los comportamientos cambió aquí, solo me permite controlar o ser más explícito con qué filtro AG Grid debería aplicar. Si quisiéramos, podríamos jugar con el filtro de números, y para eso vamos a necesitar al menos mostrar algunos números dentro de nuestra cuadrícula. Así que voy a saltar a nuestro ejemplo, y si miro nuestros datos aquí y bajo a productos, hay una columna de price aquí, y así que lo que voy a hacer es que voy a mostrar eso. Así que primero voy a agregar price a mis datos de fila aquí, y luego voy a crear una columna para ello. Asegurémonos de que eso esté funcionando primero. Así que podemos ver que todos nuestros precios están disponibles aquí, y por supuesto podríamos ordenarlos, pero lo que queremos hacer es realmente queremos conectar este AG number column filter a él. Así que voy a volver al ejemplo, y voy a establecer sortable para ser el nombre de este filtro específico. Oh, lo siento, necesito hacer que esto se llame filter. Así que ahora si voy a la columna de price y abro esto, puedo filtrar esto basándome en números, y estos van a ser diferentes conjuntos de comparadores. Así que en lugar de contiene, no contiene, tengo iguala, no iguala, mayor que, menor que, y así sucesivamente. Así que puedo buscar cualquier cosa que sea mayor que 10, y eso va a controlar eso de esa manera. Así que ahora solo tengo precios para productos que están por encima de $10. Si ordenamos en reversa, puedes ver eso aplicándose allí, o podría decir es menor que 10, y ahora estamos viendo solo los productos que eran menores o iguales a 10. Para el filtro de fechas, podemos volver a nuestros productos aquí, y podemos echar un vistazo a la fecha del pedido. Así que saltemos a nuestros datos por un segundo y asegurémonos de que realmente tenemos una fecha, y no la tenemos. Vamos a tener que usar un conjunto diferente de datos aquí para esto. Así que lo ajustaré a un ejemplo que tenga algunos de los datos de fecha disponibles para nosotros para pedidos, y echaremos un vistazo a cómo podemos usar ese filtro de fechas. Así que te lo daré para que juegues con el filtrado aquí. Vamos a abrir este ejercicio en stacklets, y este va a tener un conjunto de datos más rico para que juguemos. Vamos a ver que en esta cuadrícula, estamos mirando un conjunto de clientes, la cuenta que está asociada con ese cliente, y luego cualquiera de los elementos de pedido que están en los pedidos que estamos mirando junto con un valor total. Así que esta es una cuadrícula un poco más compleja, pero en estas definiciones de columna, podrás aplicar algunos filtros diferentes a ella. Así que por ejemplo, puedes usar un filtro de texto para el nombre o el filtro de número para el número de cuenta o el filtro de fecha para la fecha del pedido. Una vez que hayas aplicado diferentes filtros a cada uno de estos, habrás terminado con el ejercicio. Te daré un par de minutos para trabajar en este, y déjame ir y dejar un enlace también. Así que si acabas de unirte a nosotros, aquí está el enlace. Puedes encontrar los stacklets en la parte inferior de esa página. Así que voy a abrir el ejemplo de stacklets, y lo que queremos hacer es queremos agregar controles de filtrado a las cuatro definiciones de columna. Ahora, es como si alguien se encontrara con un problema donde no veían los datos al principio, y sugirieron establecer un ancho y una altura en el AG grid o realmente en el componente envolvente alrededor de AG grid react. Así que si no veías los datos, podrías querer agregar un ancho y altura a este div, y eso debería solucionarlo para ti. Ahora, para esto, lo que voy a hacer es para el nombre del cliente, quiero usar ese filtro basado en texto. Y así que voy a establecer filter en true porque el filtro basado en texto es el filtro predeterminado. Todo lo que tengo que hacer es establecer esto en true, y ahora guardo esto, vuelvo a ejecutar esta aplicación. Nombre del cliente, ahora vamos a filtrarlo basándonos en el nombre. Así que puedo buscar Mitchell, por ejemplo, y encontraré a ese cliente específico. En el número de cuenta, el ejercicio recomendó usar el filtro de columna de número. Así que no podemos simplemente establecer filter en true. Nuevamente, eso va a usar el filtro basado en texto.

Para usar el filtro de número, realmente vamos a tener que especificarlo. Así que voy a poner aquí una cadena, ag number column filter, y eso me va a permitir filtrar esta columna usando controles basados en números. Así que, por ejemplo, voy a copiar uno de estos rápidamente. Y luego puedo entrar aquí, y tengo todos estos filtros basados en números. Así que puedo escribir un número de cuenta, y debería aparecer, si lo escribí correctamente. Así que eso te da ese control basado en números.

Hagamos el de fecha a continuación. Así que para el orden de fecha, nuevamente, no se puede simplemente establecer filter en true. Eso va a ser un orden basado en texto. Lo que quiero hacer es dar a mis usuarios la capacidad de ordenar basándose en fechas. Así que voy a poner ag date column filter. No pudimos jugar con este antes porque nuestro conjunto de datos anterior no tenía fechas, pero ahora este sí. Y así que si abro este, puedes ver que va a permitirnos realmente ingresar una fecha real y hacer una comprobación de igualdad en esta columna para ello. Así que podría hacer 06-06-2019 aquí, y encontraremos todos los pedidos que se realizaron en esa fecha específica. Podrías notar que ahora que tengo un filtro aplicado, ha puesto este pequeño icono aquí, informando a tus usuarios que se ha aplicado un filtro a esta columna en particular. Y nuevamente, hay una manera de reemplazar la forma en que se renderizan estos encabezados de columna completos. Así que si quieres hacer algo personalizado, eso está disponible para ti. Por ahora, solo voy a limpiar esto. Y finalmente para el total, vamos a hacer lo mismo que hicimos para ese número de cuenta, y vamos a usar un filtro basado en números para ello. Así que voy a hacer ag number column filter. Y ahora en este total, puedo decir, bueno, dame todos los pedidos que fueron mayores que mil dólares. Y filtrará cualquier pedido que no estuviera por encima de ese valor. Al igual que hicimos antes, si quisieras que fueran filtrables, filtrados por defecto, podrías poner ese valor de filter true dentro de tu definición de columna predeterminada. Eso hará que todas tus definiciones de columna sean inherentemente filtrables usando ese control basado en texto. Y luego hay maneras de suprimir el multi-filtro y cosas de esa naturaleza en las props para la cuadrícula real. Podrías preguntarte, bueno, para el filtrado de fechas, como, ¿hay más que pueda hacer aquí para controlarlo? Como, ¿qué pasa si quisiera filtrar basándome en marcas de tiempo en lugar de solo fechas fijas reales? Y ese es un gran objeto o una gran pregunta. El filtro de fecha funciona tal cual cuando se usa datos de fila que tienen objetos de fecha de JavaScript. Pero si esa fecha se proporciona usando otro método, como digamos que tus datos regresaron y todos tus datos, en lugar de tener objetos de fecha, tenían cadenas formateadas en ISO, entonces necesitaríamos usar una función comparadora para que AGRid sepa cómo realmente analizar y comparar fechas dentro de eso. Así que eso podría parecer algo como esto donde establecemos ese ag date column filter para ser el tipo de filtro que queremos usar para la columna. Y luego vamos a proporcionar un nuevo parámetro que no hemos visto aún llamado filter params. Y dentro de filter params, podemos especificar el comparador. Así que aquí, a medida que los usuarios escriben las fechas, podemos realmente instanciar un nuevo objeto de datos, hacer cualquier manipulación que queramos a ese objeto de datos, y luego devolver si debería o no ser incluido en ese filtro.

OK. Pasemos a continuación a la representación de celdas. Hasta ahora, la forma en que se están representando las celdas dentro de AGGrid es que le estamos diciendo a AGGrid de qué campo extraer valores de nuestros datos de fila. Eso es lo más simple, y sin ninguna personalización, funciona muy bien.

Pero hay una canalización completa de representación de celdas que AGGrid nos expone a través de definiciones de columna. Y esta canalización es personalizable. Así que el orden de esta canalización es, primero, va a ejecutar una función value getter. ¿Cómo obtengo realmente mi valor de los datos que se me están proporcionando? El segundo paso en esa canalización es cómo formateo ese valor. ¿Cómo tomo cualquiera que sea su representación en bruto en JavaScript, y luego lo convierto en algo que sea agradable y visible para mi usuario, o legible?

Por ejemplo, podríamos tener esas cadenas ISO en nuestro conjunto de datos, y luego usaremos un value getter para convertir eso en una fecha. Y luego usaremos ese value formatter para imprimir realmente esa fecha en algo agradable y legible para nuestros usuarios.

Y luego el paso final en esta canalización de representación es una función de renderizador de celdas personalizada. La función de renderizador de celdas es el paso más poderoso en toda esta canalización, porque realmente ponemos un componente completo de React como el renderizador de celdas. Así que si quisiéramos hacer algo profundo y personalizado para cada celda individual, podríamos usar componentes de React para representarlo dentro de AGGrid.

Así que para cada uno de esos pasos, vamos a pasar y jugar con algunos ejemplos alrededor de ello. Y el primer paso en esa canalización es esa función value getter. Así que podemos usar una función value getter para obtener los datos de fila para columnas donde el uso de la propiedad field es ya sea insuficiente o no es una opción para nosotros.

Un ejemplo donde no es una opción podría ser, digamos que teníamos una propiedad de nombre y apellido en nuestros datos, pero no queremos mostrar una columna de nombre y una columna de apellido. Solo queremos mostrar una columna de nombre. Así que la función value getter podría realmente echar un vistazo a nuestros datos y concatenar esas dos cadenas juntas. No podríamos haber hecho, o no podríamos haber usado la propiedad field para hacer ese tipo de manipulación de cadenas, y por eso vamos a proporcionar esa función value getter en su lugar.

También podemos usar la función value getter para mutar datos antes de proporcionarlos a la cuadrícula de datos. Así que como mencioné en ese ejemplo de fecha anteriormente, tal vez tengamos cadenas formateadas en ISO en nuestros datos, pero queremos convertir esas en objetos de fecha de JavaScript primero. Podríamos usar una función value getter para realmente transformar eso de esa cadena en un objeto de fecha.

Es importante notar que toda esta canalización de representación de celdas se va a ejecutar para cada celda que estamos mostrando dentro de nuestra cuadrícula. Y quiero resaltar esto porque esta es una de las formas en que puedes tomar algo que es realmente, realmente rápido, AGGrid, y hacerlo realmente, realmente lento al introducir mucha complejidad en esta canalización de representación de celdas. En términos generales, ya sea un value getter, un value formatter, y lo más importante un renderizador de celdas, queremos asegurarnos de que cualquier trabajo que estemos haciendo aquí, lo estamos haciendo realmente rápido y eficientemente. De esa manera no estamos ralentizando cuán rápido AGGrid puede representar nuestros datos.

La función value getter es una función de callback. Vamos a especificar una función de callback dentro de nuestra definición de columna, y nos va a enviar o proporcionar un objeto de parámetros value getter basado en los datos de la fila que estamos vinculando a nuestra cuadrícula.

Así que antes de sumergirnos en el uso del value getter, echemos un vistazo a lo que AGGrid nos va a realmente proporcionar. Así que aquí tenemos la interfaz de parámetros value getter y está tomando ese tipo para nuestros datos de fila, y nos va a dar un montón de cosas diferentes que podrían ser útiles para nosotros cuando estemos escribiendo nuestros parámetros value getter. Primero, nos va a dar una instancia de la API de la cuadrícula, hablaremos de esto un poco más tarde.

Nos va a dar la definición de columna para la columna en la que estamos representando. Realmente puede darnos el objeto de columna completamente realizado y un objeto de API de columna. Estas dos cosas nos van a permitir realmente hacer algunas cosas bastante geniales en términos de ver cómo se está ordenando o filtrando la columna, y así sucesivamente. Hay cualquier contexto que podría ser proporcionado. Cada cuadrícula tiene su propio sistema de inyección de dependencias incorporado, y por lo tanto podría proporcionar contexto a muchas de estas funciones. No vamos a hacer eso en la masterclass de hoy, pero solo quiero poner un asterisco en esto.

Finalmente, nos va a dar los datos reales que estamos tratando de representar y cómo obtener ese valor de vuelta junto con el nodo en el que estamos representando.

Así que hay una pregunta aquí, ¿hay un formato único al que el formateador se alinea para las fechas o conviertes valores minoritarios en un formato acordado minoritario basado en los datos? Bien, entonces esa pregunta, déjame pensar en eso por un segundo. ¿Hay un formato único al que el formateador se alinea? No hay, así que el formateador, no hay un formateador de valores por defecto. Tienes que proporcionar tu formateador de valores, y por lo tanto no hay un valor por defecto en AJAGER con el que tengas que lidiar. Si estás escribiendo tu propio formateador de valores, depende de ti averiguar cómo vas a manejar los valores minoritarios o si deseas aplicar alguna estrategia de formateo amplia aquí basada en tus datos individuales.

Así que AJAGER no tiene opiniones. Tienes que implementar cualquier lógica de formateo que tenga sentido basada en los datos que estás proporcionando. Buena pregunta.

Bien, desglosando esto, ya lo he hecho, así que es como si lo estuviera destacando de nuevo. Estamos obteniendo la grid API y la column API. Estamos obteniendo la definición de columna actual y la columna, la instancia real de la columna en la que estamos representando. Estamos obteniendo todas las opciones de la cuadrícula que se han suministrado y luego los datos reales que estamos tratando de obtener.

Así que pensando un poco más en esto, ¿qué es la grid API? Bueno, es una interfaz programática para interactuar con AGGrid. Podemos usarla para agregar event listeners a la cuadrícula, o podemos usarla si estamos tratando de interactuar con el portapapeles, o si queremos aplicar alguna estrategia de ordenación o estrategia de filtrado amplia, la grid API es el caso adecuado para eso. La column API es para interactuar con una columna específica. Así que si quisiéramos mover, fijar, redimensionar programáticamente, o lo que queramos hacer con una columna específica, podríamos usar la column API para eso. Y luego ya hemos mencionado que un row node es lo que estamos representando. Bueno, eso es lo que es. Un row node representa una sola fila en la cuadrícula y expone una row selection API, que podría ser útil si quisiéramos actualizar todos los datos en esa fila o si quisiéramos agregar event listeners individuales solo a esa fila en particular.

Así que ahora sabemos lo que vamos a pasar a nuestro value getter, echemos un vistazo a cómo podríamos realmente escribir uno. Así que aquí tengo una columna para price, y he escrito una función de value getter. Nota que esta vez no hay un field, porque voy a decirle a AGGrid cómo estoy realmente obteniendo los datos de vuelta. Una de las cosas que siempre tenemos que proteger es en los params que se nos suministran, nos da los row data que queremos mirar. Y debido a que AGGrid tiene esta expectativa de que los datos podrían estar llegando de manera asíncrona, tenemos que manejar el hecho de que params.data podría no estar definido cuando esta función realmente se llame. Así que para todos nuestros value getters, value formatters y cell renderers, siempre vamos a querer comenzar verificando si, oye, ¿params.data está definido ya? Si no, sigamos adelante y devolvamos un valor predeterminado sensato y razonable. Y luego, si está definido, sigamos adelante y apliquemos el value getter que queramos. Así que en este ejemplo, el value getter va a tomar los datos, va a verificar si está indefinido, y si lo está, va a devolver cero para el price. Y si no está definido, o si está definido, y realmente tenemos datos disponibles para nosotros, entonces usamos math.round en ese price para que los valores que estamos introduciendo en AGGrid ya hayan sido, ya sabes, redondeados hacia abajo al dólar más cercano.

Así que te lo dejo para que lo intentes. Vas a abrir este ejercicio en stack splits, y este es un poco más complejo que algunos de los que hemos hecho antes. Y lo que vas a hacer es escribir un value getter para el total. Como dije, esto es un poco más complicado porque no hay una propiedad total en los datos que estamos vinculando aquí. De hecho, si entramos en los datos con los que estamos interactuando aquí, podemos ver que tenemos una lista de order items. Hay una cantidad para cada uno de ellos, y lo que vas a querer hacer aquí es realmente sumar o calcular cuánto va a costar esto. Así que si entro en los datos aquí y bajamos a estos customers, puedes entrar aquí y comenzar a echar un vistazo a los datos. Hay algunas pistas más en este que quiero que pienses. Así que primero, echa un vistazo a esa row data interface. Realmente comprende cuál es el data model. Un order está asociado con los order items, que asocia cada item con un product. El product es el objeto que realmente obtiene el order item. Así que realmente puedes es el objeto que realmente contiene el price. Y así hay muchas maneras de hacerlo. Estas diapositivas recomiendan usar array.reduce. Creo que es una forma bastante complicada o pesada de resolver esto. También podrías usar un for loop, la forma que tenga más sentido, para echar un vistazo a todos esos items que están en un order. Luego vas a tomar cada product dentro de ese order, obtener ese price, y luego sumarlo todo basado en esa cantidad. Dado que este es más complicado, te voy a dar un puñado de minutos para trabajar en esto, y luego pasaré por la solución que puedes seguir. Voy a seguir adelante y pasar por la solución. Si no lo has resuelto aún, no te preocupes. Sé que este es un poco más complicado ya que estás teniendo que interactuar con datos que no estás completamente familiarizado. Pero si sigues adelante, espero que esto tenga sentido en cuanto a lo que está pasando.

Así que voy a seguir adelante y abrir esto dentro de StackBlitz. Lo que quiero hacer es escribir un value getter para mi columna total aquí. Así que primero voy a agregar mi value getter. Esto va a ser una función de callback que toma esos value getter params. Lo primero que quiero verificar es si tengo algún dato aquí. Si no, simplemente voy a devolver null. Puedes devolver cualquier valor que quieras. Creo que cero podría ser el mismo valor como un total predeterminado. Lo que quieras hacer, tienes eso disponible. Lo siguiente que quiero hacer es echar un vistazo a esos order items. Así que eso va a ser por los parámetros que data.orderItems. Voy a hacer esto con un for loop y luego lo refactorizaré y lo mostraré con array.reduce como sugirió el ejercicio en segundo lugar. Así que deja que mi total sea igual a cero, y luego para item de order items. Lo que quiero hacer es realmente encontrar el product de mi lista de products. Así que products y igual y de nuevo vamos a products viene de mis datos. Así que si volvemos al product aquí, vamos a los datos, podrías recordar esto de los ejemplos anteriores. Tenemos todos estos products aquí. Lo que quiero hacer es encontrar el product asociado con un order item basado en este id. Así que voy a decir, bien, mi product va a venir de data.products. Encuéntrame un product cuyo id sea igual al id del product de mis order items. Si no encontré un product, simplemente vamos a continuar con este array o a través de esta lista, seguir iterando, y si tuve un product entonces quiero que el total se incremente por los products. O en realidad vamos a hacer el término de los products. Rice, quiero decir que era, multiplicado por la cantidad de items. Y luego devolvemos el total. Así que ahora que he escrito este value getter, si voy a mi cuadrícula, podemos ver que para todos estos orders, ahora tengo un valor total aquí que se está calculando con este pequeño poco de lógica que he proporcionado. Solo para desglosarlo de nuevo una vez más. Esta función de value getter se está llamando con los value getter params. Hay muchas propiedades diferentes en ella, pero para este solo nos importa los datos reales para la fila que estamos tratando de representar.

Si aún no tenemos los datos, simplemente vamos a devolver cero como ese valor predeterminado. Y luego, una vez que tengamos los datos, vamos a iterar sobre todos los items, en esta lista de items de pedido de las filas. Y para cada uno de ellos, para cada item de pedido, vamos a buscar el producto con el mismo ID que el ID del producto en ese item de pedido. Si no encontramos un producto, simplemente vamos a continuar iterando, y si lo encontramos, vamos a convertir el precio del producto a un número y luego lo multiplicaremos por la cantidad dentro de este pedido, añadiéndolo al total general. Como se mencionó, te mostraré la solución con el método reduce, así que si quieres hacer esto para el RadarReduce que está en las diapositivas, eres bienvenido a echar un vistazo. Está haciendo lo mismo donde vamos a filtrar, asegurarnos de que realmente tenemos items que tienen un ID de pedido en ellos. Vamos a encontrar el producto que coincide y luego vamos a reducir eso a un total.

Una cosa que quiero mencionar sobre las diapositivas antes de pasar a la siguiente sección, estas diapositivas siempre se mantienen actualizadas, siempre están disponibles para ti y las soluciones y desafíos son tuyos para conservar. Así que si no pasas por todo el contenido, no vamos a pasar por todo el contenido esta mañana, hay muchos más datos, información útil aquí que siempre eres bienvenido a consultar, llevarlo de vuelta a tus compañeros de equipo, hacer lo que quieras. Así que por favor siéntete libre de usar estas diapositivas, y nos vemos la próxima vez. Para tu propio beneficio, como acabo de decir, hay alguna información aquí que no vamos a abordar esta mañana. Así que si estás interesado en cómo podrías construir value getters reutilizables con funciones de orden superior, hay un contenido realmente genial aquí para eso. No voy a repasar este contenido esta mañana, solo nos quedan un par de horas y hay mucho que cubrir. Así que siéntete libre de leer esto y abrir el ejemplo y jugar con él si lo deseas. Con eso, vamos a pasar a la siguiente fase de renderizado de celdas. Como mencioné, hay tres fases para esto. Está el value getter que va a ejecutarse primero, eso nos permite realmente instruir a Ajager cuál es el valor que queremos renderizar. Luego está el value formatter, es nuestra oportunidad de hacerlo lucir bien, de hacerlo presentable para el usuario. Por ejemplo, si tuviéramos fechas, podríamos querer formatear esas fechas en algo que sea realmente legible para una unidad. Y luego la fase final de la que hablaremos al final son los cell renderers, que realmente nos permiten hacer algo más personalizado, más avanzado. Así que primero, value formatters.

Bueno, después de que el valor de la celda es conocido, la función de callback opcional del value formatter nos permite formatear ese valor. El value formatter, al igual que el value getter, va a ser invocado por Aggrid para cada celda. Lo importante aquí es que este pipeline está bastante bien optimizado y memorizado. Así que, por ejemplo, si nuestro value getter realmente no devuelve nada nuevo o diferente desde la última vez que se ejecutó, Aggrid va a salir y no aplicará el value formatter. Lo mismo para el value formatter. Si el value formatter no cambia, no va a volver a ejecutar el cell render que viene a continuación. Así que estamos construyendo un pipeline aquí a medida que avanzamos. Al igual que el value getter tenía los value getter params, un value formatter tiene los value formatter params. Y los value formatter params van a aceptar realmente dos parámetros de tipo genérico diferentes. El primero es ese parámetro de datos. Esta es la interfaz para nuestros datos de fila a la que ya hemos estado expuestos. Pero luego el segundo va a ser el valor. Así que porque hay esa cosa del value getter que sucede primero, este segundo parámetro de tipo va a ser cualquiera que sea el tipo de esa cosa que nuestro value getter nos ha devuelto. Antes de sumergirnos en el uso del value formatter, echemos un vistazo a esta interfaz y veamos qué está disponible para nosotros aquí. Así que podemos ver que hay una serie de propiedades nuevamente en este value formatter.

nosotros aquí. Así que podemos ver que hay una serie de propiedades nuevamente en este value formatter. Vamos a desglosarlas un poco. La principal diferencia aquí es que ya tenemos nuestros datos todavía aquí. Podría ser TData o indefinido, pero tenemos el valor directamente proporcionado a nosotros. Así que no tenemos que preocuparnos por cómo obtener ese valor porque el pipeline del value getter ya se ha ejecutado.

De lo contrario, es muy similar al value getter. Tenemos la API de grid, la API de columna, las definiciones de columna, las columnas reales y el nodo de fila en el que estamos renderizando. Así que echemos un vistazo a un ejemplo rápido. Voy a copiar y pegar esto aquí en la lista de pila que ya tenemos. Así que ya tenemos este total, que está renderizando un valor en dólares. Así que si quisiéramos tener un value formatter aquí, podríamos usar la API de internacionalización para crear un formateador de números para la región en-US. Y luego podríamos usar ese formateador para realmente renderizar el valor aquí. Voy a ejecutar esto, actualizar, y ahora puedes ver aquí que porque estoy usando la API de internacionalización para formatear estos valores con un mínimo y máximo de dígitos de dos, tengo valores en dólares realmente bonitos aquí con los centavos claramente visibles para mí en esta columna. Ha añadido la coma, si es apropiado para esta localización particular, y hay cualquier otra cosa aquí que podríamos querer para hacer que esto se vea realmente bien. Me gustaría que hicieras lo mismo. Este debería ser mucho más corto que el ejercicio anterior. Vas a abrir este ejercicio en stack blitz, y luego vas a añadir un value formatter a esa columna total, y recomiendo usar esto como una oportunidad para abrir ndn y mirar la clase de formato de número en la API de internacionalización para escribir un value formatter realmente bonito que formatee esa columna total de la manera que quieras usando esa clase. Así que este debería ser mucho más corto, así que te daré solo unos minutos para echarle un vistazo. Veamos cómo construir esto. Así que voy a abrir el stack blitz aquí y luego entrar en ello. Como se mencionó, la idea aquí es que vamos a escribir un value formatter usando o para esta columna total, y mi recomendación fue usar la API de internacionalización para hacer esto. La API de internacionalización te permite, como podría sonar, internacionalizar el número total y renderizarlo basado en la localización que le proporciones.

Así que para escribir un value formatter, primero voy a especificar value formatter aquí, y eso me dará los params para este value formatter en particular. Al igual que con el value getter, necesito verificar, sabes, ¿tengo un valor ahora mismo? Y si no tengo un valor, entonces solo necesitamos devolver algo sensato o nulo o indefinido, o lo que sea que nuestro valor predeterminado deba ser en esta situación particular. A partir de ahí, voy a crear un formateador usando la clase de formato de número, y voy a especificar en us aquí como mi localización particular. Podrías poner cualquier localización que quisieras aquí, y luego los dígitos de fracción máxima de dos y los dígitos de fracción mínima de dos. Esto es un precio, así que quiero mostrar centavos aquí. Y luego, finalmente, voy a devolver formatter punto format params punto value. Y he roto esto bastante mal. Veamos.

Olvidé hacer esa parte. Bien. Lo siento por eso. Entonces, nuevamente, creé un formateador aquí usando la clase de formato de número. He especificado en us como la localización que quiero formatear. He especificado mis dígitos mínimos y máximos como dos para cada uno de estos porque quiero mostrar valores en dólares aquí. Si hay centavos, quiero que se muestren. Y luego, estoy verificando si el valor es indefinido, entonces vamos a formatear cero. Creo que el error aquí era que solo estaba haciendo si params punto valor, que es básicamente si el valor existe. Sí, creo que Ruby lo entendió bien. Tenía esto roto en esta línea aquí. Pero si no tenemos un valor, devolveremos formatear cero. Y si tenemos un valor, vamos a formatear ese número.

¿Hay alguna pregunta sobre el formateador de valores o el pipeline de renderizado de celdas hasta este punto antes de que entremos en los renderizadores de celdas? Entonces, entremos en los renderizadores de celdas. Tengo que darte una advertencia previa aquí de que cada vez que he trabajado con un cliente en AgGrid se encuentran con problemas de rendimiento porque han mal utilizado el parámetro del renderizador de celdas. Así que, esta es una pieza muy poderosa de la API, pero también es particularmente peligrosa si pones algunos componentes de React no optimizados aquí porque la función del renderizador de celdas nos permite realmente renderizar cada celda individual usando un componente de React. Así que, este va a ser el último paso en este pipeline de renderizado de celdas. Después de que hemos determinado cuál es el valor para la celda, después de que lo hemos formateado con cualquier formato que queríamos hacer, luego lo renderizamos usando un renderizador de celdas. Realmente quiero enfatizar que solo deberíamos usar estos cuando sea absolutamente necesario. Entonces, lo que podemos hacer aquí es pasar una instancia o una referencia a un componente de React y usará ese componente para realmente renderizar el valor después de que haya sido formateado. Esto es realmente útil si queremos mostrar elementos adicionales o iconos o agregar algo de interactividad a nuestras celdas porque podemos poner oyentes de eventos en ellas. Aquí es donde podemos comenzar a hacer gran parte del trabajo de personalización de cómo los valores podrían mostrarse o interactuar con ellos.

El renderizador de celdas para la definición de columna acepta los siguientes valores. Si es indefinido, si no proporcionamos un renderizador de celdas, solo va a renderizar el valor formateado de la celda como el contenido de texto de la celda. Podemos registrar renderizadores de celdas en un contexto global. Así que, podemos darles nombres y compartir ellos a través de múltiples instancias de aggrid o definiciones de columna. Y así, el renderizador de celdas podría apuntar a una cadena que hace referencia a uno de esos renderizadores de celdas registrados o puede ser un componente de React. Nos vamos a centrar en ese tercero aquí donde pasamos un componente de React como un renderizador de celdas.

Así que, como hice antes, quiero resaltar que hay parámetros de renderizador de celdas aquí. Van a ser casi idénticos a los parámetros formateados de valor. Es solo que el valor ahora en este punto va a estar realmente formateado. Así que, echemos un vistazo a cómo podría ser uno de estos. Este debería parecer familiar porque lo que estamos haciendo aquí es simplemente tomar ese formateador de celdas que teníamos antes y realmente desglosarlo en un renderizador de celdas. Así que, comencemos con eso. Así que, voy a cambiar esto a renderizador de celdas. Y nuevamente, esto ahora puede ser un componente de React. Y de hecho, realmente está funcionando como un componente de React o está siendo tratado como un componente de React hasta este punto. Y con cambiar ese formateador de valor a renderizador de celdas, todo está funcionando como se esperaba. Porque el renderizador de celdas ocurre al final, podríamos usarlo para hacer parte del formateo. Pero lo que quiero hacer es devolver un poco más de HTML aquí para formatear la forma en que quiero mostrar esto. Así que, voy a decir primero que voy a cambiar la forma en que esto se devuelve aquí. Voy a decir que mi valor formateado es RAMSValue igual a indefinido. Y si lo hace, devolveremos el formateador formatear en un cero. De lo contrario, haremos formateador formatear número RAMSValue. Y luego dentro de aquí, lo que voy a hacer es devolver algo de JSX. Voy a usar un fragmento aquí. Y luego voy a hacer un span. Voy a poner algo de estilo en él para establecer la opacidad en 0.54. Y dentro del span, pondré el símbolo de moneda USD aquí. Y luego, junto a eso, pondré el valor formateado. Regrese a mi aplicación y vuelva a ejecutarla. Y ahora podemos ver que la columna total aquí está usando nuestro renderizador de celdas. Debido al renderizador de celdas, pudimos realmente poner algo de HTML estilizado aquí. Aplicamos algo de formato a él. Pusimos ese signo de dólar. Ajustamos su opacidad. Lo que queramos. Este es un componente completo de React, por lo que tenemos la capacidad de hacer hooks. Podemos usar otros componentes de React dentro de él. Lo que queramos, tenemos la capacidad de hacer con ese renderizador de celdas. Te lo voy a dar para que lo intentes. Aquí hay un nuevo ejercicio. Déjame dejar un enlace en el chat. En este ejercicio, vas a usar un renderizador de celdas para cambiar la forma en que renderizamos la columna de fecha de pedido. Primero vas a verificar si hay un valor definido, y si no, entonces devuelves algo de JSX que incluye un icono material junto a esa cadena de fecha formateada. Si necesitas el fragmento de HTML que renderiza el icono de evento, te lo hemos proporcionado aquí. Te daré solo un par de minutos para hacer este. No creo que este tome mucho tiempo. Luego pasaremos a la siguiente parte de AG Grid. Para este, vamos a trabajar en la columna de fecha de pedido. Lo que quiero hacer es simplemente mostrar un bonito icono que permita al usuario saber que esto es una fecha. Voy a formatear la fecha también como parte de mi renderizador de celdas. Voy a comenzar especificando mi renderizador de celdas aquí, y voy a recibir mis gramos. Si no tengo un valor, haz esto bien esta vez, vamos a ser aún más explícitos al respecto. Si mi valor es indefinido, simplemente voy a devolver nulo para esto. Lo siguiente que quiero hacer es crear un medio para formatear esto. Voy a recurrir a la API de internacionalización esta vez o nuevamente, pero esta vez voy a crear una instancia de la clase de formato de fecha y hora. Nuevamente, voy a especificar NUS para mi localización. Siéntete libre de usar la localización que tenga sentido para ti. Usando este formateador, luego voy a crear mi valor formateado llamando a formateador.formatear en params.value. Ahora debería tener una cadena de fecha y hora bien formateada aquí. Voy a devolver esto. Nuevamente, dado que este es un renderizador de celdas, esto realmente funciona como un componente de React aquí, y por lo tanto puedo devolver JSX en este punto. Voy a devolver un div, y voy a aplicar algo de estilo en él. Voy a establecer el modo de visualización en flex para esto. No tengo todo centrado dentro de esta celda en particular. Luego voy a renderizar un icono para esto usando iconos materiales, y voy a usar el icono de evento aquí para este. Finalmente, voy a escupir mi valor formateado. Si volvemos a la aplicación, vamos a la fecha de pedido, ahora puedes ver que estamos formateando la fecha de pedido usando la API de internacionalización y estamos mostrando un icono al lado de esa fecha. Pudimos hacer eso porque este renderizador de celdas acepta un componente de React, y este componente de React es capaz de renderizar más HTML que solo el valor formateado real. Una advertencia más. Este es, nuevamente, el lugar donde AgGrid se vuelve lento. Si pones componentes de React no optimizados aquí o componentes de React que están haciendo una gran cantidad de trabajo, necesitas pensar en el hecho de que AgGrid realmente está renderizando este componente para cada celda en esta columna en particular. Acabamos de renderizarlo, digamos, 15 veces. Las pequeñas filas están en mi pantalla. Si este fuera un componente de React costoso de crear, eso sería mucho tiempo de renderizado inicial que estamos gastando en estos renderizadores de celdas.

¿Existen estrategias realizadas por AgGrid para optimizar eso? Sí. Entonces, como parte de este proceso, tenemos esa parte de obtención de valor, luego el formateador de valor, y luego el renderizador de celdas. Solo va a llamar al renderizador de celdas si todos los pasos anteriores han dado un valor diferente. En otras palabras, va a ser realmente eficiente al llamar solo a ese renderizador de celdas cuando AgGrid sabe absolutamente que se ha producido un nuevo valor y necesita ser re-renderizado usando ese renderizador de celdas. A partir de ahí, depende de usted optimizar el componente de React. Puede usar la función memo a su alrededor para ser realmente explícito sobre la memoización de la función y luego, por supuesto, sus trucos de optimización interna también funcionan aquí, en términos de usar los hooks use state, use memo, no crear nuevas funciones de callback. Cada renderizado usando el use callback sigue esas mejores prácticas de React para mantenerlo agradable y rápido.

¿AgGrid utiliza algún renderizado dinámico en esa tabla? No estoy exactamente seguro de lo que quiere decir con renderizado dinámico, pero puedo suponer que podría referirse a algo como la virtualización. Y así, una de las cosas que AgGrid hace que es realmente inteligente es que todas las filas que no están realmente en la ventana de visualización en este momento, no las renderiza. Así que está completamente virtualizado, solo va a llamar a ese renderizador de celdas a medida que se desplaza. De hecho, puede poner un pequeño console log en su renderizador de celdas y desplazarse hacia abajo y verá los console logs encenderse a medida que se desplaza por la tabla. Así que solo renderizará las que son visibles en la pantalla.

Bien, el último pequeño capítulo en el que vamos a entrar para AgGrid antes de pasar a AgCharts, y eso es la edición de celdas. En mi experiencia, AgGrid es a menudo buscado por empresas financieras o bancos, porque te permite construir una experiencia similar a Excel. Hasta ahora solo hemos estado usando AgGrid para mostrar valores, pero si quieres construir una experiencia similar a Excel puedes usar AgGrid. Hasta ahora solo hemos estado usando AgGrid para mostrar valores, pero al igual que una tabla de Excel también puedes permitir que tus usuarios editen valores directamente dentro de esta cuadrícula.

Para habilitar esto, vamos a ir a la definición de la columna para cualquier columna que queramos hacer editable y configurar esa propiedad editable a true. Si es false, el usuario no puede editar, y si es true, pueden editar. También podemos configurarlo para que sea una función para determinar si la edición está habilitada, si queremos hacer alguna búsqueda personalizada, o si queremos ver si estamos en algún tipo de estado que podría hacer que esa fila sea de solo lectura o lo que sea. Así que para habilitar la edición de celdas, vamos a ir a cualquier definición de columna que queramos hacer editable y configurar editable a true para esa columna en particular. También lo hacemos a través de la API de Grid, por lo que podríamos decir, ya sabes, para una fila o una clave de columna en particular, podemos comenzar a editar la celda, y luego si queremos detener la edición programáticamente tenemos esa capacidad de hacerlo usando ese objeto de API de Grid que se nos ha proporcionado en algunos de estos callbacks.

aggrid proporciona algunos editores de celdas integrados para que no tengas que construir editores tú mismo. Así que si este conjunto de editores funciona para ti, eso es realmente genial. Por supuesto, veremos cómo escribir o hay algún contenido proporcionado sobre cómo escribir tu propio editor de celdas también. De fábrica, aggrid proporciona lo siguiente. Proporciona un editor de texto para campos de texto cortos, proporciona un editor de texto largo para edición de múltiples líneas, hay un editor de fecha y un editor de selección si quieres proporcionar o restringir al usuario a un conjunto de opciones. Hay un editor de selección más rico en funciones que está incluido en Enterprise. Solo quiero mencionarlo, pero hay algunos editores solo para Enterprise en caso de que no quieras construirlo tú mismo y estés de acuerdo en pagar un poco de dinero por eso.

Por defecto, aggrid va a elegir el editor de celdas de texto. Eso debería parecer familiar porque estaba eligiendo el filtro de texto como el filtro predeterminado. Nuevamente, simplemente asume que estamos mostrando texto primero. Puedes usar una propiedad de definición de columna de editor de celdas para especificar un editor de celdas integrado específico o para proporcionar un editor de celdas personalizado si quieres proporcionar un componente de React que maneje la experiencia de edición. Puedes hacer eso usando esa propiedad de definición de columna de editor de celdas. Por ejemplo, si quisiéramos usar el editor de celdas de texto largo, entonces configuraríamos editable a true en la definición de la columna y luego para el editor de celdas, vamos a suministrar aglargtext cell editor como una cadena como el editor de celdas que queremos usar aquí.

Aquí está el código que usaríamos para el editor de celdas de selección. Simplemente pasaríamos ese en. Va a usar todos los valores que ve como las opciones particulares y por supuesto podrías proporcionar las opciones también usando programas de editor de celdas. Así que con eso solo voy a darte una oportunidad para que te aclimates con estos y juegues un poco con ellos. Te daré solo un minuto para hacer este pero vas a abrir este ejercicio en stack blitz y dejar el enlace de nuevo en el chat. Vas a habilitar la edición de celdas para la columna de nombre del cliente. Solo vas a configurar editable a true y ahora deberías poder editar esa columna de nombre del cliente como un campo de texto y luego configurar editable a true para la columna de número de cuenta pero configurar el editor de celdas para que sea el aglargtextcelleditor. De esa manera puedes ver y jugar con la diferencia entre el editor de texto pequeño y el editor de texto grande. Nuevamente, no creo que esto tome más de un minuto así que te daré dos para que pases por este y luego iré a la solución yo mismo. Voy a abrir el stack blitz aquí y lo que quiero hacer es para la columna de nombre del cliente quiero hacer esto editable así que solo voy a configurar editable a true para el nombre del cliente. Ahora que he hecho eso puedo hacer doble clic aquí y puedo cambiar el nombre a lo que quiera y presionar enter para escapar. Así que el doble clic me lleva a ese editor. También quiero hacer lo mismo para el número de cuenta pero para el número de cuenta quiero probar el editor de celdas de texto largo solo para familiarizarme con él. Así que voy a configurarlo a true aquí y voy a configurar el editor de celdas al aglargtextcelleditor. Así que ahora si hago doble clic en el número de cuenta puedes ver que estamos en un área de texto. Uno de los trucos que podrías haber notado es que no es muy fácil de usar porque solo va a llenar el espacio de la celda. ¿Qué podríamos hacer al respecto? Bueno, podríamos usar un renderizador de celdas para realmente hacer la celda más grande cuando estamos en una experiencia de edición, eso estaría totalmente bien. AGGrid también tiene la capacidad de abrir el editor en un pop-up en su lugar, así que si quieres jugar con esto podrías configurar el pop-up del editor de celdas a true. Ahora el comportamiento del editor es que en lugar de hacerlo en línea como lo estábamos haciendo para este campo de texto, va a abrirlo en un pop-up para el número de cuenta. Esto es genial porque ahora tengo el editor de texto grande completo disponible para mí con todas las líneas múltiples visibles. Así que eso concluye lo que vamos a cubrir para AGGrid. Quiero resaltar que las diapositivas, y nuevamente estas están disponibles para ti, puedes conservar las diapositivas, tienen mucha más información sobre AGGrid con React.

Así que si quieres aprender sobre cómo escribir tu propio componente de editor de celdas personalizado hay mucho contenido excelente sobre cómo hacerlo. Podrías haber notado que hasta ahora solo estamos haciendo como una edición local. No estamos realmente persistiendo eso a ningún tipo de API externa. Así que si tienes preguntas sobre cómo persistir datos de vuelta a la API hay mucho contenido excelente sobre eso también. Finalmente hay una sección completa sobre el estilo de AGGrid desde el estilo de celdas hasta filas para construir tu propio tema. Todo ese contenido está aquí para que lo explores y leas. Vamos a pasar a AGCharts con React a continuación y antes de entrar en eso vamos a tomar un breve descanso de 10 minutos. Así que son las 10:50 a.m. pt para mí en este momento. Así que vamos a volver exactamente en 10 minutos a las 11 a.m. pt o lo que sea en tu zona horaria local y luego vamos a alejarnos de Grids y hablar sobre AGCharts en su lugar. Así que volveremos en 10 minutos para un breve descanso. Como dije antes, vamos a poner un pequeño marcador en la charla de Grid por un momento y usar esta última hora para hablar sobre AGCharts con React. Entonces, ¿qué es AGCharts?

Muchos de sus gráficos están realmente enfocados en FinTech. Están optimizados para el rendimiento y la velocidad. Puedes lanzarles una gran cantidad de datos y ellos siguen funcionando y renderizando realmente muy bien y tienen muchas herramientas o personalizaciones realmente integradas en ellos en comparación con otras bibliotecas de gráficos.

Así que lo que quiero hacer es darte un poco de tiempo para que te aclimates con la API de AGCharts, aprender cómo crear algunos de los tipos de gráficos básicos usando AGCharts y hablaremos sobre algunos casos de uso más avanzados. Este va a ser un conjunto diferente de diapositivas que las anteriores, así que dejaré un enlace nuevo a estas diapositivas en particular. Vamos a sumergirnos directamente en ello.

Así que una de las cosas que va a ser diferente desde el principio es que vamos a crear lo que se llama opciones de gráfico e integrar o interactuar con un componente AGChart. La forma en que funciona AGChart es que no hay como un AGLineChart o AGPyChart. En su lugar, solo está el componente AGChart y dentro de las opciones de gráfico vamos a darle tanto los datos que está destinado a renderizar o como graficar o trazar y también le vamos a dar una lista de series. Ahora, una serie aquí va a decirle a AGCharts qué visualización usar para esta particular serie de datos que estamos tratando de mostrar. Así que primero echemos un vistazo a cómo podríamos especificar los datos.

Así que aquí tengo un array de algunos datos de ejemplo. Como podrías adivinar, probablemente vamos a alimentar esto en un gráfico de líneas en algún momento porque estos son valores a lo largo del tiempo. Así que dentro de cada uno de nuestros datos tenemos una fecha para cuando ocurrió el valor y el valor asociado con esa fecha. A partir de ahí, dentro del componente en el que realmente queremos mostrar AGChart, vamos a instanciar un objeto llamado options de tipo AGChart options y vamos a proporcionar los datos como ese primer parámetro en AGChart options. En la mayoría de los casos, los datos van a ser un array de objetos que representa cada punto de datos del gráfico cartesiano.

Así que vamos a hablar principalmente sobre algunos de los gráficos cartesianos. Aquí, por supuesto, hay otros tipos de gráficos que podrían tener diferentes estructuras de datos, pero para nuestro propósito vamos a ver principalmente datos que se ven así. La siguiente parte de esto es especificar la serie para el gráfico.

Así que la serie define el tipo de gráfico a renderizar y luego, basado en eso, va a elegir cuál o vas a especificar qué propiedad usar para la clave x para tu eje x y tu clave y para el eje y. Porque en este ejemplo particular vamos a mostrar un gráfico de líneas. Así que el gráfico de líneas necesitaría saber cómo trazar datos contra ambos un eje x y un eje y. Así que dados los datos que proporcionamos aquí voy a volver a ello donde tenemos fecha y valor en nuestra serie vamos a decir bien para nuestra línea nuestra clave x va a ser fecha, ¿verdad? vamos a mostrar el cambio a lo largo del tiempo a través de ese eje inferior y luego la clave y va a ser el valor, así que ese eje y será qué tan grande o pequeño es ese valor para esas fechas particulares. Esto es todo lo que necesitamos para realmente renderizar un buen gráfico de líneas dentro de ag charts. Así que vamos a tomar estas opciones y las vamos a vincular a la propiedad options en ag charts. Así que nuevamente la propiedad series, esto es un array porque realmente mostramos múltiples series en un solo gráfico. Esto podría ser útil si quisieras mostrar un gráfico de líneas para algunos datos, gráficos de barras para otros y tener todo en el mismo gráfico.

El tipo en la serie está instruyendo a ag-grid qué tipo de visualización usar para esta serie en particular y aquí estamos mostrando un gráfico de líneas mostrando ese valor a lo largo del tiempo. Así que comencemos con el gráfico de líneas. Vamos a construir un gráfico de líneas simple usando ag charts que muestra datos de vuelos.

Así que nuestro modelo se basará en la siguiente interfaz. Vamos a tener una interfaz llamada un vuelo que tiene una fecha y luego el tiempo va a ser el número de horas que realmente estamos volando el avión y esto va a ser un número. Para comenzar, vamos a empezar construyendo un gráfico de líneas básico que muestre estos datos de vuelo. Entonces, ¿cómo vamos a hacer esto? Bueno, vamos a obtener todos nuestros datos y suministrarlos como la propiedad de datos para nuestras opciones de ag chart y luego vamos a definir una serie que realmente lo renderice. En este caso, nuestra serie va a ser una serie de líneas. Vamos a usar la fecha del vuelo como la clave x y el tiempo del vuelo como la clave y. Además, podemos proporcionar tanto el nombre x como el nombre y como opciones adicionales para esta serie de líneas en particular. Así que aquí voy a decir que el nombre de la y es tiempo de vuelo, así que eso nos dará una buena etiqueta para ese eje y.

Una vez que tengamos nuestras opciones para el gráfico, luego vamos a vincular eso a la propiedad de opciones del componente de ag charts. Por defecto, ag charts generará automáticamente los ejes para el gráfico. Esto es realmente útil. No pensamos en cuáles son los valores mínimos o máximos o en cómo renderizar todo esto. Ag charts hará eso por nosotros. Podemos especificar el tipo de eje a usar para cada dimensión. Hay tres tipos básicos de ejes disponibles para nosotros cuando estamos construyendo gráficos de líneas o gráficos de barras u otros gráficos cartesianos. Así que usamos número para datos numéricos continuos. Podemos usar categoría para datos discretos donde hay tal vez un conjunto discreto. Sabes, si estuviéramos haciendo gráficos de barras y queremos, ya sabes, teníamos algunas categorías discretas que estamos usando para esas barras, podríamos usar un eje basado en categorías.

Y luego el tiempo lo usaríamos para datos basados en el tiempo. Así que el eje numérico, como mencioné, se utiliza para mostrar valores numéricos continuos en el gráfico. Así que si quisiéramos especificar el eje específico que queríamos usar para ese eje y, podríamos hacerlo dentro de nuestra serie. Así que para esa serie de líneas, bajaríamos al eje aquí o, en realidad, esto está en las opciones aquí. Simplemente decimos, está bien, tenemos los siguientes ejes. Tenemos un eje numérico y va a estar posicionado a la izquierda. El tipo está instruyendo a ag qué tipo de serie usar nuevamente, como la categoría numérica o fecha, y la posición izquierda, derecha, abajo, arriba va a decirle a ag grid dónde realmente renderizar ese eje.

Un eje de tiempo se va a usar para formatear datos basados en el tiempo en un gráfico o para graficar datos basados en el tiempo en un gráfico. El eje de tiempo es similar al eje numérico, pero va a diferir en la forma en que va a generar el número de marcas. Va a intentar elegir ya sabes, si los números están basados en, va a intentar elegir incrementos de marcas realmente agradables que tengan sentido para si son horas, minutos, días, cualquier tipo de diferencia en nuestro conjunto de datos y va a diferir en la forma en que se formatean las etiquetas. Sabes, vamos a querer tener mucho más control sobre cómo realmente renderizamos esos formatos de etiqueta particulares o formateamos esas etiquetas. Los valores de tiempo deben ser objetos de fecha o valores de marca de tiempo numéricos. Así que puedes usar como segundos desde la época o objetos de fecha reales de Javascript cuando estamos tratando de usar el eje de tiempo.

Así que si fuéramos a actualizar el gráfico de líneas para usar un eje de tiempo en la parte inferior, lo que haríamos es ir al array de ejes debajo de las opciones de ag chart y agregaríamos un eje de tiempo a él. Nuevamente, la posición podría ser como izquierda, derecha, arriba o abajo. Vamos a posicionar esto en la parte inferior y luego vamos a decirle a ag charts qué intervalo usar. Esto es algo que es específico del eje de tiempo, vamos a decir, ya sabes, para cada paso en los intervalos estamos generando ópticas, usemos meses como ese valor de paso. Y finalmente podríamos pasar una función de formato para formatear cómo se van a renderizar esas etiquetas individuales. Así que creo que en este caso va a ser el mes abreviado y luego el año completo.

Esta sección va a tener algunos desafíos más largos que te llevarán a través de todo el paso de realmente diseñar un gráfico, así que te daré un par de minutos para que pases por este desafío. Lo que vas a hacer es crear un gráfico de líneas para representar ese tiempo de vuelo de cada mes. Así que primero vas a actualizar el título del gráfico para que sea tiempo de vuelo luego vas a crear una serie de tipo línea. Así que vas a ir a las opciones del gráfico vas a ir a series y vas a agregar un objeto a ese array y establecer el tipo en línea. Vas a establecer la clave x como date vamos a usar date como el eje x y luego la clave y como time el número de horas que realmente estuvimos en el aire. Vas a establecer el nombre y como tiempo de vuelo de esa manera estamos etiquetando ese eje.

Luego, en ese punto, el gráfico debería estar funcionando bastante bien, los siguientes pasos son solo para realmente personalizarlo más. Así que vas a crear un eje con el tipo establecido en número y establecer la posición del eje en izquierda para ese eje y y crear otro eje con el tipo establecido en tiempo en la parte inferior para crear ese eje de tiempo. Si te sientes particularmente desafiado, puedes intentar estos desafíos adicionales aquí y puedes establecer el paso como mes para ese intervalo y también puedes configurar la forma en que está formateado. Siéntete libre de referenciar las diapositivas a medida que avanzamos a través de esto y finalmente actualiza el componente para renderizar el componente de ag chart encontrando nuestras opciones en la prop de opciones del componente. Este debería ser un poco más largo, así que voy a darte algo de tiempo para que lo completes y aquí está el enlace a las diapositivas con el desafío de stack blitz.

Bien, así que hay mucho que estamos tratando de hacer aquí, pero en general estamos tratando de construir un gráfico que va a mostrar nuestro tiempo de vuelo a lo largo del tiempo. Básicamente, cuántas horas pasamos en el aire por día. Un dato curioso, mi socio comercial y querido amigo Brian Love, quien también trabaja en estas masterclass de ag grid conmigo, este es su acto, creo que parte de esto es su tiempo de vuelo real, está aprendiendo a ser piloto ahora mismo, así que es una fuente de datos divertida para eso ahora mismo.

Bien, así que entrando en esto primero necesito encontrar una serie y una serie va a instruir a ag charts cómo mostrar realmente los datos que estoy tratando de graficar. Así que hay muchos tipos diferentes aquí, he pasado el cursor sobre qué tipo podría ser. Hay área, bar, box plot, bubble, bullet, candlestick, cord, donut. Hay tantos tipos diferentes de series disponibles para ti y todo está realmente bien tipificado, así que una vez que suministras uno de estos, el resto de la serie se iluminará con todas las formas en que puedes personalizar o configurar esa serie en particular. Así que voy a elegir line como mi serie aquí y luego si puedo abrir mi vista previa, puedes ver todas las diferentes formas en que podríamos personalizar la serie de líneas de gráficos. Así que primero voy a especificar mi clave x y decir que vamos a graficar usando date y luego la clave y va a ser, creo que era flight time. Con eso, vamos a pasar a la parte donde estamos renderizando el componente de ag charts de esa manera podemos verlo mientras comenzamos a configurar más de estas opciones. Así que voy a renderizar ag charts aquí y voy a vincular mis opciones a las opciones en el gráfico. Bien, así que no tenemos nada todavía y parte de eso es porque estamos sobrescribiendo estos ejes, pero si salgo de los ejes y realmente dejo que elija algunos ejes para nosotros, puedes ver que de inmediato va a mostrarnos algunos datos a lo largo del tiempo con el tiempo de vuelo como nuestro eje y. Pero no es muy útil, ¿verdad?

Como la forma en que ha elegido formatear esto, tanto el eje de valor como el eje de datos no es ideal y por eso queremos entrar y comenzar a configurar los dos ejes que queremos renderizar. Así que para hacer eso vamos a agregar objetos a este array de ejes y el primero que quiero hacer es tipo number y voy a posicionar esto a la izquierda. Así que de inmediato al especificar que somos de tipo number queremos estar a la izquierda, tenemos un eje y mucho más agradable aquí que está interpolando de 0.8 a 1.8 horas en el aire para estas fechas particulares. Como dije, esto podría ser posicionado, ya sabes, izquierda, derecha, abajo, arriba, así que podría poner esto a la derecha si quisiéramos invertir donde se muestra ese eje, es bastante fácil de configurar eso. Pero por ahora lo mantendremos a la izquierda y luego vamos a hacer tipo date para nuestro eje x y posicionar esto a lo largo de la parte inferior. Así que nuevamente, porque el formato es tosco aquí, estas fechas, el formato incorporado realmente ha roto o hecho que el gráfico no se vea particularmente bien, pero estos ejes de datos pueden ser personalizados aún más para permitirnos especificar tanto el intervalo de tiempo que debería usar para los pasos junto con el formato que debería usar para renderizar los objetos de datos reales. Así que hagamos el formato primero, voy a establecer la etiqueta aquí y voy a decir que vamos a formatear las etiquetas usando y nuevamente quiero decir que este es el mes corto y el año largo. Así que guarda eso y actualiza aquí y luego creo que también necesito actualizar el mes porque la forma en que estamos escalonando ahora mismo no es muy útil para nosotros. Así que vamos al intervalo y voy a cambiar el paso a ser time dot month oh veo que el tipo aquí no está supuesto a ser date, esto se supone que es time. Lo escribiré en mi lado. Bien. Así que ahora que he hecho eso, lo establecí para que sea time, lo formateé usando el mes corto y el año largo y cambié el intervalo para ser intervalos basados en mes. Ahora tenemos un gráfico realmente agradable que nos muestra, ya sabes, cuál fue el tiempo de vuelo en cualquiera de estos días individuales. ¿Hay alguna pregunta sobre el gráfico de líneas que pueda responder antes de pasar al siguiente tipo de gráfico? ¿Puedes hacer que la línea sea curva? Sí, hay una manera de hacer interpolación de valores. Así que si vas a la documentación para la serie de líneas, hay una manera de especificar ese valor de interpolación en ella. Así que si subo aquí está bien, ¿cómo interpolo esto? Bueno, hagamos una línea suave, por ejemplo, y ahora puedes ver que va a intentar dibujar algunas curvas bezier agradables a través de cada punto de datos y hay un par de tipos diferentes que están disponibles, veamos, hay una lineal que es creo que la predeterminada, suave y luego step va a darnos esa función escalonada para pasar por ella. Esos son los tres incorporados. Creo que también hay una manera de especificar tu propio interpolador si realmente quieres personalizar la forma en que esto se dibuja. Sí, gran pregunta. Bien, pasemos al siguiente tipo de gráfico. Así que aprendamos cómo dibujar gráficos de barras. Así que para construir un gráfico de barras básico que muestre los datos de vuelo, lo que haríamos es usar el tipo de serie bar. El tipo de serie bar va a funcionar de manera muy similar al tipo de serie de líneas vamos a especificar una clave x y una clave y en la serie de líneas. Ahora lo que vamos a hacer funciona de manera muy similar al tipo de serie de líneas. Vamos a especificar una clave x y una clave y junto con un nombre y para etiquetar ese eje y. Lo que va a ser diferente es que vamos a usar ese eje de categoría que mencioné antes. Ahora el eje de categoría difiere de un eje de número que asume que hay un número continuo de valores entre el mínimo y el máximo. Va a diferir del eje de fecha que asume que hay, ya sabes, un paso continuo entre dos fechas diferentes. Solo se va a renderizar para el número establecido de categorías que especificamos o proporcionamos a ag charts. En este ejemplo vamos a usar la propiedad de mes para el eje de categoría. Así que como nuestros datos son por mes, vamos a categorizar nuestros datos en esta serie por mes para mostrar esas barras individuales. Entonces, ¿cómo va a funcionar esto? Bueno, todavía vamos a usar un eje de número en el lado izquierdo. Así que todavía va a elegir entre esos valores discretos entre como 0.8 y 1.6 horas de tiempo de vuelo. Pero luego vamos a especificar un eje de categoría como el segundo eje esta vez.

Todavía vamos a posicionar en la parte inferior y luego vamos a elegir una forma diferente de formatear esa etiqueta. Así que aquí en los datos tenemos una etiqueta disponible para nosotros y vamos a usar esta función de callback para buscar la etiqueta particular basada en el índice en el array y renderizar eso. Bien, estos están llegando un poco rápido mientras terminamos esto. Así que es hora de otro desafío. Esta vez vas a trabajar con un gráfico de barras para mostrar datos de tiempo de vuelo por mes. Y esto es lo que necesitas hacer.

Vas a establecer esa clave x como month, la clave y como time, y el nombre y como flight time. Lo que va a diferir es cuando lleguemos a los ejes. Todavía vas a tener un eje basado en números en el lado izquierdo del gráfico, pero a lo largo de la parte inferior vas a crear un eje de categoría y alinearlo a lo largo de la parte inferior del gráfico. Vas a usar una función de formateo personalizada para las etiquetas del eje para mostrar la etiqueta almacenada en el conjunto de datos para cada mes. Como viste en este ejemplo antes, la forma en que va a funcionar es que vas a obtener el objeto params de vuelta. Te va a dar el índice del dato particular que estamos tratando de renderizar. Así que vas a decir, está bien voy a entrar en mi array de datos, voy a usar ese índice para extraer el dato específico que estoy tratando de graficar, y luego voy a buscar esa etiqueta en ese dato para usar en mi eje. Espero que esto se sienta bastante familiar. No tomará tanto tiempo como el último. Te daré unos minutos y luego trabajaré en el desafío.

Así que esta vez en lugar de dibujar un gráfico de líneas, lo que quiero dibujar es un gráfico de barras usando la serie bar en lugar de la serie line. Para hacer esto, voy a necesitar hacer un par de cosas diferentes. Primero, voy a tener que definir la serie de barras y decirle a AgCharts cómo trazar realmente los datos, y voy a encontrar mis ejes de esa manera sabe cómo dibujar esos ejes y hacer que se vean realmente bien. Así que comencemos con la serie aquí y voy a establecer la serie esta vez para que sea de tipo bar. Nuevamente, si uso mi editor, puedo ver todas las diferentes formas en que puedo personalizar o cambiar la serie de barras. Hay muchas opciones adicionales para la serie de barras como barras de error, y controlar los rellenos de las barras, los trazos, cosas de esa naturaleza. Para esto, voy a establecer la clave x como month, así que todavía vamos a estar graficando estos datos por mes, y luego la clave y va a ser ese time y voy a establecer el nombre y como flight. Vamos a salir de este eje por un segundo para que podamos ver cómo nos vemos sin ninguna personalización adicional. Así que esa personalización adicional podemos ver que ya estamos obteniendo algunas barras realmente agradables aquí que nos muestran el tiempo de vuelo total por mes, pero solo está usando como el número del mes en lugar de darnos un dato más útil o formato aquí. Y así, si queremos personalizar la forma en que este eje va a ser renderizado, vamos a necesitar especificar los ejes. Así que estoy trayendo el eje de vuelta aquí, y voy a comenzar primero configurando nuestro eje de número y poniéndolo en el lado izquierdo del gráfico. Así que eso se ve genial. Ahora tenemos el eje de número renderizando aquí, y está yendo entre 0 y 15 para el número total de horas que pasamos en el aire en nuestro avión. El segundo eje va a ser realmente el nuevo para nosotros aquí, y eso va a ser el eje de categoría, y vamos a posicionarlo a lo largo de la parte inferior del gráfico. Esto es lo que le dice que lo agrupe basado en estas categorías discretas. Así que está mirando todos los datos y agregándolos basado en ese mes general para averiguar cuán grande somos para esta categoría particular. Pero si quisiéramos formatear esto, necesitaríamos realmente poder usar la etiqueta. Así que voy a entrar en este gancho de datos acumulados y podemos ver lo que estamos obteniendo de vuelta para los datos aquí. Podemos ver que estamos obteniendo month de vuelta como un número. Eso tiene sentido. Vemos estos números aquí, pero también nos está dando una etiqueta que podríamos usar para mostrar para esos meses particulares. Así que para llegar a eso, vamos a necesitar ir al dato específico que estamos mostrando para esta categoría. Así que voy a comenzar especificando mis opciones de configuración de etiqueta, y voy a darle un formateador. Y este formateador recibe de vuelta una serie de params. Si yo... bueno, vamos a hacer esto sintácticamente correcto rápidamente... y si paso el cursor sobre esto, ves que estamos obteniendo de vuelta estos params de AGAxisLabelFormatter. Hay mucha información útil allí y es realmente específica para el eje particular que estamos tratando de personalizar. La parte de esto que va a ser útil para nosotros es que nos va a devolver el índice del dato que estamos tratando de graficar. Y así voy a usar este índice junto con nuestros datos para buscar el dato particular que estamos renderizando aquí. Luego, usando ese dato, simplemente voy a devolver de vuelta datum.label. Así que ahora nuestro gráfico se ve correcto. Tenemos nuestro tiempo de vuelo agregado aquí basado en el mes general. Así es como se ha acumulado para nosotros. Y luego estamos usando una etiqueta personalizada para personalizar ese eje de categoría que podemos categorizar por un valor, pero usar una etiqueta completamente diferente para dar algún significado a estos datos. ¿Hay alguna pregunta que pueda responder sobre el gráfico de barras antes de pasar al siguiente?

Una cosa que quiero mencionar aquí es que no tenemos un ejemplo de ello, pero como dije al principio, series siendo un array es a propósito. Si quisiéramos, podríamos combinar nuestro gráfico de líneas y nuestro gráfico de barras. No hay nada que nos impida hacer eso porque podríamos tener una serie de líneas y configurar su propio eje para ello y mostrar un bonito gráfico de líneas de ese tiempo de vuelo a medida que cambia por día, y luego también tener las categorías agregadas por mes disponibles. Así que esa es la razón por la que la API está diseñada de esta manera. No hay, como otras bibliotecas de gráficos, no hay esta idea de que hay un gráfico de líneas o un gráfico de barras. Tienes solo un gráfico y luego tienes múltiples series dentro de ese gráfico que instruyen a AG charts cómo trazar esos datos. Así que realmente, realmente poderoso para construir gráficos combinados que usan una variedad de diferentes series para la visualización. Hasta ahora realmente nos hemos centrado en gráficos cartesianos, cosas que se están trazando dentro de un eje x e y.

Veamos uno de los gráficos polares, uno que va a usar un círculo para trazar los datos, en este caso un gráfico de pastel. Así que para construir un gráfico de pastel básico, primero necesitaríamos usar la serie pie, y ya no vamos a estar haciendo x e y. Eso no tiene mucho sentido cuando estamos hablando de renderizar dentro de círculos. En su lugar, vamos a tener que darle una clave de ángulo. Cuán grande es la porción general para este pedazo particular de datos dentro de nuestro gráfico de pastel. Así que creamos esa serie de tipo pie, y luego especificamos la clave de ángulo. Así que todavía vamos a usar esos datos acumulados por mes para el tiempo de vuelo, y vamos a usar el tiempo como nuestra clave de ángulo. Así que lo que va a hacer es mirar todos los meses que hemos proporcionado para ello y luego sumar el tiempo a lo largo de todo el conjunto. Y cualquier porción de tiempo que pertenezca a un mes específico, así de grande será el ángulo cuando realmente calcule el gráfico de pastel. Una cosa que vamos a querer personalizar aquí es la forma en que los datos se etiquetan. Así que hay una propiedad callout label key, y esto es lo que se va a usar para mostrar la etiqueta de la porción del gráfico de pastel. Así que no queremos mostrar ese número bruto nuevamente para el mes, como 6, 7, 8, 9, 10. Queremos mostrar esa etiqueta realmente agradable que habíamos usado en nuestro gráfico de barras anteriormente, June, July, August, y así sucesivamente. Así que para hacer eso, podemos especificar la callout label key y darle la propiedad que queremos usar para la callout label key. AG charts como AGGrid es muy personalizable, y así también nos permite especificar qué etiqueta debe especificarse para la leyenda, así que la leyenda real que se va a renderizar a la derecha del gráfico de pastel. Estas podrían ser etiquetas diferentes. Sabes, podrías tener una etiqueta corta para la leyenda para mantenerla agradable y compacta y legible y luego una etiqueta más larga para esa interactividad de realmente pasar el cursor sobre parte del gráfico.

Así que esa es la razón por la que hay una diferencia aquí en estas dos propiedades particulares. Así que para esta, hemos establecido la legend item key como label y la callout label key como label. Estamos bien usando solo los nombres completos de los meses para ambos. Muy bien, te lo voy a dar. Este es en realidad nuestro último desafío del día. Vamos a pasar por este. Te daré un par de minutos para hacer tu primer gráfico de pastel. Creo que esta es la fuente de los desafíos. Luego lo revisaré, y luego haremos un buen resumen.

Así que vamos a implementar un gráfico de pastel esta vez, y eso significa que vamos a tener que comenzar con una serie completamente diferente de la que hemos trabajado, y esta vez estoy usando la pie series para esto. Así que voy a ir a mi array de series aquí, y voy a configurar una pie series. Si presiono command o ctrl espacio aquí o command espacio, lo que tenga sentido para tu plataforma particular, podemos ver todas las opciones disponibles para nosotros para personalizar o configurar un gráfico de pastel. Y realmente, necesitamos especificar una propiedad particular, y esa es la angle key. Así que voy a decir que time es el medio por el cual queremos dividir este pastel. Así que solo con eso, ya tenemos un gráfico de pastel de buen aspecto, pero si paso el cursor sobre él, estamos obteniendo el tiempo de vuelo total, pero no estamos obteniendo el mes, si eso tiene sentido. Voy a especificar dos propiedades adicionales aquí, la legend item key, establecer esto como label, y la callout label key, y establecer esto como label también. Eso es realmente todo lo que tengo que hacer para el gráfico de pastel. El gráfico de pastel es realmente fácil de hacer, es realmente fácil de personalizar y configurar. Ya tenemos ahora los meses mostrando para cada uno de estos segmentos particulares. Tenemos un gran acceso aquí. A medida que paso el cursor, puedo ver el tiempo de vuelo total junto con el mes que está asociado con esos datos. Así que un gráfico de pastel bastante sencillo y fácil.

Y con eso, hemos terminado. Eso es todo el contenido que tenía que repasar contigo hoy. Solo para resumir o recapitular, pasamos las primeras dos horas en AGGrid con React. Por favor, mantén estas diapositivas cerca, son tuyas para tener y referenciar. Hay mucho contenido aquí que no revisamos que podría ser particularmente útil para ti, especialmente alrededor de editores de celdas, persistencia y estilo. Y también nos sumergimos en AG Charts, el producto más nuevo del equipo de AG Grid. Mostramos cómo usar AG Charts con React. Nuevamente, siéntete libre de mantener estas diapositivas, úsalas y compártelas con tu equipo. Mi nombre es Mike Ryan. Puedes seguirme en Twitter y Blue Sky en Mike Ryan Dev o Mike Ryan.dev para Blue Sky. Trabajo mucho en el espacio de Angular pero también paso bastante tiempo en conferencias de React también. Así que, si me encuentras, por favor siéntete libre de saludar. Me encantaría saludarte también. Gracias a todos por unirse. Que tengan un gran día.