Angular 그리드 요약

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

Angular Grid Summaries Overview Example

Note

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

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

string 및 boolean data types의 경우 다음 함수를 사용할 수 있습니다.

세다

number, currency 및 percent 데이터 유형의 경우 다음 함수를 사용할 수 있습니다.

세다
분
최대
평균
합집합

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>

특정 열이나 열 목록에 대한 요약을 활성화/비활성화하는 다른 방법은 public 메서드를 사용하는 것입니다. 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, IgxNumberSummaryOperand 또는 IgxDateSummaryOperand 중 하나를 재정의해야 합니다. 이 방법으로 기존 기능을 재정의하거나 새 기능을 추가할 수 있습니다. IgxSummaryOperand 클래스는 count 메소드에 대해서만 기본 구현을 제공합니다. IgxNumberSummaryOperand IgxSummaryOperand 확장하고 min, max, sum 및 average에 대한 구현을 제공합니다. IgxDateSummaryOperand IgxSummaryOperand 확장하고 추가적으로 earliest 및 latest.

import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular';
// 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

요약 행 높이를 올바르게 계산하려면 데이터가 비어 있는 경우에도 Grid에서 항상 적절한 길이의 IgxSummaryResult 배열을 반환하는 operate 메서드가 필요합니다.

이제 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

이제 사용자 정의 열 요약 내의 모든 그리드 데이터에 액세스할 수 있습니다. IgxSummaryOperand operate 메소드에는 두 개의 추가 선택적 매개변수가 도입되었습니다. 아래 코드 조각에서 볼 수 있듯이 Operate 메소드에는 다음 세 가지 매개변수가 있습니다.

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 입력 속성을 사용하여 기본값을 재정의합니다. 인수로 숫자 값이 필요하며 거짓 값을 설정하면 그리드 바닥글의 기본 크기 조정 동작이 트리거됩니다.

Note

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

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

열별로 그룹화한 경우 그리드를 사용하면 summaryCalculationMode 및 summaryPosition 속성을 사용하여 요약 위치와 계산 모드를 변경할 수 있습니다. 이 두 속성과 함께 IgxGrid는 참조하는 그룹 행이 축소될 때 요약 행이 계속 표시되는지 여부를 결정할 수 있는 showSummaryOnCollapse 속성을 노출합니다.

summaryCalculationMode 속성의 사용 가능한 값은 다음과 같습니다.

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

summaryPosition 속성의 사용 가능한 값은 다음과 같습니다.

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

showSummaryOnCollapse 속성은 부울입니다. 기본값은 false로 설정됩니다. 즉, 그룹 행이 축소되면 요약 행이 숨겨집니다. 속성이 true로 설정되면 그룹 행이 축소될 때 요약 행이 계속 표시됩니다.

Note

summaryPosition 속성은 하위 수준 요약에만 적용됩니다. 루트 수준 요약은 항상 그리드 하단에 고정되어 나타납니다.

Demo

Exporting Summaries

이 있습니다 exportSummaries 옵션 IgxExcelExporterOptions 내보낸 데이터에 그리드 요약이 포함되어야 하는지 여부를 지정합니다. 기본 exportSummaries 가치는 거짓.

IgxExcelExporterService는 모든 열 유형에 대한 기본 요약을 동등한 Excel 기능으로 내보내므로 시트가 수정될 때 계속해서 제대로 작동합니다. 아래 예에서 직접 시도해 보세요.

내보낸 파일에는 시트의 각 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
);

마지막 단계는 구성요소 믹스인을 포함하는 것입니다.

@include grid-summary($custom-theme);

Note

구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.

:host {
   ::ng-deep {
       @include grid-summary($custom-theme);
   }
}

Defining a color palette

방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.

igx-palette 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.

$blue-color: #7793b1;
$green-color: #00ff2d;

$my-custom-palette: palette($primary: $blue-color, $secondary: $green-color);

그런 다음 igx-color 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.

$custom-theme: grid-summary-theme(
    $background-color: color($my-custom-palette, "primary", 700),
    $focus-background-color: color($my-custom-palette, "primary", 800),
    $label-color: color($my-custom-palette, "secondary", 500),
    $result-color: color($my-custom-palette, "grays", 900),
    $pinned-border-width: 2px,
    $pinned-border-style: dotted,
    $pinned-border-color: color($my-custom-palette, "secondary", 500)
);

Note

igx-color 및 igx-palette 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.

Using Schemas

테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.

모든 구성 요소에 제공되는 사전 정의된 두 스키마 중 하나(이 경우_light-grid-summary)를 확장합니다.

// Extending the light grid summary schema
$my-summary-schema: extend($_light-grid-summary,
    (
        background-color: (igx-color: ('primary', 700)),
        focus-background-color: (igx-color: ('primary', 800)),
        label-color: (igx-color: ('secondary', 500)),
        result-color: (igx-color: ('grays', 900)),
        pinned-border-width: 2px,
        pinned-border-style: dotted,
        pinned-border-color: (igx-color: ('secondary', 500))
    )
);

사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light 또는 dark)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.

// Extending the global light-schema
$my-custom-schema: extend($light-schema,
    (
        igx-grid-summary: $my-summary-schema
    )
);

// Defining our custom theme with the custom schema
$custom-theme: grid-summary-theme(
    $palette: $my-custom-palette,
    $schema: $my-custom-schema
);

위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.

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

Formatting summaries

Summaries with Group By

Note

Demo

Exporting Summaries

Known Limitations

Keyboard Navigation

스타일링

Note

Defining a color palette

Note

Using Schemas

Demo

API References

Additional Resources

테마