Premium

Web Components Hierarchical Grid 集計

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

Web Components Hierarchical Grid 集計概要の例

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

IgcHierarchicalGrid summaries can also be enabled on a per-column level in Ignite UI for Web Components, which means that you can activate it only for columns that you need. IgcHierarchicalGrid summaries gives you a predefined set of default summaries, depending on the type of data in the column, so that you can save some time:

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

string および boolean DataTypeの場合、以下の関数が利用できます:

Count

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

Count
Min
Max
Average
Sum

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

Count
Earliest
Latest

IgcHierarchicalGrid summaries are enabled per-column by setting IgcColumnState.hasSummary property to true. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the IgcHierarchicalGrid the default column data type is string, so if you want number or date specific summaries you should specify the Column.dataType property as number or date. Note that the summary values will be displayed localized, according to the grid Locale and column Column.pipeArgs.

<igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID">
    <igc-column field="Artist" header="Artist" has-summary="true"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"> </igc-column>
    <igc-column field="Debut" header="Debut" has-summary="true"> </igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" has-summary="true"> </igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" has-summary="true"> </igc-column>
    <igc-row-island child-data-key="Albums" auto-generate="false">
        <igc-column field="Album" header="Album" data-type="string"> </igc-column>
        <igc-column field="LaunchDate" header="Launch Date" data-type="date"> </igc-column>
        <igc-column field="BillboardReview" header="Billboard Review" data-type="number" has-summary="true"> </igc-column>
        <igc-column field="USBillboard200" header="US Billboard 200" data-type="number" has-summary="true"> </igc-column>
    </igc-row-island>
</igc-hierarchical-grid>

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

<igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID">
    <igc-column field="Artist" header="Artist" has-summary="true"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"> </igc-column>
    <igc-column field="Debut" header="Debut" has-summary="true"> </igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" has-summary="true"> </igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" has-summary="true"> </igc-column>
</igc-hierarchical-grid>
<button id="enableBtn">Enable Summary</button>
<button id="disableBtn">Disable Summary </button>

constructor() {
    var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGrid;
    var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement;
    var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement;
    hierarchicalGrid.data = this.data;
    enableBtn.addEventListener("click", this.enableSummary);
    disableBtn.addEventListener("click", this.disableSummary);
}

public enableSummary() {
    this.hierarchicalGrid.enableSummaries([
        {fieldName: 'GrammyNominations'},
        {fieldName: 'GrammyAwards'}
    ]);
}
public disableSummary() {
    this.hierarchicalGrid.disableSummaries(['GrammyNominations']);
}

カスタム Hierarchical Grid 集計

これらの機能が要件を満たさない場合は、カスタム集計を提供できます。

In order to achieve this you have to override one of the base classes IgcSummaryOperand, IgcNumberSummaryOperand or IgcDateSummaryOperand according to the column data type and your needs. This way you can redefine the existing function or you can add new functions. IgcSummaryOperand class provides the default implementation only for the Count method. IgcNumberSummaryOperand extends IgcSummaryOperand and provides implementation for the Min, Max, Sum and Average. IgcDateSummaryOperand extends IgcSummaryOperand and additionally gives you Earliest and 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;
    }
}

これを実現するには、列のデータ型とニーズに応じて、基本クラス IgcSummaryOperand、IgcNumberSummaryOperand、または IgcDateSummaryOperand のいずれかをオーバーライドする必要があります。このように既存の関数を再定義、または新しい関数を追加できます。IgcSummaryOperand クラスは、Count メソッドに対してのみデフォルトの実装を提供します。IgcNumberSummaryOperand は IgcSummaryOperand を拡張し、Min、Max、Sum、および Average の実装を提供します。IgcDateSummaryOperand は IgcSummaryOperand を拡張し、さらに特定の列の Earliest と Latest を提供します。

例で見られるように、基本クラスは Operate メソッドを公開しているため、すべてのデフォルトの集計を取得して結果を変更するか、まったく新しい集計結果を計算するかを選択できます。

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

このメソッドは IgcSummaryResult のリストを返します。

そして、集計を計算するためのオプションのパラメーターを受け取ります。以下のすべてのデータにアクセスするカスタム集計セクションを参照してください。

And now let’s add our custom summary to the column GrammyAwards. We will achieve that by setting the Summaries` property to the class we create below.

<igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID">
    <igc-column field="Artist" header="Artist" has-summary="true"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"> </igc-column>
    <igc-column field="Debut" header="Debut" has-summary="true"> </igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" has-summary="true"> </igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" has-summary="true" id="grammyAwards"> </igc-column>
</igc-hierarchical-grid>

constructor() {
    var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGrid;
    var grammyAwards = this.grammyAwards = document.getElementById('grammyAwards') as IgcColumnComponent;
    hierarchicalGrid.data = this.data;
    grammyAwards.summaries = this.mySummary;
}

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

カスタム列集計内のすべての Hierarchical 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;
    }
}

集計テンプレート

SummaryTemplate targets the column summary providing as a context the column summary results.

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

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

無効な集計

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

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

次の例は、disabled-summaries プロパティを使用してさまざまな列の集計を管理し、Web Components Hierarchical Grid で特定のデフォルトおよびカスタムの集計タイプを除外する方法を示しています。

<!-- Disable default summaries -->
<igc-column
    field="UnitPrice"
    header="Unit Price"
    data-type="number"
    has-summary="true"
    disabled-summaries="['count', 'sum', 'average']"
>
</igc-column>

<!-- Disable custom summaries -->
<igc-column
    field="UnitsInStock"
    header="Units In Stock"
    data-type="number"
    has-summary="true"
    summaries="discontinuedSummary"
    disabled-summaries="['discontinued', 'totalDiscontinued']"
>
</igc-column>

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

UnitsInStock の場合、discontinued や totalDiscontinued などのカスタム集計は disabled-summaries プロパティを使用して除外されます。

実行時に、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;
}

    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>

<igx-column [summaryFormatter]="dateSummaryFormat"></igx-column>

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

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

上矢印 - 1 つ上のセルへ移動。
下矢印 - 1 つ下のセルへ移動。
左矢印 - 1 つ左のセルへ移動。
右矢印 - 1 つ右のセルへ移動。
CTRL + 左矢印 または HOME - 左端のセルへ移動。
CTRL + 右矢印 または END - 右端のセルへ移動。

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<igc-hierarchical-grid class="hierarchicalGrid"></igc-hierarchical-grid>

Then set the related CSS properties for that class:

.hierarchicalGrid {
    --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;
}

Demo

API リファレンス

IgcHierarchicalGrid
Column
IgcSummaryOperand
IgcNumberSummaryOperand
IgcDateSummaryOperand

スタイル設定

最も簡単な方法は、grid-summary-theme を拡張する新しいテーマを作成し、$background-color、$focus-background-color、$label-color、$result-color、$pinned-border-width、$pinned-border-style、および $pinned-border-color パラメーターを受け取る方法です。

最後にそれぞれのテーマを持つコンポーネント mixins を含めます。

Web Components Hierarchical Grid 集計