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

Ignite UI for Angular 최고의 Angular Components 중 하나로, 그룹화된 값과 집계의 표를 나타내며, 이를 통해 데이터를 표 형태로 구성하고 요약할 수 있습니다. 스프레드시트나 데이터베이스 테이블에서 가져온 선택된 열과 행의 데이터를 재구성하고 요약하여 원하는 보고서를 얻는 데 사용되는 데이터 요약 도구입니다.

What is Angular Pivot Grid?

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

The IgxPivotGridComponent gives the ability to users to configure and display their data in a multi-dimensional pivot table structure. The rows and columns represent distinct data groups, and the data cell values represent aggregations. This allows complex data analysis based on a simple flat data set. The IgxPivotGridComponent is a feature-rich pivot table that provides easy configuration of the different dimensions and values as well as additional data operations on them like filtering and sorting.

Angular Pivot Grid Example

다음은 Angular Pivot Data Selector Component와 함께 사용하는 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에 대한 전체 소개는 시작 항목을 참조하십시오.

The next step is to import the IgxPivotGridModule in your app.module.ts file.

// app.module.ts

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

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

Alternatively, as of 16.0.0 you can import the IgxPivotGridComponent as a standalone dependency, or use the IGX_PIVOT_GRID_DIRECTIVES token to import the component and all of its supporting components and 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 [];
}

Now that you have the Ignite UI for Angular Pivot Grid module or directives imported, you can start using the igx-pivot-grid component.

Using the Angular Pivot Grid

The Angular Pivot Grid Component can be configured via the pivotConfiguration property.

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

It is defined by three main dimensions: rows, columns and values. The rows and columns define the grouped structure that is displayed in the rows and columns of the Angular grid. The values define the aggregation fields and the aggregation that will be used to calculate and display the related values of the groups.

A filter can also be defined via the filters configuration property. It can be used for fields that you do not want to add as a dimension or a value but would like to filter their related member values via the UI.

Dimensions configuration

Each basic dimension configuration requires a memberName that matches a field from the provided data, or a memberFunction that extracts a value from the record in case of complex objects or other custom scenarios.

Note

The memberName needs to be unique. In case you need different dimensions for the same field, you can define a custom unique memberName for each, and extract the related value via memberFunction.

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

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

A dimension can also describe an expandable hierarchy via the childLevel property, for example:

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

In this case the dimension renders an expander in the related section of the grid (row or column) and allows the children to be expanded or collapsed as part of the hierarchy. By default the row dimensions are initially expanded. This behavior can be controlled with the defaultExpandState @Input of the pivot grid.

Predefined dimensions

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

IgxPivotDateDimension Can be used for date fields. Describes the following hierarchy by default:
- 모든 기간
- 연령
- 병사
- 개월
- 전체 날짜

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

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

A value configuration requires a member that matches a field from the provided data, or it can define either via an aggregatorName or custom aggregator function for more complex scenarios.

Note

The member needs to be unique. In case you need different value aggregations for the same field, you can define a custom unique member for each, and extract the related value via the aggregator function.

기본적으로 데이터 필드의 데이터 유형에 따라 사용할 수 있는 4개의 사전 정의된 집계가 있습니다.

IgxPivotNumericAggregate - for numeric fields. Contains the following aggregation functions: SUM, AVG, MIN, MAX, COUNT.
IgxPivotDateAggregate - for date fields. Contains the following aggregation functions: LATEST, EARLIEST, COUNT.
IgxPivotTimeAggregate - for time fields. Contains the following aggregation functions: LATEST, EARLIEST, COUNT.
IgxPivotAggregate - for any other data types. This is the base aggregation. Contains the following aggregation functions: COUNT.

The current aggregation function can be changed at runtime using the value chip's drop-down. By default, it displays a list of available aggregations based on the field's data type. A custom list of aggregations can also be set via the aggregateList property, for example:

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));
};

The pivot value also provides a displayName property. It can be used to display a custom name for this value in the column header.

Note

If you define both aggregatorName and aggregator function, aggregatorName takes precedence. If none is set then an error is thrown.

Enable property

IPivotConfiguration is the interface that describes the current state of the IgxPivotGrid component. With it the developer can declare fields of the data as rows, columns, filters or values. The configuration allows enabling or disabling each of these elements separately. Only enabled elements are included in the current state of the pivot grid. The IgxPivotDataSelector component utilizes the same configuration and shows a list of all elements - enabled and disabled. For each of them there is a checkbox in the appropriate state. End-users can easily tweak the pivot state by toggling the different elements using these checkboxes. The enable property controls if a given IPivotDimension or IPivotValue is active and takes part in the pivot view rendered by the pivot grid.

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

The autoGenerateConfig property automatically generates dimensions and values based on the data source fields:

숫자 필드:
- Created as IPivotValue using IgxPivotNumericAggregate.sum aggregator.
- 값 컬렉션에 추가되고 기본적으로 사용하도록 설정됩니다.
숫자가 아닌 필드:
- Created as IPivotDimension.
- 기본적으로 비활성화되어 있습니다.
- 열 컬렉션에 추가되었습니다.
Date Fields(only the first date field is enabled, the other date fields apply non-numeric fields rule):
- Created as IgxPivotDateDimension
- 기본적으로 사용
- 행 컬렉션에 추가되었습니다.

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

Known Issues and Limitations

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

API References

Additional Resources

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

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

What is Angular Pivot Grid?

Angular Pivot Grid Example

Getting started with Ignite UI for Angular Pivot Grid

Using the Angular Pivot Grid

Dimensions configuration

Note

Predefined dimensions

Values configuration

Note

Note

Enable property

Full configuration example

Auto generate configuration

Known Issues and Limitations

API References

Additional Resources

테마