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;
}
以下の[「すべてのデータにアクセスするカスタム集計」](#すべての-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
に従ってローカライズおよびフォーマットされます。カスタム オペランドを使用する場合、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
);
最後にそれぞれのテーマを持つコンポーネント ミックスインを含めます。
@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 リファレンス
- IgxHierarchicalGridComponent API
- IgxHierarchicalGridComponent スタイル
- IgxHierarchicalGridSummaries スタイル
- IgxSummaryOperand
- IgxNumberSummaryOperand
- IgxDateSummaryOperand
- IgxColumnGroupComponent
- IgxColumnComponent