Web Components 列集計

Ignite UI for Web Components Data Table / Data Grid は、列集計をサポートしています。エンドユーザーは、グリッドに表示されるデータ量が多い場合などでデータ集計の表示を必要とすることがあります。エンドユーザーは、特定の列のデータから追加情報を取得することもできます。これを実現するには集計が役立ちます。集計を有効にするには、summaryScope プロパティを設定します。

Web Components 列集計の例

Edit on CodeSandbox

SummaryScope プロパティ

グリッドでは、summaryScope プロパティを使用して、構成できる4つの集計設定をサポートします。集計設定は以下のとおりです。

  • Root: 集計が適用される列にグリッド全体の行の総計を表示します。
  • Groups: これはグループ化された行に対して有効です。特定のグループ内の行の総計を表示します。
  • Both: GroupsRoot オプションを同時に使用します。
  • None: グリッドの集計を無効にします。

GroupSummaryDisplayMode プロパティ

グリッドは、集計が表示される場所の構成をサポートします。これを構成するには、groupSummaryDisplayMode プロパティを使用します。このプロパティのオプションは以下のとおりです。

  • List: グループ集計をスパン グループ ヘッダーのフラット リストにレンダリングします。
  • Cells: グループ ヘッダーをセルとしてレンダリングし、集計値を対応する列に揃えてセル内にレンダリングします。グリッドは、このオプションを使用して列ごとに 1 つの集計のみを表示します。
  • RowTop: グループ集計をグループの上部に集計行としてレンダリングします。
  • RowBottom: グループ集計をグループの下部に集計行としてレンダリングします。
  • None: グループ集計のレンダリングを無効にします。

コード スニペット

<igc-data-grid
    summary-scope="Root"
    group-summary-display-mode="RowTop"
    auto-generate-columns="false"
    is-group-collapsable="true"
    group-header-display-mode="combined"
    default-column-min-width="100"
    >
        <igc-text-column field="ProductName" header-text="Product"></igc-text-column>
        <igc-numeric-column positive-prefix="$" field="BundlePrice" show-grouping-separator="true" header-text="Price" ></igc-numeric-column>
        <igc-numeric-column field="OrderItems" header-text="Order Items"></igc-numeric-column>
        <igc-numeric-column field="OrderValue" show-grouping-separator="true" header-text="Order Totals" positive-prefix="$"></igc-numeric-column>
        <igc-text-column field="Countries" header-text="Ship Country"></igc-text-column>
</igc-data-grid>
import { IgcColumnGroupDescription } from 'igniteui-webcomponents-grids';
import { IgcColumnSummaryDescription } from 'igniteui-webcomponents-grids'
import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-webcomponents-core';

connectedCallback() {

    //Count Operand
    const productCount = new IgcColumnSummaryDescription();
    productCount.field = "ProductName";
    productCount.operand = SummaryOperand.Count;
    this.grid.summaryDescriptions.add(productCount);

    //Min Operand with formatting
    const priceMin = new IgcColumnSummaryDescription();
    priceMin.field = "BundlePrice";
    priceMin.operand = SummaryOperand.Min;
    priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
    this.grid.summaryDescriptions.add(priceMin);

    //Max Operand and formatting
    const priceMax = new IgcColumnSummaryDescription();
    priceMax.field = "BundlePrice";
    priceMax.operand = SummaryOperand.Max;
    priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
    this.grid.summaryDescriptions.add(priceMax);

    //Sum Operand
    const orderSum = new IgcColumnSummaryDescription();
    orderSum.field = "OrderItems";
    orderSum.operand = SummaryOperand.Sum;
    this.grid.summaryDescriptions.add(orderSum);

    //Average Operand and formatting
    const orderValueAvg = new IgcColumnSummaryDescription();
    orderValueAvg.field = "OrderValue";
    orderValueAvg.operand = SummaryOperand.Average;
    orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
    this.grid.summaryDescriptions.add(orderValueAvg);
}

カスタム集計

デフォルトの集計セットを拡張したい場合があります。たとえば、列の特定の値が表示される回数を表示する場合、カスタム集計が必要です。

以下のスニペットは、列に表示される 「USA」 値の数の Count を表示する方法を示します。

import { IgcProvideCalculatorEventArgs } from 'igniteui-webcomponents-core';

onLoad() {

    const countries = new IgcColumnSummaryDescription();
    countries.field = "Countries";
    countries.operand = SummaryOperand.Custom;
    countries.provideCalculator = this.onProvideCalculator; //refer to class below
    this.grid.summaryDescriptions.add(countries);

}

onProvideCalculator(s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) {
    e.calculator = new CustomDomestic();
}

// Custom Calculator - calculates the count for all USA.
class CustomDomestic extends SummaryCalculator
{
    get displayName(): string {
        return "USA";
    }
    public usCountries: number;

    public beginCalculation(a: IDataSource, b: string): void {
        super.beginCalculation(a,b);
        this.usCountries = 0;
    }
    public endCalculation(): ISummaryResult {
       return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries)
    }
    public aggregate(a: any): void {
       if(a.Countries === "USA")
       {
            this.usCountries++;
       }
    }
}