Visão geral da grade dinâmica do Blazor

    Ignite UI for Blazor Pivot Grids são usadas 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.

    What is Blazor Pivot Grid?

    O Blazor PivotGrid apresenta dados em uma tabela dinâmica e ajuda 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 Blazor são dimensões de linha, coluna, agregações e filtros.

    O IgbPivotGrid permite que os usuários configurem e exibam seus dados em uma estrutura de tabela dinâmica multidimensional. As linhas e colunas representam grupos de dados distintos e os valores da célula de dados representam agregações. Isso permite uma análise de dados complexa com base em um conjunto de dados simples e simples. A IgbPivotGrid é uma tabela dinâmica rica em recursos que fornece fácil configuração das diferentes dimensões e valores, bem como operações de dados adicionais sobre eles, como filtragem e classificação.

    Blazor Pivot Grid Example

    Veja a seguir um exemplo de Blazor Grade Dinâmica em combinação com o Blazor 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 Blazor Pivot Grid

    O Blazor PivotGrid pode ser configurado por meio da PivotConfiguration propriedade.

    <IgbPivotGrid PivotConfiguration="PivotConfiguration" Data="PivotData">
</IgbPivotGrid>

    É 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:

    @code {
    var pivotConfiguration = new IgbPivotConfiguration();
    pivotConfiguration.Rows.Add(new IgbPivotDimension()
        {
            MemberName = "Product",
            Enabled = true,
            Name = "pivotDimension1",
            ChildLevel = new IgbPivotDimension() { MemberName = "Country", Enabled = true, Name = "pivotDimension2" }
        });
}

    Nesse 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 da linha são expandidas inicialmente. Esse comportamento pode ser controlado com a DefaultExpandState propriedade da Grade Dinâmica.

    Predefined Dimensions

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

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

    @code {
    IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
    dateDim.BaseDimension = new IgbPivotDimension()
        {
            MemberName = "Date",
            Enabled = true
        };
    _config.Rows.Add(dateDim);
}

    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:

    @code {
    IgbPivotDateDimension dateDim = new IgbPivotDateDimension();
    dateDim.BaseDimension = new IgbPivotDimension()
        {
            MemberName = "Date",
            Enabled = true
        };
    dateDim.Options = new IgbPivotDateDimensionOptions()
        {
            Years = true,
            Months = true,
            FullDate = true,
            Quarters = true
        };
    _config.Rows.Add(dateDim);
}

    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:

    @code {
    IgbPivotConfiguration pivotConfiguration1 = new IgbPivotConfiguration();
    IgbPivotValue pivotValue = new IgbPivotValue()
        {
            Member = "Sales",
            Name = "pivotValue1",
            DisplayName = "Amount of Sales",
            Enabled = true,
            Aggregate = new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" }
        };
    pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "sum", AggregatorName = PivotAggregationType.SUM, Label = "Sum of Sales" });
    pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "min", AggregatorName = PivotAggregationType.MIN, Label = "Minimum of Sales" });
    pivotValue.AggregateList.Add(new IgbPivotAggregator() { Key = "max", AggregatorName = PivotAggregationType.MAX, Label = "Maximum of Sales" });
    pivotConfiguration1.Values.Add(pivotValue);

    O valor de pivô também fornece uma DisplayName 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 do IgbPivotGrid componente. Com ele, o desenvolvedor pode declarar campos dos dados como linhas, colunas, filtros ou valores. A configuração permite habilitar ou desabilitar cada um desses elementos separadamente. Somente os elementos habilitados são incluídos no estado atual da Grade Dinâmica. O IgbPivotDataSelector 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 ajustar facilmente o estado do pivô alternando os diferentes elementos usando essas caixas de seleção. A Enable propriedade controla se um determinado IgbPivotDimension ou IgbPivotValue está ativo e participa da vista dinâmica renderizada pela Grade dinâmica.

    Full Configuration Code

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

        IgbPivotConfiguration pivotConfiguration = new IgbPivotConfiguration();
    pivotConfiguration.Rows.Add(new IgbPivotDimension()
        {
            MemberName = "SellerName",
            Enabled = true,
            Name = "pivotDimension1"
        });
    pivotConfiguration.Columns.Add(new IgbPivotDimension()
        {
            MemberName = "ProductName",
            Enabled = true,
            Name = "pivotDimension2"
        });
    pivotConfiguration.Columns.Add(new IgbPivotDimension()
        {
            MemberName = "SellerCity",
            Enabled = true,
            Name = "pivotDimension2"
        });
    pivotConfiguration.Values.Add(new IgbPivotValue()
        {
            Member = "AmountofSale",
            Name = "pivotValue1",
            Enabled = true,
            Aggregate = new IgbPivotAggregator() { Key = "SUM", AggregatorName = PivotAggregationType.SUM, Label = "Sum" }
        });
}

    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 PivotDataFlat()
{
    this.Add(new PivotDataFlatItem()
    {
        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:

      • Criado como IgbPivotValue agregador de uso PivotNumericAggregate.sum.
      • Adicionado à coleção de valores e habilitado por padrão.

    • Campos não numéricos:

      • Criado como IgbPivotDimension.
      • 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):

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

    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.

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

    @code {
    {
        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.

    Ao substituir o IgbPivotKeys in Blazor, atualmente você precisará definir todas as outras chaves, pois ao atribuir um novo objeto PivotKeys, ele substitui completamente os padrão:

    @code {
    var pivotConfiguration = new IgbPivotConfiguration();
    pivotConfiguration.PivotKeys = new IgbPivotKeys()
    {
        Aggregations = "aggregations",
        Records = "records",
        Children = "children",
        Level = "level",
        RowDimensionSeparator = "_",
        ColumnDimensionSeparator = "^"
    };
}

    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

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.