Resumos de grade Angular

A grade da interface do usuário do Angular em Ignite UI for Angular tem um recurso de resumos que funciona em um nível por coluna como rodapé de grupo. Angular resumos de grade é um recurso poderoso que permite ao usuário ver as informações da coluna em um contêiner separado com um conjunto predefinido de itens de resumo padrão, dependendo do tipo de dados dentro da coluna ou implementando um modelo angular personalizado na grade.

Angular Grid Summaries Overview Example

Note

O resumo da coluna é uma função de todos os valores de coluna, a menos que a filtragem seja aplicada, o resumo da coluna será função dos valores de resultado filtrados

Os resumos de grade também podem ser ativados em um nível por coluna no Ignite UI for Angular, o que significa que você pode ativá-lo apenas para as colunas necessárias. Os resumos de grade fornecem um conjunto predefinido de resumos padrão, dependendo do tipo de dados na coluna, para que você possa economizar algum tempo:

Parastring eboolean data types, a seguinte função está disponível:

• contar

Paranumber ecurrency​percent tipos de dados, as seguintes funções estão disponíveis:

• contar
• mínimo
• máx.
• média
• soma

Para odate tipo de dado, as seguintes funções estão disponíveis:

• contar
• mais cedo
• mais recente

Todos os tipos de dados de coluna disponíveis podem ser encontrados no tópico oficial Tipos de coluna.

Resumos em grade são ativados por coluna ao definirhasSummary a propriedade comotrue. Também é importante lembrar que os resumos de cada coluna são resolvidos de acordo com o tipo de dado da coluna. Naigx-grid coluna padrão, o tipo de dado éstring, então se você quisernumber resumosdate específicos, deve especificar adataType propriedade comonumber ou.date Note que os valores resumidos serão exibidos localizados, de acordo com a gradelocale e a colunapipeArgs.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
    <igx-column field="ProductID" header="Product ID" width="200px" [sortable]="true"></igx-column>
    <igx-column field="ProductName" header="Product Name" width="200px" [sortable]="true" [hasSummary]="true"></igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true"></igx-column>
</igx-grid>

Outra forma de ativar/desativar resumos para uma coluna específica ou uma lista de colunas é usar o métodoenableSummaries público/disableSummaries da grade igx.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
    <igx-column field="ProductID" header="Product ID" width="200px"  [sortable]="true"></igx-column>
    <igx-column field="ProductName" header="Product Name" width="200px" [sortable]="true" [hasSummary]="true"></igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="false"></igx-column>
</igx-grid>
<button (click)="enableSummary()">Enable Summary</button>
<button (click)="disableSummary()">Disable Summary </button>

public enableSummary() {
    this.grid1.enableSummaries([
        {fieldName: 'ReorderLevel', customSummary: this.mySummary},
        {fieldName: 'ProductID'}
    ]);
}
public disableSummary() {
    this.grid1.disableSummaries('ProductName');
}

Custom Grid Summaries

Se essas funções não atenderem aos seus requisitos, você pode fornecer um resumo personalizado para as colunas específicas. Para conseguir isso, você precisa sobrescrever uma das classesIgxSummaryOperand base,IgxNumberSummaryOperand ouIgxDateSummaryOperand de acordo com o tipo de dado da coluna e suas necessidades. Dessa forma, você pode redefinir a função existente ou adicionar novas funções.IgxSummaryOperand class fornece a implementação padrão apenas para ocount método.IgxNumberSummaryOperand estendeIgxSummaryOperand e fornece implementação para omin,max,sum eaverage.IgxDateSummaryOperand estendeIgxSummaryOperand e ainda oferece eearliest​latest.

import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular/core';
// import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from '@infragistics/igniteui-angular'; for licensed package

class MySummary extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }

    operate(data?: any[]): IgxSummaryResult[] {
        const result = super.operate(data);
        result.push({
            key: 'test',
            label: 'Test',
            summaryResult: data.filter(rec => rec > 10 && rec < 30).length
        });
        return result;
    }
}

Como visto nos exemplos, as classes base expõem ooperate método, então você pode escolher obter todos os resumos padrão e modificar o resultado, ou calcular resultados totalmente novos. O método retorna uma lista deIgxSummaryResult.

interface IgxSummaryResult {
    key: string;
    label: string;
    summaryResult: any;
}

e tomar parâmetros opcionais para calcular os resumos. Consulte a seção Resumos personalizados, que acessam todos os dados abaixo.

Note

Para calcular corretamente a altura da linha resumida, a Grade precisa que ooperate método sempre retorne um array deIgxSummaryResult com o comprimento correto mesmo quando os dados estão vazios.

E agora vamos adicionar nosso resumo personalizado à colunaUnitsInStock. Vamos conseguir isso definindo asummaries propriedade para a classe que criamos abaixo.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
    <igx-column field="ProductID" width="200px"  [sortable]="true">
    </igx-column>
    <igx-column field="ProductName" width="200px" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="UnitsInStock" width="200px" [dataType]="'number'" [hasSummary]="true" [summaries]="mySummary" [sortable]="true">
    </igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true">
    </igx-column>
</igx-grid>

...
export class GridComponent implements OnInit {
    mySummary = MySummary;
    ....
}

Custom summaries, which access all data

Agora você pode acessar todos os dados da Grade dentro do resumo personalizado da coluna. Dois parâmetros opcionais adicionais são introduzidos no método IgxSummaryOperandoperate. Como você pode ver no trecho de código abaixo, o método de operação possui os seguintes três parâmetros:

• columnData - fornece uma matriz que contém os valores apenas para a coluna atual
• allGridData - fornece a fonte de dados da grade completa
• fieldName - campo da coluna atual

class MySummary extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }
    operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] {
        const result = super.operate(allData.map(r => r[fieldName]));
        result.push({ key: 'test', label: 'Total Discontinued', summaryResult: allData.filter((rec) => rec.Discontinued).length });
        return result;
    }
}

Summary Template

igxSummaryMira o resumo da coluna, fornecendo como contexto os resultados do resumo da coluna.

<igx-column ... [hasSummary]="true">
    <ng-template igxSummary let-summaryResults>
        <span> My custom summary template</span>
        <span>{{ summaryResults[0].label }} - {{ summaryResults[0].summaryResult }}</span>
    </ng-template>
</igx-column>

Quando um resumo padrão é definido, a altura da área de resumo é calculada por design, dependendo da coluna com o maior número de resumos e do tamanho da grade. Use a propriedade de entrada summaryRowHeight para substituir o valor padrão. Como argumento, ele espera um valor numérico e definir um valor falso acionará o comportamento de dimensionamento padrão do rodapé da grade.

Note

O modelo de resumo de coluna pode ser definido por meio da API definindo a propriedade summaryTemplate da coluna como o TemplateRef necessário.

Disable Summaries

AdisabledSummaries propriedade oferece controle preciso por coluna sobre o recurso de resumo da grade Ignite UI for Angular. Essa propriedade permite que os usuários personalizem os resumos exibidos para cada coluna da grade, garantindo que apenas os dados mais relevantes e significativos sejam mostrados. Por exemplo, você pode excluir tipos específicos de resumo, como['count', 'min', 'max'] especificando suas chaves de resumo em um array.

Essa propriedade também pode ser modificada dinamicamente em tempo de execução por meio de código, fornecendo flexibilidade para adaptar os resumos da grade às mudanças nos estados do aplicativo ou nas ações do usuário.

Os exemplos a seguir ilustram como usar adisabledSummaries propriedade para gerenciar resumos de diferentes colunas e excluir tipos específicos de resumos padrão e personalizados na grade Ignite UI for Angular:

<!-- default summaries -->
<igx-column
    field="UnitPrice"
    header="Unit Price"
    dataType="number"
    [hasSummary]="true"
    [disabledSummaries]="['count', 'sum', 'average']"
>
</igx-column>
<!-- custom summaries -->
<igx-column
    field="UnitsInStock"
    header="Units In Stock"
    dataType="number"
    [hasSummary]="true"
    [summaries]="discontinuedSummary"
    [disabledSummaries]="['discontinued', 'totalDiscontinued']"
>
</igx-column>

PoisUnitPrice, resumos padrão comocount,sum, eaverage estão desativados, deixando outros comomin emax ativos.

ParaUnitsInStock resumos personalizados comototal etotalDiscontinued são excluídos usando adisabledSummaries propriedade.

Em tempo de execução, resumos também podem ser desativados dinamicamente usando adisabledSummaries propriedade. Por exemplo, você pode definir ou atualizar a propriedade em colunas específicas programaticamente para adaptar os resumos exibidos com base em ações do usuário ou mudanças no estado da aplicação.

Formatting summaries

Por padrão, os resultados resumidos, produzidos pelos operandos de resumo embutidos, são localizados e formatados de acordo com a gradelocale e a colunapipeArgs. Ao usar operandos personalizados, oslocale epipeArgs não são aplicados. Se você quiser alterar a aparência padrão dos resultados resumidos, pode formatá-los usando asummaryFormatter propriedade.

public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
    const result = summary.summaryResult;
    if(summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count'
        && result !== null && result !== undefined) {
        const pipe = new DatePipe('en-US');
        return pipe.transform(result,'MMM YYYY');
    }
    return result;
}

<igx-column ... [summaryFormatter]="dateSummaryFormat"></igx-column>

Summaries with Group By

Quando você agrupa por colunas, a Grade permite alterar a posição de resumo e o modo de cálculo usando assummaryCalculationMode propriedades esummaryPosition. Junto com essas duas propriedades, o IgxGrid expõe umashowSummaryOnCollapse propriedade que permite determinar se a linha resumida permanece visível quando a linha do grupo à qual se refere é colapsada.

Os valores disponíveis dosummaryCalculationMode imóvel são:

• rootLevelOnly - Os resumos são calculados apenas para o nível raiz.
• childLevelsOnly - Os resumos são calculados apenas para os níveis filho.
• rootAndChildLevels - Resumos são calculados para níveis raiz e filho. Este é o valor padrão.

Os valores disponíveis dosummaryPosition imóvel são:

• topo - A linha de resumo aparece antes dos filhos da linha agrupada.
• inferior - A linha de resumo aparece depois do grupo por linha filhos. Este é o valor padrão.

AshowSummaryOnCollapse propriedade é booleana. Seu valor padrão é definido como falso, o que significa que a linha de resumo ficaria oculta quando a linha do grupo for colapsada. Se a propriedade for definida como verdadeira, a linha resumida permanece visível quando a linha do grupo é colapsada.

Note

AsummaryPosition propriedade se aplica apenas aos resumos em nível filho. Os resumos em nível raiz aparecem sempre fixos na parte inferior da Grade.

Demo

Exporting Summaries

Há umaexportSummaries opção queIgxExcelExporterOptions especifica se os dados exportados devem incluir os resumos da grade. Valor padrãoexportSummaries é falso.

ElesIgxExcelExporterService exportam os resumos padrão de todos os tipos de colunas como suas funções equivalentes no Excel, para que continuem funcionando corretamente quando a planilha for modificada. Experimente você mesmo no exemplo abaixo:

O arquivo exportado inclui uma coluna oculta que contém o nível de cadaDataRecord uma na planilha. Esse nível é usado nos resumos para filtrar as células que precisam ser incluídas na função de resumo.

Na tabela abaixo, você pode encontrar a fórmula do Excel correspondente para cada um dos resumos padrão.

Tipo de dados	Função	Função Excel
string, boolean	contar	="Contagem: "&CONT.SE(início:fim, recordLevel)
number, currency, percent	contar	="Contagem: "&CONT.SE(início:fim, recordLevel)
	mínimo	="Min: "&MIN(IF(start:end=recordLevel, rangeStart:rangeEnd))
	máx.	="Máx: "&MÁX(SE(início:fim=nível_de_registro, início_do_intervalo:fim_do_intervalo))
	média	="Média: "&MÉDIASE(início:fim, nível do registro, início do intervalo: fim do intervalo)
	soma	="Soma: "&SOMA.SE(início:fim, nível do registro, início do intervalo: fim do intervalo)
date	contar	="Contagem: "&CONT.SE(início:fim, recordLevel)
	mais cedo	="Mais antigo: "& TEXTO(MIN(SE(início:fim=nível_de_registro, início_do_intervalo:fim_do_intervalo)), formato)
	mais recente	="Último: "&TEXTO(MÁXIMO(SE(início:fim=nível_de_registro, início_do_intervalo:fim_do_intervalo)), formato)

Known Limitations

Limitação	Descrição
Exportando resumos personalizados	Resumos personalizados serão exportados como strings em vez de funções do Excel.
Exportando resumos com modelos	Resumos com modelos não são suportados e serão exportados como os padrões.

Keyboard Navigation

As linhas de resumo podem ser navegadas com as seguintes interações de teclado:

• UP- navega uma célula para cima
• DOWN- navega uma célula para baixo
• LEFT- navega uma célula à esquerda
• RIGHT- navega uma célula para a direita
• CTRL + LEFT ou HOME- navega para a célula mais à esquerda
• CTRL + RIGHT ou END- navega para a célula mais à direita

Estilização

Para começar a estilizar o comportamento de ordenação, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativados:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Seguindo a abordagem mais simples, criamos um novo tema que estende ogrid-summary-theme e aceita o$background-color,$focus-background-color,$label-color,$result-color,$pinned-border-width,$pinned-border-style e$pinned-border-color parâmetros.

$custom-theme: grid-summary-theme(
  $background-color: #e0f3ff,
  $focus-background-color: rgba(#94d1f7, .3),
  $label-color: #e41c77,
  $result-color: black,
  $pinned-border-width: 2px,
  $pinned-border-style: dotted,
  $pinned-border-color: #e41c77
);

Note

Em vez de codificar os valores de cor como acabamos de fazer, podemos alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

A última etapa é incluir o tema personalizado do componente:

@include css-vars($custom-theme);

Note

Se o componente estiver usando umEmulated ViewEncapsulation, é necessário quepenetrate esse encapsulamento utilize::ng-deep:

:host {
 ::ng-deep {
   @include css-vars($custom-theme);
 }
}

Demo

API References

• IgxGridComponent API
• Estilos IgxGridComponent
• Estilos IgxGridSummaries
• IgxResumoOperando
• IgxNumberSummaryOperand
• IgxDataResumoOperando
• Componente IgxColumnGroup
• IgxColumnComponent

Additional Resources

• Visão geral da grade
• Tipos de dados de coluna
• Virtualização e desempenho
• Paginação
• Filtragem
• Classificação
• Movimentação de Colunas
• Fixação de coluna
• Redimensionamento de colunas
• Escolha

• Agregações baseadas em seleção

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub