Web Components Pivot Grid 원격 운영

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

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

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

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

    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- 계층 구조 구축을 위해 하위 항목을 저장하는 필드입니다. 이는 그룹화된 값의 맵과 해당 값을 기반으로 하는 모든 피봇 그리드 레코드를 나타냅니다. 계층 구조를 생성하는 동안 작업이 필요한 매우 구체적인 시나리오에서 활용될 수 있습니다. 일반적인 사용을 위해 이를 변경할 필요가 없습니다.
    • records- 원본 데이터 레코드에 대한 참조를 저장하는 필드입니다. 위의 예인 AllProducts_records에서 볼 수 있습니다. 이 속성과 동일한 이름으로 데이터에 필드를 설정하지 마세요. 데이터 레코드에 records 속성이 있는 경우 피봇키를 사용하여 이에 대한 다양하고 고유한 값을 지정할 수 있습니다.
    • aggregations- 집계 값을 저장하는 필드입니다. 계층 구조를 만드는 동안 적용되며 일반적인 시나리오에서는 변경해서는 안 됩니다.
    • level- 계층 구조를 기반으로 차원 수준을 저장하는 필드입니다. 이 속성과 동일한 이름으로 데이터에 필드를 설정하지 마세요. 데이터 레코드에 level 속성이 있는 경우 피벗키를 사용하여 이에 대한 다양하고 고유한 값을 지정할 수 있습니다.
    • columnDimensionSeparator- 고유한 열 필드 값을 생성할 때 사용되는 구분 기호입니다. 위의 예인 All-Bulgaria의 대시(-)입니다.
    • rowDimensionSeparator- 고유한 행 필드 값을 생성할 때 사용되는 구분 기호입니다. 위의 예인 AllProducts_records의 밑줄(_)입니다. 레코드 및 레벨 필드를 생성할 때 사용됩니다.

    이 모든 것은 피벗키의 일부인 재산 pivotConfiguration 기본 피벗 키를 변경하는 데 사용할 수 있습니다. 기본값은 다음과 같습니다.

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

    ​ColumnStrategy 및 RowStrategy에 대해 NoopPivotDimensionsStrategy 설정하면 데이터 파이프에 의해 수행되는 데이터 그룹화 및 집계가 건너뛰지만 피벗 그리드는 예상대로 피벗 뷰를 렌더링하기 위해 여전히 행, 열, 값 및 필터에 대한 선언이 필요합니다.

    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 References

    • PivotGridComponent
    • PivotDataSelectorComponent

    Additional Resources

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