# 피벗 테이블 타임라인 슬라이서
## Content
타임라인 슬라이서는 날짜, 월, 연도, 분기 단위로 데이터를 빠르게 필터링할 수 있도록 도와주는 **인터랙티브 필터**입니다.
줌인/줌아웃 가능한 **시각적 컨트롤러 인터페이스**가 제공되어, 원하는 기간을 선택하여 피벗 데이터를 시각적으로 필터링할 수 있습니다.
타임라인 슬라이서는 **피벗 테이블의 날짜 필드에만** 적용되며, **레이블 조건 필터**를 통해 동작합니다.
이 슬라이서는 [Slicers.add](/spreadjs/api/v19/classes/GC.Spread.Sheets.Slicers.SlicerCollection#add) 클래스 메서드를 사용하여 피벗 테이블에 추가할 수 있으며, 슬라이서 유형은 `PivotTimeline`으로 설정하고, [TimelineLevel](/spreadjs/api/v19/enums/GC.Spread.Sheets.Slicers.TimelineLevel) 열거형의 옵션들(예: `years`, `quarters`, `months`, `dates`)을 사용하여 필터링 기준을 지정할 수 있습니다. 또한 [PivotTableTimelineSlicer](/spreadjs/api/v19/classes/GC.Spread.Pivot.PivotTableTimelineSlicer) 클래스에서는 슬라이서 UI를 사용자 정의할 수 있는 다양한 메서드를 제공합니다.
## 사용 시나리오
예를 들어, 식음료 제품을 판매하는 식품 판매 회사에서 **연중 여러 분기별 제품 판매 데이터를 시각화**하고자 할 때, 타임라인 슬라이서를 사용하면 기간 기반 데이터 분석이 가능해집니다.
아래 GIF는 타임라인 슬라이서를 통해 기간별로 데이터를 필터링하여 분석하는 과정을 보여줍니다.
```javascript
// 연도, 분기, 월 필터에 대한 타임라인 슬라이서 추가
var timeline_year = sheet.slicers.add("timeline_year", pt.name(), "OrderDate", GC.Spread.Sheets.Slicers.TimelineStyles.dark6(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
timeline_year.position(new GC.Spread.Sheets.Point(600, 10));
timeline_year.level(GC.Spread.Sheets.Slicers.TimelineLevel.years);
timeline_year.showSelectionLabel(false);
timeline_year.showTimeLevel(false);
timeline_year.showHorizontalScrollbar(false);
timeline_year.height(100);
timeline_year.captionName("Years");
var timeline_quarter = sheet.slicers.add("timeline_quarter", pt.name(), "OrderDate", GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
timeline_quarter.position(new GC.Spread.Sheets.Point(600, 130));
timeline_quarter.level(GC.Spread.Sheets.Slicers.TimelineLevel.quarters);
timeline_quarter.captionName("Quarters");
timeline_quarter.showSelectionLabel(false);
var timeline_month = sheet.slicers.add("timeline_month", pt.name(), "OrderDate", GC.Spread.Sheets.Slicers.TimelineStyles.light4(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
timeline_month.position(new GC.Spread.Sheets.Point(600, 290));
timeline_month.captionName("Months");
timeline_month.showTimeLevel(false);
```
## 디자이너에서 슬라이서 항목 선택
SpreadJS 디자이너에서는 피벗 테이블 슬라이서 항목을 다음과 같은 방식으로 선택할 수 있습니다:
* **동작:** 클릭 / 드래그
* **모드:** Single / Multi
* **추가 키:** Ctrl / Shift / 없음
| 동작 (동작 + 모드 + 키) | 설명 |
| ---------------- | --- |
| 클릭 + Single + 없음 | 클릭한 항목을 선택합니다. |
| 클릭 + Single + Ctrl
클릭 + Multi + 없음
클릭 + Multi + Ctrl | 클릭한 항목의 선택 상태를 전환합니다. |
| 클릭 + Single + Shift | 시작 지점부터 클릭한 항목까지 범위를 설정하고, 해당 범위의 항목은 선택 상태를 유지하며, 나머지는 선택되지 않은 상태로 유지됩니다. |
| 클릭 + Multi + Shift
드래그 + Multi + Shift | 시작 지점부터 클릭한 항목까지 범위를 설정하고, 해당 범위의 항목은 모두 선택 상태로 설정됩니다. (선택 해제는 되지 않음) |
| 드래그 + Single + 없음 | 드래그된 항목은 선택 상태로 설정되고, 나머지 항목은 선택 해제됩니다. |
| 드래그 + Single + Ctrl
드래그 + Multi + 없음
드래그 + Multi + Ctrl | 드래그된 항목의 선택 상태를 전환합니다. |
| 드래그 + Single + Shift | 시작 지점부터 드래그 종료 지점까지 범위를 설정하고, 해당 항목들을 선택합니다. |
## 사용자 지정 타임라인 슬라이서 스타일 설정
SpreadJS는 피벗 테이블 타임라인 슬라이서에 적용할 수 있는 6개의 라이트 테마와 6개의 다크 테마를 제공합니다.
또한, 슬라이서 스타일을 추가, 제거, 수정하여 사용자 지정 타임라인 슬라이서 테마를 관리할 수 있으며, 이를 피벗 테이블 타임라인 슬라이서에 적용할 수 있습니다. 이러한 스타일을 사용하려면 슬라이서에 스타일 이름만 설정하면 됩니다.
타임라인 슬라이서 스타일을 설정하려면 `GC.Spread.Sheets.Workbook` 클래스의 `customTimelineThemes` 속성을 사용하세요.
`CustomTimelineThemesManager` 클래스는 다음과 같은 메서드를 제공하여 사용자 지정 타임라인 슬라이서 테마를 관리할 수 있습니다:
| 메서드 | 설명 |
| --- | --- |
| all | 모든 사용자 지정 타임라인 슬라이서 테마를 가져옵니다. |
| get | 이름으로 특정 사용자 지정 테마를 가져옵니다. |
| add | 스타일 객체 또는 이름을 사용하여 새로운 사용자 지정 테마를 추가합니다. |
| remove | 이름으로 사용자 지정 테마를 제거합니다. |
| update | 이름 또는 스타일 객체를 사용하여 기존 사용자 지정 테마를 업데이트합니다. |
또한, `GC.Spread.Sheets.Workbook` 클래스의 `defaultTimelineTheme` 메서드를 사용하면 기본 타임라인 슬라이서 스타일을 효과적으로 설정하여 모든 슬라이서에 일관된 스타일을 적용할 수 있습니다.
>type=warning
> **참고:**
>
> * 타임라인 슬라이서 테마 이름은 고유해야 합니다.
> * 예를 들어, 이미 "TEST"라는 이름의 사용자 지정 타임라인 슬라이서 스타일이 있는 경우, 동일한 이름의 타임라인 슬라이서 스타일을 새로 만들 수 없습니다.
> * 타임라인 슬라이서 스타일 이름은 대소문자를 구분하지 않습니다.
> * 스타일 이름이 타임라인 슬라이서에 추가되면, 해당 이름으로 스타일을 찾습니다. 스타일 이름이 내장 스타일과 일치하면 해당 스타일이 바로 적용됩니다. 일치하지 않는 경우 `customStyles` 컬렉션에서 해당 이름의 스타일을 검색하여 존재할 경우 이를 적용합니다. 없을 경우 기본 스타일이 적용됩니다.
> * `defaultTimelineTheme`은 타임라인 슬라이서의 스타일 이름을 나타내는 문자열이어야 합니다. 슬라이서를 생성할 때 명시적으로 스타일을 지정하지 않았고, 해당 기본 스타일 이름에 해당하는 스타일이 존재하면 그 스타일이 해당 슬라이서에 적용됩니다.
> * 사용자 지정 타임라인 슬라이서 테마는 이전 버전의 Excel IO에서는 지원되지 않습니다.
다음은 사용자 지정 타임라인 슬라이서 테마를 관리하는 데 필요한 다양한 메서드를 보여주는 코드 샘플입니다.
1. 사용자 지정 타임라인 슬라이서 테마 추가
```javascript
const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
// "custom0"이라는 이름의 새 타임라인 슬라이서 테마를 추가
const slicerTheme = spread.customTimelineThemes.add("custom0");
const styleInfo = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
styleInfo.backColor("orange");
styleInfo.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(2,"solid","green"));
slicerStyle.wholeSlicerStyle(styleInfo);
```
2. 사용자 지정 타임라인 슬라이서 테마 가져오기
```javascript
spread.customTimelineThemes.get("custom0");
```
3. 사용자 지정 타임라인 슬라이서 테마 적용
```javascript
timeline.style("custom0");
```
4. 사용자 지정 타임라인 슬라이서 테마 수정
기존 타임라인 슬라이서 스타일을 변경하면, 해당 스타일이 적용된 모든 슬라이서가 자동으로 업데이트됩니다.
```javascript
// 타임라인 슬라이서 테마 수정
const slicerStyle = spread.customTimelineThemes.get("custom0");
slicerStyle.wholeSlicerStyle().backColor("red");
// 타임라인 슬라이서 테마 업데이트
spread.customTimelineThemes.update("custom0", new GC.Spread.Sheets.Slicers.TimelineStyle());
```
5. 기존 사용자 지정 타임라인 슬라이서 테마 삭제
사용자 지정 슬라이서 스타일을 삭제하면, 해당 스타일을 사용 중이던 모든 슬라이서는 기본 스타일로 전환됩니다.
```javascript
// 타임라인 슬라이서 테마 삭제
spread.customTimelineThemes.remove("custom0");
```
6. 기본 타임라인 슬라이서 테마 설정
```javascript
// 기본 타임라인 슬라이서 테마 설정
spread.defaultTimelineTheme("custom0");
```
SpreadJS 디자이너 컴포넌트를 사용하여 타임라인 슬라이서 스타일을 추가 및 포맷할 수도 있으며, 아래 단계를 따라 진행할 수 있습니다:
1. 추가된 타임라인 슬라이서를 클릭하여 **타임라인(TIMELINE)** 탭을 열고 타임라인 설정을 구성합니다.
2. **시간 표시 막대 스타일(Timeline Styles)** 그룹에 있는 **스타일(Styles)** 버튼을 클릭합니다.
3. **새 시간 표시 막대 스타일(New Slicer Style..)** 옵션을 선택하면 **새 시간 표시 막대 스타일** 대화 상자가 열립니다.
4. **Name** 입력란에 새 스타일 이름을 입력하고, **Slicer Element** 섹션에서 스타일을 적용할 요소를 선택한 뒤, **Format** 버튼을 클릭하여 원하는 스타일을 설정합니다.
5. 사용자가 만든 타임라인 슬라이서 스타일은 슬라이서 스타일 컬렉션 목록의 **사용자 지정(Custom)** 섹션에 표시됩니다.
6. 사용자 지정 타임라인 슬라이서 스타일에서 마우스 오른쪽 버튼을 클릭하면 다음 작업을 수행할 수 있습니다: 적용, 수정, 복제, 삭제, 기본값으로 설정.
>type=warning
> **참고:** 내장된 피벗 테이블 타임라인 슬라이서 스타일은 수정하거나 삭제할 수 없습니다.