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

Ignite UI for React ピボット グリッドは、クロス集計形式で大量の多次元データを合計して表すために使用されます。データの概要は、簡単かつ迅速にソート、グループ化、またはフィルタリングできます。このようなデータには、合計、平均、およびその他の統計が含まれる場合があります。エンドユーザーは、必要に応じて、ドラッグアンドドロップ操作でピボット テーブルのレイアウトを変更できます。

React ピボット グリッドとは

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

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

React ピボット グリッドの例

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

React ピボット グリッドを使用した作業の開始

React IgrPivotGrid は、pivotConfiguration プロパティを介して構成できます。

<IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration}>
</IgrPivotGrid>

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

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

ディメンション構成

各基本ディメンション構成には、提供されたデータのフィールドに一致する MemberName が必要です。

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

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

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

const childDimension = new IgrPivotDimension();
childDimension.memberName = "ProductCategory";
const dimension: IgrPivotDimension = new IgrPivotDimension();
dimension.memberName = "AllProducts";
dimension.enabled = true;
dimension.childLevel = childDimension;

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

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

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

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

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

const pivotConfiguration = new IgrPivotConfiguration();

const dateDimension = new IgrPivotDateDimension();
dateDimension.memberName = "Date";
dateDimension.enabled = true;
const baseDimension = new IgrPivotDimension();
baseDimension.memberName = "Date";
baseDimension.enabled = true;

dateDimension.baseDimension = baseDimension;
pivotConfiguration1.columns = [dateDimension];

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

const options: IgrPivotDateDimensionOptions = {} as IgrPivotDateDimensionOptions;
options.years = true;
options.months = false;
options.quarters = true;
options.fullDate = false;
dateDimension.options = options;

値の構成

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

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

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

const pivotConfiguration = new IgrPivotConfiguration();
const value = new IgrPivotValue();
value.member = "AmountofSale";
value.displayName = "Amount of Sale";
value.enabled = true;
const aggregator = new IgrPivotAggregator();
aggregator.key = "SUM";
aggregator.label = "Sum of Sale";
aggregator.aggregatorName = PivotAggregationType.SUM;
value.aggregate = aggregator;
pivotConfiguration.values = [value];
value.aggregateList = [aggregator];

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

プロパティを有効にする

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

完全な構成のコード

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

const pivotConfiguration1: IgrPivotConfiguration = new IgrPivotConfiguration();

const igrPivotDateDimension1 = new IgrPivotDimension();
igrPivotDateDimension1.memberName = "Date";
igrPivotDateDimension1.enabled = true;

pivotConfiguration1.columns = [igrPivotDateDimension1];
const igrPivotDimension2: IgrPivotDimension = new IgrPivotDimension();
igrPivotDimension2.memberName = "ProductName";
igrPivotDimension2.enabled = true;

const igrPivotDimension3: IgrPivotDimension = new IgrPivotDimension();
igrPivotDimension3.memberName = "SellerCity";
igrPivotDimension3.enabled = true;

pivotConfiguration1.rows = [igrPivotDimension2,igrPivotDimension3];
const igrPivotDimension4: IgrPivotDimension = new IgrPivotDimension();
igrPivotDimension4.memberName = "SellerName";
igrPivotDimension4.enabled = true;

pivotConfiguration1.filters = [igrPivotDimension4];
const igrPivotValue1: IgrPivotValue = new IgrPivotValue();
igrPivotValue1.member = "ProductUnitPrice";
igrPivotValue1.displayName = "Amount of Sale";
igrPivotValue1.dataType = GridColumnDataType.Currency;
igrPivotValue1.enabled = true;
const igrPivotAggregator1: IgrPivotAggregator = new IgrPivotAggregator();
igrPivotAggregator1.key = "SUM";
igrPivotAggregator1.label = "Sum of Sale";
igrPivotAggregator1.aggregatorName = PivotAggregationType.SUM;

igrPivotValue1.aggregate = igrPivotAggregator1;
const igrPivotAggregator2: IgrPivotAggregator = new IgrPivotAggregator();
igrPivotAggregator2.key = "SUM";
igrPivotAggregator2.label = "Sum of Sale";
igrPivotAggregator2.aggregatorName = PivotAggregationType.SUM;
pivotConfiguration1.values = [igrPivotValue1];

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

public data = [
[
    {
        ProductName: `Clothing`,
        ProductUnitPrice: 12.8,
        SellerName: `Stanley Brooker`,
        SellerCity: `Seattle`,
        Date: `2007-01-01T00:00:00`,
        Value: 94.4,
        NumberOfUnits: 282
    },
];

完全な構成の例

上記のコードを使用すると、Date の一意の列、Product Name 、Seller City を一意の行にグループ化し、関連するセルに売上高の関連集計を表示する次の例が得られます。

設定の自動生成

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

• 数値フィールド:

  • PivotNumericAggregate.sum アグリゲーターを使用して IgrPivotValue として作成されます。
  • 値のコレクションに追加され、デフォルトで有効になります。

• 数値以外のフィールド:

  • IgrPivotDimension として作成されます。
  • デフォルトで無効です。
  • 列コレクションに追加されます。

• 日付フィールド (最初の date フィールドのみが有効になり、他の date フィールドには非数値フィールドのルールが適用されます):

  • IgrPivotDateDimension として作成されます。
  • デフォルトで有効です。
  • 行コレクションに追加されます。

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

ピボット値計算キー

ピボット グリッドは、ピボット計算を行うために使用するオブジェクトキーのフィールドをカスタマイズできます。 既に集計された値を確認できる以下のサンプル データで、それらがどのように使用されているかを詳しく見ることができます:

[
    {
        ProductCategory: 'All', AllProducts: 'All Products', All: 1000, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524,
        AllProducts_records: [
            { ProductCategory: 'Clothing', 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456 },
            { ProductCategory: 'Bikes', 'All-Uruguay': 68 },
            { ProductCategory: 'Accessories', 'All-USA': 293 },
            { ProductCategory: 'Components', 'All-USA': 240 }
        ]
    }
];

これらはすべて、Pivo​​tConfiguration の一部である pivotKeys プロパティに格納され、デフォルトのピボット キーを変更するために使用できます。

• children - 階層構築のために子を格納するフィールド。これは、グループ化された値と、その値に基づくすべての pivotGridRecords からのマップを表します。これは、階層の作成中に何かを行う必要がある非常に特殊なシナリオで利用できます。一般的な使用法のためにこれを変更する必要はありません。
• records - 元のデータ レコードへの参照を格納するフィールド。上記の例で見ることができます - AllProducts_records。このプロパティと同じ名前でデータにフィールドを設定することは避けてください。データ レコードに records プロパティがある場合は、pivotKeys を使用して異なる一意の値を指定できます。
• aggregations - 集計値を格納するフィールド。階層の作成中に適用され 、一般的なシナリオでは変更する必要はありません。
• level - 階層に基づいてディメンション レベルを格納するフィールド。このプロパティと同じ名前でデータにフィールドを設定することは避けてください。データ レコードに level プロパティがある場合は、pivotKeys を使用して異なる一意の値を指定できます。
• columnDimensionSeparator - 一意の列フィールド値を生成するときに使用されるセパレーター。上からの例のダッシュ (-) - All-Bulgaria です。
• rowDimensionSeparator - 一意の行フィールド値を生成するときに使用されるセパレーター。records と level フィールド を作成するときに使用されます。

デフォルト値:

{
    aggregations: 'aggregations',
    records: 'records',
    children: 'children',
    level: 'level',
    rowDimensionSeparator: '_',
    columnDimensionSeparator: '-'
};

[!Note] デフォルトのキーを含むデータ フィールド値がある場合は、現在使用していない他の記号に一致する区切り文字を必ず変更してください。そうしないと、集計値の計算と表示で予期しない動作が発生する可能性があります。

既知の問題と制限

制限	説明
列を宣言的に設定することはサポートされていません。	ピボット グリッドは columns (列) の構成に基づいて列を生成するため、ベース グリッドのように宣言的に設定することはサポートされていません。このような列は無視されます。
ディメンション / 値に重複した MemberName または Member プロパティ値を設定します。	これらのプロパティは、各ディメンション / 値に対して一意である必要があります。複製すると、最終結果からデータが失われる可能性があります。
行選択は、Single (単一) モードでのみサポートされます。	現在、複数選択はサポートされていません。

API リファレンス

• pivotConfiguration
• IgrPivotGrid
• IgrPivotDataSelector
• IgrPivotDateDimension
• IgrColumn

その他のリソース

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

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)