Descripción general de la cuadrícula dinámica Web Components

Ignite UI for Web Components Las cuadrículas dinámicas se utilizan para resumir y representar datos multidimensionales voluminosos en un formato de tabla cruzada. El resumen de datos se puede ordenar, agrupar o filtrar fácil y rápidamente. Dichos datos pueden incluir sumas, promedios y otras estadísticas. Los usuarios finales pueden modificar el diseño de la tabla dinámica mediante operaciones de arrastrar y soltar, según sus necesidades.

¿Qué es Web Components Pivot Grid?

Los Web Components IgcPivotGrid presentan datos en una tabla dinámica y ayudan a realizar análisis complejos en el conjunto de datos proporcionado. Este sofisticado control Pivot Grid se utiliza para organizar, resumir y filtrar grandes volúmenes de datos que luego se muestran en formato de tabla cruzada. Las características clave de una cuadrícula dinámica Web Components son las dimensiones de fila, las dimensiones de columna, las agregaciones y los filtros.

​IgcPivotGridComponent brinda a los usuarios la capacidad de configurar y mostrar sus datos en una estructura de tabla dinámica multidimensional. Las filas y columnas representan grupos de datos distintos y los valores de las celdas de datos representan agregaciones. Esto permite un análisis de datos complejo basado en un conjunto de datos plano simple. IgcPivotGridComponent es una tabla dinámica rica en funciones que proporciona una configuración sencilla de las diferentes dimensiones y valores, así como operaciones de datos adicionales sobre ellos, como filtrado y clasificación.

Web Components Ejemplo de cuadrícula pivotante

El siguiente es un ejemplo de cuadrícula dinámica Web Components en combinación con el componente selector de datos dinámicos Web Components. De esta manera puede tener opciones de configuración de tiempo de ejecución más flexibles.

Primeros pasos con Web Components Pivot Grid

Los Web Components IgcPivotGrid se pueden configurar mediante la propiedad pivotConfiguration.

<igc-pivot-grid #grid1 data="data" pivot-configuration="pivotConfigHierarchy"> </igc-pivot-grid>

Se define por tres dimensiones principales: filas, columnas y valores. Las filas y columnas definen la estructura agrupada que se muestra en las filas y columnas de la cuadrícula. Los valores definen los campos de agregación y la agregación que se utilizará para calcular y mostrar los valores relacionados de los grupos.

También se puede definir un filtro a través de la propiedad de configuración de filtros. Se puede usar para campos que no desea agregar como una dimensión o un valor, pero le gustaría filtrar sus valores de miembros relacionados a través de la interfaz de usuario.

Configuración de dimensiones

Cada configuración de dimensión básica requiere un MemberName que coincida con un campo de los datos proporcionados.

Se pueden definir varias dimensiones hermanas, lo que crea un grupo anidado más complejo en el área de dimensión de fila o columna relacionada.

Las dimensiones se pueden reordenar o mover de un área a otra mediante sus correspondientes chips mediante arrastrar y soltar.

Una dimensión también puede describir una jerarquía expandible a través de la ChildLevel propiedad, por ejemplo:

   {
            memberFunction: () => 'All',
            memberName: 'AllProducts',
            enabled: true,
            childLevel: {
                memberFunction: (data) => data.ProductCategory,
                memberName: 'ProductCategory',
                enabled: true
            }
    }

En este caso, la dimensión representa un expansor en la sección relacionada de la cuadrícula (fila o columna) y permite que los elementos secundarios se expandan o contraigan como parte de la jerarquía. De forma predeterminada, las dimensiones de fila se expanden inicialmente. Este comportamiento se puede controlar con la defaultExpandState propiedad de la cuadrícula dinámica.

Predefined Dimensions

Como parte de la cuadrícula dinámica, se exponen algunas dimensiones predefinidas adicionales para facilitar la configuración:

• IgcPivotDateDimension Se puede utilizar para campos de fecha. Describe la siguiente jerarquía de forma predeterminada:
  • Todos los periodos
  • Años
  • Cuarteles
  • Meses
  • Fecha completa

Se puede configurar para filas o columnas, por ejemplo:

public pivotConfigHierarchy: IgcPivotConfiguration = { rows: [ new IgcPivotDateDimension({ memberName: 'Date', enabled: true }); ] }

También permite una mayor personalización a través del segundo parámetro de opción para habilitar o deshabilitar una parte particular de la jerarquía, por ejemplo:

new IgcPivotDateDimension({ memberName: 'Date', enabled: true }, { total: true, years: true, months: true, fullDate: true, quarters: false });

Configuración de valores

Una configuración de valor requiere un miembro que coincida con un campo de los datos proporcionados, o puede definir una función de agregador personalizado para escenarios personalizados más complejos. Fuera de la caja, hay 4 agregaciones predefinidas que se pueden usar según el tipo de datos del campo de datos:

• PivotNumericAggregate: para campos numéricos. Contiene las siguientes funciones de agregación: SUM, AVG, MIN, MAX, COUNT.
• PivotDateAggregate: para campos de fecha. Contiene las siguientes funciones de agregación: LATEST, EARLIEST, COUNT.
• PivotTimeAggregate: para campos de tiempo. Contiene las siguientes funciones de agregación: LATEST, EARLIEST, COUNT.
• PivotAggregate: para cualquier otro tipo de datos. Esta es la agregación base. Contiene las siguientes funciones de agregación: COUNT.

La función de agregación actual se puede cambiar en tiempo de ejecución utilizando el menú desplegable del chip de valor. De forma predeterminada, muestra una lista de agregaciones disponibles según el tipo de datos del campo. También se puede establecer una lista personalizada de agregaciones a través de la propiedad AggregateList, por ejemplo:

public pivotConfigHierarchy: IgcPivotConfiguration = { values: [ { member: 'AmountOfSale', displayName: 'Amount of Sale', aggregate: { key: 'SUM', aggregator: IgcTotalSaleAggregate.totalSale, label: 'Sum of Sale' }, aggregateList: [{ key: 'SUM', aggregator: IgcTotalSaleAggregate.totalSale, label: 'Sum of Sale' }, { key: 'MIN', aggregator: IgcTotalSaleAggregate.totalMin, label: 'Minimum of Sale' }, { key: 'MAX', aggregator: IgcTotalSaleAggregate.totalMax, label: 'Maximum of Sale' }] } ] } public static totalSale: PivotAggregation = (members, data: any) => data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0); public static totalMin: PivotAggregation = (members, data: any) => { return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.min(a, b)); }; public static totalMax: PivotAggregation = (members, data: any) => { return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b)); };

El valor dinámico también proporciona una propiedad DisplayName. Se puede usar para mostrar un nombre personalizado para este valor en el encabezado de la columna.

Habilitar propiedad

pivotConfiguration es la interfaz que describe el estado actual del componente IgcPivotGridComponent. Con él, el desarrollador puede declarar campos de datos como filas, columnas, filtros o valores. La configuración permite habilitar o deshabilitar cada uno de estos elementos por separado. Solo los elementos habilitados se incluyen en el estado actual de Pivot Grid. El componente IgcPivotDataSelectorComponent utiliza la misma configuración y muestra una lista de todos los elementos, habilitados y deshabilitados. Para cada uno de ellos hay una casilla de verificación en el estado correspondiente. Los usuarios finales pueden modificar fácilmente el estado de pivote alternando los diferentes elementos usando estas casillas de verificación. La propiedad Enable controla si un IgcPivotDimension o IgcPivotValue determinado está activo y participa en la vista dinámica representada por Pivot Grid.

Código de configuración completo

Echemos un vistazo a una configuración de pivote básica:

public pivotConfigHierarchy: IgcPivotConfiguration = { columns: [ { memberName: 'ProductName', memberFunction: (data) => data.ProductName, enabled: true }, { memberName: 'SellerCity', memberFunction: (data) => data.SellerCity, enabled: true } ], rows: [ { memberName: 'SellerName', memberFunction: (data) => data.SellerName, enabled: true, } ], values: [ { member: 'AmountofSale', displayName: "Amount of Sale", aggregate: { aggregator: IgcPivotNumericAggregate.sum, key: 'SUM', label: 'Sum of Sale' }, enabled: true } ] };

Esta configuración define 1 fila, 1 columna y 1 agregación que suma los valores de cada grupo de dimensiones. Los miembros coinciden con los campos disponibles en la fuente de datos proporcionada:

public data = [ [ { ProductName: `Clothing`, ProductUnitPrice: 12.8, SellerName: `Stanley Brooker`, SellerCity: `Seattle`, Date: `2007-01-01T00:00:00`, Value: 94.4, NumberOfUnits: 282 }, ];

Ejemplo de configuración completa

El uso del código anterior dará como resultado el siguiente ejemplo, que agrupa las columnas únicas Fecha, Nombre del producto y Ciudad del vendedor en filas únicas y muestra las agregaciones relacionadas para el importe de la venta en las celdas relacionadas:

Problemas conocidos y limitaciones

Limitación	Descripción
No se admite la configuración de columnas de forma declarativa.	La cuadrícula Pivot genera sus columnas en función de lacolumns configuración, por lo que no se admite configurarlos de forma declarativa, como en la cuadrícula base. Estas columnas no se tienen en cuenta.
Configuración duplicadaMemberName omember valores de propiedad para dimensiones/valores.	Estas propiedades deben ser únicas para cada dimensión/valor. La duplicación puede provocar la pérdida de datos del resultado final.
La selección de filas solo se admite en modo individual.	Actualmente no se admite la selección múltiple.

Referencias de API

• pivotConfiguration
• IgcPivotGridComponent
• IgcPivotDataSelectorComponent
• IgcPivotDateDimension
• IgcColumn

Recursos adicionales

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub