React Pivot Grid 개요

React 피벗 그리드는 방대한 다차원 데이터를 교차 테이블 형식으로 요약하고 표현하는 데 사용됩니다. 여름 데이터는 쉽고 빠르게 정렬, 그룹화 또는 필터링할 수 있습니다. 이러한 데이터에는 합계, 평균 및 기타 통계가 포함될 수 있습니다. 최종 사용자는 필요에 따라 드래그 앤 드롭 작업을 통해 피벗 테이블 레이아웃을 수정할 수 있습니다.

React 피벗 그리드는 피벗 테이블에 데이터를 표시하고 사용자가 제공된 데이터 세트에 대해 복잡한 분석을 수행하는 데 도움이 됩니다. 이 정교한 피벗 그리드 컨트롤은 나중에 교차 테이블 형식으로 표시되는 대량의 데이터를 구성, 요약 및 필터링하는 데 사용됩니다. React 피벗 그리드의 주요 기능은 행 차원, 열 차원, 집계 및 필터입니다.

사용자는IgrPivotGrid 다차원 피벗 테이블 구조로 데이터를 구성하고 표시할 수 있는 기능을 제공합니다. 행과 열은 서로 다른 데이터 그룹을 나타내고, 데이터 셀 값은 집계를 나타냅니다. 이로 인해 단순한 평면 데이터 세트를 기반으로 복잡한 데이터 분석이 가능합니다.IgrPivotGrid이 피벗 테이블은 다양한 차원과 값을 쉽게 설정할 수 있고, 필터링 및 정렬 같은 추가 데이터 작업을 제공합니다.

React Pivot Grid Example

다음은 React Pivot Data Selector Component와 함께 사용하는 React Pivot Grid 예제입니다. 이렇게 하면 더 유연한 런타임 구성 옵션을 가질 수 있습니다.

Getting Started With React Pivot Grid

The React IgrPivotGrid can be configured via the pivotConfiguration property.

<IgrPivotGrid data={pivotData} pivotConfiguration={pivotConfiguration}>
</IgrPivotGrid>

행, 열 및 값의 세 가지 주요 차원으로 정의됩니다. 행과 열은 그리드의 행과 열에 표시되는 그룹화된 구조를 정의합니다. 값은 집계 필드와 그룹의 관련 값을 계산하고 표시하는 데 사용되는 집계를 정의합니다.

필터는 필터 구성 속성을 통해 정의할 수도 있습니다. 차원 또는 값으로 추가하고 싶지 않지만 UI를 통해 관련 멤버 값을 필터링하려는 필드에 사용할 수 있습니다.

차원 구성

각 기본 차원 구성은 다음을 필요로 합니다.memberName이 필드는 제공된 필드와 일치한다. 데이터.

관련 행 또는 열 차원 영역에 더 복잡한 중첩 그룹을 생성하는 여러 동위 차원을 정의할 수 있습니다.

드래그 앤 드롭을 사용하여 해당 칩을 통해 차원을 재정렬하거나 한 영역에서 다른 영역으로 이동할 수 있습니다.

차원은 다음과 같은 속성을 통해childLevel 확장 가능한 계층 구조를 설명할 수도 있습니다:

const dimension: IgrPivotDimension = {
    memberName: "AllProducts",
    enabled: true,
    childLevel: {
        memberName: "ProductCategory",
        enabled: true
    }
};

이 경우 차원은 그리드의 관련 구간(행 또는 열)에 확장기를 생성하며, 자식들을 계층 구조의 일부로 확장하거나 접을 수 있게 합니다. 기본적으로 행 차원은 처음에 확장됩니다. 이 동작은 피벗 그리드의 특성으로defaultExpandState 제어할 수 있습니다.

Predefined Dimensions

Pivot Grid의 일부로, 더 쉽게 구성할 수 있도록 몇 가지 추가 사전 정의된 차원이 노출됩니다.

IgrPivotDateDimension날짜 필드에 사용할 수 있습니다. 기본적으로 다음과 같은 계층 구조를 설명합니다:
- 모든 기간
- 연령
- 병사
- 개월
- 전체 날짜

행이나 열에 대해 설정할 수 있습니다. 예를 들면 다음과 같습니다.


const pivotConfiguration: IgrPivotConfiguration = {
    columns: [
        new IgrPivotDateDimension({
            enabled: true,
            memberName: "Date",
        })
    ]
};

또한 계층 구조의 특정 부분을 활성화 또는 비활성화하기 위해 두 번째 옵션 매개 변수를 통해 추가로 사용자 지정할 수 있습니다. 예를 들면 다음과 같습니다.

 new IgrPivotDateDimension({
    enabled: true,
    memberName: "Date",
}, {
    total: true,
    years: true,
    months: true,
    fullDate: true,
    quarters: false
});

값 구성

값 구성에는 제공된 데이터의 필드와 일치하는 구성원이 필요하거나 더 복잡한 사용자 정의 시나리오를 위해 사용자 정의 집계 함수를 정의할 수 있습니다. 기본적으로 데이터 필드의 데이터 유형에 따라 사용할 수 있는 4개의 사전 정의된 집계가 있습니다.

PivotNumericAggregate- 수치 필드에 대해 다음과 같은 집계 함수를 포함합니다:SUM,AVG,MIN,MAX,.COUNT
PivotDateAggregate- 날짜 필드에 대해 다음과 같은 집계 함수를 포함합니다:LATEST,EARLIEST,COUNT.
PivotTimeAggregate- 시간 장에 대해. 다음과 같은 집계 함수를 포함합니다:LATEST,EARLIEST,COUNT.
PivotAggregate- 다른 데이터 타입에 대해서는. 이것이 기본 집계입니다. 다음과 같은 집계 함수를 포함합니다:COUNT

현재 집계 함수는 가치 칩의 드롭다운을 통해 런타임에 변경할 수 있습니다. 기본적으로 필드의 데이터 타입에 따라 사용 가능한 집계 목록을 표시합니다. 예를 들어, 다음과 같은 속성을 통해aggregateList 맞춤 집계 목록을 설정할 수도 있습니다:

const totalSale = (members: any, data: any) => data.reduce((accumulator:any, value: any) => accumulator + value.UnitPrice * value.UnitsSold, 0);

const totalMin = (members: any, data: any) => {
    return data.map((x:any) => x.UnitPrice * x.UnitsSold).reduce((a:number, b:number) => Math.min(a, b));
};

const totalMax = (members: any, data: any) => {
    return data.map((x:any) => x.UnitPrice * x.UnitsSold).reduce((a:number, b:number) => Math.max(a,b));
};

const pivotConfiguration: IgrPivotConfiguration = {
      values: [
            {
                enabled: true,
                member: "AmountofSale",
                displayName: "Amount of Sale",
                aggregate: {
                    aggregatorName: "SUM",
                    key: "SUM",
                    label: "Sum of Sale",
                },
                aggregateList: [{
                    key: 'SUM',
                    aggregator: totalSale,
                    label: 'Sum of Sale'
                }, {
                    key: 'MIN',
                    aggregator: totalMin,
                    label: 'Minimum of Sale'
                }, {
                    key: 'MAX',
                    aggregator: totalMax,
                    label: 'Maximum of Sale'
                }]
            }
      ]
};

피벗 값은 또한 속성도 제공합니다displayName. 이 값의 커스텀 이름을 열의 헤더에 표시하는 데 사용할 수 있습니다.

Enable Property(속성 사용)

pivotConfiguration는 구성 요소의IgrPivotGrid 현재 상태를 설명하는 인터페이스입니다. 개발자는 이를 통해 데이터의 필드를 행, 열, 필터 또는 값으로 선언할 수 있습니다. 이 구성은 각 요소를 개별적으로 활성화하거나 비활성화할 수 있게 합니다. 현재 피벗 그리드의 상태에는 활성화된 요소만 포함됩니다. 컴포넌트는IgrPivotDataSelector 동일한 구성을 사용하며, 모든 요소 목록(활성화 및 비활성화 포함)을 표시합니다. 각 주마다 해당 주에 체크박스가 있습니다. 최종 사용자는 이러한 체크박스를 사용해 다양한 요소를 토글하여 피벗 상태를 쉽게 조정할 수 있습니다. 이 속성은Enable 주어진IgrPivotDimension 또는IgrPivotValue가 활성화되어 피벗 그리드가 렌더링하는 피벗 뷰에 참여하는지 제어합니다.

전체 구성 코드

기본 피벗 구성을 살펴보겠습니다.

const pivotConfiguration1: IgrPivotConfiguration = {
    columns: [
        new IgrPivotDateDimension({
            enabled: true,
            memberName: "Date",
        })
    ],
    rows: [
        {
            enabled: true,
            memberName: "SellerCity"
        },
        {
            enabled: true,
            memberName: "ProductName"
        }
    ],
    filters: [
        {
            enabled: true,
            memberName: "SellerName"
        }
    ],
    values: [
        {
            member: "ProductUnitPrice",
            displayName: "Amount of Sale",
            dataType: "currency",
            enabled: true,
            aggregate: {
                    aggregatorName: "SUM",
                    key: "SUM",
                    label: "Sum of Sale",
                }
        }
    ]
};

이 구성은 각 차원 그룹의 값을 합산하는 1개의 행, 1개의 열 및 1개의 집계를 정의합니다. 멤버는 제공된 데이터 소스에서 사용 가능한 필드와 일치합니다.

public data = [
[
    {
        ProductName: `Clothing`,
        ProductUnitPrice: 12.8,
        SellerName: `Stanley Brooker`,
        SellerCity: `Seattle`,
        Date: `2007-01-01T00:00:00`,
        Value: 94.4,
        NumberOfUnits: 282
    },
];

전체 구성 예

위의 코드를 사용하면 Date 고유 열, Product Name 및 Seller City를 고유 행으로 그룹화하고 관련 셀의 판매량에 대한 관련 집계를 표시하는 다음 예제가 생성됩니다.

구성 자동 생성

이 속성은autoGenerateConfig 데이터 소스 필드를 기반으로 자동으로 차원과 값을 생성합니다:

숫자 필드:
- 집계기를 사용해IgrPivotValuePivotNumericAggregate.sum 생성됨.
- 값 컬렉션에 추가되고 기본적으로 사용하도록 설정됩니다.
숫자가 아닌 필드:
- 창IgrPivotDimension 조됨.
- 기본적으로 비활성화되어 있습니다.
- 열 컬렉션에 추가되었습니다.
날짜 필드(첫 번째date 필드만 활성화되어 있으며, 나머지date 필드는 숫자가 아닌 필드 규칙을 적용):
- 창설IgrPivotDateDimension
- 기본적으로 사용
- 행 컬렉션에 추가되었습니다.

이 기능을 사용하면 개발자가 차원과 값을 수동으로 지정하지 않고도 피벗 보기를 빠르게 만들 수 있습니다. 피벗 그리드 옆에 있는 피벗 선택기를 사용하여 사용자는 필요에 따라 차원과 값을 활성화하고 재정렬할 수 있습니다.

Pivot Value Calculation Keys

피벗 그리드는 피벗 계산에 사용하는 객체 키 필드를 맞춤화할 수 있습니다. 이들이 어떻게 사용되는지에 대한 더 자세한 시각은 이미 집계된 값을 볼 수 있는 예시 데이터에서 확인할 수 있습니다:

[
    {
        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 }
        ]
    }
];

이 모든 것은 피벗키(pivotKeys) 속성에 저장되며,pivotConfiguration이 속성은 기본 피벗 키를 변경할 수 있습니다.

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

기본값은 다음과 같습니다.

{
    aggregations: 'aggregations',
    records: 'records',
    children: 'children',
    level: 'level',
    rowDimensionSeparator: '_',
    columnDimensionSeparator: '-'
};

[!Note] If you have data field values that contain the default keys, make sure to change the separators that match to any other symbols that you are not currently using. Otherwise could lead to unexpected behavior in calculating and showing the aggregated values.

알려진 문제 및 제한 사항

한정	설명
열을 선언적으로 설정하는 것은 지원되지 않습니다.	피벗 그리드는 다음을 기반으로 열을 생성합니다.`columns` 구성이므로 기본 그리드에서와 같이 선언적으로 설정하는 것은 지원되지 않습니다. 이러한 열은 무시됩니다.
차원/값에 대한 중복`memberName` 또는`member` 속성 값을 설정합니다.	이러한 속성은 각 차원/값에 대해 고유해야 합니다. 중복으로 인해 최종 결과의 데이터가 손실될 수 있습니다.
행 선택은 단일 모드에서만 지원됩니다.	다중 선택은 현재 지원되지 않습니다.

API 참조

추가 리소스

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