Angular ピボット グリッドのリモート操作

ピボット データがすでにリモート サービスからグループ化および集計されており、クライアントでさらに処理する必要がないシナリオでは、クライアントでのデータ処理をスキップし、データをそのまま直接表示できるようにするカスタムの空のストラテジを使用するように構成できます。

public pivotConfigHierarchy: IPivotConfiguration = {
    columnStrategy: NoopPivotDimensionsStrategy.instance(),
    rowStrategy: NoopPivotDimensionsStrategy.instance(),
}

ユーザーは、ピボット グリッドに既に集計されたデータをフィードすることで、特定のシナリオを実現できます。データがどのように表示されるかについていくつかの要件があり、ピボット ビューの階層に関するいくつかの詳細があります。たとえば、rows ディメンションで階層を宣言するには、次のようにします:

そして、集計された例は次のようになります:

rows: [
    {
        memberName: 'AllProducts',
        memberFunction: () => 'All Products',
        enabled: true,
        childLevel: {
            memberName: 'ProductCategory',
            enabled: true
        }
    }
]

ピボット グリッドは、ピボット計算を行うために使用するオブジェクト キー フィールドを提供します。

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

public aggregatedData = [
    {
        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 プロパティに格納され、デフォルトのピボット キーを変更するために使用できます。これらのデフォルトは次のとおりです:

columnStrategy と rowStrategy に NoopPivotDimensionsStrategy を設定すると、データ パイプによって行われるデータのグループ化と集計がスキップされますが、ピボット ビューを期待どおりに描画するには、ピボット グリッドで行、列、値、フィルターの宣言が必要です:

データが構成と一致することが重要です。最良の結果を得るには、集計データに追加のフィールドを含めたり、提供されたデータのフィールドを行または列として宣言せずに残したりしないでください。IgxPivotGrid コンポーネントは、PivotConfiguration に基づいてデータを構築し、それに応じて構成と集計データが一致することが期待されます。

export const DEFAULT_PIVOT_KEYS = {
    aggregations: 'aggregations', records: 'records', children: 'children', level: 'level',
    rowDimensionSeparator: '_', columnDimensionSeparator: '-'
};

同様に、ソートやフィルタリングなどの他のリモート データ操作の場合、関連する空のストラテジ (filterStrategy、sortStrategy) を設定することで、データ処理をスキップできます。

public pivotConfig: IPivotConfiguration = {
    rows: [
        {
            memberName: 'AllProducts',
            memberFunction: () => 'All Products',
            enabled: true,
            childLevel: {
                memberName: 'ProductCategory',
                enabled: true
            }
        }
    ],
    columns: [
        {
            memberName: 'All',
            enabled: true,
            childLevel: {
                memberName: 'Country',
                enabled: true
            }
        }
    ],
    values: [
        {
            member: 'UnitsSold',
            aggregate: {
                aggregator: IgxPivotNumericAggregate.sum,
                key: 'sum',
                label: 'Sum'
            },
            enabled: true
        },
    ]
}

It is important for the data to match the configuration. For the best results no additional fields should be included into the aggregated data and no fields from the provided data should be left undeclared as rows or columns. The IgxPivotGrid component builds its data based on the PivotConfiguration and it is expected for the configuration and aggregated data to match accordingly.

Similarly for other remote data operations like sorting and filtering, data processing can be skipped by setting the related empty strategies - filterStrategy, sortStrategy:

<igx-pivot-grid [filterStrategy]="noopFilterStrategy" [sortStrategy]="noopSortStrategy" ...>
</igx-pivot-grid>

public noopFilterStrategy = NoopFilteringStrategy.instance();
public noopSortStrategy = NoopSortingStrategy.instance();

API リファレンス

• IgxPivotGridComponent
• IgxPivotDataSelectorComponent

その他のリソース

• Angular ピボット グリッド機能
• Angular ピボット グリッドの概要

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

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