Web Components Resumos de grade

    O recurso Ignite UI for Web Components Resumos em Web Components Grid funciona em nível por coluna como rodapé de grupo. Web Components resumos IgcGrid é um recurso poderoso que permite ao usuário ver informações de colunas em um contêiner separado com um conjunto pré-definido de itens de resumo padrão, dependendo do tipo de dados dentro da coluna ou implementando um modelo personalizado naIgcGridComponent.

    Web Components Grid Summaries Overview Example

    Note

    The summary of the column is a function of all column values, unless filtering is applied, then the summary of the column will be function of the filtered result values

    IgcGridComponentResumos também podem ser ativados em nível por coluna em Ignite UI for Web Components, o que significa que você só pode ativar para colunas que precisar.IgcGridComponent Resumos te dão um conjunto pré-definido de resumos padrão, dependendo do tipo de dado na coluna, para que você possa economizar tempo:

    Parastring eboolean dataType, 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 antigo
    • Mais recente

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

    IgcGridComponentResumos são ativados por coluna ao definirhasSummary a propriedade como True. Também é importante lembrar que os resumos de cada coluna são resolvidos de acordo com o tipo de dado da coluna. NaIgcGridComponent 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.

    <igc-grid id="grid1" auto-generate="false" height="800px" width="800px">
    <igc-column field="ProductID" header="Product ID" width="200px"  sortable="true">
    </igc-column>
    <igc-column field="ProductName" header="Product Name" width="200px" sortable="true" has-summary="true">
    </igc-column>
    <igc-column field="ReorderLevel" width="200px" editable="true" data-type="number" has-summary="true">
    </igc-column>
</igc-grid>

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

    <igc-grid id="grid" auto-generate="false" height="800px" width="800px">
    <igc-column field="ProductID" header="Product ID" width="200px" sortable="true">
    </igc-column>
    <igc-column field="ProductName" header="Product Name" width="200px" sortable="true" has-summary="true">
    </igc-column>
    <igc-column field="ReorderLevel" width="200px" editable="true" data-type="number" has-summary="false">
    </igc-column>
</igc-grid>
<button id="enableBtn">Enable Summary</button>
<button id="disableBtn">Disable Summary </button>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement;
    var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement;
    grid.data = this.data;
    enableBtn.addEventListener("click", this.enableSummary);
    disableBtn.addEventListener("click", this.disableSummary);
}

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

    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 classesIgcSummaryOperand base,IgcNumberSummaryOperand ouIgcDateSummaryOperand 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.IgcSummaryOperand class fornece a implementação padrão apenas para ocount método.IgcNumberSummaryOperand estendeIgcSummaryOperand e fornece implementação para oMin,Max,Sum eAverage.IgcDateSummaryOperand estendeIgcSummaryOperand e ainda oferece eEarliest​Latest.

    import { IgcSummaryResult, IgcSummaryOperand, IgcNumberSummaryOperand, IgcDateSummaryOperand } from 'igniteui-webcomponents-grids';

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

    operate(data?: any[]): IgcSummaryResult[] {
        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 deIgcSummaryResult.

    interface IgcSummaryResult {
    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

    In order to calculate the summary row height properly, the Grid needs the operate method to always return an array of IgcSummaryResult with the proper length even when the data is empty.

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

    <igc-grid id="grid1" auto-generate="false" height="800px" width="800px">
    <igc-column field="ProductID" width="200px" sortable="true">
    </igc-column>
    <igc-column field="ProductName" width="200px" sortable="true" has-summary="true">
    </igc-column>
    <igc-column id="unitsInStock" field="UnitsInStock" width="200px" data-type="number" has-summary="true" sortable="true">
    </igc-column>
    <igc-column field="ReorderLevel" width="200px" editable="true" data-type="number" has-summary="true">
    </igc-column>
</igc-grid>

    constructor() {
    var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent;
    var unitsInStock = this.unitsInStock = document.getElementById('unitsInStock') as IgcColumnComponent;
    grid1.data = this.data;
    unitsInStock.summaries = this.mySummary;
}

    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 SummaryOperandoperate. 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 IgcNumberSummaryOperand {
    constructor() {
        super();
    }
    operate(columnData: any[], allGridData = [], fieldName?): IgcSummaryResult[] {
        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

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

    <igc-column id="column" has-summary="true">
</igc-column>

    constructor() {
    var column = this.column = document.getElementById('column') as IgcColumnComponent;
    column.summaryTemplate = this.summaryTemplate;
}

public summaryTemplate = (ctx: IgcSummaryTemplateContext) => {
    return html`
        <span> My custom summary template</span>
        <span>${ ctx.implicit[0].label } - ${ ctx.implicit[0].summaryResult }</span>
    `;
}

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

    Disabled Summaries

    Adisabled-summaries propriedade oferece controle preciso por coluna sobre o recurso resumo Web Components Grade. Essa propriedade permite que os usuários personalizem os resumos exibidos para cada coluna do IgcGrid, garantindo que apenas os dados mais relevantes e significativos sejam mostrados. Por exemplo, você pode excluir tipos específicos de resumo, como ['contagem', 'mínimo', 'máximo'] especificando suas chaves de resumo em um array.

    Essa propriedade também pode ser modificada dinamicamente em tempo de execução por meio do código, fornecendo flexibilidade para adaptar os resumos do IgcGrid à alteração dos estados do aplicativo ou das ações do usuário.

    Os exemplos a seguir ilustram como usar adisabled-summaries propriedade para gerenciar resumos de diferentes colunas e excluir tipos específicos de resumo padrão e personalizados na Grade Web Components:

    <!-- Disable default summaries -->
<igc-column
    field="UnitPrice"
    header="Unit Price"
    data-type="number"
    has-summary="true"
    disabled-summaries="['count', 'sum', 'average']"
>
</igc-column>

<!-- Disable custom summaries -->
<igc-column
    field="UnitsInStock"
    header="Units In Stock"
    data-type="number"
    has-summary="true"
    summaries="discontinuedSummary"
    disabled-summaries="['discontinued', 'totalDiscontinued']"
>
</igc-column>

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

    ParaUnitsInStock resumos personalizados comodiscontinued etotalDiscontinued são excluídos usando adisabled-summaries 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: IgcSummaryResult, summaryOperand: IgcSummaryOperand): string {
        const result = summary.summaryResult;
        if (summaryOperand instanceof IgcDateSummaryOperand && summary.key !== "count" && result !== null && result !== undefined) {
            const format = new Intl.DateTimeFormat("en", { year: "numeric" });
            return format.format(new Date(result));
        }
        return result;
    }

    <igc-column id="column"></igx-column>

    constructor() {
    var column = this.column = document.getElementById('column') as IgcColumnComponent;
    column.summaryFormatter = this.dateSummaryFormat;
}

    Summaries with Group By

    Quando você agrupou por colunas, permiteIgcGridComponent mudar a posição de resumo e o modo de cálculo usando assummaryCalculationMode propriedades esummaryPosition. Junto com essas duas propriedades, osIgcGridComponent exposes eshowSummaryOnCollapse a 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 filhos.
    • RootAndChildLevels- Resumos são calculados tanto para níveis raiz quanto para filhos. Esse é o valor padrão.

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

    • Top- A linha resumida aparece antes do grupo por filhos da linha.
    • Bottom- A linha de resumo aparece após o grupo por filhos da linha. Esse é 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

    The summaryPosition property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the IgcGridComponent.

    Demo

    Keyboard Navigation

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

    • PARA CIMA- navega uma célula para cima.
    • PARA BAIXO- navega uma célula para baixo.
    • ESQUERDA- navega uma célula para a esquerda.
    • DIREITA- navega uma célula para a direita.
    • CTRL + ESQUERDA ou HOME- navega para a célula mais à esquerda.
    • CTRL + DIREITA ou END- navega para a célula mais à direita.

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

    <igc-grid class="grid"></igc-grid>

    Em seguida, defina as propriedades CSS relacionadas para essa classe:

    .grid {
    --ig-grid-summary-background-color:#e0f3ff;
    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
    --ig-grid-summary-label-color: rgb(228, 27, 117);
    --ig-grid-summary-result-color: black;
}

    Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.