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

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

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

次の例は、データがすでに集計されているシナリオの処理方法と、その構造がどのように見えるかを示しています:

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

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

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

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 }
        ]
    }
];

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

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

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

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

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

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
        },
    ]
}

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

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

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

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

API リファレンス

その他のリソース

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

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

API リファレンス

その他のリソース

テーマ設定

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