# 데이터 설정
## Content
피벗 테이블은 데이터 원본의 변경 사항을 테이블에 반영할 수 있으며, 아래와 같은 방식으로 피벗 테이블의 데이터 영역 값을 편집할 수도 있습니다:
* **데이터 원본 새로 고침**
* **데이터 원본 변경**
* **데이터 값 편집**
## 데이터 원본 새로 고침
피벗 테이블의 데이터 원본이 변경되었을 경우, 최신 정보를 반영하기 위해 피벗 테이블을 새로 고침해야 합니다. SpreadJS에서는 피벗 테이블의 `updateSource` 메서드를 사용하여 데이터 원본을 새로 고치고 최신 데이터를 반영할 수 있습니다.
아래 GIF는 "Refresh Datasource" 버튼을 사용하여 데이터 원본의 변경 사항을 피벗 테이블에 새로 고치는 방법을 보여줍니다.
다음 예제 코드는 데이터 원본의 변경 사항을 피벗 테이블에 새로 고침하여 반영하는 방법을 보여줍니다.
```javascript
function refreshDataSource() {
myPivotTable.updateSource();
}
```
SpreadJS 디자이너를 사용하여 피벗 테이블 데이터를 새로 고칠 수도 있습니다. 이를 위해 피벗 테이블을 선택하여 PIVOTTABLE ANALYZE 탭을 표시한 후, Data 그룹에서 Refresh 버튼을 선택하면 됩니다.
## **데이터 원본 변경**
피벗 테이블은 데이터 원본을 변경하고 기존 레이아웃 정보를 새로운 데이터 원본에 동기화할 수 있도록 지원합니다. 이 기능은 행을 더 추가하거나 기존 데이터 집합을 수정해야 할 때 유용합니다.
현재 데이터 원본을 변경하려면 `updateSource` 메서드를 사용하고 다음 예제 코드와 같이 새 데이터를 지정하면 됩니다.
```javascript
//다른 데이트 원본 구성
var sourceSheet = spread.getSheet(0);
var sheet = spread.getSheet(1);
sheet.name("Pivot Table");
spread.setActiveSheet("Pivot Table");
var sourceData = [["Date", "Buyer", "Type", "Amount"],
["01-Jan", "Mom", "Fuel", 74],
["15-Jan", "Mom", "Food", 235],
["17-Jan", "Dad", "Sports", 20],
["21-Jan", "Kelly", "Books", 125]];
sourceSheet.setArray(0, 0, sourceData);
sourceSheet.tables.add('sourceData', 0, 0, 5, 4);
var newSourceData = [["Date", "Buyer", "Type", "Amount", "Location", "Notes"],
["10-Feb", "Mom", "Fuel", 74, "Gas Station", "Paid in cash"],
["27-Mar", "Mom", "Food", 235, "Supermarket", "Bought snacks"],
["13-Jan", "Dad", "Sports", 20, "Sports Store", "Discount applied"],
["21-May", "Kelly", "Books", 125, "Bookstore", "Fiction novels"],
["03-Apr", "John", "Electronics", 340, "Electronics Store", "New phone case"],
["19-Jun", "Mom", "Clothing", 89, "Mall", "Sale purchase"],
["15-Jul", "Dad", "Tools", 75, "Hardware Store", "DIY project"],
["08-Aug", "Kelly", "Furniture", 450, "Furniture Shop", "Living room decor"],
["23-Sep", "John", "Gaming", 120, "Online Store", "Pre-ordered game"],
["11-Oct", "Mom", "Garden", 55, "Garden Center", "Flower seeds"],
["06-Nov", "Dad", "Fuel", 64, "Gas Station", "Highway stop"],
["20-Dec", "Kelly", "Toys", 92, "Toy Store", "Birthday gifts"]];
sourceSheet.setArray(10, 0, newSourceData);
sourceSheet.tables.add('newSourceData', 10, 0, 13, 6);
// 피벗테이블 생성
var layout = GC.Spread.Pivot.PivotTableLayoutType.compact;
var theme = GC.Spread.Pivot.PivotTableThemes.medium2;
var options = { showRowHeader: true, showColumnHeader: true };
sheet.pivotTables.add("pivotTable_1", 'sourceData', 1, 1, layout, theme, options);
var pivotTable = sheet.pivotTables.get("pivotTable_1");
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", pivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
pivotTable.add("Buyer", "Buyer", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("Type", "Type", GC.Spread.Pivot.PivotTableFieldType.columnField);
pivotTable.add("Amount", "Sum of Amount", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
sourceSheet.setValue(1, 3, 1000);
// 피벗 데이터 원본 가져오기
var pivotDataSource = pivotTable.getSource();
console.log(pivotDataSource);
// 피벗 데이터 원본 업데이트
pivotTable.updateSource("newSourceData");
```
SpreadJS 디자이너를 사용하면 아래 단계를 통해 데이터 원본을 변경할 수 있습니다:
1. 피벗 테이블을 선택하고 리본의 **피벗 테이블 분석(PIVOTTABLE ANALYZE)** 탭으로 이동합니다.
2. **데이터(Data)** 그룹에서 **데이터 원본 변경(Change Data Source)** 를 클릭합니다.
3. **피벗 테이블 데이터 원본 변경(Change PivotTable Data Source)** 대화 상자에서 데이터 범위를 다시 선택하거나 수정합니다.
>type=note
> **참고:**
> 전체 열을 데이터 소스로 사용하는 것(예: `=Sheet!$A:$B`)도 지원하지만, **상대 참조는 지원하지 않습니다.**
4. 확인(OK)를 클릭하여 새로운 데이터로 피벗 테이블을 다시 생성합니다.
> **참고:**
>
> * **데이터 원본 변경 후 필드 이름이 존재하는 경우:**
> * 해당 필드에 대한 정보는 유지되며, 필드에 해당하는 항목은 새 데이터 원본으로 업데이트됩니다.
> * 해당 필드의 슬라이서는 유지되며, 데이터가 업데이트됩니다.
> * 해당 필드에 대응하는 항목 그룹 필드가 있을 경우, SpreadJS에서 소스 필드의 항목은 최신 데이터로 업데이트되며, 그룹 필드는 원래 항목을 유지합니다.
> * **데이터 원본 변경 후 필드 이름이 존재하지 않는 경우:**
> * 계산 필드는 null 값을 표시합니다.
> * 그룹화된 필드는 제거됩니다.
> * 해당 필드에 연결된 슬라이서는 손실됩니다.
> * **새 데이터 원본이 이미 다른 피벗 테이블에서 사용 중인 경우**, 기존 데이터를 직접 참조합니다.
> * 피벗 테이블의 데이터 원본 변경 작업은 **되돌리기(Undo)** 를 지원하지 않지만, **데이터 원본 변경 이후의 작업에 대해서는 Undo가 지원됩니다.**:
## 데이터 값 편집
SpreadJS 피벗 테이블은 데이터 영역의 값을 편집하거나 덮어쓸 수 있습니다. 이때 **숫자형 값만 덮어쓸 수 있습니다.**
피벗 테이블은 다음 5가지 Subtotal 계산 타입만 지원합니다:
* `GC.Pivot.SubtotalType.sum`
* `GC.Pivot.SubtotalType.count`
* `GC.Pivot.SubtotalType.countNums`
* `GC.Pivot.SubtotalType.max`
* `GC.Pivot.SubtotalType.min`
위 목록에 포함되지 않은 Subtotal 타입의 경우 특정 셀만 덮어써지며, **Subtotal 결과는 변경되지 않습니다.**
런타임에서 피벗 테이블 값을 편집하려면 `enableDataValueEditing` 옵션을 `true`로 설정해야 합니다. 기본값은 `false`입니다. 코드를 통해 피벗 테이블 데이터를 덮어쓰려면 `setNodeValue` 메서드를 사용합니다. 이 메서드는 **노드 정보 배열과 덮어쓸 값**을 인자로 받습니다. 노드 정보 배열은 `getNodeInfo` 메서드로 가져오거나 특정 값을 위한 노드 배열을 직접 생성할 수 있습니다.
또한, `getNodeValue`, `getOverwriteList`, `clearOverwriteList` 메서드를 사용하여 노드 값 조회, 덮어쓴 셀 값 목록 조회, 덮어쓴 값 목록 초기화 작업을 할 수 있습니다.
**주의:** 피벗 테이블의 소스를 업데이트하면 덮어쓴 값 목록은 사라집니다.
> **참고:** JSON I/O에서는 덮어쓴 값 목록이 포함되지만, **ExcelIO 및 피벗 테이블 직렬화/역직렬화에서는 덮어쓴 값 목록이 무시됩니다.**
아래 GIF는 런타임에서 Subtotal 값을 편집하는 방법을 보여줍니다.
다음 코드는 `enableDataValueEditing` 옵션을 `true`로 설정하는 방법을 보여줍니다.
```JavaScript
// 데이터 값 편집 활성화
pivotTable.options.enableDataValueEditing = true;
```
다음 코드는 `getNodeInfo` 및 `setNodeValue` 메서드를 사용하여 피벗 테이블의 데이터 값을 업데이트하는 방법을 보여줍니다.
```JavaScript
// 아래 코드를 통해 노드 정보를 가져올 수 있습니다.
var nodeInfo = pivotTable.getNodeInfo(7, 5);
// 코드로 셀 (7,5)의 값을 변경합니다.
pivotTable.setNodeValue(nodeInfo, 5000);
```
아래 SpreadJS 디자이너 에서는 피벗 테이블의 `enableDataValueEditing` 속성을 `true`로 설정하는 방법을 보여줍니다.
