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 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- 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 de campo de linha exclusivos. É o sublinhado(_) do exemplo acima -AllProducts_records. Ele é usado ao criar os registros e o campo de nível.

    Todos eles são armazenados na propriedade pivotKeys, que faz parte do pivotConfiguration e pode ser usada 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();

    API References

    • PivotGridComponent
    • PivotDataSelectorComponent

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.