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의 밑줄(_)입니다. recordslevel 필드를 생성할 때 사용됩니다.

    이들 모두는 PivotConfiguration의 일부인 pivotKeys 속성에 저장되며 기본 피벗 키를 변경하는 데 사용할 수 있습니다. 기본값은 다음과 같습니다.

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

    columnStrategyrowStrategy에 대해 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

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