Características de la cuadrícula de pivote Angular

Las clases de componentes de cuadrícula plana y pivote heredan de una base común y, por lo tanto, comparten algunas funcionalidades y características.

Algunas funciones no tienen un comportamiento significativo en el contexto de una tabla dinámica y, por lo tanto, no se pueden habilitar para IgxPivotGrid. Éstas incluyen:

• operaciones CRUD
• Agrupamiento
• Fijación de fila/columna
• resúmenes
• Paginación

El componente Pivot Grid tiene características y funcionalidades adicionales relacionadas con sus dimensiones, como se describe a continuación.

EXAMPLE

TS

HTML

SCSS

import { Component } from "@angular/core";

import { IPivotConfiguration, PivotAggregation, IgxPivotNumericAggregate, IgxPivotDateDimension, FilteringExpressionsTree, FilteringLogic, IgxStringFilteringOperand, IgxPivotGridComponent, IgxPivotDataSelectorComponent } from "igniteui-angular"
import { SALES_DATA } from "../../data/dataToAnalyze";

export class IgxTotalSaleAggregate {
    public static totalSale: PivotAggregation = (members, data: any) =>
        data.reduce((accumulator, value) => accumulator + value.Product.UnitPrice * value.NumberOfUnits, 0);

    public static totalMin: PivotAggregation = (members, data: any) => {
        let min = 0;
        if (data.length === 1) {
            min = data[0].Product.UnitPrice * data[0].NumberOfUnits;
        } else if (data.length > 1) {
            const mappedData = data.map(x => x.Product.UnitPrice * x.NumberOfUnits);
            min = mappedData.reduce((a, b) => Math.min(a, b));
        }
        return min;
    };

    public static totalMax: PivotAggregation = (members, data: any) => {
        let max = 0;
        if (data.length === 1) {
            max = data[0].Product.UnitPrice * data[0].NumberOfUnits;
        } else if (data.length > 1) {
            const mappedData = data.map(x => x.Product.UnitPrice * x.NumberOfUnits);
            max = mappedData.reduce((a, b) => Math.max(a, b));
        }
        return max;
    };
}

@Component({
    selector: 'app-pivot-features-sample',
    styleUrls: ['./pivot-features.component.scss'],
    templateUrl: './pivot-features.component.html',
    imports: [IgxPivotGridComponent, IgxPivotDataSelectorComponent]
})
export class PivotFeaturesComponent {
    public data = SALES_DATA;

    public pivotConfig: IPivotConfiguration = {
        columns: [
            new IgxPivotDateDimension(
                {
                    memberName: 'Date',
                    enabled: true
                },
                {
                    months: false,
                    quarters: true,
                    fullDate: false
                }
            )
        ],
        rows: [
            {
                memberFunction: () => 'All Products',
                memberName: 'AllProducts',
                enabled: true,
                width: "150px",
                childLevel: {
                    memberFunction: (data) => data.Product.Name,
                    memberName: 'ProductCategory',
                    enabled: true
                }
            },
            {
                memberName: 'City',
                width: "150px",
                memberFunction: (data) => data.Seller.City,
                enabled: true
            }
        ],
        values: [
            {
                member: 'Value',
                aggregate: {
                    key: 'SUM',
                    aggregator: IgxPivotNumericAggregate.sum,
                    label: 'Sum'
                },
                aggregateList: [{
                    key: 'SUM',
                    aggregator: IgxPivotNumericAggregate.sum,
                    label: 'Sum'
                }],
                enabled: true,
                styles: {
                    downFontValue: (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) <= 150,
                    upFontValue: (rowData: any, columnKey: any): boolean => parseFloat(rowData.aggregationValues.get(columnKey.field)) > 150
                },
                formatter: (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined
            },
            {
                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'
                }],
                enabled: true,
                dataType: 'currency'
            }
        ],
        filters: [
            {
                memberName: 'SellerName',
                memberFunction: (data) => data.Seller.Name,
                enabled: true
            }
        ]
    };
}
tsコピー

<div class="pivot-container">
    <igx-pivot-grid #grid1 [data]="data" [height]="'850px'" [pivotConfiguration]="pivotConfig" [rowSelection]="'single'"
        [superCompactMode]="true" [defaultExpandState]='true'>
    </igx-pivot-grid>
    <igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
</div>
htmlコピー

:host {
    padding: 8px;
    display: flex;
    flex-direction: column;

    ::ng-deep {
        .upFontValue {
            color: var(--ig-success-500);
        }

        .downFontValue {
            color: var(--ig-error-500);
        }

        igx-pivot-data-selector {
            border: 1px solid hsla(var(--igx-gray-200));
            margin: 0 8px;
        }
    }

}

igx-pivot-grid {
    flex: 1;
}

igx-pivot-data-selector {
    --ig-size: var(--ig-size-small);
}

.pivot-container {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    order: 0;
}
scssコピー

Edit in: CodesandboxStackBlitz

¿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.

最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。

無料で試してみる

Filtrado de dimensiones

Todas las dimensiones (filtros, filas, columnas) se pueden filtrar a través de la interfaz de usuario del chip o la API. Esta funcionalidad está integrada y habilitada de forma predeterminada.

Puede utilizar la dimensión de filtrado para filtrar valores de datos que no forman parte de la vista dinámica.

La interfaz de usuario de filtrado se puede abrir a través del icono de filtro de chips de dimensión y permite el filtrado al estilo Excel de los valores de dimensión únicos.

Si no hay suficiente espacio para todos los chips de filtrado, la cuadrícula dinámica mostrará los que se cortaron en un menú desplegable. Los usuarios finales pueden acceder a ellos y manipularlos allí.

Las dimensiones también se pueden filtrar inicialmente a través de la configuración de dimensiones en pivotConfiguration con la propiedad filter de la dimensión. Se puede configurar en un nuevo FilteringExpressionsTree con la condición de filtro relacionada, por ejemplo:

public filterExpTree = new FilteringExpressionsTree(FilteringLogic.And);

constructor() {
    this.filterExpTree.filteringOperands = [
        {
            condition: IgxStringFilteringOperand.instance().condition('equals'),
            fieldName: 'SellerName',
            searchVal: 'Stanley'
        }
    ];
}

public pivotConfigHierarchy: IPivotConfiguration = {
    filters: [
        {
            memberName: 'SellerName',
            enabled: true,
            filter: this.filterExpTree
        }
    ]
}
typescript

Clasificación de dimensiones

Los valores de dimensión en las rows o columns se pueden ordenar mediante el chip relacionado o la API. Esta funcionalidad está integrada y habilitada de forma predeterminada.

La dimensión se ordena al hacer clic en el chip relacionado y, como resultado, los valores de las dimensiones se ordenan en orden ascendente/descendente.

La clasificación también se puede aplicar inicialmente mediante la propiedad sortDirection de la definición de dimensión.

public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        {
            memberName: 'SellerName',
            enabled: true,
            sortDirection: SortingDirection.Asc
        }
    ]
}
typescript

Cambio de tamaño de dimensiones

Las dimensiones de las filas se pueden cambiar de tamaño de manera similar al cambio de tamaño de las columnas, mediante un indicador de cambio de tamaño que se puede encontrar en el borde derecho de las celdas. También se puede cambiar su tamaño automáticamente haciendo doble clic en el indicador de cambio de tamaño o usando la API relacionada: autoSizeRowDimension.

También se puede establecer inicialmente un tamaño diferente con la propiedad width disponible en la definición de dimensión:

public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        {
            memberName: 'Country',
            enabled: true,
            width: '400px'
        }
    ]
}
typescript

A partir de la versión 18.0.0 de IgniteUI para Angular el width de las dimensiones de fila también se puede configurar en auto.

Selección de dimensiones

La cuadrícula dinámica admite la selección única que se habilita igual que en la cuadrícula base. Por ejemplo:

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

En caso de que haya varias dimensiones de filas o columnas que crearían grupos que abarquen varias filas/columnas, la selección se aplica a todas las celdas que pertenecen al grupo seleccionado.

Modo súper compacto

El IgxPivotGrid componente proporciona un superCompactMode ​ ​@Input. Es adecuado para casos que requieren que haya muchas células presentes en la pantalla a la vez. Si está habilitada, la opción ignora la ig-size variable de la cuadrícula dinámica. Al habilitar superCompactMode, también se establece la ig-size variable en ig-size-small para cada componente secundario (como IgxChip) que no tiene la superCompactMode opción.

<igx-pivot-grid [superCompactMode]="true"></igx-pivot-grid>
html

Columna de resumen adicional

Cuando una dimensión column define una jerarquía, la cuadrícula dinámica mostrará una columna de resumen/total adicional, que acumula las agregaciones de todas las columnas dentro del grupo. Cuando el grupo esté colapsado, solo permanecerá la columna de resumen. Y cuando se expande el grupo, aparece la columna de resumen adicional al final del grupo.

Encabezados de dimensiones de fila

A partir de la versión 18.0.0 los encabezados de valores de dimensión de fila de IgniteUI para Angular se pueden habilitar a través de la opción pivotUI:

<igx-pivot-grid [pivotUI]="{ showRowHeaders: true }">
</igx-pivot-grid>
html

Diseño de dimensión de fila

Admite IgxPivotGridComponent dos formas de representación de la dimensión de fila. Esto se puede controlar estableciendo la propiedad de rowLayout la pivotUI opción.

  <igx-pivot-grid [pivotUI]="pivotUI">
  </igx-pivot-grid>
html

public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal };
typescript

El diseño predeterminado de la cuadrícula es Vertical. En este modo, la jerarquía de dimensiones se expande verticalmente. La alternativa sería Horizontal. En este modo, los elementos secundarios de una sola dimensión de fila, cuando se expanden, se muestran horizontalmente en el mismo diseño de varias filas principal. En el ejemplo a continuación, puede alternar entre los dos modos para compararlos.

Tenga en cuenta que en el Horizontal modo, los agregados de dimensión de fila principal no son visibles a menos que la fila principal esté contraída. Para mostrar la dimensión principal en un resumen de fila, la horizontalSummary propiedad se puede habilitar para la dimensión relacionada.

rows: [
    {
        memberFunction: () => 'All Products',
        memberName: 'AllProducts',
        enabled: true,
        horizontalSummary: true,
        width: "150px",
        childLevel: {
            //...
        }
    }
]
ts

Además, la posición del resumen se puede cambiar a través de la horizontalSummariesPosition propiedad de la pivotUI opción. Se puede establecer en cualquiera de los dos Top valores (predeterminado) o Bottom.

public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom };
ts

Las opciones relacionadas con el resumen de filas -horizontalSummary y horizontalSummariesPosition solo son aplicables para el modo de Horizontal diseño.

EXAMPLE

Interacciones

Navegación por teclado

La navegación con teclado en IgxPivotGrid funciona de manera similar a la de IgxGrid. La cuadrícula dinámica se divide en tres áreas: rows, columns y values. Las áreas para rows y columns se consideran encabezados a efectos de navegación, mientras que el área para values es el cuerpo. Las flechas del teclado permiten navegar por el elemento activo dentro del área actual únicamente.

Arrastrar y soltar dimensiones

Las dimensiones están representadas por fichas que se pueden arrastrar y soltar. Todas las fichas pueden cambiar su orden dentro de su área arrastrando y soltando. Los chips de rows, column, filter (chips de dimensiones) se pueden mover de cualquiera de esas áreas a cualquier otra y en cualquier lugar. Las fichas de estas áreas no se pueden mover al área values y las fichas del área values no se pueden mover a ninguna de las áreas de dimensiones.

Los chips de Pivot Grid no se pueden mover al Pivot Data Selector y los elementos del Pivot Data Selector no se pueden mover a Pivot Grid.

Referencias de API

• Componente IgxPivotGrid
• Componente IgxPivotDataSelector

Recursos adicionales

• Descripción general de la cuadrícula dinámica de 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