Premium

React Grid 集計

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

React Grid 集計概要の例

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

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

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

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

Count

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

Count
Min
Max
Average
Sum

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

Count
Earliest
Latest

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

<IgrGrid autoGenerate={false} height="800px" width="800px">
    <IgrColumn field="ProductID" header="Product ID" width="200px"  sortable={true}>
    </IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" width="200px" sortable={true} hasSummary={true}>
    </IgrColumn>
    <IgrColumn field="ReorderLevel" width="200px" editable={true} dataType="number" hasSummary={true}>
    </IgrColumn>
</IgrGrid>

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

const enableSummary = () => {
    gridRef.current.enableSummaries([
        {fieldName: 'ReorderLevel'},
        {fieldName: 'ProductID'}
    ]);
}
const disableSummary = () => {
    gridRef.current.disableSummaries(['ProductID']);
}

<IgrGrid ref={gridRef} autoGenerate={false} height="800px" width="800px">
    <IgrColumn field="ProductID" header="Product ID" width="200px" sortable={true}>
    </IgrColumn>
    <IgrColumn field="ProductName" header="Product Name" width="200px" sortable={true} hasSummary={true}>
    </IgrColumn>
    <IgrColumn field="ReorderLevel" width="200px" editable={true} dataType="number" hasSummary={true}>
    </IgrColumn>
</IgrGrid>
<button onClick={enableSummary}>Enable Summary</button>
<button onClick={disableSummary}>Disable Summary </button>

集計テンプレート

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

const summaryTemplate = (ctx: IgrSummaryTemplateContext) => {
  return (
    <>
      <span>My custom summary template</span>
      <span>{ctx.implicit[0].label} - {ctx.implicit[0].summaryResult}</span>
    </>
  );
}

<IgrColumn hasSummary={true} summaryTemplate={summaryTemplate}></IgrColumn>

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

無効な集計

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

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

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

<!-- Disable default summaries -->
<IgrColumn
    field="UnitPrice"
    header="Unit Price"
    dataType="number"
    hasSummary={true}
    disabledSummaries={['count', 'sum', 'average']}
/>

<!-- Disable custom summaries -->
<IgrColumn
    field="UnitsInStock"
    header="Units In Stock"
    dataType="number"
    hasSummary={true}
    summaries={discontinuedSummary}
    disabledSummaries={['discontinued', 'totalDiscontinued']}
/>

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

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

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

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

const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryOperand): string => {
    const result = summary.summaryResult;
    if (summary.key !== "count" && result !== null && result !== undefined) {
      const format = new Intl.DateTimeFormat("en", { year: "numeric" });
      return format.format(new Date(result));
    }
    return result;
  }

<IgrColumn hasSummary={true} summaryFormatter={summaryFormatter}></IgrColumn>

グループ化の集計

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

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

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

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

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

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

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

デモ

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

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

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

スタイル設定

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

<IgrGrid className="grid">
</IgrGrid>

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 リファレンス

IgrGrid
IgrColumn
IgrSummaryOperand
IgrNumberSummaryOperand
IgrDateSummaryOperand

スタイル設定

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

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

React Grid 集計