Angular Pivot Grid (ピボットグリッド) コンポーネントの概要

Ignite UI for Angular Pivot Grid は、当社の最高の Angular コンポーネントの 1 つであり、グループ化された値と集計のテーブルを表す UI コンポーネントであり、データを表形式で整理して要約することができます。これは、スプレッドシートまたはデータベーステーブルから取得したデータの選択された列と行を再編成および要約して、目的のレポートを取得するために使用されるデータ要約ツールです。

Angular ピボットグリッドの概要

Angular ピボットグリッドコンポーネントは、ピボットテーブルにデータを表示し、提供されたデータセットに対して複雑な分析を実行するのに役立ちます。この洗練されたピボットグリッドコントロールは、後でクロス集計形式で表示される大量のデータを整理、集計、およびフィルタリングするために使用されます。Angular ピボットグリッドの主な機能は、行のディメンション、列のディメンション、集計、およびフィルターです。

IgxPivotGridComponent は、ユーザーが多次元ピボットテーブル構造でデータを構成および表示する機能を提供します。行と列は個別のデータグループを表し、データセルの値は集計を表します。これにより、単純なフラットデータセットに基づく複雑なデータ分析が可能になります。IgxPivotGridComponent は、機能が豊富なピボットテーブルであり、さまざまなディメンションと値の簡単な構成と、フィルタリングや並べ替えなどの追加のデータ操作を提供します。

Angular ピボットグリッドの例

以下は、Angular ピボットデータセレクターコンポーネントと組み合わせた Angular ピボットグリッドの例です。このようにして、より柔軟なランタイム構成オプションを使用できます。

Ignite UI for Angular Pivot Grid を使用した作業の開始

Ignite UI for Angular Pivot Grid コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxPivotGridModule をインポートします。

// app.module.ts

import { IgxPivotGridModule } from 'igniteui-angular';
// import { IgxPivotGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxPivotGridModule,
        ...
    ]
})
export class AppModule {}

あるいは、16.0.0 以降、IgxPivotGridComponent をスタンドアロンの依存関係としてインポートすることも、IGX_PIVOT_GRID_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポートコンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular';
// import { IGX_PIVOT_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
    </igx-pivot-grid>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_PIVOT_GRID_DIRECTIVES]
    /* or imports: [IgxPivotGridComponent] */
})
export class HomeComponent {
    public data: Transaction [];
}

Ignite UI for Angular Pivot Grid モジュールまたはディレクティブをインポートしたので、igx-pivot-grid コンポーネントの使用を開始できます。

Angular Pivot Grid の使用

Angular ピボットグリッドコンポーネントは、pivotConfiguration プロパティを介して構成できます。

<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>

これは、rows (行)、columns (列)、values (値) の 3 つの主要なディメンションによって定義されます。rowsと columns は、Angular グリッドの行と列に表示されるグループ化された構造を定義します。values は、グループの関連する値を計算および表示するために使用される集計フィールドと集計を定義します。

フィルターは、filters 構成プロパティを介して定義することもできます。ディメンションまたは値として追加したくないが、UI を介して関連するメンバー値をフィルタリングしたいフィールドに使用できます。

ディメンション構成

各基本ディメンション構成には、提供された data のフィールドに一致する memberName、または複雑なオブジェクトやその他のカスタムシナリオの場合にレコードから値を抽出する memberFunction が必要です。

複数の兄弟ディメンションを定義できます。これにより、関連する行または列のディメンション領域に、より複雑なネストされたグループが作成されます。

ディメンションは、ドラッグアンドドロップを使用して、対応するチップを介して、ある領域から別の領域にソートしたり移動したりできます。

ディメンションは、childLevel プロパティを介して拡張可能な階層を記述することもできます。例えば:

   {
            memberFunction: () => 'All',
            memberName: 'AllProducts',
            enabled: true,
            childLevel: {
                memberFunction: (data) => data.ProductCategory,
                memberName: 'ProductCategory',
                enabled: true
            }
    }

この場合、ディメンションはグリッドの関連セクション (行または列) にエキスパンダーを描画し、階層の一部として子を展開または縮小ことができます。デフォルトでは、行のディメンションは最初に展開されます。この動作は、ピボットグリッドの defaultExpandState @Input を使用して制御できます。

事前定義されたディメンション

ピボットグリッドの一部として、構成を容易にするために、いくつかの追加の事前定義されたディメンションが公開されています:

IgxPivotDateDimension 日付フィールドに使用できます。デフォルトで次の階層を記述します:
- すべての期間
- 年
- 四半期
- 月
- 完全な日付

次のように、行または列に設定できます:

public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        new IgxPivotDateDimension({ memberName: 'Date', enabled: true });
    ]
}

また、階層の特定の部分を有効または無効にするために、2 番目のオプションパラメーターを介してさらにカスタマイズすることもできます。例えば:

 new IgxPivotDateDimension({ memberName: 'Date', enabled: true }, {
    total: true,
    years: true,
    months: true,
    fullDate: true,
    quarters: false
});

値の構成

値の構成には、提供された data のフィールドに一致する member が必要です。または、より複雑なカスタムシナリオでは、aggregatorName またはカスタムの aggregator 関数のいずれかを定義できます。データフィールドのデータ型に応じて使用できる 4 つの事前定義された集計があります:

IgxPivotNumericAggregate - 数値フィールド用。次の集計関数が含まれています: SUM、AVG、MIN、MAX、COUNT。
IgxPivotDateAggregate - 日付フィールド用。次の集計関数が含まれています: LATEST、EARLIEST、COUNT。
IgxPivotTimeAggregate - 時間フィールド用。次の集計関数が含まれています: LATEST、EARLIEST、COUNT。
IgxPivotAggregate - その他のデータ型の場合。これが基本集計です。次の集計関数が含まれています: COUNT。

現在の集計関数は、値のーチップのドロップダウンを使用して実行時に変更できます。デフォルトでは、フィールドのデータ型に基づいて使用可能な集計のリストが表示されます。集計のカスタムリストは、aggregateList プロパティを介して設定することもできます。例えば:

public pivotConfigHierarchy: IPivotConfiguration = {
    values: [
        {
            member: 'AmountOfSale',
            displayName: 'Amount of Sale',
            aggregate: {
                key: 'SUM',
                aggregator: IgxTotalSaleAggregate.totalSale,
                label: 'Sum of Sale'
            },
            aggregateList: [{
                key: 'SUM',
                aggregator: IgxTotalSaleAggregate.totalSale,
                label: 'Sum of Sale'
            }, {
                key: 'MIN',
                aggregator: IgxTotalSaleAggregate.totalMin,
                label: 'Minimum of Sale'
            }, {
                key: 'MAX',
                aggregator: IgxTotalSaleAggregate.totalMax,
                label: 'Maximum of Sale'
            }]
        }
    ]
}

public static totalSale: PivotAggregation = (members, data: any) =>
    data.reduce((accumulator, value) => accumulator + value.UnitPrice * value.UnitsSold, 0);

public static totalMin: PivotAggregation = (members, data: any) => {
    return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.min(a, b));
};

public static totalMax: PivotAggregation = (members, data: any) => {
    return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
};

ピボット値は、displayName プロパティも提供します。この値のカスタム名を列ヘッダーに表示するために使用できます。

Note

aggregatorName と aggregator 関数の両方を定義すると、aggregatorName が優先されます。何も設定されていない場合、エラーがスローされます。

プロパティを有効にする

IPivotConfiguration は、IgxPivotGrid コンポーネントの現在の状態を記述するインターフェースです。これを使用すると、開発者はデータのフィールドを rows、columns、filters、または values として宣言できます。この構成では、これらの各要素を個別に有効または無効にすることができます。ピボットグリッドの現在の状態には、有効な要素のみが含まれます。IgxPivotDataSelector コンポーネントは同じ構成を利用し、すべての有効と無効の要素のリストを表示します。それぞれについて、適切な状態のチェックボックスがあります。エンドユーザーは、これらのチェックボックスを使用してさまざまな要素を切り替えることにより、ピボット状態を簡単に調整できます。 enable プロパティは、特定の IPivotDimension または IPivotValue がアクティブであり、ピボットグリッドによって描画されるピボットビューに参加するかどうかを制御します。

完全な構成例

基本的なピボット構成を見てみましょう:

      public pivotConfigHierarchy: IPivotConfiguration = {
        columns: [
            {

                memberName: 'Product',
                memberFunction: (data) => data.Product.Name,
                enabled: true
            }

        ],
        rows: [
            {
                memberName: 'Seller',
                memberFunction: (data) => data.Seller.Name,
                enabled: true,
            }
        ],
        values: [
            {
                member: 'NumberOfUnits',
                aggregate: {
                    aggregator: IgxPivotNumericAggregate.sum,
                    key: 'sum',
                    label: 'Sum'
                },
                enabled: true
            },
            {
                member: 'AmountOfSale',
                aggregate: {
                    aggregatorName: 'SUM',
                    key: 'sum',
                    label: 'Sum'
                },
                enabled: true
            }
        ]
    };

この構成では、各ディメンショングループの値を合計する 1 行、1 列、および 1 つの集計が定義されます。メンバーは、提供されたデータソースで使用可能なフィールドと一致します。

public data = [
[
    {
        Product: {
            Name: 'Clothing',
            UnitPrice: '12.814860936633712'
        },
        Seller: {
            Name: 'Stanley Brooker',
            City: 'Seattle'
        },
        Date: '2007-01-01T00:00:00',
        Value: '94.2652032683907',
        NumberOfUnits: '282'
    },
    //...
];

次のビューは、Product (製品) カテゴリの一意の列をグループ化し、Sellers Names (売り手の名前) を一意の行にグループ化し、関連するセルのユニット数の関連する集計を表示します。

また、アプリ開発プロセス全体を合理化したい場合は、次回の Angular アプリ開発から WYSIWYG App Builder™ を試すことができます。

設定の自動生成

autoGenerateConfig プロパティは、データソースフィールドに基づいてディメンションと値を自動的に生成します。

数値フィールド:
- IgxPivotNumericAggregate.sum アグリゲーターを使用して IPivotValue として作成されます。
- 値のコレクションに追加され、デフォルトで有効になります。
数値以外のフィールド:
- IPivotDimension として作成されます。
- デフォルトで無効です。
- 列コレクションに追加されます。
日付フィールド (最初の date フィールドのみが有効になり、他の date フィールドには非数値フィールドのルールが適用されます):
- IgxPivotDateDimension として作成されます。
- デフォルトで有効です。
- 行コレクションに追加されます。

この機能により、開発者はディメンションと値を手動で指定することなく、ピボットビューをすばやく作成できます。ピボットグリッドの横にあるピボットセレクターを使用すると、ユーザーは必要に応じてディメンションと値を有効にしたり並べ替えたりできます。

既知の問題と制限

制限	説明
列を宣言的に設定することはサポートされていません。	ピボットグリッドは `columns` (列) の構成に基づいて列を生成するため、ベースグリッドのように宣言的に設定することはサポートされていません。このような列は無視されます。
ディメンション / 値に重複する `memberName` または `member` プロパティ値を設定します。	`memberName`/`member` は、ディメンション / 値ごとに一意である必要があります。複製すると、最終結果からデータが失われる可能性があります。
行選択は、`single` モードでのみサポートされます。	現在、複数選択はサポートされていません。
ディメンションメンバーのマージでは大文字と小文字が区別されます。	ピボットグリッドはグループを作成し、同じ (大文字と小文字を区別する) 値をマージします。ただし、ディメンションは `memberFunction` を提供し、これはそこで変更できます。`memberFunction` の結果が比較され、表示値として使用されます。

API リファレンス

その他のリソース

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

Angular Pivot Grid (ピボット グリッド) コンポーネントの概要

Angular ピボット グリッドの概要

Angular ピボット グリッドの例