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();

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular 피벗 그리드 원격 작업

API References

Additional Resources

테마