# 그룹화 및 축소

## Content

SpreadJS를 사용하면 피벗 테이블에서 그룹화 및 축소 작업을 수행할 수 있어 필요한 데이터만 표시하여 보다 명확한 데이터를 확인할 수 있습니다. 이는 데이터를 더 요약할 수 있는 대량의 피벗 테이블을 다룰 때 특히 유용합니다. 날짜, 텍스트, 숫자 기반으로 데이터를 그룹화할 수 있으며, 아래 섹션에서 설명합니다.

## 날짜 그룹화

SpreadJS는 피벗 테이블에서 날짜/시간(datetime) 유형의 필드를 그룹화하거나 그룹 해제할 수 있도록 지원합니다. 초, 분, 시간, 일, 월, 분기, 연도 등의 다양한 시간 단위로 날짜 데이터를 그룹화할 수 있으며, 시작 및 종료 시점을 설정할 수도 있습니다. `dateGroups` 속성을 사용하여 해당 기능을 구현할 수 있습니다.
아래 이미지는 2020년 데이터를 분기별로 그룹화한 예시입니다.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.797125.png?width=1190)

다음 코드 샘플은 날짜 데이터를 분기 기준으로 그룹화하는 방법을 보여줍니다.

```javascript
// 날짜 기준으로 그룹화
 let groupInfo = {
     originFieldName: "date", dateGroups: [
         { by: GC.Pivot.DateGroupType.quarters },
         { by: GC.Pivot.DateGroupType.years },
         { by: GC.Pivot.DateGroupType.months }
     ]
 };
 pivotTable.group(groupInfo);
 pivotTable.add("Years (date)", "Years (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
 pivotTable.add("Quarters (date)", "Quarters (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
 pivotTable.add("Months (date)", "Months (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
```

## 텍스트 그룹화

피벗 테이블에서 `textGroup` 메서드를 사용하여 행 레이블 또는 열 레이블 항목을 그룹화할 수 있습니다. 이 메서드는 `add` 메서드를 사용하여 새 그룹을 추가하며, 그룹이 생성되면 새로운 필드도 함께 만들어집니다.
아래 이미지는 행 레이블 항목으로 생성된 새 그룹을 보여줍니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/group-text.png)

다음 코드 샘플은 행 레이블 항목의 텍스트를 그룹화하는 방법을 보여줍니다.

```javascript
// 항목 기준으로 그룹
myPivotTable.views.apply("empty_pt");
myPivotTable.add("Region", "Region", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("Quantity", "Sum of quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
let groupInfo = {
    originFieldName: "Product", textGroup: {
        fieldName: "NewProduct",
        groupItems: {
            Drinks: ['Coffee', 'Juice'],
            Chocolate: ['Dark', 'White', 'Milk'],
            Others: ['Breads', 'Cheese puffs', 'Cookie']
        }
    }
};
myPivotTable.group(groupInfo);
myPivotTable.add("NewProduct", "TestProduct", GC.Spread.Pivot.PivotTableFieldType.columnField);
```

또한 개발자는 `groupInterval` 옵션을 사용하여 **일(day)** 단위로 측정되는 사용자 지정 간격을 정의할 수 있습니다. 예를 들어, 다음 샘플은 날짜를 **7일 단위 블록(주간 보기)** 으로 그룹화하는 방법을 보여줍니다.

```javascript
// 사용자 지정 범위로 그룹화
const pivotTable = sheet.pivotTables.add("PivotTable", source, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium3);
let groupInfo = { 
    originFieldName: "Date", dateGroups: [
        { by: GC.Pivot.DateGroupType.days, groupInterval: 7 }
    ]
};
pivotTable.group(groupInfo);
pivotTable.add("Days (date)", "Days (date)", GC.Spread.Pivot.PivotTableFieldType.rowField);
```

![image.728e0c.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image.728e0c-20251216.b5201b.png?width=800)

>type=note
> **참고:**
>
> * `groupInterval` 옵션은 그룹화가 **일(days)** 단위로만 이루어질 때 동작합니다.
> * 타임라인에 지정된 시작 또는 종료 범위를 벗어나는 데이터가 포함된 경우, 해당 항목은 특수 그룹에 배치됩니다. 출력 결과에서는 그림과 같이 경계 날짜에 “<” 또는 “>” 기호가 결합되어 표시됩니다.
>
> ![image.545a7e.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image.545a7e-20251216.350e5e.png?width=800)
>
> * 이 모드에서 인식되는 최소 단위는 **일(day)** 입니다. 즉, 시작 날짜가 *2025/2/3 08:30:30 AM* 인 경우에도 그룹화 시스템은 이를 *2025/2/3 00:00:00 AM* 으로 처리합니다.
> * 일부 그룹화된 구간에는 레코드가 없을 수도 있습니다. 데이터의 공백을 강조하기 위해 이러한 구간도 표시하고 싶다면 *데이터가 없는 항목 표시(Show items with no data)* 옵션을 켤 수 있습니다. 이 옵션은 기본적으로 꺼져 있습니다.
>
> ![image.4f6716.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image.4f6716-20251216.ec0fc0.png?width=300)

## 숫자 그룹화

행 필드에 나열되는 개별 숫자 값 대신, 수치 데이터를 그룹화하여 도수분포표(Frequency Distribution Table)를 만들 수 있습니다. 숫자 데이터를 범위로 묶어 분석할 수 있으며, `numberGroup` 메서드를 통해 구현할 수 있습니다.
아래 이미지는 수량(Quantity)의 도수 분포 예시입니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/group-numbers.png)
다음 코드 샘플은 숫자를 그룹화하는 방법을 보여줍니다.

```javascript
// 숫자 기준으로 그룹화
myPivotTable.views.apply("empty_pt");
myPivotTable.add("Quantity", "Quantity", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("Region", "Region", GC.Spread.Pivot.PivotTableFieldType.colField);
myPivotTable.add("Product", "Count of quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.count);
let groupInfo = { originFieldName: "Quantity", numberGroup: { by: 30 } };
myPivotTable.group(groupInfo);
```

## 그룹 축소/확장

`collapse` 옵션을 사용하면 피벗 테이블에서 특정 그룹이나 전체 피벗 필드를 확장하거나 축소할 수 있습니다. 아래 이미지는 East 지역, Bakery 및 Chocolates 카테고리 필드가 축소된 상태를 보여줍니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/collapse-group.png)
다음 코드 샘플은 그룹을 축소하거나 확장하는 방법을 보여줍니다.

```javascript
// 일부 그룹 축소
myPivotTable.collapse("Region", "East", true);
myPivotTable.collapse("Category", "Bakery", true);
myPivotTable.collapse("Category", "Chocolates", true);

// 그룹 확장
myPivotTable.collapse("Region", "East", false);
```

## 

## 축소/확장 버튼 숨기기

피벗 테이블에서 항목 제목 왼쪽에 표시되는 확장 및 축소 버튼(+ 또는 - 기호)을 `showDrill` 옵션을 사용하여 표시하거나 숨길 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/hide-collapse-button.png)
다음 코드 샘플은 피벗 테이블에서 축소/확장 버튼을 숨기는 방법을 보여줍니다.

```javascript
myPivotTable.options.showDrill = false;
```