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
- 계층 구조 구축을 위해 하위 항목을 저장하는 필드입니다. 이는 그룹화된 값의 맵과 해당 값을 기반으로 하는 모든 피봇 그리드 레코드를 나타냅니다. 계층 구조를 생성하는 동안 작업이 필요한 매우 구체적인 시나리오에서 활용될 수 있습니다. 일반적인 사용을 위해 이를 변경할 필요가 없습니다.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();