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:

Para string e boolean data types, a seguinte função está disponível:

• contar

Para number e currency​ ​percent tipos de dados, as seguintes funções estão disponíveis:

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

Para date o tipo de dados, 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.

Os resumos de grade são habilitados por coluna definindo hasSummary a propriedade como true. Também é importante ter em mente que os resumos de cada coluna são resolvidos de acordo com o tipo de dados da coluna. igx-grid No tipo de dados da coluna padrão é string, portanto, se você quiser number resumos date específicos, especifique a dataType propriedade como number ou date. Observe que os valores resumidos serão exibidos localizados, de acordo com a grade locale e a coluna pipeArgs.

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

A outra maneira de ativar/desativar resumos para uma coluna específica ou uma lista de colunas é usar o método enableSummaries público/ disableSummaries do igx-grid.

<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ê poderá fornecer um resumo personalizado para as colunas específicas. Para conseguir isso, IgxNumberSummaryOperand você deve substituir uma das classes IgxSummaryOperand base ou IgxDateSummaryOperand de acordo com o tipo de dados da coluna e suas necessidades. Dessa forma, você pode redefinir a função existente ou adicionar novas funções. IgxSummaryOperand classe fornece a implementação padrão apenas para o count método. IgxNumberSummaryOperand estende IgxSummaryOperand e fornece implementação para o min, max, sum e average. IgxDateSummaryOperand estende IgxSummaryOperand e, adicionalmente, dá-lhe earliest e latest.

import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular';
// 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 o operate método, portanto, você pode optar por obter todos os resumos padrão e modificar o resultado ou calcular resultados de resumo totalmente novos. O método retorna uma lista de IgxSummaryResult.

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 a altura da linha de resumo corretamente, o Grid precisa que o operate método sempre retorne uma matriz com IgxSummaryResult o comprimento adequado, mesmo quando os dados estão vazios.

E agora vamos adicionar nosso resumo personalizado à coluna UnitsInStock. Conseguiremos isso definindo a summaries 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 do Grid dentro do resumo da coluna personalizada. Dois parâmetros opcionais adicionais são introduzidos no método IgxSummaryOperand operate. Como você pode ver no trecho de código abaixo, o método operate tem os três parâmetros a seguir:

• 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

igxSummary Direciona 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

A disabledSummaries propriedade fornece 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 na grade, garantindo que apenas os dados mais relevantes e significativos sejam mostrados. Por exemplo, você pode excluir tipos de resumo específicos, por exemplo ['count', 'min', 'max'], especificando suas chaves de resumo em uma matriz.

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 a disabledSummaries propriedade para gerenciar resumos de colunas diferentes e excluir tipos de resumo padrão e personalizados específicos 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>

Pois UnitPrice, resumos padrão como count, sum e average são desativados, deixando outros como min e max ativos.

Para UnitsInStock, resumos personalizados, como total e totalDiscontinued são excluídos usando a disabledSummaries propriedade.

Em tempo de execução, os resumos também podem ser desabilitados dinamicamente usando a disabledSummaries propriedade. Por exemplo, você pode definir ou atualizar a propriedade em colunas específicas programaticamente para adaptar os resumos exibidos com base nas ações do usuário ou nas alterações de estado do aplicativo.

Formatting summaries

Por padrão, os resultados do resumo, produzidos pelos operandos de resumo integrados, são localizados e formatados de acordo com a grade locale e a coluna pipeArgs. Ao usar operandos personalizados, os locale e pipeArgs não são aplicados. Se você quiser alterar a aparência padrão dos resultados do resumo, poderá formatá-los usando a summaryFormatter 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 do resumo e o modo de cálculo usando as summaryCalculationMode propriedades e summaryPosition. Junto com essas duas propriedades, o IgxGrid expõe e showSummaryOnCollapse a propriedade que permite determinar se a linha de resumo permanece visível quando a linha de grupo a que se refere é recolhida.

Os valores disponíveis do summaryCalculationMode 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 do summaryPosition 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.

A showSummaryOnCollapse propriedade é booleana. Seu valor padrão é definido como false, o que significa que a linha de resumo ficaria oculta quando a linha do grupo fosse recolhida. Se a propriedade for definida como true, a linha de resumo permanecerá visível quando a linha do grupo for recolhida.

Note

A summaryPosition propriedade se aplica somente aos resumos de nível filho. Os resumos de nível raiz aparecem sempre fixos na parte inferior da grade.

Demo

Exporting Summaries

Há uma exportSummaries opção que IgxExcelExporterOptions especifica se os dados exportados devem incluir os resumos da grade. O valor padrão exportSummaries é false.

O IgxExcelExporterService exportará os resumos padrão para todos os tipos de coluna como suas funções equivalentes do 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 cada um DataRecord 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 classificação, precisamos importar o index arquivo, onde todas as funções do tema e mixins de componentes residem:

@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 os grid-summary-theme parâmetros e aceita os $background-color parâmetros, $focus-background-color, $label-color, $result-color,, $pinned-border-width,. $pinned-border-style​ ​$pinned-border-color​

$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 obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter 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 um Emulated ViewEncapsulation, é necessário penetrate neste encapsulamento usando::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