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.

EleIgxPivotGridComponent permite aos usuários 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 das células de dados representam agregações. Isso permite análises complexas de dados baseadas em um conjunto simples e plano. ÉIgxPivotGridComponent uma tabela dinâmica rica em recursos que oferece uma configuração fácil das diferentes dimensões e valores, além de operações adicionais de dados sobre elas, como filtragem e ordenaçã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 issoIgxPivotGridModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importarIgxPivotGridComponent como uma dependência independente ou usar oIGX_PIVOT_GRID_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
// 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 diretivas Ignite UI for Angular Pivot Grid, pode começar a usar oigx-pivot-grid componente.

Using the Angular Pivot Grid

O Componente de Grade Pivot Angular pode ser configurado via apivotConfiguration propriedade.

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

É definido por três dimensões principais:rows ecolumnsvalues. Osrows ecolumns definem a estrutura agrupada que é exibida nas linhas e colunas da grade Angular. Definemvalues 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 via propriedadefilters de configuração. Ele pode ser usado para campos que você não deseja adicionar como dimensão ou valor, mas gostaria de filtrar os valores relacionados dos membros via interface.

Dimensions configuration

Cada configuração básica de dimensão requer ummemberName que corresponda a um campo do fornecidodata, ou quememberFunction extraia um valor do registro no caso de objetos complexos ou outros cenários personalizados.

Note

AmemberName necessidade é ser única. Caso você precise de dimensões diferentes para o mesmo campo, pode definir um valor únicomemberName personalizado para cada um e extrair o valor relacionado por meiomemberFunction de .

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 via a propriedadechildLevel, por exemplo:

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

Nesse caso, a dimensão gera um expandor na seção relacionada da grade (linha ou coluna) e permite que os filhos sejam expandidos ou colapsados como parte da hierarquia. Por padrão, as dimensões da linha são inicialmente expandidas. Esse comportamento pode ser controlado com adefaultExpandState @Input grade de pivô.

Predefined dimensions

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

IgxPivotDateDimensionPode 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 quemember corresponda a um campo do fornecidodata, ou pode ser definida por meio de umaaggregatorName função personalizadaaggregator para cenários mais complexos.

Note

Amember necessidade é ser única. Caso você precise de agregações de valores diferentes para o mesmo campo, você pode definir um valor únicomember personalizado para cada um e extrair o valor relacionado via aaggregator função.

Fora da caixa, existem 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 temporais. 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 dado do campo. Uma lista personalizada de agregações também pode ser definida via aaggregateList propriedade, 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 umadisplayName propriedade. Ele pode ser usado para exibir um nome personalizado para esse valor no cabeçalho da coluna.

Note

Se você definir ambosaggregatorName eaggregator função,aggregatorName tem prioridade. Se nenhum estiver definido, um erro é lançado.

Enable property

IPivotConfigurationé a interface que descreve o estado atual doIgxPivotGrid componente. Com ele, o desenvolvedor pode declarar campos dos dados comorows,columns,filters ouvalues. A configuração permite ativar ou desativar cada um desses elementos separadamente. Apenas elementos habilitados são incluídos no estado atual da grade de pivô. OIgxPivotDataSelector componente utiliza a mesma configuração e mostra uma lista de todos os elementos - ativados e desativados. Para cada um deles há uma caixa de seleção no estado apropriado. Os usuários finais podem facilmente ajustar o estado do pivô alternando os diferentes elementos usando essas caixas de seleção. Aenable propriedade controla se um dadoIPivotDimension ouIPivotValue está ativo e participa da visualização de pivô renderizada pela grade de pivô.

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

AautoGenerateConfig propriedade gera automaticamente dimensões e valores com base nos campos de origem dos dados:

Campos numéricos:
- Criado usandoIPivotValueIgxPivotNumericAggregate.sum agregador.
- Adicionado à coleção de valores e habilitado por padrão.
Campos não numéricos:
- Criado comoIPivotDimension.
- Desabilitado por padrão.
- Adicionado à coleção columns.
Campos de Data (apenas o primeirodate campo está ativado, os outrosdate campos aplicam a regra de campos não numéricos):
- Criado comoIgxPivotDateDimension
- 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 no`columns` configuração, então defini-las declarativamente, como na grade base, não é suportado. Tais colunas são desconsideradas.
Definir valores duplicados`memberName` ou`member` 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 em`single` 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 fornecem`memberFunction` e isso pode ser alterado aí, o resultado do`memberFunction` são comparados e usados como valor de exibição.

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Visão geral do componente Angular Pivot Grid

What is Angular Pivot Grid?

Angular Pivot Grid Example

Getting started with Ignite UI for Angular Pivot Grid

Using the Angular Pivot Grid

Dimensions configuration

Note

Predefined dimensions

Values configuration

Note

Note

Enable property

Full configuration example

Auto generate configuration

Known Issues and Limitations

API References

Additional Resources

Temas