Operações remotas Angular Pivot Grid

    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: IPivotConfiguration = {
    columnStrategy: NoopPivotDimensionsStrategy.instance(),
    rowStrategy: NoopPivotDimensionsStrategy.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:

    Os usuários têm a capacidade de alcançar determinados cenários alimentando a grade dinâmica com dados já agregados. Há alguns requisitos sobre como os dados devem ser e alguns detalhes sobre hierarquias na exibição dinâmica. Por exemplo, para declarar hierarquia na rows dimensão:

    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 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 seus registros de dados tiverem records propriedade, você poderá especificar um valor diferente e exclusivo para ele usando o 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 seus registros de dados tiverem level propriedade, você poderá especificar um valor diferente e exclusivo para ele usando o pivotKeys.
    • columnDimensionSeparator- Separador usado ao gerar os valores de campo de coluna exclusivos. É o dash(-) do exemplo acima -All-Bulgaria.
    • rowDimensionSeparator- Separador usado ao gerar os valores exclusivos do campo de linha. É o sublinhado(_) do exemplo acima -AllProducts_records. Ele é usado ao criar o records campo e level.

    Todos eles são armazenados na pivotKeys propriedade que faz parte do PivotConfiguration e podem ser usados para alterar as teclas dinâmicas padrão. Esses padrões são:

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

    A configuração NoopPivotDimensionsStrategy para o e rowStrategy ignora columnStrategy o agrupamento e a agregação de dados feitos pelos pipes de dados, mas a grade dinâmica ainda precisa de declarações para as linhas, colunas, valores e filtros para renderizar a exibição dinâmica conforme o esperado:

    public pivotConfig: IPivotConfiguration = {
    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: IgxPivotNumericAggregate.sum,
                key: 'sum',
                label: 'Sum'
            },
            enabled: true
        },
    ]
}

    É importante que os dados correspondam à configuração. Para obter os melhores resultados, nenhum campo adicional deve ser incluído nos dados agregados e nenhum campo dos dados fornecidos deve ser deixado não declarado como linhas ou colunas. O IgxPivotGrid componente cria seus dados com base no PivotConfiguration e espera-se que a configuração e os dados agregados correspondam de acordo.

    Da mesma forma, para outras operações de dados remotos, como classificação e filtragem, o processamento de dados pode ser ignorado definindo as estratégias vazias relacionadas -filterStrategy, sortStrategy:

    <igx-pivot-grid [filterStrategy]="noopFilterStrategy" [sortStrategy]="noopSortStrategy" ...>
</igx-pivot-grid>

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.