Web Components Operações Remotas de Grade Dinâmica

    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:

    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 dimensão de linhas:

    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 a propriedade records, 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 a propriedade level, 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 traço (-) 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   = {
    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: 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 }, ] }

    É 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 IgcPivotGridComponent 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:

    <igc-pivot-grid filter-strategy="noopFilterStrategy" sort-strategy="noopSortStrategy"> </igc-pivot-grid>
    public noopFilterStrategy = NoopFilteringStrategy.instance(); public noopSortStrategy = NoopSortingStrategy.instance();

    Referências de API

    Recursos adicionais

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.