Visão geral da grade dinâmica do React

A Grade Dinâmica React é usada para somar e representar dados multidimensionais volumosos em um formato de tabela cruzada. Os dados de verão podem ser classificados, agrupados ou filtrados de forma fácil e rápida. Esses dados podem incluir somas, médias e outras estatísticas. Os usuários finais podem modificar o layout da tabela dinâmica por meio de operações de arrastar e soltar, de acordo com suas necessidades.

A Grade Dinâmica React apresenta dados em uma tabela dinâmica e ajuda os usuários a realizar análises complexas no conjunto de dados fornecido. Esse sofisticado controle de grade dinâmica é usado para organizar, resumir e filtrar grandes volumes de dados que são exibidos posteriormente em um formato de tabela cruzada. Os principais recursos de uma Grade Dinâmica React são dimensões de linha, coluna, agregações e filtros.

EleIgrPivotGrid 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. ÉIgrPivotGrid 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.

React Pivot Grid Example

Veja a seguir um exemplo de React Grade Dinâmica em combinação com o React Componente Seletor de Dados Dinâmicos. Dessa forma, você pode ter opções de configuração de tempo de execução mais flexíveis.

Getting Started With React Pivot Grid

O React IgrPivotGrid pode ser configurado via apivotConfiguration propriedade.

<IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration}>
</IgrPivotGrid>

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

const dimension: IgrPivotDimension = {
    memberName: "AllProducts",
    enabled: true,
    childLevel: {
        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 propriedade 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:

• IgrPivotDateDimensionPode 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:

const pivotConfiguration: IgrPivotConfiguration = {
    columns: [
        new IgrPivotDateDimension({
            enabled: true,
            memberName: "Date",
        })
    ]
};

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 IgrPivotDateDimension({
    enabled: true,
    memberName: "Date",
}, {
    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 temporais. 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 dado do campo. Uma lista personalizada de agregações também pode ser definida via aaggregateList propriedade, por exemplo:

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

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

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

const pivotConfiguration: IgrPivotConfiguration = {
      values: [
            {
                enabled: true,
                member: "AmountofSale",
                displayName: "Amount of Sale",
                aggregate: {
                    aggregatorName: "SUM",
                    key: "SUM",
                    label: "Sum of Sale",
                },
                aggregateList: [{
                    key: 'SUM',
                    aggregator: totalSale,
                    label: 'Sum of Sale'
                }, {
                    key: 'MIN',
                    aggregator: totalMin,
                    label: 'Minimum of Sale'
                }, {
                    key: 'MAX',
                    aggregator: totalMax,
                    label: 'Maximum of Sale'
                }]
            }
      ]
};

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.

Enable Property

pivotConfigurationé a interface que descreve o estado atual doIgrPivotGrid componente. Com ele, o desenvolvedor pode declarar campos dos dados como linhas, colunas, filtros ou valores. A configuração permite ativar ou desativar cada um desses elementos separadamente. Apenas elementos habilitados estão incluídos no estado atual da Grade de Pivô. OIgrPivotDataSelector 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 dadoIgrPivotDimension ouIgrPivotValue está ativo e participa da visualização de pivô renderizada pela Grade Pivot.

Full Configuration Code

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

const pivotConfiguration1: IgrPivotConfiguration = {
    columns: [
        new IgrPivotDateDimension({
            enabled: true,
            memberName: "Date",
        })
    ],
    rows: [
        {
            enabled: true,
            memberName: "SellerCity"
        },
        {
            enabled: true,
            memberName: "ProductName"
        }
    ],
    filters: [
        {
            enabled: true,
            memberName: "SellerName"
        }
    ],
    values: [
        {
            member: "ProductUnitPrice",
            displayName: "Amount of Sale",
            dataType: "currency",
            enabled: true,
            aggregate: {
                    aggregatorName: "SUM",
                    key: "SUM",
                    label: "Sum of Sale",
                }
        }
    ]
};

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

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

• Campos numéricos:

  • Criado usandoIgrPivotValue​PivotNumericAggregate.sum agregador.
  • Adicionado à coleção de valores e habilitado por padrão.

• Campos não numéricos:

  • Criado comoIgrPivotDimension.
  • 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 comoIgrPivotDateDimension
  • 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 de pivô oferece uma personalização dos campos de chaves de objeto que usa para fazer seus cálculos de pivô. Uma visão mais detalhada de como eles são usados pode ser vista abaixo em dados de exemplo, onde você pode ver 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 }
        ]
    }
];

Todas essas são armazenadas na propriedade pivotKeys, que faz parte dopivotConfiguration e pode ser usada para alterar as chaves pivot padrão.

• 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
• IgrPivotGrid
• IgrPivotDataSelector
• IgrPivotDateDimension
• IgrColumn

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for React Forums
• Ignite UI for React GitHub