Angular Hierarchical Grid 集計

Ignite UI for Angular の Angular UI グリッドには、グループ フッターとして列レベルで集計できる機能があります。Angular グリッド集計は、列内のデータ タイプに応じて、あるいは Hierarchical Grid にカスタム Angular テンプレートを実装することによって、定義済みのデフォルト集計項目を使用して別のコンテナーの列情報を表示できます。

Angular Hierarchical Grid 集計の例

Note

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

Hierarchical Grid 集計を列ごとに有効にして必要な列のみアクティブ化できます。Hierarchical Grid 集計は、列のデータ型に基づいてデフォルト集計の定義済みセットを提供します。

string と boolean data types の場合、データ型の場合、以下の関数が利用できます。

• count

number、currency、および percent データ型の場合、以下の関数を使用できます。

• count
• min
• max
• average
• sum

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

• count
• earliest
• latest

すべての利用可能な列データ型は、公式の列タイプ トピックにあります。

hasSummary プロパティを true に設定すると Hierarchical Grid 集計が列レベルで有効になります。各列の集計は列のデータ型に基づいて解決されます。igx-hierarchical-grid のデフォルトの列データ型は string のため、number または date 固有の集計を適用するには、dataType プロパティを number または date に設定します。集計値は、グリッドの locale および列 pipeArgs に従ってローカライズされて表示されます。

<igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false">
    <igx-column field="Artist" [hasSummary]='true'></igx-column>
    <igx-column field="Photo">
        <ng-template igxCell let-cell="cell">
            <div class="cell__inner_2">
                <img [src]="cell.value" class="photo" />
            </div>
        </ng-template>
    </igx-column>
    <igx-column field="Debut" [hasSummary]='true'></igx-column>
    <igx-column field="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="mySummary"></igx-column>
    <igx-column field="Grammy Awards" [hasSummary]='true' [dataType]="'number'"></igx-column>
</igx-hierarchical-grid>

特定の列や列のリストを有効または無効にする他の方法として igx-hierarchical-grid のパブリック メソッド enableSummaries/disableSummaries を使用する方法があります。

<igx-hierarchical-grid #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
  <igx-column field="Artist" [hasSummary]='true'></igx-column>
        <igx-column field="Photo">
            <ng-template igxCell let-cell="cell">
                <div class="cell__inner_2">
                    <img [src]="cell.value" class="photo" />
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="Debut" [hasSummary]='true'></igx-column>
        <igx-column field="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="mySummary"></igx-column>
        <igx-column field="Grammy Awards" [hasSummary]='true' [dataType]="'number'"></igx-column>
</igx-hierarchical-grid>
<button (click)="enableSummary()">Enable Summary</button>
<button (click)="disableSummary()">Disable Summary </button>

public enableSummary() {
    this.hierarchicalGrid.enableSummaries([
        {fieldName: 'Grammy Nominations', customSummary: this.mySummary},
        {fieldName: 'Artist'}
    ]);
}
public disableSummary() {
    this.hierarchicalGrid.disableSummaries('Photo');
}

カスタム Hierarchical Grid 集計

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

import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
// import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from '@infragistics/igniteui-angular'; for licensed package

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

    public operate(data?: any[]): IgxSummaryResult[] {
        const result = super.operate(data);
        result.push({
            key: 'test',
            label: 'More than 5',
            summaryResult: data.filter((rec) => rec > 5).length
        });

        return result;
    }
}

例に表示されるように、基本クラスは operate メソッドを公開しているため、すべてのデフォルト集計を取得して結果を変更するか、まったく新しい集計結果を計算することができます。 このメソッドは IgxSummaryResult のリストを返し、集計を計算するためのオプションのパラメーターを取得します。

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

以下の「すべてのデータにアクセスするカスタム集計」セクションを参照してください。

Note

集計行の高さを正しく計算するために、Hierarchical Grid の operate メソッドでデータが空の場合も常に IgxSummaryResult 配列の正しい長さを返す必要があります。

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

 <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false">
    <igx-column field="Artist" [hasSummary]='true'></igx-column>
    <igx-column field="Photo">
        <ng-template igxCell let-cell="cell">
            <div class="cell__inner_2">
                <img [src]="cell.value" class="photo" />
            </div>
        </ng-template>
    </igx-column>
    <igx-column field="Debut" [hasSummary]='true'></igx-column>
    <igx-column field="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="mySummary"></igx-column>
    <igx-column field="Grammy Awards" [hasSummary]='true' [dataType]="'number'"></igx-column>
</igx-hierarchical-grid>

...
export class HGridSummarySampleComponent implements OnInit {
    mySummary = MySummary;
    ....
}

すべてのデータにアクセスするカスタム集計

カスタム列集計内のすべての Hierarchical Grid データにアクセスできます。IgxSummaryOperand operate メソッドには、2 つの追加のオプション パラメーターが導入されています。 以下のコード スニペットで示されるように operate メソッドには以下の 3 つのパラメーターがあります。

• columnData - 現在の列の値のみを含む配列を提供します。
• allGridData - グリッド データソース全体を提供します。
• fieldName - 現在の列フィールド。

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

集計テンプレート

igxSummary は、列の集計の結果をコンテキストとして提供する列の集計を対象としています。

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

デフォルトの集計が定義されている場合、集計領域の高さは、集計の数が最も多い列とグリッドのサイズに応じてデザインにより計算されます。summaryRowHeight 入力プロパティを使用して、デフォルト値をオーバーライドします。引数として数値が必要であり、false 値を設定すると、グリッド フッターのデフォルトのサイズ設定動作がトリガーされます。

Note

列の集計テンプレートは、列 summaryTemplate プロパティを必要な TemplateRef に設定することにより、API を介して定義できます。

集計の無効化

disabledSummaries プロパティは、Ignite UI for Angular グリッド集計機能に対して列ごとに正確な制御を提供します。このプロパティを使用すると、グリッド内の各列に表示される集計をカスタマイズして、最も関連性の高い意味のあるデータのみが表示されるようにすることができます。たとえば、配列で集計キーを指定することにより、['count', 'min', 'max'] などの特定の集計タイプを除外できます。

このプロパティは、コードを通じて実行時に動的に変更することもできるため、変化するアプリケーションの状態やユーザー操作に合わせてグリッドの集計を柔軟に調整できます。

次の例は、disabledSummaries プロパティを使用してさまざまな列の集計を管理し、Ignite UI for Angular グリッドで特定のデフォルトおよびカスタムの集計タイプを除外する方法を示しています。

<!-- custom summaries -->
<igx-column
    field="Photo"
    [hasSummary]="true"
    [summaries]="grammySummary"
    [disabledSummaries]="['singersWithAwards', 'awards']"
>
    <ng-template igxCell let-cell="cell">
        <div class="cell__inner_2">
            <img [src]="cell.value" class="photo" />
        </div>
    </ng-template>
</igx-column>
<!-- default summaries -->
<igx-column
    field="GrammyNominations"
    header="Grammy Nominations"
    dataType="number"
    [hasSummary]="true"
    [disabledSummaries]="['count', 'sum', 'average']"
></igx-column>

Photo の場合、singersWithAwards や awards などのカスタム集計は disabledSummaries プロパティを使用して除外されます。

GrammyNominations の場合、count、sum、average などのデフォルトの集計は無効になっており、min や max などの他の集計は有効のままになっています。

実行時に、disabledSummaries プロパティを使用して集計を動的に無効にすることもできます。たとえば、特定の列のプロパティをプログラムで設定または更新して、ユーザー操作やアプリケーションの状態の変化に基づいて表示される集計を調整できます。

集計のフォーマット

デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド locale および列 pipeArgs に従ってローカライズおよびフォーマットされます。カスタム オペランドを使用する場合、locale と pipeArgs は適用されません。集計結果のデフォルトの外観を変更する場合は、summaryFormatter プロパティを使用してフォーマットできます。

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>

集計のエクスポート

exportSummaries オプションが IgxExcelExporterOptions にあり、エクスポートされたデータにグリッドの集計を含めるかどうかを指定します。デフォルトの exportSummaries 値は false です。

IgxExcelExporterService は、すべての列タイプのデフォルトの集計を同等の Excel 関数としてエクスポートするため、シートが変更された場合でも適切に機能し続けます。以下の例をご覧ください:

エクスポートされたファイルには、シート内の各 DataRecord のレベルを保持する非表示の列が含まれています。このレベルは、集計関数に含める必要があるセルを除外するために集計で使用されます。

以下の表では、デフォルトの各集計に対応する Excel 式を見つけることができます。

データ型	関数	Excel 関数
string、boolean	count	="Count: "&COUNTIF(start:end, recordLevel)
number、currency、percent	count	="Count: "&COUNTIF(start:end, recordLevel)
	min	="Min: "&MIN(IF(start:end=recordLevel, rangeStart:rangeEnd))
	max	="Max: "&MAX(IF(start:end=recordLevel, rangeStart:rangeEnd))
	average	="Avg: "&AVERAGEIF(start:end, recordLevel, rangeStart:rangeEnd)
	sum	="Sum: "&SUMIF(start:end, recordLevel, rangeStart:rangeEnd)
date	count	="Count: "&COUNTIF(start:end, recordLevel)
	earliest	="Earliest: "& TEXT(MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)), format)
	latest	="Latest: "&TEXT(MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)), format)

既知の問題と制限

制限	説明
カスタム集計のエクスポート	カスタム集計は、Excel 関数ではなく文字列としてエクスポートされます。
テンプレート化された集計のエクスポート	テンプレート化された集計はサポートされておらず、デフォルトのものとしてエクスポートされます。

キーボード ナビゲーション

集計行は、以下のキーボード操作でナビゲーションできます。

• UP - 1 つ上のセルへ移動。
• DOWN - 1 つ下のセルへ移動。
• LEFT - 1 つ左のセルへ移動。
• RIGHT - 1 つ右のセルへ移動。
• CTRL + LEFT または HOME - 左端のセルへ移動。
• CTRL + RIGHT または END - 右端のセルへ移動。

スタイル設定

ソート動作のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、grid-summary-theme を拡張する新しいテーマを作成し、$background-color、$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

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

最後にコンポーネントのカスタム テーマを含めます。

@include css-vars($custom-theme);

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
  ::ng-deep {
    @include css-vars($custom-theme);
  }
}

デモ

API リファレンス

• IgxHierarchicalGridComponent API
• IgxHierarchicalGridComponent スタイル
• IgxHierarchicalGridSummaries スタイル
• IgxSummaryOperand
• IgxNumberSummaryOperand
• IgxDateSummaryOperand
• IgxColumnGroupComponent
• IgxColumnComponent

その他のリソース

• Hierarchical Grid 概要
• 列のデータ型
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 列移動
• 列のピン固定
• 列のサイズ変更
• 選択

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)