Web Components Grid 集計
Web Components Grid の Ignite UI for Web Components 集計機能は、グループ フッターとして列ごとのレベルで機能します。Web Components IgcGrid 集計は、列内のデータ タイプに応じて、あるいは IgcGridComponent
にカスタム テンプレートを実装することによって、定義済みのデフォルト集計項目を使用して別のコンテナの列情報を表示できます。
Web Components Grid 集計概要の例
[!Note] 列の集計は列値すべての関数ですが、フィルタリングが適用された場合、列の集計はフィルターされた結果値の関数になります。
IgcGridComponent
集計を列ごとに有効にして必要な列のみアクティブ化できます。IgcGridComponent
集計は、列のデータ型に基づいてデフォルト集計の定義済みセットを提供します。
string
および boolean
dataType
の場合、以下の関数が利用できます:
- Count
number
、currency
、および percent
データ型の場合、以下の関数を使用できます。
- Count
- Min
- Max
- Average
- Sum
date
データ型の場合、以下の関数が利用できます:
- Count
- Earliest
- Latest
すべての利用可能な列データ型は、公式の列タイプトピックにあります。
hasSummary
プロパティを true に設定すると IgcGridComponent
集計が列レベルで有効になります。各列の集計は列のデータ型に基づいて解決されます。IgcGridComponent
のデフォルトの列データ型は string
のため、number
または date
固有の集計を適用するには、dataType
プロパティを number
または date
に設定します。集計値は、グリッドの locale
および列 pipeArgs
に従ってローカライズされて表示されます。
<igc-grid id="grid1" auto-generate="false" height="800px" width="800px">
<igc-column field="ProductID" header="Product ID" width="200px" sortable="true">
</igc-column>
<igc-column field="ProductName" header="Product Name" width="200px" sortable="true" has-summary="true">
</igc-column>
<igc-column field="ReorderLevel" width="200px" editable="true" data-type="number" has-summary="true">
</igc-column>
</igc-grid>
特定の列や列のリストを有効または無効にする他の方法として IgcGridComponent
のパブリック メソッド enableSummaries
/disableSummaries
を使用する方法があります。
<igc-grid id="grid" auto-generate="false" height="800px" width="800px">
<igc-column field="ProductID" header="Product ID" width="200px" sortable="true">
</igc-column>
<igc-column field="ProductName" header="Product Name" width="200px" sortable="true" has-summary="true">
</igc-column>
<igc-column field="ReorderLevel" width="200px" editable="true" data-type="number" has-summary="false">
</igc-column>
</igc-grid>
<button id="enableBtn">Enable Summary</button>
<button id="disableBtn">Disable Summary </button>
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement;
var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement;
grid.data = this.data;
enableBtn.addEventListener("click", this.enableSummary);
disableBtn.addEventListener("click", this.disableSummary);
}
public enableSummary() {
this.grid.enableSummaries([
{fieldName: 'ReorderLevel'},
{fieldName: 'ProductID'}
]);
}
public disableSummary() {
this.grid.disableSummaries(['ProductID']);
}
カスタム Grid 集計
これらの機能が要件を満たさない場合は、カスタム集計を提供できます。
これを実現するには、列のデータ型とニーズに応じて、基本クラス IgcSummaryOperand
、IgcNumberSummaryOperand
、または IgcDateSummaryOperand
のいずれかをオーバーライドする必要があります。このように既存の関数を再定義、または新しい関数を追加できます。IgcSummaryOperand
クラスは、count
メソッドに対してのみデフォルトの実装を提供します。IgcNumberSummaryOperand
は IgcSummaryOperand
を拡張し、Min
、Max
、Sum
、および Average
の実装を提供します。IgcDateSummaryOperand
は IgcSummaryOperand
を拡張し、さらに特定の列の Earliest
と Latest
を提供します。
import { IgcSummaryResult, IgcSummaryOperand, IgcNumberSummaryOperand, IgcDateSummaryOperand } from 'igniteui-webcomponents-grids';
class MySummary extends IgcNumberSummaryOperand {
constructor() {
super();
}
operate(data?: any[]): IgcSummaryResult[] {
const result = super.operate(data);
result.push({
key: 'test',
label: 'Test',
summaryResult: data.filter(rec => rec > 10 && rec < 30).length
});
return result;
}
}
例で見られるように、基本クラスは operate
メソッドを公開しているため、すべてのデフォルトの集計を取得して結果を変更するか、まったく新しい集計結果を計算するかを選択できます。
このメソッドは IgcSummaryResult
のリストを返します。
interface IgcSummaryResult {
key: string;
label: string;
summaryResult: any;
}
そして、集計を計算するためのオプションのパラメーターを受け取ります。 以下のすべてのデータにアクセスするカスタム集計セクションを参照してください。
[!Note] 集計行の高さを適切に計算するには、データが空の場合でも、Grid が常に適切な長さの
IgcSummaryResult
の配列を返すOperate
メソッドを必要とします。
次に、カスタム集計を UnitsInStock
列に追加しましょう。これを実現するには、以下で作成するクラスに summaries
プロパティを設定します。
<igc-grid id="grid1" auto-generate="false" height="800px" width="800px">
<igc-column field="ProductID" width="200px" sortable="true">
</igc-column>
<igc-column field="ProductName" width="200px" sortable="true" has-summary="true">
</igc-column>
<igc-column id="unitsInStock" field="UnitsInStock" width="200px" data-type="number" has-summary="true" sortable="true">
</igc-column>
<igc-column field="ReorderLevel" width="200px" editable="true" data-type="number" has-summary="true">
</igc-column>
</igc-grid>
constructor() {
var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent;
var unitsInStock = this.unitsInStock = document.getElementById('unitsInStock') as IgcColumnComponent;
grid1.data = this.data;
unitsInStock.summaries = this.mySummary;
}
export class GridComponent implements OnInit {
mySummary = MySummary;
}
すべてのデータにアクセスするカスタム集計
カスタム列集計内のすべての Grid データにアクセスできます。SummaryOperand Operate
メソッドには、2 つの追加のオプション パラメーターが導入されています。
以下のコード スニペットで示されるように operate メソッドには以下の 3 つのパラメーターがあります。
- columnData - 現在の列の値のみを含む配列を提供します。
- allGridData - グリッド データソース全体を提供します。
- fieldName - 現在の列フィールド
class MySummary extends IgcNumberSummaryOperand {
constructor() {
super();
}
operate(columnData: any[], allGridData = [], fieldName?): IgcSummaryResult[] {
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;
}
}
集計テンプレート
Summary
は、列の集計の結果をコンテキストとして提供する列の集計を対象としています。
<igc-column id="column" has-summary="true">
</igc-column>
constructor() {
var column = this.column = document.getElementById('column') as IgcColumnComponent;
column.summaryTemplate = this.summaryTemplate;
}
public summaryTemplate = (ctx: IgcSummaryTemplateContext) => {
return html`
<span> My custom summary template</span>
<span>${ ctx.implicit[0].label } - ${ ctx.implicit[0].summaryResult }</span>
`;
}
デフォルトの集計が定義されている場合、集計領域の高さは、集計の数が最も多い列とグリッドの --ig-size
に応じてデザインにより計算されます。summaryRowHeight
入力プロパティを使用して、デフォルト値をオーバーライドします。引数として数値が必要であり、falsy の値を設定すると、グリッド フッターのデフォルトのサイズ設定動作がトリガーされます。
集計のフォーマット
デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド locale
および列 pipeArgs
に従ってローカライズおよびフォーマットされます。カスタム オペランドを使用する場合、locale
と pipeArgs
は適用されません。集計結果のデフォルトの外観を変更する場合は、summaryFormatter
プロパティを使用してフォーマットできます。
public dateSummaryFormat(summary: IgcSummaryResult, summaryOperand: IgcSummaryOperand): string {
const result = summary.summaryResult;
if (summaryOperand instanceof IgcDateSummaryOperand && summary.key !== "count" && result !== null && result !== undefined) {
const format = new Intl.DateTimeFormat("en", { year: "numeric" });
return format.format(new Date(result));
}
return result;
}
<igc-column id="column"></igx-column>
constructor() {
var column = this.column = document.getElementById('column') as IgcColumnComponent;
column.summaryFormatter = this.dateSummaryFormat;
}
グループ化の集計
列のグループがある場合、IgcGridComponent
は summaryCalculationMode
と summaryPosition
を使用して集計配置の変更やモードの計算をします。これら 2 つのプロパティに加えて、IgcGridComponent
は、参照するグループ行が縮小されたときに集計行が表示されたままであるかどうかを決定できる showSummaryOnCollapse
プロパティを公開します。
以下は使用できる summaryCalculationMode
プロパティの値です:
RootLevelOnly
- ルート レベルのみ集計が計算されます。ChildLevelsOnly
- 子レベルのみ集計が計算されます。RootAndChildLevels
- ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。
以下は使用できる summaryPosition
プロパティの値です。
Top
- 集計行はグループ列の子の前に表示されます。Bottom
- 集計行はグループ列の子の後に表示されます。これがデフォルト値です。
showSummaryOnCollapse
プロパティはブール値です。デフォルト値は false に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが true に設定されている場合、グループ行が縮小されたときに、集計行は表示されたままになります。
[!Note]
summaryPosition
プロパティは子レベルの集計のみに適用します。ルート レベルの集計は、IgcGridComponent
の下に常に固定されます。
デモ
キーボード ナビゲーション
集計行は、以下のキーボード操作でナビゲーションできます。
- 上矢印 - 1 つ上のセルへ移動。
- 下矢印 - 1 つ下のセルへ移動。
- 左矢印 - 1 つ左のセルへ移動。
- 右矢印 - 1 つ右のセルへ移動。
- CTRL + 左矢印 または HOME - 左端のセルへ移動。
- CTRL + 右矢印 または END - 右端のセルへ移動。
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<igc-grid class="grid"></igc-grid>
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-summary-background-color:#e0f3ff;
--ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
--ig-grid-summary-label-color: rgb(228, 27, 117);
--ig-grid-summary-result-color: black;
}
デモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。