Premium

Blazor Grid 集計

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

Blazor Grid 集計概要の例

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

IgbGrid summaries can also be enabled on a per-column level in Ignite UI for Blazor, which means that you can activate it only for columns that you need. IgbGrid 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:

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

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

Count

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

Count
Min
Max
Average
Sum

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

Count
Earliest
Latest

IgbGrid summaries are enabled per-column by setting IgbColumnState.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 IgbGrid the default column data type is string, so if you want number or date specific summaries you should specify the IgbColumn.DataType property as number or date. Note that the summary values will be displayed localized, according to the grid Locale and column IgbColumn.PipeArgs.

<IgbGrid>
        <IgbColumn Field="EmployeeID" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
        <IgbColumn Field="FirstName" HasSummary="true"></IgbColumn>
        <IgbColumn Field="LastName" HasSummary="true"></IgbColumn>
        <IgbColumn Field="Title" HasSummary="true"></IgbColumn>
</IgbGrid>

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

カスタム Grid 集計

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

//In JavaScript
class WebGridDiscontinuedSummary {
    operate(data, allData, fieldName) {
        const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]);
        const result = [];
        result.push({
            key: 'products',
            label: 'Products',
            summaryResult: data.length
        });
        result.push({
            key: 'total',
            label: 'Total Items',
            summaryResult: data.length ? data.reduce((a, b) => +a + +b) : 0
        });
        result.push({
            key: 'discontinued',
            label: 'Discontinued Products',
            summaryResult: allData.map(r => r['Discontinued']).filter((rec) => rec).length
        });
        result.push({
            key: 'totalDiscontinued',
            label: 'Total Discontinued Items',
            summaryResult: discontinuedData.length ? discontinuedData.reduce((a, b) => +a + +b) : 0
        });
        return result;
    }
}

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

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

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

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

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

<IgbGrid
        AutoGenerate="true"
        Name="grid"
        @ref="grid"
        Data="NwindData"
        PrimaryKey="ProductID"
        ColumnInitScript="WebGridCustomSummary">
</IgbGrid>

// In Javascript
igRegisterScript("WebGridCustomSummary", (event) => {
    if (event.detail.field === "UnitsInStock") {
        event.detail.summaries = WebGridDiscontinuedSummary;
    }
}, false);

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

カスタム列集計内のすべての Grid データにアクセスできます。IgbSummaryOperand Operate メソッドには、2 つの追加のオプションパラメーターが導入されています。以下のコードスニペットで示されるように operate メソッドには以下の 3 つのパラメーターがあります。

columnData - 現在の列の値のみを含む配列を提供します。
allGridData - グリッドデータソース全体を提供します。
fieldName - 現在の列フィールド

class WebGridDiscontinuedSummary {
    operate(data, allData, fieldName) {
        const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]);
        result.push({
            key: 'totalDiscontinued',
            label: 'Total Discontinued Items',
            summaryResult: discontinuedData.length ? discontinuedData.reduce((a, b) => +a + +b) : 0
        });
        return result;
    }
}

集計テンプレート

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

<IgbColumn HasSummary="true" SummaryTemplateScript="SummaryTemplate">
</IgbColumn>

igRegisterScript("SummaryTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div>
    <span> ${ctx.implicit[0].label} - ${ctx.implicit[0].summaryResult} </span>
</div>`
}, false);

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

無効な集計

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

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

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

<!-- Disable default summaries -->
<IgbColumn
    Field="UnitPrice"
    Header="Unit Price"
    DataType="GridColumnDataType.Number"
    HasSummary="true"
    DisabledSummaries="['count', 'sum', 'average']" />

<!-- Disable custom summaries -->
<IgbColumn
    Field="UnitsInStock"
    Header="Units In Stock"
    DataType="GridColumnDataType.Number"
    HasSummary="true"
    Summaries="discontinuedSummary"
    DisabledSummaries="['discontinued', 'totalDiscontinued']" />

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

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

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

グループ化の集計

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

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

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

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

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

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

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

デモ

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

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

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

スタイル設定

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

<IgbGrid class="grid"></IgbGrid>

Then set the related CSS properties for that class:

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

Demo

API リファレンス

IgbGrid
IgbColumn

スタイル設定

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

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

Blazor Grid 集計