Web Components Pivot Grid Remote Operations

    Em cenários onde os dados dinâmicos já estão agrupados e agregados de um serviço remoto e não há necessidade de processamento adicional no cliente, a grade dinâmica pode ser configurada para usar uma estratégia vazia personalizada que ignorará o processamento de dados no cliente e permitirá que ele exiba os dados diretamente como estão:

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

    O exemplo a seguir mostra como lidar com cenários em que os dados já estão agregados e como sua estrutura deve ser:

    Users have the ability to achieve certain scenarios by feeding the pivot grid with already aggregated data. There are some requirements on how the data should look like and some specifics regarding hierarchies in the pivot view. For example, to declare hierarchy in rows dimension:

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

    E um exemplo do agregado seria:

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

    A grade dinâmica fornece os campos de chaves de objeto que ela usa para fazer seus cálculos dinâmicos.

    • children- Campo que armazena filhos para construção de hierarquia. Ele representa um mapa de valores agrupados e todos os pivotGridRecords baseados nesse valor. Ele pode ser utilizado em cenários muito específicos, onde há a necessidade de fazer algo ao criar as hierarquias. Não há necessidade de alterar isso para uso comum.
    • records- Campo que armazena a referência aos registros de dados originais. Pode ser visto no exemplo acima -AllProducts_records. Evite definir campos nos dados com o mesmo nome dessa propriedade. Se os registros de dados tiverem a propriedade records, você poderá especificar um valor diferente e exclusivo para ele usando as pivotKeys.
    • aggregations- Campo que armazena valores de agregação. Ele é aplicado durante a criação das hierarquias e também não deve ser alterado para cenários comuns.
    • level- Campo que armazena o nível de dimensão com base em sua hierarquia. Evite definir campos nos dados com o mesmo nome dessa propriedade. Se os registros de dados tiverem a propriedade level, você poderá especificar um valor diferente e exclusivo para ele usando as 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();

    API References

    • PivotGridComponent
    • PivotDataSelectorComponent

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.