Angular 그리드 요약

Ignite UI for Angular의 Angular UI 그리드에는 그룹 푸터로 열 수준에서 작동하는 요약 기능이 있습니다. Angular 그리드 요약은 사용자가 열 내 데이터 유형에 따라 또는 그리드에서 사용자 정의 각도 템플릿을 구현하여 사전 정의된 기본 요약 항목 세트가 있는 별도의 컨테이너에서 열 정보를 볼 수 있게 해주는 강력한 기능입니다.

Angular Grid Summaries Overview Example

Note

열 요약은 모든 열 값의 함수 입니다. 필터링이 적용되지 않는 한 열 요약은 필터링된 결과 값의 함수 입니다.

Ignite UI for Angular에서 그리드 요약을 열 단위로 활성화할 수도 있습니다. 즉, 필요한 열에 대해서만 활성화할 수 있습니다. 그리드 요약은 열의 데이터 유형에 따라 미리 정의된 기본 요약 세트를 제공하므로 시간을 절약할 수 있습니다.

때문에string 그리고boolean data types, 다음과 같은 함수가 제공됩니다:

세다

데이터 유형에 대해서는numbercurrencypercent 다음과 같은 함수들이 제공됩니다:

세다
분
최대
평균
합집합

데이터 타입의 경우date, 다음과 같은 함수들이 제공됩니다:

세다
가장 빠른
최신

사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목에서 찾을 수 있습니다.

그리드 요약 열별로 설정하여 활성화됩니다hasSummary 속성은true. 각 열의 요약은 열 데이터 유형에 따라 해석된다는 점도 기억하는 것이 중요합니다. 안에igx-grid 기본 열 데이터 타입은string, 그러니까 원한다면number 또는date 구체적인 요약은 다음과 같이 명시해야 합니다dataType 재산은number 또는date. 요약 값은 그리드에 따라 국지화되어 표시됩니다locale 그리고 기둥pipeArgs.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
    <igx-column field="ProductID" header="Product ID" width="200px" [sortable]="true"></igx-column>
    <igx-column field="ProductName" header="Product Name" width="200px" [sortable]="true" [hasSummary]="true"></igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true"></igx-column>
</igx-grid>

특정 열이나 열 리스트에 대한 요약을 활성화하거나 비활성화하는 또 다른 방법은 공개 메서드를 사용하는 것입니다enableSummaries /disableSummaries IGX-그리드.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
    <igx-column field="ProductID" header="Product ID" width="200px"  [sortable]="true"></igx-column>
    <igx-column field="ProductName" header="Product Name" width="200px" [sortable]="true" [hasSummary]="true"></igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="false"></igx-column>
</igx-grid>
<button (click)="enableSummary()">Enable Summary</button>
<button (click)="disableSummary()">Disable Summary </button>

public enableSummary() {
    this.grid1.enableSummaries([
        {fieldName: 'ReorderLevel', customSummary: this.mySummary},
        {fieldName: 'ProductID'}
    ]);
}
public disableSummary() {
    this.grid1.disableSummaries('ProductName');
}

Custom Grid Summaries

이 기능들이 요구사항을 충족하지 못한다면, 특정 열에 대한 맞춤형 요약을 제공할 수 있습니다. 이를 위해서는 기본 클래스IgxSummaryOperand 중 하나를 오버라이드해야 하거나,IgxNumberSummaryOperandIgxDateSummaryOperand 열의 데이터 타입과 필요에 따라 다릅니다. 이렇게 하면 기존 함수를 재정의하거나 새로운 함수를 추가할 수 있습니다.IgxSummaryOperand 클래스는 메서드에count 대한 기본 구현만 제공합니다.IgxNumberSummaryOperand 확장IgxSummaryOperand 하고 구현minmaxsumaverage을 제공합니다.IgxDateSummaryOperand 확장IgxSummaryOperand 하고 추가로 제공합니다earliestlatest.

import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular/core';
// import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from '@infragistics/igniteui-angular'; for licensed package

class MySummary extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }

    operate(data?: any[]): IgxSummaryResult[] {
        const result = super.operate(data);
        result.push({
            key: 'test',
            label: 'Test',
            summaryResult: data.filter(rec => rec > 10 && rec < 30).length
        });
        return result;
    }
}

예시에서 볼 수 있듯이, 기본 클래스는 메서드를operate 노출시키므로 모든 기본 요약을 가져와 결과를 수정하거나 완전히 새로운 요약 결과를 계산할 수 있습니다. 메서드는 의IgxSummaryResult 리스트를 반환합니다.

interface IgxSummaryResult {
    key: string;
    label: string;
    summaryResult: any;
}

요약을 계산하기 위해 선택적 매개변수를 사용합니다. 아래의 모든 데이터 섹션에 액세스하는 사용자 정의 요약을 참조하세요.

Note

요약 행 높이를 제대로 계산하려면, 데이터가 비어 있어도 항상 적절한 길이의 배열operate을 반환하는 메서드가IgxSummaryResult 필요합니다.

이제 커스텀 요약을 열에UnitsInStock 추가해 보겠습니다. 아래에서 생성하는 클래스로 속성을 설정summaries 함으로써 이를 달성할 것입니다.

<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
    <igx-column field="ProductID" width="200px"  [sortable]="true">
    </igx-column>
    <igx-column field="ProductName" width="200px" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="UnitsInStock" width="200px" [dataType]="'number'" [hasSummary]="true" [summaries]="mySummary" [sortable]="true">
    </igx-column>
    <igx-column field="ReorderLevel" width="200px" [editable]="true" [dataType]="'number'" [hasSummary]="true">
    </igx-column>
</igx-grid>

...
export class GridComponent implements OnInit {
    mySummary = MySummary;
    ....
}

Custom summaries, which access all data

이제 커스텀 컬럼 요약 안에서 모든 그리드 데이터에 접근할 수 있습니다. IgxSummaryOperandoperate 메서드에는 두 가지 추가 선택 매개변수가 도입되었습니다. 아래 코드 스니펫에서 볼 수 있듯이 연산 메서드는 다음과 같은 세 가지 매개변수를 가집니다:

columnData - 현재 열의 값만 포함하는 배열을 제공합니다.
allGridData - 전체 그리드 데이터 소스를 제공합니다.
fieldName - 현재 열 필드

class MySummary extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }
    operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] {
        const result = super.operate(allData.map(r => r[fieldName]));
        result.push({ key: 'test', label: 'Total Discontinued', summaryResult: allData.filter((rec) => rec.Discontinued).length });
        return result;
    }
}

Summary Template

igxSummary요약 열을 타겟팅하여 요약 열의 결과를 맥락으로 제공합니다.

<igx-column ... [hasSummary]="true">
    <ng-template igxSummary let-summaryResults>
        <span> My custom summary template</span>
        <span>{{ summaryResults[0].label }} - {{ summaryResults[0].summaryResult }}</span>
    </ng-template>
</igx-column>

기본 요약이 정의되면 요약 영역의 높이는 요약 수가 가장 많은 열과 그리드의 크기에 따라 설계에 따라 계산됩니다. summaryRowHeight 입력 속성을 사용하여 디폴트 값을 재정의합니다. 인수로 숫자 값이 필요하며 false 값을 설정하면 그리드 바닥글의 기본 크기 조정 동작이 트리거됩니다.

Note

열 요약 템플릿은 열 summaryTemplate 속성을 필수 TemplateRef로 설정하여 API를 통해 정의할 수 있습니다.

Disable Summaries

이 속성은disabledSummaries Ignite UI for Angular 그리드 요약 기능에 대해 열별로 정밀한 제어를 제공합니다. 이 특성은 사용자가 격자 내 각 열에 대한 요약을 맞춤화하여 가장 관련성 높고 의미 있는 데이터만 표시하도록 할 수 있게 합니다. 예를 들어, 특정 요약 유형을['count', 'min', 'max'] 배열에 요약 키를 지정하여 제외할 수 있습니다.

또한 이 속성은 코드를 통해 런타임에 동적으로 수정할 수 있으므로 변화하는 응용 프로그램 상태 또는 사용자 작업에 맞게 그리드의 요약을 조정할 수 있는 유연성을 제공합니다.

다음 예시들은 속성으로disabledSummaries 다양한 열의 요약을 관리하고 Ignite UI for Angular 그리드에서 특정 기본 및 사용자 지정 요약 유형을 제외하는 방법을 보여줍니다:

<!-- default summaries -->
<igx-column
    field="UnitPrice"
    header="Unit Price"
    dataType="number"
    [hasSummary]="true"
    [disabledSummaries]="['count', 'sum', 'average']"
>
</igx-column>
<!-- custom summaries -->
<igx-column
    field="UnitsInStock"
    header="Units In Stock"
    dataType="number"
    [hasSummary]="true"
    [summaries]="discontinuedSummary"
    [disabledSummaries]="['discontinued', 'totalDiscontinued']"
>
</igx-column>

예를 들어UnitPrice, 기본 요약 같은count 것들은 비활성화되어 있고,sumaverage 다른 것들은 좋아min 요와max 활성화된 상태로 남아 있습니다.

그리고UnitsInStock 같은 맞춤형 요약totaltotalDiscontinued은 해당 속성을 사용할 때disabledSummaries 제외됩니다.

런타임에는 이 속성을 사용하여disabledSummaries 요약을 동적으로 비활성화할 수도 있습니다. 예를 들어, 특정 열의 속성을 프로그래밍적으로 설정하거나 업데이트하여 사용자 행동이나 애플리케이션 상태 변화에 따라 표시되는 요약을 조정할 수 있습니다.

Formatting summaries

기본적으로 내장된 요약 연산자에 의해 생성된 요약 결과는 그리드locale와 열pipeArgs에 따라 국지화되고 포맷이 조정됩니다. 커스텀 피연산자를 사용할 때는locale와pipeArgs가 적용되지 않습니다. 요약 결과의 기본 외관을 변경하고 싶다면, 속성summaryFormatter으로 포맷할 수 있습니다.

public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
    const result = summary.summaryResult;
    if(summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count'
        && result !== null && result !== undefined) {
        const pipe = new DatePipe('en-US');
        return pipe.transform(result,'MMM YYYY');
    }
    return result;
}

<igx-column ... [summaryFormatter]="dateSummaryFormat"></igx-column>

Summaries with Group By

열별로 그룹화하면, 그리드를 통해 andsummaryCalculationMode 속성을 사용해summaryPosition 요약 위치와 계산 모드를 변경할 수 있습니다. 이 두 가지 속성과 함께, IgxGrid는 그룹 행이 접혔을 때 요약 행이 계속 보이는지 여부를 판단할 수 있게 해showSummaryOnCollapse 줍니다.

부동산의summaryCalculationMode 이용 가능한 가치는 다음과 같습니다:

rootLevelOnly - 요약은 루트 수준에 대해서만 계산됩니다.
childLevelsOnly - 요약은 하위 수준에 대해서만 계산됩니다.
rootAndChildLevels - 루트 및 하위 수준 모두에 대한 요약이 계산됩니다. 이것이 기본값입니다.

부동산의summaryPosition 이용 가능한 가치는 다음과 같습니다:

top - 요약 행은 그룹 기준 행 하위 항목 앞에 나타납니다.
하단 - 요약 행은 행 하위 그룹별로 표시됩니다. 이것이 기본값입니다.

이 부동산은showSummaryOnCollapse 불리언입니다. 기본값은 false로 설정되어 있어, 그룹 행이 붕괴되면 요약 행이 숨겨집니다. 속성이 true로 설정되어 있으면 그룹 행이 접혀도 요약 행은 계속 보이게 됩니다.

Note

이 속성은summaryPosition 자녀 수준 요약에만 적용됩니다. 루트 레벨 요약은 항상 그리드 하단에 고정되어 있습니다.

Demo

Exporting Summaries

exportSummaries옵션IgxExcelExporterOptions 이는 내보내는 데이터에 그리드의 요약을 포함해야 하는지 여부를 명시합니다. 기본 설정exportSummaries 값은 다음과 같습니다 거짓.

IgxExcelExporterService모든 열 유형의 기본 요약을 엑셀 함수로 내보내기 때문에 시트가 수정되어도 정상적으로 작동할 수 있습니다. 아래 예시를 통해 직접 시도해 보세요:

내보내진 파일에는 시트 내 각DataRecord 레벨을 담은 숨겨진 열이 포함되어 있습니다. 이 수준은 요약 함수에 포함되어야 하는 셀을 필터링하는 데 사용됩니다.

아래 표에서 각 기본 요약에 해당하는 Excel 수식을 찾을 수 있습니다.

데이터 형식	기능	엑셀 기능
`string`, `boolean`	세다	="카운트: "&COUNTIF(시작:끝, 레코드레벨)
`number`, `currency`, `percent`	세다	="카운트: "&COUNTIF(시작:끝, 레코드레벨)
	분	="최소: "&MIN(IF(start:end=recordLevel, rangeStart:rangeEnd))
	최대	="최대: "&MAX(IF(start:end=recordLevel, rangeStart:rangeEnd))
	평균	="평균: "&AVERAGEIF(시작:끝, 기록 수준, rangeStart:rangeEnd)
	합집합	="합계: "&SUMIF(start:end, RecordLevel, rangeStart:rangeEnd)
`date`	세다	="카운트: "&COUNTIF(시작:끝, 레코드레벨)
	가장 빠른	="가장 빠른: "& TEXT(MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)), format)
	최신	="최신: "&TEXT(MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)), 형식)

Known Limitations

한정	설명
사용자 정의 요약 내보내기	사용자 정의 요약은 Excel 함수 대신 문자열로 내보내집니다.
템플릿 요약 내보내기	템플릿 요약은 지원되지 않으며 기본 요약으로 내보내집니다.

요약 행은 다음 키보드 상호 작용을 통해 탐색할 수 있습니다.

UP- 한 셀 위로 이동합니다.
DOWN- 한 셀 아래로 이동합니다.
LEFT- 한 셀 왼쪽으로 이동합니다.
RIGHT- 한 셀 오른쪽으로 이동합니다.
CTRL + LEFT 또는 HOME- 가장 왼쪽 셀로 이동합니다.
CTRL + RIGHT 또는 END- 가장 오른쪽 셀로 이동합니다.

스타일링

정렬 동작 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹싱이 있는 파일을 가져와index야 합니다:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 방법을 따라, 우리는 를grid-summary-theme 확장하고 매개변수를$background-color$focus-background-color$label-color$result-color$pinned-border-width$pinned-border-style$pinned-border-color 받아들이는 새로운 테마를 만듭니다.

$custom-theme: grid-summary-theme(
  $background-color: #e0f3ff,
  $focus-background-color: rgba(#94d1f7, .3),
  $label-color: #e41c77,
  $result-color: black,
  $pinned-border-width: 2px,
  $pinned-border-style: dotted,
  $pinned-border-color: #e41c77
);

Note

우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.

마지막 단계는 구성 요소 사용자 지정 테마를 포함하는 것입니다.

@include css-vars($custom-theme);

Note

구성 요소가 뷰 캡슐화를Emulated 사용하는 경우, 다음 방식으로penetrate이 캡슐화를::ng-deep 해야 합니다:

:host {
 ::ng-deep {
   @include css-vars($custom-theme);
 }
}

Demo

API References

Additional Resources

선택 기반 집계

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

Angular 그리드 요약

Angular Grid Summaries Overview Example

Note

Custom Grid Summaries

Note

Custom summaries, which access all data

Summary Template

Note

Disable Summaries

Formatting summaries

Summaries with Group By

Note

Demo

Exporting Summaries

Known Limitations

Keyboard Navigation

스타일링

Note

Note

Demo

API References

Additional Resources

테마