Hierarchical Grid の集計概要

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

    Angular Hierarchical Grid 集計の例

    Note

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

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

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

    • count

    numbercurrency、および 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 集計

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

    import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
    
    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;
    }
    

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

    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 入力プロパティを使用して、デフォルト値をオーバーライドします。引数として数値が必要であり、falsy の値を設定すると、グリッド フッターのデフォルトのサイズ設定動作がトリガーされます。

    Note

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

    集計のフォーマット

    デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド locale および列 pipeArgs に従ってローカライズおよびフォーマットされます。カスタム オペランドを使用する場合、localepipeArgs は適用されません。集計結果のデフォルトの外観を変更する場合は、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>
    

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

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

    • UP - 1 つ上のセルへ移動。
    • DOWN - 1 つ下のセルへ移動。
    • LEFT - 1 つ左のセルへ移動。
    • RIGHT - 1 つ右のセルへ移動。
    • CTRL + LEFT or HOME - 左端のセルへ移動。
    • CTRL + RIGHT または END - 右端のセルへ移動。
    • TAB - 行の次のセルへ順番に移動して最後のセルの後は次の行へ移動。
    • SHIFT + TAB - 行で前のセルへ順番に移動して最初のセルの後は前の行へ移動。

    スタイル設定

    ソート動作のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する 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
    );
    

    最後にそれぞれのテーマを持つコンポーネント ミックスインを含めます

    @include grid-summary($custom-theme);
    
    Note

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

    :host {
       ::ng-deep {
           @include grid-summary($custom-theme);
       }
    }
    

    カラーパレットの定義

    上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

    igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

    $blue-color: #7793b1;
    $green-color: #00ff2d;
    
    $my-custom-palette: palette($primary: $blue-color, $secondary: $green-color);
    

    また igx-color を使用してパレットから簡単に色を取り出すことができます。

    $custom-theme: grid-summary-theme(
        $background-color: color($my-custom-palette, "primary", 700),
        $focus-background-color: color($my-custom-palette, "primary", 800),
        $label-color: color($my-custom-palette, "secondary", 500),
        $result-color: color($my-custom-palette, "grays", 900),
        $pinned-border-width: 2px,
        $pinned-border-style: dotted,
        $pinned-border-color: color($my-custom-palette, "secondary", 500)
    );
    
    Note

    igx-color および igx-palette は、色を生成および取得するための重要な機能です。使い方の詳細についてはパレットのトピックを参照してください。

    スキーマの使用

    テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法のことです。

    すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (ここでは _light-grid-summary の 1 つを拡張します。

    // Extending the light grid summary schema
    $my-summary-schema: extend($_light-grid-summary,
        (
            background-color: (igx-color: ('primary', 700)),
            focus-background-color: (igx-color: ('primary', 800)),
            label-color: (igx-color: ('secondary', 500)),
            result-color: (igx-color: ('grays', 900)),
            pinned-border-width: 2px,
            pinned-border-style: dotted,
            pinned-border-color: (igx-color: ('secondary', 500))
        )
    );
    

    カスタム スキーマを適用するには、グローバル light または dark の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントを指し示し、その後それぞれのコンポーネント テーマに追加するものです。

    // Extending the global light-schema
    $my-custom-schema: extend($light-schema,
        (
            igx-grid-summary: $my-summary-schema
        )
    );
    
    // Defining our custom theme with the custom schema
    $custom-theme: grid-summary-theme(
        $palette: $my-custom-palette,
        $schema: $my-custom-schema
    );
    

    上記と同じ方法でテーマを含める必要があることに注意してください。

    デモ

    API リファレンス

    その他のリソース

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