Web Components Pivot Grid 원격 운영

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

    public pivotConfigHierarchy: IgcPivotConfiguration = {
    columnStrategy: IgcNoopPivotDimensionsStrategy.instance(),
    rowStrategy: IgcNoopPivotDimensionsStrategy.instance(),
}
typescript

    다음 예에서는 데이터가 이미 집계된 시나리오를 처리하는 방법과 해당 구조가 어떻게 보이는지 보여줍니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    사용자는 이미 집계된 데이터를 피벗 그리드에 공급하여 특정 시나리오를 달성할 수 있습니다. 데이터 모양에 대한 몇 가지 요구 사항과 피벗 뷰의 계층 구조와 관련된 몇 가지 세부 사항이 있습니다. 예를 들어 행 차원에서 계층 구조를 선언하려면 다음을 수행합니다.

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

    집계된 예는 다음과 같습니다.

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

    피벗 그리드는 피벗 계산을 수행하는 데 사용되는 개체 키 필드를 제공합니다.

    • children- 계층 구조 구축을 위해 자식을 저장하는 필드입니다. 그룹화된 값의 맵과 해당 값을 기반으로 하는 모든 pivotGridRecords를 나타냅니다. 계층 구조를 만드는 동안 무언가를 수행해야 하는 매우 구체적인 시나리오에서 활용할 수 있습니다. 일반적인 사용을 위해 변경할 필요가 없습니다.
    • records- 원래 데이터 레코드에 대한 참조를 저장하는 필드입니다. 위의 -AllProducts_records의 예에서 볼 수 있습니다. 이 속성과 동일한 이름으로 데이터에 필드를 설정하지 마십시오. 데이터 레코드에 records 속성이 있는 경우 를 pivotKeys 사용하여 다른 고유한 값을 지정할 수 있습니다.
    • aggregations- 집계 값을 저장하는 필드입니다. 계층 구조를 만드는 동안 적용되며 일반적인 시나리오에 대해서는 변경해서는 안 됩니다.
    • level- 계층 구조를 기반으로 차원 수준을 저장하는 필드입니다. 이 속성과 동일한 이름으로 데이터에 필드를 설정하지 마십시오. 데이터 레코드에 level 속성이 있는 경우 를 pivotKeys 사용하여 다른 고유한 값을 지정할 수 있습니다.
    • columnDimensionSeparator- 고유한 열 필드 값을 생성할 때 사용되는 구분 기호입니다. 위의 -All-Bulgaria 예제의 대시(-)입니다.
    • rowDimensionSeparator- 고유한 행 필드 값을 생성할 때 사용되는 구분 기호입니다. 위의 -AllProducts_records 예제의 밑줄(_)입니다. and level 필드를 만들 records 때 사용됩니다.

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

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

    설정 NoopPivotDimensionsStrategy에 대해 columnStrategy 그리고 rowStrategy 데이터 파이프에서 수행한 데이터 그룹화 및 집계를 건너뛰지만 피벗 보기를 예상대로 렌더링하려면 피벗 그리드에 행, 열, 값 및 필터에 대한 선언이 여전히 필요합니다.

    public pivotConfig: IgcPivotConfiguration = {
    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: IgcPivotNumericAggregate.sum,
                key: 'sum',
                label: 'Sum'
            },
            enabled: true
        },
    ]
}
typescript

    데이터가 구성과 일치하는 것이 중요합니다. 최상의 결과를 얻으려면 집계된 데이터에 추가 필드를 포함해서는 안 되며, 제공된 데이터의 어떤 필드도 행이나 열로 선언되지 않은 상태로 남겨두어서는 안 됩니다. IgcPivotGridComponent 구성 요소는 pivotConfiguration 기반으로 데이터를 작성하며 이에 따라 구성 및 집계된 데이터가 일치할 것으로 예상됩니다.

    정렬 및 필터링과 같은 다른 원격 데이터 작업의 경우에도 관련 빈 전략(filterStrategy, sortStrategy을 설정하여 데이터 처리를 건너뛸 수 있습니다.

    <igc-pivot-grid filter-strategy="noopFilterStrategy" sort-strategy="noopSortStrategy">
</igc-pivot-grid>
html
    public noopFilterStrategy = NoopFilteringStrategy.instance();
public noopSortStrategy = NoopSortingStrategy.instance();
typescript

    API 참조

    추가 리소스

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