Web Components Resumos de grade

    O recurso Resumos Ignite UI for Web Components em Web Components Grid funciona em um nível por coluna como rodapé de grupo. Web Components resumos do IgcGrid é 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 personalizado no IgcGridComponent.

    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

    IgcGridComponent Os resumos também podem ser ativados em um nível por coluna no Ignite UI for Web Components, o que significa que você pode ativá-lo apenas para as colunas necessárias. IgcGridComponent resumos fornece 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 dataType, 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 antigo
    • Mais recente

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

    IgcGridComponent Os resumos 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. IgcGridComponent 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.

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

    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 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, IgcNumberSummaryOperand você deve substituir uma das classes IgcSummaryOperand base ou IgcDateSummaryOperand 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. IgcSummaryOperand classe fornece a implementação padrão apenas para o count método. IgcNumberSummaryOperand estende IgcSummaryOperand e fornece implementação para o Min, Max, Sum e Average. IgcDateSummaryOperand estende IgcSummaryOperand e, adicionalmente, dá-lhe Earliest e 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 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 IgcSummaryResult.

    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 à coluna UnitsInStock. Conseguiremos 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 do Grid dentro do resumo da coluna personalizada. Dois parâmetros opcionais adicionais são introduzidos no método SummaryOperand 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 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

    Summary tem como alvo 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 de resumo é calculada por design, dependendo da coluna com o maior número de resumos e da--ig-size grade. Use a summaryRowHeight propriedade input 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.

    Disabled Summaries

    A disabled-summaries propriedade fornece controle preciso por coluna sobre o recurso de resumo da grade Web Components. Essa propriedade permite que os usuários personalizem os resumos exibidos para cada coluna no IgcGrid, garantindo que apenas os dados mais relevantes e significativos sejam mostrados. Por exemplo, você pode excluir tipos de resumo específicos, como ['count', 'min', 'max'] especificar suas chaves de resumo em uma matriz.

    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 a disabled-summaries propriedade para gerenciar resumos de colunas diferentes e excluir tipos de resumo padrão e personalizados específicos na Web Components Grid:

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

    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 discontinued e totalDiscontinued são excluídos usando a disabled-summaries propriedade.

    Em tempo de execução, os resumos também podem ser desabilitados dinamicamente usando a disabled-summaries 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: 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ê agrupa por colunas, o permite IgcGridComponent alterar a posição do resumo e o modo de cálculo usando as summaryCalculationMode propriedades e summaryPosition. Junto com essas duas propriedades, a IgcGridComponent propriedade exposes e showSummaryOnCollapse 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 filhos.
    • 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:

    • Top- A linha de resumo aparece antes dos filhos do grupo por linha.
    • Bottom- 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] 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.