Angular 피벗 그리드 구성요소 개요
Ignite UI for Angular 데이터를 표 형식으로 구성하고 요약할 수 있는 그룹화된 값 및 집계 테이블을 나타내는 최고의 Angular 구성 요소 중 하나입니다. 원하는 보고서를 얻기 위해 스프레드시트나 데이터베이스 테이블에서 들어오는 데이터의 선택된 열과 행을 재구성하고 요약하는 데 사용되는 데이터 요약 도구입니다.
Angular 피벗 그리드란 무엇입니까?
Angular Pivot Grid 구성 요소는 피벗 테이블에 데이터를 표시하고 제공된 데이터 세트에 대한 복잡한 분석을 수행하는 데 도움이 됩니다. 이 정교한 피벗 그리드 컨트롤은 나중에 크로스 테이블 형식으로 표시되는 대량의 데이터를 구성, 요약 및 필터링하는 데 사용됩니다. Angular Pivot Grid의 주요 기능은 행 차원, 열 차원, 집계 및 필터입니다.
IgxPivotGridComponent
는 사용자가 다차원 피벗 테이블 구조에서 데이터를 구성하고 표시할 수 있는 기능을 제공합니다. 행과 열은 고유한 데이터 그룹을 나타내고, 데이터 셀 값은 집계를 나타냅니다. 이를 통해 단순한 평면 데이터 세트를 기반으로 복잡한 데이터 분석이 가능합니다. IgxPivotGridComponent
는 필터링 및 정렬과 같은 추가 데이터 작업은 물론 다양한 차원과 값을 쉽게 구성할 수 있는 기능이 풍부한 피벗 테이블입니다.
Angular 피벗 그리드 예
다음은 Angular Pivot Data Selector 구성요소와 결합된 Angular Pivot Grid의 예입니다. 이렇게 하면 보다 유연한 런타임 구성 옵션을 가질 수 있습니다.
Ignite UI for Angular 시작하기
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
구성 요소 사용을 시작할 수 있습니다.
Angular 피벗 그리드 사용
Angular Pivot Grid 구성 요소는 pivotConfiguration
속성을 통해 구성할 수 있습니다.
<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy"> </igx-pivot-grid>
rows
, columns
, values
세 가지 주요 측정기준으로 정의됩니다. rows
과 columns
Angular 그리드의 행과 열에 표시되는 그룹화된 구조를 정의합니다. values
집계 필드와 그룹의 관련 값을 계산하고 표시하는 데 사용되는 집계를 정의합니다.
filters
구성 속성을 통해 필터를 정의할 수도 있습니다. 차원이나 값으로 추가하고 싶지 않지만 UI를 통해 관련 멤버 값을 필터링하려는 필드에 사용할 수 있습니다.
치수 구성
각 기본 차원 구성에는 제공된 data
의 필드와 일치하는 memberName
또는 복잡한 개체 또는 기타 사용자 정의 시나리오의 경우 레코드에서 값을 추출하는 memberFunction
필요합니다.
관련 행 또는 열 차원 영역에 더 복잡한 중첩 그룹을 생성하는 여러 동위 차원을 정의할 수 있습니다.
드래그 앤 드롭을 사용하여 해당 칩을 통해 차원을 재정렬하거나 한 영역에서 다른 영역으로 이동할 수 있습니다.
차원은 childLevel
속성을 통해 확장 가능한 계층 구조를 설명할 수도 있습니다. 예를 들면 다음과 같습니다.
{ memberFunction: () => 'All', memberName: 'AllProducts', enabled: true, childLevel: { memberFunction: (data) => data.ProductCategory, memberName: 'ProductCategory', enabled: true } }
이 경우 차원은 그리드의 관련 섹션(행 또는 열)에서 확장기를 렌더링하고 하위 항목을 계층 구조의 일부로 확장하거나 축소할 수 있도록 허용합니다. 기본적으로 행 차원은 처음에 확장됩니다. 이 동작은 피벗 그리드의 defaultExpandState
@Input
사용하여 제어할 수 있습니다.
사전 정의된 측정기준
보다 쉬운 구성을 위해 피벗 그리드의 일부로 미리 정의된 몇 가지 추가 치수가 표시됩니다.
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 });
값 구성
값 구성에는 제공된 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
속성도 제공합니다. 열 머리글에 이 값에 대한 사용자 정의 이름을 표시하는 데 사용할 수 있습니다.
메모
aggregatorName
과 aggregator
함수를 모두 정의하는 경우 aggregatorName
우선 적용됩니다. 아무것도 설정되지 않으면 오류가 발생합니다.
속성 활성화
IPivotConfiguration
은 IgxPivotGrid
구성 요소의 현재 상태를 설명하는 인터페이스입니다. 이를 통해 개발자는 데이터 필드를 rows
, columns
, filters
또는 values
으로 선언할 수 있습니다. 구성을 통해 이러한 각 요소를 개별적으로 활성화하거나 비활성화할 수 있습니다. 활성화된 요소만 피벗 그리드의 현재 상태에 포함됩니다. IgxPivotDataSelector
구성 요소는 동일한 구성을 활용하고 활성화 및 비활성화된 모든 요소 목록을 표시합니다. 각각에 대해 해당 상태의 확인란이 있습니다. 최종 사용자는 이러한 확인란을 사용하여 다양한 요소를 전환하여 피벗 상태를 쉽게 조정할 수 있습니다. enable
속성은 지정된 IPivotDimension
또는 IPivotValue
활성 상태이고 피벗 그리드에서 렌더링된 피벗 보기에 참여하는지 여부를 제어합니다.
전체 구성 예
기본 피벗 구성을 살펴보겠습니다.
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 ™를 사용해 볼 수 있습니다.
구성 자동 생성
이 autoGenerateConfig
속성은 데이터 원본 필드를 기반으로 차원과 값을 자동으로 생성합니다.
숫자 필드:
- 애그리게이터를 사용하여
IgxPivotNumericAggregate.sum
만들었습니다IPivotValue
. - 값 컬렉션에 추가되고 기본적으로 사용하도록 설정됩니다.
- 애그리게이터를 사용하여
숫자가 아닌 필드:
- 로
IPivotDimension
만듭니다. - 기본적으로 비활성화되어 있습니다.
- 열 컬렉션에 추가되었습니다.
- 로
날짜 필드(첫 번째
date
필드만 활성화되고 다른date
필드는 숫자가 아닌 필드 규칙을 적용함):- 다음으로 생성됨
IgxPivotDateDimension
- 기본적으로 사용
- 행 컬렉션에 추가되었습니다.
- 다음으로 생성됨
이 기능을 사용하면 개발자가 차원과 값을 수동으로 지정하지 않고도 피벗 보기를 빠르게 만들 수 있습니다. 피벗 그리드 옆에 있는 피벗 선택기를 사용하여 사용자는 필요에 따라 차원과 값을 활성화하고 재정렬할 수 있습니다.
알려진 문제 및 제한 사항
한정 | 설명 |
---|---|
열을 선언적으로 설정하는 것은 지원되지 않습니다. | 피벗 그리드는 다음을 기반으로 열을 생성합니다.columns 구성이므로 기본 그리드에서와 같이 선언적으로 설정하는 것은 지원되지 않습니다. 이러한 열은 무시됩니다. |
중복 설정memberName 또는member 차원/값에 대한 속성 값입니다. |
memberName /member 각 측정기준/값마다 고유해야 합니다. 중복으로 인해 최종 결과의 데이터가 손실될 수 있습니다. |
행 선택은 다음에서만 지원됩니다.single 방법. |
다중 선택은 현재 지원되지 않습니다. |
차원 멤버 병합은 대소문자를 구분합니다. | 피벗 그리드는 그룹을 생성하고 동일한(대소문자 구분) 값을 병합합니다. 그러나 차원은 제공합니다memberFunction 그리고 이것은 거기에서 변경될 수 있습니다.memberFunction 비교하여 표시값으로 사용합니다. |