Web Components Pivot Grid Overview

Ignite UI for Web Components Pivot Grids are used for summing up and representing voluminous multidimensional data in a cross-tabular format. The data summery can be easily and quickly sorted, grouped, or filtered. Such data can include sums, averages, and other statistics. End-users are enabled to modify the pivot table layout through drag-and-drop operations, according to their needs.

What is Web Components Pivot Grid?

The Web Components IgcPivotGrid presents data in a pivot table and helps performing complex analysis on the supplied data set. This sophisticated Pivot Grid control is used for organizing, summarizing, and filtering large volumes of data which is later displayed in a cross-table format. Key features of an Web Components Pivot Grid are row dimensions, column dimensions, aggregations, and filters.

The IgcPivotGridComponent gives the ability to users to configure and display their data in a multi-dimensional pivot table structure. The rows and columns represent distinct data groups, and the data cell values represent aggregations. This allows complex data analysis based on a simple flat data set. The IgcPivotGridComponent is a feature-rich pivot table that provides easy configuration of the different dimensions and values as well as additional data operations on them like filtering and sorting.

Web Components Pivot Grid Example

The following is an Web Components Pivot Grid example in combination with the Web Components Pivot Data Selector Component. This way you can have more flexible runtime configuration options.

Getting Started With Web Components Pivot Grid

The Web Components IgcPivotGrid can be configured via the pivotConfiguration property.

<igc-pivot-grid #grid1 data="data" pivot-configuration="pivotConfigHierarchy">
</igc-pivot-grid>

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

Um filtro também pode ser definido por meio da propriedade de configuração de filtros. 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 membro relacionados por meio da interface do usuário.

Dimensions Configuration

Cada configuração básica de dimensão requer um MemberName que corresponda a um campo dos dados fornecidos.

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 ChildLevel propriedade, por exemplo:

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

In this case the dimension renders an expander in the related section of the grid (row or column) and allows the children to be expanded or collapsed as part of the hierarchy. By default the row dimensions are initially expanded. This behavior can be controlled with the defaultExpandState property of the Pivot Grid.

Predefined Dimensions

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

• IgcPivotDateDimension Can be used for date fields. Describes the following hierarchy by default:
  • Todos os períodos
  • Anos
  • Quartos
  • Meses
  • Data completa

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

public pivotConfigHierarchy: IgcPivotConfiguration = {
    rows: [
        new IgcPivotDateDimension({ 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 IgcPivotDateDimension({ memberName: 'Date', enabled: true }, {
    total: true,
    years: true,
    months: true,
    fullDate: true,
    quarters: false
});

Values Configuration

Uma configuração de valor requer um membro que corresponda a um campo dos dados fornecidos ou pode definir uma função de agregador personalizada para cenários personalizados mais complexos. Fora da caixa, existem 4 agregações predefinidas que podem ser usadas dependendo do tipo de dados do campo de dados:

• PivotNumericAggregate- para campos numéricos. Contém as seguintes funções de agregação: SUM, AVG, MIN, MAX, COUNT.
• PivotDateAggregate- para campos de data. Contém as seguintes funções de agregação: LATEST, EARLIEST, COUNT.
• PivotTimeAggregate- para campos de tempo. Contém as seguintes funções de agregação: LATEST, EARLIEST, COUNT.
• PivotAggregate- 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 AggregateList propriedade, por exemplo:

public pivotConfigHierarchy: IgcPivotConfiguration = {
    values: [
        {
            member: 'AmountOfSale',
            displayName: 'Amount of Sale',
            aggregate: {
                key: 'SUM',
                aggregator: IgcTotalSaleAggregate.totalSale,
                label: 'Sum of Sale'
            },
            aggregateList: [{
                key: 'SUM',
                aggregator: IgcTotalSaleAggregate.totalSale,
                label: 'Sum of Sale'
            }, {
                key: 'MIN',
                aggregator: IgcTotalSaleAggregate.totalMin,
                label: 'Minimum of Sale'
            }, {
                key: 'MAX',
                aggregator: IgcTotalSaleAggregate.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));
};

The pivot value also provides a displayName property. It can be used to display a custom name for this value in the column header.

Enable Property

pivotConfiguration is the interface that describes the current state of the IgcPivotGridComponent component. With it the developer can declare fields of the data as rows, columns, filters or values. The configuration allows enabling or disabling each of these elements separately. Only enabled elements are included in the current state of the Pivot Grid. The IgcPivotDataSelectorComponent component utilizes the same configuration and shows a list of all elements - enabled and disabled. For each of them there is a checkbox in the appropriate state. End-users can easily tweak the pivot state by toggling the different elements using these checkboxes. The Enable property controls if a given IgcPivotDimension or IgcPivotValue is active and takes part in the pivot view rendered by the Pivot Grid.

Full Configuration Code

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

      public pivotConfigHierarchy: IgcPivotConfiguration = {
        columns: [
            {

                memberName: 'ProductName',
                memberFunction: (data) => data.ProductName,
                enabled: true
            },
            {

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


        ],
        rows: [
            {
                memberName: 'SellerName',
                memberFunction: (data) => data.SellerName,
                enabled: true,
            }
        ],
        values: [
            {
                member: 'AmountofSale',
                displayName: "Amount of Sale",
                aggregate: {
                    aggregator: IgcPivotNumericAggregate.sum,
                    key: 'SUM',
                    label: 'Sum of Sale'
                },
                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 = [
[
    {
        ProductName: `Clothing`,
        ProductUnitPrice: 12.8,
        SellerName: `Stanley Brooker`,
        SellerCity: `Seattle`,
        Date: `2007-01-01T00:00:00`,
        Value: 94.4,
        NumberOfUnits: 282
    },
];

Full Configuration Example

O uso do código acima resultará no exemplo a seguir, que agrupa as colunas exclusivas Data, Nome do Produto e Cidade do Vendedor em linhas exclusivas e exibe as agregações relacionadas para o valor da venda nas células relacionadas:

Auto generate configuration

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

• Campos numéricos:

  • Created as IgcPivotValue using PivotNumericAggregate.sum aggregator.
  • Adicionado à coleção de valores e habilitado por padrão.

• Campos não numéricos:

  • Created as IgcPivotDimension.
  • 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):

  • Created as IgcPivotDateDimension
  • 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.

Pivot Value Calculation Keys

A grade dinâmica fornece uma personalização para os campos de chaves de objeto que ela usa para fazer seus cálculos de pivô.
Uma visão mais detalhada de como eles são usados pode ser vista abaixo nos dados de exemplo, onde você pode ver os valores já agregados:

[
    {
        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 }
        ]
    }
];

All of these are stored in the pivotKeys property which is part of the pivotConfiguration and can be used to change the default pivot keys.

• 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 valor de exemplo -All-Bulgaria.
• rowDimensionSeparator- Separador usado ao gerar os valores de campo de linha exclusivos. Ele é usado ao criar os registros e o campo de nível.

Os valores padrão são:

{
    aggregations: 'aggregations',
    records: 'records',
    children: 'children',
    level: 'level',
    rowDimensionSeparator: '_',
    columnDimensionSeparator: '-'
};

[!Note] If you have data field values that contain the default keys, make sure to change the separators that match to any other symbols that you are not currently using. Otherwise could lead to unexpected behavior in calculating and showing the aggregated values.

Known Issues and Limitations

Limitação	Descrição
Não há suporte para a configuração de colunas declarativamente.	A grade dinâmica gera suas colunas com base nacolumns configuração, portanto, não há suporte para defini-las declarativamente, como na grade base. Tais colunas são desconsideradas.
Definir valores duplicadosMemberName ouMember de propriedade para dimensões/valores.	Essas propriedades devem ser exclusivas para cada dimensão/valor. A duplicação pode resultar na perda de dados do resultado final.
A seleção de linha só é suportada no modo Único.	No momento, não há suporte para seleção múltipla.

API References

• pivotConfiguration
• IgcPivotGridComponent
• IgcPivotDataSelectorComponent
• IgcPivotDateDimension
• IgcColumnComponent

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Web Components Fóruns
• Ignite UI for Web Components GitHub