Angular 피벗 그리드 구성요소 개요

Ignite UI for Angular 데이터를 표 형식으로 구성하고 요약할 수 있는 그룹화된 값 및 집계 테이블을 나타내는 최고의 Angular 구성 요소 중 하나입니다. 원하는 보고서를 얻기 위해 스프레드시트나 데이터베이스 테이블에서 들어오는 데이터의 선택된 열과 행을 재구성하고 요약하는 데 사용되는 데이터 요약 도구입니다.

What is Angular Pivot Grid?

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

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

Angular Pivot Grid Example

다음은 Angular Pivot Data Selector 구성요소와 결합된 Angular Pivot Grid의 예입니다. 이렇게 하면 보다 유연한 런타임 구성 옵션을 가질 수 있습니다.

Getting started with Ignite UI for Angular Pivot Grid

Ignite UI for Angular Pivot Grid 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

다음 단계는 IgxPivotGridModule 당신의 app.module.ts 파일.

// app.module.ts

import { IgxPivotGridModule } from 'igniteui-angular';
// import { IgxPivotGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxPivotGridModule,
        ...
    ]
})
export class AppModule {}

또는 16.0.0부터 IgxPivotGridComponent를 독립 실행형 종속성으로 가져오거나 IGX_PIVOT_GRID_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.

// home.component.ts

import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular';
// import { IGX_PIVOT_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
    </igx-pivot-grid>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_PIVOT_GRID_DIRECTIVES]
    /* or imports: [IgxPivotGridComponent] */
})
export class HomeComponent {
    public data: Transaction [];
}

이제 Ignite UI for Angular 가져왔으므로 igx-pivot-grid 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Pivot Grid

Angular Pivot Grid 구성 요소는 pivotConfiguration 속성을 통해 구성할 수 있습니다.

<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>

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

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

Dimensions configuration

각 기본 차원 구성에는 제공된 data의 필드와 일치하는 memberName 또는 복잡한 개체 또는 기타 사용자 정의 시나리오의 경우 레코드에서 값을 추출하는 memberFunction 필요합니다.

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

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

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

   {
            memberFunction: () => 'All',
            memberName: 'AllProducts',
            enabled: true,
            childLevel: {
                memberFunction: (data) => data.ProductCategory,
                memberName: 'ProductCategory',
                enabled: true
            }
    }

이 경우 차원은 그리드의 관련 섹션(행 또는 열)에서 확장기를 렌더링하고 하위 항목을 계층 구조의 일부로 확장하거나 축소할 수 있도록 허용합니다. 기본적으로 행 차원은 처음에 확장됩니다. 이 동작은 피벗 그리드의 defaultExpandState @Input 사용하여 제어할 수 있습니다.

Predefined dimensions

보다 쉬운 구성을 위해 피벗 그리드의 일부로 미리 정의된 몇 가지 추가 치수가 표시됩니다.

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

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

public pivotConfigHierarchy: IPivotConfiguration = {
    rows: [
        new IgxPivotDateDimension({ memberName: 'Date', enabled: true });
    ]
}

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

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

Values configuration

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

• IgxPivotNumericAggregate- 숫자 필드용입니다. SUM, AVG, MIN, MAX, COUNT 집계 함수가 포함되어 있습니다.
• IgxPivotDateAggregate- 날짜 필드용입니다. LATEST, EARLIEST, COUNT 집계 함수가 포함되어 있습니다.
• IgxPivotTimeAggregate- 시간 필드용입니다. LATEST, EARLIEST, COUNT 집계 함수가 포함되어 있습니다.
• IgxPivotAggregate- 기타 모든 데이터 유형의 경우. 이것이 기본 집계입니다. 다음 집계 함수가 포함되어 있습니다: COUNT.

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

public pivotConfigHierarchy: IPivotConfiguration = {
    values: [
        {
            member: 'AmountOfSale',
            displayName: 'Amount of Sale',
            aggregate: {
                key: 'SUM',
                aggregator: IgxTotalSaleAggregate.totalSale,
                label: 'Sum of Sale'
            },
            aggregateList: [{
                key: 'SUM',
                aggregator: IgxTotalSaleAggregate.totalSale,
                label: 'Sum of Sale'
            }, {
                key: 'MIN',
                aggregator: IgxTotalSaleAggregate.totalMin,
                label: 'Minimum of Sale'
            }, {
                key: 'MAX',
                aggregator: IgxTotalSaleAggregate.totalMax,
                label: 'Maximum of Sale'
            }]
        }
    ]
}

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

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

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

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

Note

​aggregatorName과 aggregator 함수를 모두 정의하는 경우 aggregatorName 우선 적용됩니다. 아무것도 설정되지 않으면 오류가 발생합니다.

Enable property

IPivotConfiguration은 IgxPivotGrid 구성 요소의 현재 상태를 설명하는 인터페이스입니다. 이를 통해 개발자는 데이터 필드를 rows, columns, filters 또는 values으로 선언할 수 있습니다. 구성을 통해 이러한 각 요소를 개별적으로 활성화하거나 비활성화할 수 있습니다. 활성화된 요소만 피벗 그리드의 현재 상태에 포함됩니다. IgxPivotDataSelector 구성 요소는 동일한 구성을 활용하고 활성화 및 비활성화된 모든 요소 목록을 표시합니다. 각각에 대해 해당 상태의 확인란이 있습니다. 최종 사용자는 이러한 확인란을 사용하여 다양한 요소를 전환하여 피벗 상태를 쉽게 조정할 수 있습니다. enable 속성은 지정된 IPivotDimension 또는 IPivotValue 활성 상태이고 피벗 그리드에서 렌더링된 피벗 보기에 참여하는지 여부를 제어합니다.

Full configuration example

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

      public pivotConfigHierarchy: IPivotConfiguration = {
        columns: [
            {

                memberName: 'Product',
                memberFunction: (data) => data.Product.Name,
                enabled: true
            }

        ],
        rows: [
            {
                memberName: 'Seller',
                memberFunction: (data) => data.Seller.Name,
                enabled: true,
            }
        ],
        values: [
            {
                member: 'NumberOfUnits',
                aggregate: {
                    aggregator: IgxPivotNumericAggregate.sum,
                    key: 'sum',
                    label: 'Sum'
                },
                enabled: true
            },
            {
                member: 'AmountOfSale',
                aggregate: {
                    aggregatorName: 'SUM',
                    key: 'sum',
                    label: 'Sum'
                },
                enabled: true
            }
        ]
    };

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

public data = [
[
    {
        Product: {
            Name: 'Clothing',
            UnitPrice: '12.814860936633712'
        },
        Seller: {
            Name: 'Stanley Brooker',
            City: 'Seattle'
        },
        Date: '2007-01-01T00:00:00',
        Value: '94.2652032683907',
        NumberOfUnits: '282'
    },
    //...
];

그 결과 Product Categories 고유 열, Sellers Names를 고유 행으로 그룹화하고 관련 셀의 단위 수에 대한 관련 집계를 표시하는 다음 보기가 생성됩니다.

전체 앱 개발 프로세스를 간소화하고 싶다면 다음 Angular 앱에 WYSIWYG App Builder ™를 사용해 볼 수 있습니다.

Auto generate configuration

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

• 숫자 필드:

  • 애그리게이터를 사용하여 IgxPivotNumericAggregate.sum 만들었습니다 IPivotValue.
  • 값 컬렉션에 추가되고 기본적으로 사용하도록 설정됩니다.

• 숫자가 아닌 필드:

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

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

  • 다음으로 생성됨 IgxPivotDateDimension
  • 기본적으로 사용
  • 행 컬렉션에 추가되었습니다.

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

Known Issues and Limitations

한정	설명
열을 선언적으로 설정하는 것은 지원되지 않습니다.	피벗 그리드는 다음을 기반으로 열을 생성합니다.columns 구성이므로 기본 그리드에서와 같이 선언적으로 설정하는 것은 지원되지 않습니다. 이러한 열은 무시됩니다.
중복 설정memberName 또는member 차원/값에 대한 속성 값입니다.	memberName/member 각 측정기준/값마다 고유해야 합니다. 중복으로 인해 최종 결과의 데이터가 손실될 수 있습니다.
행 선택은 다음에서만 지원됩니다.single 방법.	다중 선택은 현재 지원되지 않습니다.
차원 멤버 병합은 대소문자를 구분합니다.	피벗 그리드는 그룹을 생성하고 동일한(대소문자 구분) 값을 병합합니다. 그러나 차원은 제공합니다memberFunction 그리고 이것은 거기에서 변경될 수 있습니다.memberFunction 비교하여 표시값으로 사용합니다.

API References

• IgxPivotGridComponent
• IgxPivotDataSelectorComponent

Additional Resources

• Angular 피벗 그리드 기능
• Angular 피벗 그리드 사용자 정의 집계

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub