Visão geral do componente Angular Pivot Grid

    Ignite UI for Angular Pivot Grid é um dos nossos melhores Angular Components, representando uma tabela de valores agrupados e agregados que permite organizar e resumir dados em um formato tabular. É uma ferramenta de sumarização de dados usada para reorganizar e resumir colunas e linhas selecionadas de dados provenientes de uma planilha ou tabela de banco de dados para obter um relatório desejado.

    What is Angular Pivot Grid?

    O componente Angular Pivot Grid apresenta dados em uma tabela dinâmica e ajuda a executar análises complexas no conjunto de dados fornecido. Este sofisticado controle Pivot Grid é usado para organizar, resumir e filtrar grandes volumes de dados que são posteriormente exibidos em um formato de tabela cruzada. Os principais recursos de um Angular Pivot Grid são dimensões de linha, dimensões de coluna, agregações e filtros.

    O IgxPivotGridComponent dá aos usuários a capacidade de configurar e exibir seus dados em uma estrutura de tabela dinâmica multidimensional. As linhas e colunas representam grupos de dados distintos, e os valores de células de dados representam agregações. Isso permite uma análise de dados complexa com base em um conjunto de dados simples e plano. O IgxPivotGridComponent é uma tabela dinâmica rica em recursos que fornece configuração fácil das diferentes dimensões e valores, bem como operações de dados adicionais neles, como filtragem e classificação.

    Angular Pivot Grid Example

    O seguinte é um exemplo de Angular Pivot Grid em combinação com o Angular Pivot Data Selector Component. Dessa forma, você pode ter opções de configuração de tempo de execução mais flexíveis.

    Getting started with Ignite UI for Angular Pivot Grid

    Para começar a usar o componente Ignite UI for Angular Pivot Grid, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxPivotGridModule no seu arquivo app.module.ts.

    // app.module.ts

import { IgxPivotGridModule } from 'igniteui-angular';
// import { IgxPivotGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxPivotGridModule,
        ...
    ]
})
export class AppModule {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxPivotGridComponent como uma dependência autônoma ou usar o token IGX_PIVOT_GRID_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

    // home.component.ts

import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular';
// import { IGX_PIVOT_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
    </igx-pivot-grid>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_PIVOT_GRID_DIRECTIVES]
    /* or imports: [IgxPivotGridComponent] */
})
export class HomeComponent {
    public data: Transaction [];
}

    Agora que você importou o módulo ou as diretivas do Ignite UI for Angular Pivot Grid, você pode começar a usar o componente igx-pivot-grid.

    Using the Angular Pivot Grid

    O componente Angular Pivot Grid pode ser configurado por meio da propriedade pivotConfiguration.

    <igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>

    Ele é definido por três dimensões principais: rows, columns e values. As rows e columns definem a estrutura agrupada que é exibida nas linhas e colunas da grade Angular. Os values definem os campos de agregação e a agregação que serão usados para calcular e exibir os valores relacionados dos grupos.

    Um filtro também pode ser definido por meio da propriedade de configuração filters. Ele pode ser usado para campos que você não deseja adicionar como uma dimensão ou um valor, mas gostaria de filtrar seus valores de membros relacionados por meio da UI.

    Dimensions configuration

    Cada configuração de dimensão básica requer um memberName que corresponda a um campo dos data fornecidos ou um memberFunction que extraia um valor do registro no caso de objetos complexos ou outros cenários personalizados.

    Várias dimensões irmãs podem ser definidas, o que cria um grupo aninhado mais complexo na área de dimensão de linha ou coluna relacionada.

    As dimensões podem ser reordenadas ou movidas de uma área para outra através de seus chips correspondentes usando arrastar e soltar.

    Uma dimensão também pode descrever uma hierarquia expansível por meio da propriedade childLevel, por exemplo:

       {
            memberFunction: () => 'All',
            memberName: 'AllProducts',
            enabled: true,
            childLevel: {
                memberFunction: (data) => data.ProductCategory,
                memberName: 'ProductCategory',
                enabled: true
            }
    }

    Neste caso, a dimensão renderiza um expansor na seção relacionada da grade (linha ou coluna) e permite que os filhos sejam expandidos ou recolhidos como parte da hierarquia. Por padrão, as dimensões de linha são inicialmente expandidas. Este comportamento pode ser controlado com o defaultExpandState @Input da grade de pivô.

    Predefined dimensions

    Como parte da grade dinâmica, algumas dimensões predefinidas adicionais são expostas para facilitar a configuração:

    • IgxPivotDateDimension Pode ser usado para campos de data. Descreve a seguinte hierarquia por padrão:
      • Todos os períodos
      • Anos
      • Quartos
      • Meses
      • Data completa

    Ele pode ser definido para linhas ou colunas, por exemplo:

    public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        new IgxPivotDateDimension({ memberName: 'Date', enabled: true });
    ]
}

    Ele também permite uma personalização adicional por meio do segundo parâmetro de opção para habilitar ou desabilitar uma parte específica da hierarquia, por exemplo:

     new IgxPivotDateDimension({ memberName: 'Date', enabled: true }, {
    total: true,
    years: true,
    months: true,
    fullDate: true,
    quarters: false
});

    Values configuration

    Uma configuração de valor requer um member que corresponda a um campo dos data fornecidos, ou pode definir um aggregatorName ou uma função aggregator personalizada para cenários mais complexos. Pronto para uso, há 4 agregações predefinidas que podem ser usadas dependendo do tipo de dados do campo de dados:

    • IgxPivotNumericAggregate- para campos numéricos. Contém as seguintes funções de agregação: SUM, AVG, MIN, MAX, COUNT.
    • IgxPivotDateAggregate- para campos de data. Contém as seguintes funções de agregação: LATEST, EARLIEST, COUNT.
    • IgxPivotTimeAggregate- para campos de tempo. Contém as seguintes funções de agregação: LATEST, EARLIEST, COUNT.
    • IgxPivotAggregate- para quaisquer outros tipos de dados. Esta é a agregação base. Contém as seguintes funções de agregação: COUNT.

    A função de agregação atual pode ser alterada em tempo de execução usando o menu suspenso do chip de valor. Por padrão, ele exibe uma lista de agregações disponíveis com base no tipo de dados do campo. Uma lista personalizada de agregações também pode ser definida por meio da propriedade aggregateList, por exemplo:

    public pivotConfigHierarchy: IPivotConfiguration = {
    values: [
        {
            member: 'AmountOfSale',
            displayName: 'Amount of Sale',
            aggregate: {
                key: 'SUM',
                aggregator: IgxTotalSaleAggregate.totalSale,
                label: 'Sum of Sale'
            },
            aggregateList: [{
                key: 'SUM',
                aggregator: IgxTotalSaleAggregate.totalSale,
                label: 'Sum of Sale'
            }, {
                key: 'MIN',
                aggregator: IgxTotalSaleAggregate.totalMin,
                label: 'Minimum of Sale'
            }, {
                key: 'MAX',
                aggregator: IgxTotalSaleAggregate.totalMax,
                label: 'Maximum of Sale'
            }]
        }
    ]
}

public static totalSale: PivotAggregation = (members, data: any) =>
    data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0);

public static totalMin: PivotAggregation = (members, data: any) => {
    return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.min(a, b));
};

public static totalMax: PivotAggregation = (members, data: any) => {
    return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
};

    O valor pivot também fornece uma propriedade displayName. Ele pode ser usado para exibir um nome personalizado para esse valor no cabeçalho da coluna.

    Note

    Se você definir aggregatorName e aggregator function, aggregatorName tem precedência. Se nenhum for definido, um erro será lançado.

    Enable property

    IPivotConfiguration é a interface que descreve o estado atual do componente IgxPivotGrid. Com ele, o desenvolvedor pode declarar campos de dados como rows, columns, filters ou values. A configuração permite habilitar ou desabilitar cada um desses elementos separadamente. Apenas elementos habilitados são incluídos no estado atual da grade dinâmica. O componente IgxPivotDataSelector utiliza a mesma configuração e mostra uma lista de todos os elementos - habilitados e desabilitados. Para cada um deles, há uma caixa de seleção no estado apropriado. Os usuários finais podem ajustar facilmente o estado dinâmico alternando os diferentes elementos usando essas caixas de seleção. A propriedade enable controla se um determinado IPivotDimension ou IPivotValue está ativo e participa da visualização dinâmica renderizada pela grade dinâmica.

    Full configuration example

    Vamos dar uma olhada em uma configuração básica de pivô:

          public pivotConfigHierarchy: IPivotConfiguration = {
        columns: [
            {

                memberName: 'Product',
                memberFunction: (data) => data.Product.Name,
                enabled: true
            }

        ],
        rows: [
            {
                memberName: 'Seller',
                memberFunction: (data) => data.Seller.Name,
                enabled: true,
            }
        ],
        values: [
            {
                member: 'NumberOfUnits',
                aggregate: {
                    aggregator: IgxPivotNumericAggregate.sum,
                    key: 'sum',
                    label: 'Sum'
                },
                enabled: true
            },
            {
                member: 'AmountOfSale',
                aggregate: {
                    aggregatorName: 'SUM',
                    key: 'sum',
                    label: 'Sum'
                },
                enabled: true
            }
        ]
    };

    Essa configuração define 1 linha, 1 coluna e 1 agregação que soma os valores de cada grupo de dimensões. Os campos de correspondência de membros disponíveis na fonte de dados fornecida:

    public data = [
[
    {
        Product: {
            Name: 'Clothing',
            UnitPrice: '12.814860936633712'
        },
        Seller: {
            Name: 'Stanley Brooker',
            City: 'Seattle'
        },
        Date: '2007-01-01T00:00:00',
        Value: '94.2652032683907',
        NumberOfUnits: '282'
    },
    //...
];

    Resultando na seguinte visualização, que agrupa as colunas exclusivas Categorias de produtos, Nomes de vendedores em linhas exclusivas e exibe as agregações relacionadas para o número de unidades nas células relacionadas:

    E se você quiser agilizar todo o processo de desenvolvimento de aplicativos, experimente nosso WYSIWYG App Builder ™ para seu próximo aplicativo Angular.

    Auto generate configuration

    A autoGenerateConfig propriedade gera automaticamente dimensões e valores com base nos campos da fonte de dados:

    • Campos numéricos:

      • Criado como IPivotValue usando o agregador IgxPivotNumericAggregate.sum.
      • Adicionado à coleção de valores e habilitado por padrão.

    • Campos não numéricos:

      • Criado como IPivotDimension.
      • Desabilitado por padrão.
      • Adicionado à coleção columns.

    • Campos de data (apenas o primeiro date campo está habilitado, os outros date campos aplicam a regra de campos não numéricos):

      • Criado como IgxPivotDateDimension
      • Habilitado por padrão
      • adicionado à coleção rows.

    Esse recurso permite que os desenvolvedores criem rapidamente uma visualização dinâmica sem especificar manualmente dimensões e valores. Com um seletor dinâmico ao lado da grade dinâmica, os usuários podem ativar e reordenar dimensões e valores conforme necessário.

    Known Issues and Limitations

    Limitação Descrição
    Não há suporte para a configuração de colunas declarativamente. A grade Pivot gera suas colunas com base nocolumns configuração, então defini-las declarativamente, como na grade base, não é suportado. Tais colunas são desconsideradas.
    Definir valores duplicadosmemberName oumember de propriedade para dimensões/valores. memberName/member deve ser único para cada dimensão/valor. Duplicação pode resultar em perda de dados do resultado final.
    A seleção de linha só é suportada emsingle modo. No momento, não há suporte para seleção múltipla.
    A fusão dos membros da dimensão diferencia maiúsculas de minúsculas A grade dinâmica cria grupos e mescla os mesmos valores (sensíveis a maiúsculas e minúsculas). Mas as dimensões fornecemmemberFunction e isso pode ser alterado aí, o resultado domemberFunction são comparados e usados como valor de exibição.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.