集計 - ネイティブ Angular | Ignite UI for Angular - Native Angular

グリッドの集計

Ignite UI for Angular Grid コンポーネントには、列レベルで制御可能な集計機能があります。

デモ

Note

列の集計は列値すべての関数ですが、フィルタリングが適用された場合、列の集計はフィルターされた結果値の関数になります。

列のデータ型に基づいて定義済みのデフォルト集計項目を持つ別のコンテナーで列情報を表示します。Ignite UI for Angular でグリッド集計を列ごとに有効にして必要な列のみアクティブ化できます。グリッド集計は、列のデータ型に基づいてデフォルト集計の定義済みセットを提供します。

string および boolean データ型の場合、以下の関数が利用できます。

count

number データ型の場合、以下の関数が利用できます。

count
min
max
average
sum

date データ型の場合、以下の関数が利用できます。

count
earliest
latest

列で hasSummary プロパティを true に設定するとグリッド集計が有効になります。各列の集計は列のデータ型に基づいて解決されます。igx-grid でデフォルトの列データ型は string のため、number または date の集計を適用するには、dataType プロパティを number または date に設定します。

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (onColumnInit)="initColunm($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>

特定の列または列のリストで集計を有効/無効にするもう 1 つの方法として igx-grid の enableSummaries/disableSummaries 公開メソッドがあります。

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (onColumnInit)="initColunm($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");
}

注: hasSummary プロパティを false から true (true から false) に変更して、特定列の集計をランタイムで有効または無効にするオプションがあります。ただし、recalculateSummaries メソッドを明示的に呼び出す必要があります。

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (onColumnInit)="initColunm($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)="toggleSummary()">Enable Summary</button>

...
    public toggleSummary() {
        this.grid1.getColumnByName('ReorderLevel').hasSummary = true;
        this.grid1.recalculateSummaries();
    }
...

この関数が要件に合わない場合、指定した列にカスタム集計を提供できます。これを実装するには、列のデータ型に基づいて IgxSummaryOperand、IgxNumberSummaryOperand、または IgxDateSummaryOperand の基本クラスをオーバーライドします。このように既存の関数を変更または新しい関数を追加できます。IgxSummaryOperand クラスのデフォルト集計は count メソッドのみです。IgxNumberSummaryOperand は IgxSummaryOperand を拡張し、min、max、sum、および average 集計を提供します。IgxDateSummaryOperand は IgxSummaryOperand を拡張し、earliest および latest を提供します。

import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular/grid/grid-summary';

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

以下のコードで、operate メソッドはインターフェイスである IgxSummaryResult のリストを返します。

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

UnitsInStock 列にカスタム集計を追加します。summaries プロパティを以下に作成するクラスに設定します。

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (onColumnInit)="initColunm($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;

    ....
}

パフォーマンスを向上するため、igx-grid はすべての集計をキャッシュし、データで CRUD 操作を実行する場合に再計算します。データソースが igx-grid 以外に変更される場合、clearSummaryCache() メソッドを呼び出して igx-grid の集計の再計算を実行する必要があります。

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (onColumnInit)="initColunm($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>
<button (click)="updateData()">Update Data</button>

...
export class GridComponent implements OnInit {

 updateData() {
    const d = [].concat(this.data).concat(this.data.slice(0, 15));
    this.data = d;
    this.grid1.clearSummaryCache();
  }
}

http 要求が実行された場合にもキャッシュを更新します。

this.http.get<any[]>('/assets/data.json')
    .subscribe(data => {
    this.data = data;
    this.grid1.clearSummaryCache();
});

API

追加のリソース

コミュニティに参加して新しいアイデアをご提案ください。