Angular Pivot Grid 원격 작업

피벗 데이터가 원격 서비스에서 이미 그룹화 및 집계되었으며 클라이언트에서 추가 처리가 필요하지 않은 시나리오에서는 클라이언트에서 데이터 처리를 건너뛰고 다음을 허용하는 사용자 지정 빈 전략을 사용하도록 피벗 그리드를 구성할 수 있습니다. 데이터를 있는 그대로 직접 표시합니다.

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이 방법은 andrecords 필드를 만들level 때 사용됩니다.

이 모든 것은 속성pivotKeys에PivotConfiguration 저장되어 있으며, 속성은 기본 피벗 키를 변경할 수 있습니다. 이 기본 조건들은 다음과 같습니다:

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

와NoopPivotDimensionsStrategy를 설정columnStrategy 하면rowStrategy 데이터 파이프에서 이루어지는 데이터 그룹화와 집계를 건너뛰지만, 피벗 그리드가 피벗 뷰를 정상적으로 렌더링하려면 행, 열, 값, 필터에 대한 선언이 여전히 필요합니다:

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 Pivot Grid 원격 작업

API References

Additional Resources

테마