Descripción general del componente de cuadrícula de pivote Angular
Ignite UI for Angular cuadrícula dinámica es uno de nuestros mejores componentes Angular, ya que representa una tabla de valores agrupados y agregados que le permite organizar y resumir datos en forma de tabla. Es una herramienta de resumen de datos que se utiliza para reorganizar y resumir columnas y filas de datos seleccionadas provenientes de una hoja de cálculo o tabla de base de datos para obtener un informe deseado.
¿Qué es Angular Pivot Grid?
El componente Angular Pivot Grid presenta datos en una tabla dinámica y ayuda 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 un formato de tabla cruzada. Las características clave de Angular Pivot Grid son las dimensiones de fila, las dimensiones de columna, las agregaciones y los filtros.
IgxPivotGridComponent
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. IgxPivotGridComponent
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.
Angular Ejemplo de cuadrícula pivotante
El siguiente es un ejemplo Angular Pivot Grid en combinación con el componente de selector de datos Angular Pivot. De esta manera, puede tener opciones de configuración de tiempo de ejecución más flexibles.
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Primeros pasos con Ignite UI for Angular Pivot Grid
Para empezar a utilizar el componente Ignite UI for Angular Pivot Grid, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxPivotGridModule
en su archivo app.module.ts.
// app.module.ts
import { IgxPivotGridModule } from 'igniteui-angular';
// import { IgxPivotGridModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxPivotGridModule,
...
]
})
export class AppModule {}
typescript
Alternativamente, a partir de 16.0.0
, puede importar IgxPivotGridComponent
como una dependencia independiente o usar el token IGX_PIVOT_GRID_DIRECTIVES
para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular';
// import { IGX_PIVOT_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_PIVOT_GRID_DIRECTIVES]
/* or imports: [IgxPivotGridComponent] */
})
export class HomeComponent {
public data: Transaction [];
}
typescript
Ahora que ha importado el módulo o las directivas de Ignite UI for Angular Pivot Grid, puede empezar a utilizar el igx-pivot-grid
componente.
Uso de la cuadrícula de pivote Angular
El componente de cuadrícula pivote Angular se puede configurar a través de la propiedad pivotConfiguration
.
<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>
html
Se define mediante tres dimensiones principales: rows
, columns
y values
. Las rows
y columns
definen la estructura agrupada que se muestra en las filas y columnas de la cuadrícula Angular. Los values
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 filters
. Se puede utilizar para campos que no desea agregar como dimensión o valor pero que 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 data
proporcionados, o una memberFunction
que extraiga un valor del registro en el caso de objetos complejos u otros escenarios personalizados.
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 mediante la propiedad childLevel
, por ejemplo:
{
memberFunction: () => 'All',
memberName: 'AllProducts',
enabled: true,
childLevel: {
memberFunction: (data) => data.ProductCategory,
memberName: 'ProductCategory',
enabled: true
}
}
typescript
En este caso, la dimensión representa un expansor en la sección relacionada de la cuadrícula (fila o columna) y permite expandir o contraer los elementos secundarios como parte de la jerarquía. De forma predeterminada, las dimensiones de la fila se expanden inicialmente. Este comportamiento se puede controlar con defaultExpandState
@Input
de la cuadrícula dinámica.
Dimensiones predefinidas
Como parte de la cuadrícula dinámica, se exponen algunas dimensiones predefinidas adicionales para facilitar la configuración:
IgxPivotDateDimension
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: IPivotConfiguration = {
rows: [
new IgxPivotDateDimension({ memberName: 'Date', enabled: true });
]
}
typescript
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 IgxPivotDateDimension({ memberName: 'Date', enabled: true }, {
total: true,
years: true,
months: true,
fullDate: true,
quarters: false
});
typescript
Configuración de valores
Una configuración de valor requiere un member
que coincida con un campo de los data
proporcionados, o puede definir un aggregatorName
o una función aggregator
personalizada para escenarios más complejos. De fábrica, hay 4 agregaciones predefinidas que se pueden usar según el tipo de datos del campo de datos:
IgxPivotNumericAggregate
: para campos numéricos. Contiene las siguientes funciones de agregación:SUM
,AVG
,MIN
,MAX
,COUNT
.IgxPivotDateAggregate
: para campos de fecha. Contiene las siguientes funciones de agregación:LATEST
,EARLIEST
,COUNT
.IgxPivotTimeAggregate
: para campos de tiempo. Contiene las siguientes funciones de agregación:LATEST
,EARLIEST
,COUNT
.IgxPivotAggregate
: 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 configurar una lista personalizada de agregaciones mediante la propiedad aggregateList
, por ejemplo:
public pivotConfigHierarchy: IPivotConfiguration = {
values: [
{
member: 'AmountOfSale',
displayName: 'Amount of Sale',
aggregate: {
key: 'SUM',
aggregator: IgxTotalSaleAggregate.totalSale,
label: 'Sum of Sale'
},
aggregateList: [{
key: 'SUM',
aggregator: IgxTotalSaleAggregate.totalSale,
label: 'Sum of Sale'
}, {
key: 'MIN',
aggregator: IgxTotalSaleAggregate.totalMin,
label: 'Minimum of Sale'
}, {
key: 'MAX',
aggregator: IgxTotalSaleAggregate.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));
};
typescript
El valor dinámico también proporciona una propiedad displayName
. Se puede utilizar para mostrar un nombre personalizado para este valor en el encabezado de la columna.
Si define tanto aggregatorName
como la función aggregator
, aggregatorName
tiene prioridad. Si no se establece ninguno, se genera un error.
Habilitar propiedad
IPivotConfiguration
es la interfaz que describe el estado actual del componente IgxPivotGrid
. Con él, el desarrollador puede declarar campos de datos como rows
, columns
, filters
o values
. 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 la cuadrícula dinámica. El componente IgxPivotDataSelector
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 IPivotDimension
o IPivotValue
determinado está activo y participa en la vista dinámica representada por la cuadrícula dinámica.
Ejemplo de configuración completa
Echemos un vistazo a una configuración de pivote básica:
public pivotConfigHierarchy: IPivotConfiguration = {
columns: [
{
memberName: 'Product',
memberFunction: (data) => data.Product.Name,
enabled: true
}
],
rows: [
{
memberName: 'Seller',
memberFunction: (data) => data.Seller.Name,
enabled: true,
}
],
values: [
{
member: 'NumberOfUnits',
aggregate: {
aggregator: IgxPivotNumericAggregate.sum,
key: 'sum',
label: 'Sum'
},
enabled: true
},
{
member: 'AmountOfSale',
aggregate: {
aggregatorName: 'SUM',
key: 'sum',
label: 'Sum'
},
enabled: true
}
]
};
typescript
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 = [
[
{
Product: {
Name: 'Clothing',
UnitPrice: '12.814860936633712'
},
Seller: {
Name: 'Stanley Brooker',
City: 'Seattle'
},
Date: '2007-01-01T00:00:00',
Value: '94.2652032683907',
NumberOfUnits: '282'
},
//...
];
typescript
El resultado es la siguiente vista, que agrupa las columnas únicas de Categorías de productos, los nombres de los vendedores en filas únicas y muestra las agregaciones relacionadas para el número de unidades en las celdas relacionadas:
Y si quieres agilizar todo el proceso de desarrollo de aplicaciones, puedes probar nuestra App Builder ™WYSIWYG para tu próxima aplicación Angular.
Configuración de generación automática
La autoGenerateConfig
propiedad genera automáticamente dimensiones y valores basados en los campos de la fuente de datos:
Campos numéricos:
- Creado como
IPivotValue
un agregador de usoIgxPivotNumericAggregate.sum
. - Se agrega a la colección de valores y se habilita de forma predeterminada.
- Creado como
Campos no numéricos:
- Creado como
IPivotDimension
. - Deshabilitado de forma predeterminada.
- Se ha agregado a la colección de columnas.
- Creado como
Campos de fecha (solo el primer
date
campo está habilitado, los otrosdate
campos aplican la regla de campos no numéricos):- Creado como
IgxPivotDateDimension
- Habilitado de forma predeterminada
- agregado a la colección rows.
- Creado como
Esta función permite a los desarrolladores crear rápidamente una vista dinámica sin especificar manualmente las dimensiones y los valores. Con un selector de pivote junto a la cuadrícula dinámica, los usuarios pueden habilitar y reordenar dimensiones y valores según sea necesario.
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. |
memberName /member debe ser único 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 ensingle modo. |
Actualmente no se admite la selección múltiple. |
Fusionar los miembros de la dimensión distingue entre mayúsculas y minúsculas | La cuadrícula dinámica crea grupos y fusiona los mismos valores (distingue entre mayúsculas y minúsculas). Pero las dimensiones proporcionanmemberFunction y esto se puede cambiar allí, el resultado de lamemberFunction se comparan y se utilizan como valor de visualización. |
Referencias de API
Recursos adicionales
- Características de la cuadrícula de pivote Angular
- Agregaciones personalizadas de cuadrícula de pivote Angular