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

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

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

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

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

## Angular ピボット グリッドの例

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

[Angular ピボット セレクターを備えたピボット グリッドの例](https://www.infragistics.com/angular-demos/pivot-grid/pivot-grid-datasource)

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

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

```cmd
ng add igniteui-angular
```

> **Info:**
> このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`

Ignite UI for Angular については、「[はじめに](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started.md)」 トピックをご覧ください。

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

```typescript
// app.module.ts

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

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

あるいは、`16.0.0` 以降、`IgxPivotGridComponent` をスタンドアロンの依存関係としてインポートすることも、[`IGX_PIVOT_GRID_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.module.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

```typescript
// home.component.ts

import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
// 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 ピボット グリッド コンポーネントは、[`PivotGrid.pivotConfiguration`](https://www.infragistics.com/api/angular/igniteui-angular/latest/classes/IgxPivotGridComponent#pivotConfiguration) プロパティを介して構成できます。

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

これは、`rows` (行)、`columns` (列)、`values` (値) の 3 つの主要なディメンションによって定義されます。`rows`と `columns` は、[Angular グリッド](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid)の行と列に表示されるグループ化された構造を定義します。`values` は、グループの関連する値を計算および表示するために使用される集計フィールドと集計を定義します。

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

### ディメンション構成

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

> **情報:**
> `memberName` は一意である必要があります。同じフィールドに異なるディメンションが必要な場合は、それぞれにカスタムの一意の `memberName` を定義し、`memberFunction` を介して関連する値を抽出できます。

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

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

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

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

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

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

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

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

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

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

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

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

### 値の構成

値の構成には、提供された `data` のフィールドに一致する `member` が必要です。または、より複雑なカスタム シナリオでは、`aggregatorName` またはカスタムの `aggregator` 関数のいずれかを定義できます。

> **情報:**
> `member` は一意である必要があります。同じフィールドに対して異なる値の集計が必要な場合は、それぞれにカスタムの一意の `member` を定義し、`aggregator` 関数を使用して関連する値を抽出できます。

データ フィールドのデータ型に応じて使用できる 4 つの事前定義された集計があります:

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

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

```typescript
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` プロパティも提供します。この値のカスタム名を列ヘッダーに表示するために使用できます。

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

### プロパティを有効にする

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

### 完全な構成例

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

```typescript
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 つの集計が定義されます。メンバーは、提供されたデータ ソースで使用可能なフィールドと一致します。

```typescript
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 ピボット グリッドの基本例](https://www.infragistics.com/angular-demos/pivot-grid/pivot-grid-basic)

また、アプリ開発プロセス全体を合理化したい場合は、次回の Angular アプリ開発から [WYSIWYG App Builder(TM)](https://jp.infragistics.com/products/appbuilder) を試すことができます。

### 設定の自動生成

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

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

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

## スタイル設定

ピボット グリッドは、[`Ignite UI for Angular テーマ ライブラリ`](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/component-themes.md)を使用してスタイルを設定できます。グリッドの [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) は、ピボット グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。

### グローバル テーマのインポート

ピボット グリッドのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインが含まれている `index` ファイルをインポートする必要があります。

```scss
@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
```

### カスタム テーマの定義

次に、カスタム テーマを作成する必要があります。`igx-pivot-grid` のスタイルを設定する最も簡単で推奨される方法は、[`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) を使用して、3 つの主要な色 (`background`、`foreground`、`accent-color`) のみを提供することです。

> **Info:**
> ピボット グリッド専用の `sass` 関数はありません。

これらはコアのテーマ プロパティです。これらを設定すると、グリッドのすべての部分と内部コンポーネントがそれらの値から色を導出し、グリッド全体で一貫した外観が実現されます。ボタン、アイコン、入力、ドロップダウン、チェックボックス、スクロールバー、チップ、その他のヘルパー コンポーネントなどのネストされたコンポーネントも、統一された外観のためにメインの [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) からスタイリング トークンを導出します。

```scss
$background: #292826;
$foreground: #eeece1;
$accent: #ffcd0f;

$custom-grid: grid-theme(
  $background: $background,
  $foreground: $foreground,
  $accent-color: $accent,
);
```

> **Info:**
> 先ほどのようにカラー値をハードコーディングする代わりに、[`palette`](https://jp.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-palette) および [`color`](https://jp.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes#function-color) 関数を使用することで、色に関してより高い柔軟性を実現できます。これらの使用方法の詳細については、[`パレット`](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes.md) トピックを参照してください。

### カスタム テーマの適用

最後の手順は、アプリケーションにコンポーネント テーマを**含める**ことです。

```scss
igx-pivot-grid {
  @include tokens($custom-grid);
}
```

### デモ

[Angular ピボット グリッド スタイル設定のデモ](https://www.infragistics.com/angular-demos/pivot-grid/pivot-grid-styling)

より詳細なカスタマイズが必要な場合は、[`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme) に追加のパラメーターがあります。

## 既知の問題と制限

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

## API リファレンス

-   [`PivotGrid`](https://www.infragistics.com/api/angular/igniteui-angular/latest/classes/IgxPivotGridComponent)
-   [`PivotDataSelector`](https://www.infragistics.com/api/angular/igniteui-angular/latest/classes/IgxPivotDataSelectorComponent)
-   [`grid-theme`](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/themes#function-grid-theme)

## その他のリソース

-   [Angular ピボット グリッド機能](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid/pivot-grid-features.md)
-   [Angular ピボット グリッド カスタム集計](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/pivotgrid/pivot-grid-custom.md)
-   [Ignite UI for Angular スキル](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/ai/skills.md) - グリッド、データ操作、テーマ設定向けのエージェントのスキル

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

-   [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-   [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)