Web Components Grid 集計

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

    Web Components Grid 集計概要の例

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

    特定の列や列のリストを有効または無効にする他の方法として 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>
html
    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);
}
ts
    public enableSummary() {
    this.grid.enableSummaries([
        {fieldName: 'ReorderLevel'},
        {fieldName: 'ProductID'}
    ]);
}
public disableSummary() {
    this.grid.disableSummaries(['ProductID']);
}
typescript

    カスタム 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;
    }
}
typescript

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

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

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

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

    集計行の高さを適切に計算するには、データが空の場合でも、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>
html
    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;
}
ts
    export class GridComponent implements OnInit {
    mySummary = MySummary;
}
typescript

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

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    集計テンプレート

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

    <igc-column id="column" has-summary="true">
</igc-column>
html
    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>
    `;
}
ts

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    無効な集計

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

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

    次の例は、disabled-summaries プロパティを使用してさまざまな列の集計を管理し、Web Components 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>
html

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

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

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    集計のフォーマット

    デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド 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;
    }
typescript
    <igc-column id="column"></igx-column>
html
    constructor() {
    var column = this.column = document.getElementById('column') as IgcColumnComponent;
    column.summaryFormatter = this.dateSummaryFormat;
}
ts

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    グループ化の集計

    列のグループがある場合、IgcGridComponent は summaryCalculationMode と summaryPosition を使用して集計配置の変更やモードの計算をします。これら 2 つのプロパティに加えて、IgcGridComponent は、参照するグループ行が縮小されたときに集計行が表示されたままであるかどうかを決定できる showSummaryOnCollapse プロパティを公開します。

    以下は使用できる summaryCalculationMode プロパティの値です:

    • RootLevelOnly - ルート レベルのみ集計が計算されます。
    • ChildLevelsOnly - 子レベルのみ集計が計算されます。
    • RootAndChildLevels - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。

    以下は使用できる summaryPosition プロパティの値です。

    • Top - 集計行はグループ列の子の前に表示されます。
    • Bottom - 集計行はグループ列の子の後に表示されます。これがデフォルト値です。

    showSummaryOnCollapse プロパティはブール値です。デフォルト値は false に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが true に設定されている場合、グループ行が縮小されたときに、集計行は表示されたままになります。

    summaryPosition プロパティは子レベルの集計のみに適用します。ルート レベルの集計は、IgcGridComponent の下に常に固定されます。

    デモ

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

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

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

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

    スタイル設定

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

    <igc-grid class="grid"></igc-grid>
html

    次に、そのクラスに関連する 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;
}
css

    デモ

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース

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