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 certos cenários alimentando a grade pivot com dados já agregados. Existem alguns requisitos sobre como os dados devem ser e alguns detalhes específicos sobre hierarquias na visão pivot. Por exemplo, para declarar hierarquia emrows 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 a partir de valores agrupados e todos os pivotGridRecords baseados nesse valor. Pode ser utilizado em cenários muito específicos, onde há necessidade de fazer algo ao criar as hierarquias. Não precisa mudar 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 tiveremrecords propriedade, você pode especificar um valor diferente e único para eles usando opivotKeys.
    • 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 dimensional com base em sua hierarquia. Evite definir campos nos dados com o mesmo nome dessa propriedade. Se seus registros de dados tiveremlevel propriedade, você pode especificar um valor diferente e único para eles usando opivotKeys.
    • columnDimensionSeparator- Separador usado ao gerar os valores únicos dos campos de coluna. É o traço(-) do exemplo acima -All-Bulgaria.
    • rowDimensionSeparator- Separador usado ao gerar os valores únicos dos campos de linhas. É o sublinhado(_) do exemplo acima -AllProducts_records. É usado ao criar orecords campo andlevel.

    Todas essas são armazenadas napivotKeys propriedade que faz parte doPivotConfiguration e podem ser usadas para alterar as chaves pivot padrão. Esses padrões são:

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

    DefinirNoopPivotDimensionsStrategy para ecolumnStrategy​rowStrategy pula o agrupamento e agregação de dados feitos pelos pipelines de dados, mas a grade pivot ainda precisa de declarações para as linhas, colunas, valores e filtros para renderizar a visualização pivot como 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 sem declarar como linhas ou colunas. OIgxPivotGrid componente constrói seus dados com base noPivotConfiguration e espera-se que a configuração e os dados agregados correspondam de acordo.

    De forma semelhante, para outras operações remotas de dados como ordenação e filtragem, o processamento de dados pode ser pulado 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.