React Pivot Grid 개요

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

    React Pivot Grid란 무엇인가요?

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

    ​IgrPivotGrid 사용자가 다차원 피벗 테이블 구조로 데이터를 구성하고 표시할 수 있는 기능을 제공합니다. 행과 열은 고유한 데이터 그룹을 나타내고 데이터 셀 값은 집계를 나타냅니다. 이를 통해 간단한 플랫 데이터 세트를 기반으로 복잡한 데이터 분석이 가능합니다. 이 IgrPivotGrid 기능은 다양한 차원과 값을 쉽게 구성할 수 있을 뿐만 아니라 필터링 및 정렬과 같은 추가 데이터 작업을 제공하는 기능이 풍부한 피벗 테이블입니다.

    React Pivot Grid 예제

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    Ignite UI for React | CTA 배너

    React Pivot Grid 시작하기

    The React IgrPivotGrid can be configured via the pivotConfiguration property.

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

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

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

    치수 구성

    각 기본 치수 구성에는 MemberName 제공된 필드와 일치하는 데이터.

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

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

    차원은 속성을 통해 ChildLevel 확장 가능한 계층을 설명할 수도 있습니다. 예를 들면 다음과 같습니다.

    const childDimension = new IgrPivotDimension();
childDimension.memberName = "ProductCategory";
const dimension: IgrPivotDimension = new IgrPivotDimension();
dimension.memberName = "AllProducts";
dimension.enabled = true;
dimension.childLevel = childDimension;
tsx

    이 경우 차원은 그리드의 관련 섹션(행 또는 열)에서 확장기를 렌더링하고 자식이 계층의 일부로 확장되거나 축소될 수 있도록 합니다. 기본적으로 행 차원은 초기에 확장됩니다. 이 동작은 Pivot Grid의 속성으로 defaultExpandState 제어할 수 있습니다.

    사전 정의된 차원

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

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

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

    const pivotConfiguration = new IgrPivotConfiguration();

const dateDimension = new IgrPivotDateDimension();
dateDimension.memberName = "Date";
dateDimension.enabled = true;
const baseDimension = new IgrPivotDimension();
baseDimension.memberName = "Date";
baseDimension.enabled = true;

dateDimension.baseDimension = baseDimension;
pivotConfiguration1.columns = [dateDimension];
ts

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

    const options: IgrPivotDateDimensionOptions = {} as IgrPivotDateDimensionOptions;
options.years = true;
options.months = false;
options.quarters = true;
options.fullDate = false;
dateDimension.options = options;
tsx

    값 구성

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

    • PivotNumericAggregate- 숫자 필드용. SUM, AVG, MIN, MAX, COUNT 집계 함수를 포함합니다.
    • PivotDateAggregate- 날짜 필드용입니다. LATEST, EARLIEST, COUNT 집계 함수를 포함합니다.
    • PivotTimeAggregate- 시간 필드용. LATEST, EARLIEST, COUNT 집계 함수를 포함합니다.
    • PivotAggregate- 다른 모든 데이터 유형용. 이것은 기본 집계입니다. 다음 집계 함수를 포함합니다. COUNT.

    현재 집계 함수는 가치 칩의 드롭다운을 사용하여 런타임에 변경할 수 있습니다. 기본적으로 필드의 데이터 유형에 따라 사용 가능한 집계 목록이 표시됩니다. 집계의 사용자 지정 목록은 AggregateList 속성을 통해 설정할 수도 있습니다. 예를 들면 다음과 같습니다.

    const pivotConfiguration = new IgrPivotConfiguration();
const value = new IgrPivotValue();
value.member = "AmountofSale";
value.displayName = "Amount of Sale";
value.enabled = true;
const aggregator = new IgrPivotAggregator();
aggregator.key = "SUM";
aggregator.label = "Sum of Sale";
aggregator.aggregatorName = PivotAggregationType.SUM;
value.aggregate = aggregator;
pivotConfiguration.values = [value];
value.aggregateList = [aggregator];
typescript

    pivot 값은 속성도 displayName 제공합니다. 열 머리글에 이 값에 대한 사용자 지정 이름을 표시하는 데 사용할 수 있습니다.

    속성 활성화

    pivotConfiguration은 구성 요소의 현재 상태를 설명하는 인터페이스입니다 IgrPivotGrid. 이를 통해 개발자는 데이터의 필드를 행, 열, 필터 또는 값으로 선언 할 수 있습니다. 구성을 사용하면 이러한 각 요소를 개별적으로 활성화하거나 비활성화할 수 있습니다. 활성화된 요소만 피벗 그리드의 현재 상태에 포함됩니다. 구성 IgrPivotDataSelector 요소는 동일한 구성을 사용하고 모든 요소(사용 및 사용 안 함)의 목록을 표시합니다. 각각에 대해 적절한 상태의 확인란이 있습니다. 최종 사용자는 이러한 확인란을 사용하여 다른 요소를 전환하여 피벗 상태를 쉽게 조정할 수 있습니다. 이 Enable 속성은 지정된 IgrPivotDimension or IgrPivotValue가 활성 상태인지 여부를 제어하고 Pivot Grid에 의해 렌더링되는 피벗 뷰에 참여합니다.

    전체 구성 코드

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

    const pivotConfiguration1: IgrPivotConfiguration = new IgrPivotConfiguration();

const igrPivotDateDimension1 = new IgrPivotDimension();
igrPivotDateDimension1.memberName = "Date";
igrPivotDateDimension1.enabled = true;

pivotConfiguration1.columns = [igrPivotDateDimension1];
const igrPivotDimension2: IgrPivotDimension = new IgrPivotDimension();
igrPivotDimension2.memberName = "ProductName";
igrPivotDimension2.enabled = true;

const igrPivotDimension3: IgrPivotDimension = new IgrPivotDimension();
igrPivotDimension3.memberName = "SellerCity";
igrPivotDimension3.enabled = true;

pivotConfiguration1.rows = [igrPivotDimension2,igrPivotDimension3];
const igrPivotDimension4: IgrPivotDimension = new IgrPivotDimension();
igrPivotDimension4.memberName = "SellerName";
igrPivotDimension4.enabled = true;

pivotConfiguration1.filters = [igrPivotDimension4];
const igrPivotValue1: IgrPivotValue = new IgrPivotValue();
igrPivotValue1.member = "ProductUnitPrice";
igrPivotValue1.displayName = "Amount of Sale";
igrPivotValue1.dataType = GridColumnDataType.Currency;
igrPivotValue1.enabled = true;
const igrPivotAggregator1: IgrPivotAggregator = new IgrPivotAggregator();
igrPivotAggregator1.key = "SUM";
igrPivotAggregator1.label = "Sum of Sale";
igrPivotAggregator1.aggregatorName = PivotAggregationType.SUM;

igrPivotValue1.aggregate = igrPivotAggregator1;
const igrPivotAggregator2: IgrPivotAggregator = new IgrPivotAggregator();
igrPivotAggregator2.key = "SUM";
igrPivotAggregator2.label = "Sum of Sale";
igrPivotAggregator2.aggregatorName = PivotAggregationType.SUM;
pivotConfiguration1.values = [igrPivotValue1];
tsx

    이 구성은 각 차원 그룹의 값을 합산하는 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
    },
];
typescript

    전체 구성 예

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    구성 자동 생성

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

    • 숫자 필드:

      • Created as IgrPivotValue using PivotNumericAggregate.sum aggregator.
      • 값 컬렉션에 추가되고 기본적으로 사용하도록 설정됩니다.

    • 숫자가 아닌 필드:

      • Created as IgrPivotDimension.
      • 기본적으로 비활성화되어 있습니다.
      • 열 컬렉션에 추가되었습니다.

    • 날짜 필드(첫 번째 date 필드만 활성화되고 다른 date 필드는 숫자가 아닌 필드 규칙을 적용함):

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

    피벗 값 계산 키

    피벗(Pivot) 그리드는 피벗 계산을 수행하는 데 사용하는 객체 키 필드에 대한 사용자 지정을 제공합니다.
    사용 방법에 대한 자세한 보기는 이미 집계된 값을 볼 수 있는 예제 데이터에서 아래에서 볼 수 있습니다.

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

    이 모든 것은 피벗키의 일부인 속성 pivotConfiguration 기본 피벗 키를 변경하는 데 사용할 수 있습니다.

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

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

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

    기본 키가 포함된 데이터 필드 값이 있는 경우 현재 사용하지 않는 다른 기호와 일치하는 구분 기호를 변경해야 합니다. 그렇지 않으면 집계된 값을 계산하고 표시할 때 예기치 않은 동작이 발생할 수 있습니다.

    알려진 문제 및 제한 사항

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

    API 참조

    추가 리소스

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