Web Components Operaciones remotas de Pivot Grid

En escenarios donde los datos dinámicos ya están agrupados y agregados desde un servicio remoto y no hay necesidad de un procesamiento adicional en el cliente, la cuadrícula dinámica se puede configurar para usar una estrategia vacía personalizada que omitirá el procesamiento de datos en el cliente y le permitirá mostrar directamente los datos tal como están:

public pivotConfigHierarchy: IgcPivotConfiguration = {
    columnStrategy: IgcNoopPivotDimensionsStrategy.instance(),
    rowStrategy: IgcNoopPivotDimensionsStrategy.instance(),
}

El siguiente ejemplo muestra cómo manejar escenarios, donde los datos ya están agregados y cómo debería verse su estructura:

Los usuarios tienen la capacidad de lograr ciertos escenarios alimentando la cuadrícula dinámica con datos ya agregados. Existen algunos requisitos sobre cómo deben verse los datos y algunos detalles específicos sobre las jerarquías en la vista dinámica. Por ejemplo, para declarar jerarquía en la dimensión de filas:

rows: [
    {
        memberName: 'AllProducts',
        memberFunction: () => 'All Products',
        enabled: true,
        childLevel: {
            memberName: 'ProductCategory',
            enabled: true
        }
    }
]

Y un ejemplo de lo agregado sería:

public aggregatedData = [
    {
        ProductCategory: 'All', AllProducts: 'All Products', All: 1000, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524, AllProducts_records: [
            { ProductCategory: 'Clothing', 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456 },
            { ProductCategory: 'Bikes', 'All-Uruguay': 68 },
            { ProductCategory: 'Accessories', 'All-USA': 293 },
            { ProductCategory: 'Components', 'All-USA': 240 }
        ]
    }
];

La cuadrícula dinámica proporciona los campos de claves de objeto que utiliza para realizar sus cálculos dinámicos.

children - Field that stores children for hierarchy building. It represents a map from grouped values and all the pivotGridRecords that are based on that value. It can be utilized in very specific scenarios, where there is a need to do something while creating the hierarchies. No need to change this for common usage.
records - Field that stores reference to the original data records. Can be seen in the example from above - AllProducts_records. Avoid setting fields in the data with the same name as this property. If your data records has records property, you can specify different and unique value for it using the pivotKeys.
aggregations - Field that stores aggregation values. It's applied while creating the hierarchies and also it should not be changed for common scenarios.
level - Field that stores dimension level based on its hierarchy. Avoid setting fields in the data with the same name as this property. If your data records has level property, you can specify different and unique value for it using the pivotKeys.
columnDimensionSeparator - Separator used when generating the unique column field values. It is the dash(-) from the example from above - All-Bulgaria.
rowDimensionSeparator - Separator used when generating the unique row field values. It is the underscore(_) from the example from above - AllProducts_records. It's used when creating the records and level field.

All of these are stored in the pivotKeys property which is part of the pivotConfiguration and can be used to change the default pivot keys. These defaults are:

export const   = {
    aggregations: 'aggregations', records: 'records', children: 'children', level: 'level',
    rowDimensionSeparator: '_', columnDimensionSeparator: '-'
};

Setting NoopPivotDimensionsStrategy for the columnStrategy and rowStrategy skips the data grouping and aggregation done by the data pipes, but the pivot grid still needs declarations for the rows, columns, values and filters in order to render the pivot view as expected:

public pivotConfig: IgcPivotConfiguration = {
    rows: [
        {
            memberName: 'AllProducts',
            memberFunction: () => 'All Products',
            enabled: true,
            childLevel: {
                memberName: 'ProductCategory',
                enabled: true
            }
        }
    ],
    columns: [
        {
            memberName: 'All',
            enabled: true,
            childLevel: {
                memberName: 'Country',
                enabled: true
            }
        }
    ],
    values: [
        {
            member: 'UnitsSold',
            aggregate: {
                aggregator: IgcPivotNumericAggregate.sum,
                key: 'sum',
                label: 'Sum'
            },
            enabled: true
        },
    ]
}

It is important for the data to match the configuration. For the best results no additional fields should be included into the aggregated data and no fields from the provided data should be left undeclared as rows or columns. The IgcPivotGridComponent component builds its data based on the pivotConfiguration and it is expected for the configuration and aggregated data to match accordingly.

Similarly for other remote data operations like sorting and filtering, data processing can be skipped by setting the related empty strategies - filterStrategy, sortStrategy:

<igc-pivot-grid filter-strategy="noopFilterStrategy" sort-strategy="noopSortStrategy">
</igc-pivot-grid>

public noopFilterStrategy = NoopFilteringStrategy.instance();
public noopSortStrategy = NoopSortingStrategy.instance();

Referencias de API

Recursos adicionales

Web Components Pivot Grid Overview

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