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.

What is 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.

EstoIgxPivotGridComponent permite a los usuarios 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 complejo de datos basado en un conjunto de datos plano y sencillo. EsIgxPivotGridComponent una tabla dinámica rica en características que proporciona una configuración sencilla de las diferentes dimensiones y valores, así como operaciones adicionales de datos sobre ellas como filtrado y ordenación.

Angular Pivot Grid Example

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.

Getting started with 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

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxPivotGridModule en tu archivo app.module.ts.

// app.module.ts

import { IgxPivotGridModule } from 'igniteui-angular/grids/pivot-grid';
// import { IgxPivotGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxPivotGridModule,
        ...
    ]
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlosIgxPivotGridComponent como una dependencia independiente, o usar elIGX_PIVOT_GRID_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
// 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 [];
}

Ahora que tienes importado el módulo o directivas de Ignite UI for Angular Pivot Grid, puedes empezar a usar eligx-pivot-grid componente.

Using the Angular Pivot Grid

El componente de la Angular Pivot Grid puede configurarse mediante lapivotConfiguration propiedad.

<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>

Se define por tres dimensiones principales:rows ycolumns.values Elrows ycolumns define la estructura agrupada que se muestra en las filas y columnas de la cuadrícula Angular. Definenvalues los campos de agregación y la agregación que se utilizarán para calcular y mostrar los valores relacionados de los grupos.

Un filtro también puede definirse mediante lafilters propiedad de configuración. Puede usarse para campos que no quieres añadir como dimensión o valor, pero que prefieres filtrar sus valores de miembros relacionados a través de la interfaz.

Dimensions configuration

Cada configuración básica de dimensión requiere unmemberName que coincida con un campo del proporcionadodata, o quememberFunction extraiga un valor del registro en caso de objetos complejos u otros escenarios personalizados.

Note

TienememberName que ser único. En caso de que necesites diferentes dimensiones para el mismo campo, puedes definir un únicomemberName personalizado para cada uno y extraer el valor relacionado a través dememberFunction.

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 lachildLevel 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 expander en la sección relacionada de la cuadrícula (fila o columna) y permite expandir o colapsar los hijos como parte de la jerarquía. Por defecto, las dimensiones de la fila se amplían inicialmente. Este comportamiento puede controlarse con ladefaultExpandState @Input de la cuadrícula pivotante.

Predefined dimensions

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

• IgxPivotDateDimensionSe puede usar para campos de fecha. Describe la siguiente jerarquía por defecto:
  • 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 });
    ]
}

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
});

Values configuration

Una configuración de valores requiere quemember coincida con un campo proporcionadodata, o puede definirse mediante unaaggregatorName función personalizadaaggregator para escenarios más complejos.

Note

Tienemember que ser único. En caso de que necesites diferentes agregaciones de valores para el mismo campo, puedes definir un valor únicomember personalizado para cada uno y extraer el valor relacionado a través de laaggregator función.

Fuera de la caja, hay 4 agregaciones predefinidas que se pueden utilizar en función del 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 los campos de fecha. Contiene las siguientes funciones de agregación:LATEST,EARLIEST,COUNT.
• IgxPivotTimeAggregate- para campos temporales. 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 puede cambiarse en tiempo de ejecución usando el desplegable del chip de valor. Por defecto, muestra una lista de agregaciones disponibles según el tipo de dato del campo. También se puede establecer una lista personalizada de agregaciones mediante laaggregateList propiedad, 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));
};

El valor pivote también proporciona unadisplayName propiedad. Puede usarse para mostrar un nombre personalizado para este valor en la cabecera de la columna.

Note

Si defines tantoaggregatorName como funciónaggregator,aggregatorName tiene prioridad. Si no se activa, se genera un error.

Enable property

IPivotConfigurationes la interfaz que describe el estado actual delIgxPivotGrid componente. Con él, el desarrollador puede declarar los campos de los datos comorows,columns,filters ovalues. La configuración permite habilitar o desactivar cada uno de estos elementos por separado. Solo los elementos habilitados se incluyen en el estado actual de la cuadrícula pivotante. ElIgxPivotDataSelector componente utiliza la misma configuración y muestra una lista de todos los elementos: activados y deshabilitados. Para cada uno hay una casilla de verificación en el estado correspondiente. Los usuarios finales pueden ajustar fácilmente el estado pivote alternando los diferentes elementos usando estas casillas. Laenable propiedad controla si un dadoIPivotDimension oIPivotValue está activo y participa en la vista pivote renderizada por la cuadrícula pivote.

Full configuration example

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
            }
        ]
    };

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'
    },
    //...
];

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.

Auto generate configuration

LaautoGenerateConfig propiedad genera automáticamente dimensiones y valores basándose en los campos fuente de datos:

• Campos numéricos:

  • Creado usandoIPivotValue​IgxPivotNumericAggregate.sum agregador.
  • Se agrega a la colección de valores y se habilita de forma predeterminada.

• Campos no numéricos:

  • Creado comoIPivotDimension.
  • Deshabilitado de forma predeterminada.
  • Se ha agregado a la colección de columnas.

• Campos de fecha (solo el primerdate campo está habilitado, los otrosdate campos aplican la regla de campos no numéricos):

  • Creado comoIgxPivotDateDimension
  • Habilitado de forma predeterminada
  • agregado a la colección rows.

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.

Known Issues and Limitations

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.

API References

• Componente IgxPivotGrid
• Componente IgxPivotDataSelector

Additional Resources

• Características de la cuadrícula de pivote Angular
• Agregaciones personalizadas de cuadrícula de pivote Angular

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub