피벗 테이블 타임라인 슬라이서

타임라인 슬라이서는 날짜, 월, 연도, 분기 단위로 데이터를 빠르게 필터링할 수 있도록 도와주는 인터랙티브 필터입니다.

줌인/줌아웃 가능한 시각적 컨트롤러 인터페이스가 제공되어, 원하는 기간을 선택하여 피벗 데이터를 시각적으로 필터링할 수 있습니다.

타임라인 슬라이서는 피벗 테이블의 날짜 필드에만 적용되며, 레이블 조건 필터를 통해 동작합니다.

이 슬라이서는 Slicers.add 클래스 메서드를 사용하여 피벗 테이블에 추가할 수 있으며, 슬라이서 유형은 PivotTimeline으로 설정하고, TimelineLevel 열거형의 옵션들(예: years, quarters, months, dates)을 사용하여 필터링 기준을 지정할 수 있습니다. 또한 PivotTableTimelineSlicer 클래스에서는 슬라이서 UI를 사용자 정의할 수 있는 다양한 메서드를 제공합니다.

사용 시나리오

예를 들어, 식음료 제품을 판매하는 식품 판매 회사에서 연중 여러 분기별 제품 판매 데이터를 시각화하고자 할 때, 타임라인 슬라이서를 사용하면 기간 기반 데이터 분석이 가능해집니다.

아래 GIF는 타임라인 슬라이서를 통해 기간별로 데이터를 필터링하여 분석하는 과정을 보여줍니다.

// 연도, 분기, 월 필터에 대한 타임라인 슬라이서 추가
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 디자이너에서는 피벗 테이블 슬라이서 항목을 다음과 같은 방식으로 선택할 수 있습니다:

• 동작: 클릭 / 드래그

• 모드: 단일 / 다중

• 추가 키: Ctrl / Shift / 없음

사용자 지정 타임라인 슬라이서 스타일 설정

SpreadJS는 피벗 테이블 타임라인 슬라이서에 적용할 수 있는 6개의 라이트 테마와 6개의 다크 테마를 제공합니다.

또한, 슬라이서 스타일을 추가, 제거, 수정하여 사용자 지정 타임라인 슬라이서 테마를 관리할 수 있으며, 이를 피벗 테이블 타임라인 슬라이서에 적용할 수 있습니다. 이러한 스타일을 사용하려면 슬라이서에 스타일 이름만 설정하면 됩니다.

타임라인 슬라이서 스타일을 설정하려면 GC.Spread.Sheets.Workbook 클래스의 customTimelineThemes 속성을 사용하세요.

CustomTimelineThemesManager 클래스는 다음과 같은 메서드를 제공하여 사용자 지정 타임라인 슬라이서 테마를 관리할 수 있습니다:

또한, GC.Spread.Sheets.Workbook 클래스의 defaultTimelineTheme 메서드를 사용하면 기본 타임라인 슬라이서 스타일을 효과적으로 설정하여 모든 슬라이서에 일관된 스타일을 적용할 수 있습니다.

다음은 사용자 지정 타임라인 슬라이서 테마를 관리하는 데 필요한 다양한 메서드를 보여주는 코드 샘플입니다.

1. 사용자 지정 타임라인 슬라이서 테마 추가

   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. 사용자 지정 타임라인 슬라이서 테마 가져오기

   spread.customTimelineThemes.get("custom0");

3. 사용자 지정 타임라인 슬라이서 테마 적용

   timeline.style("custom0");

4. 사용자 지정 타임라인 슬라이서 테마 수정

   기존 타임라인 슬라이서 스타일을 변경하면, 해당 스타일이 적용된 모든 슬라이서가 자동으로 업데이트됩니다.

   // 타임라인 슬라이서 테마 수정
   const slicerStyle = spread.customTimelineThemes.get("custom0");
   slicerStyle.wholeSlicerStyle().backColor("red");
   
   // 타임라인 슬라이서 테마 업데이트
   spread.customTimelineThemes.update("custom0", new GC.Spread.Sheets.Slicers.TimelineStyle());

5. 기존 사용자 지정 타임라인 슬라이서 테마 삭제

   사용자 지정 슬라이서 스타일을 삭제하면, 해당 스타일을 사용 중이던 모든 슬라이서는 기본 스타일로 전환됩니다.

   // 타임라인 슬라이서 테마 삭제
   spread.customTimelineThemes.remove("custom0");

6. 기본 타임라인 슬라이서 테마 설정

   // 기본 타임라인 슬라이서 테마 설정
   spread.defaultTimelineTheme("custom0");

SpreadJS 디자이너 컴포넌트를 사용하여 타임라인 슬라이서 스타일을 추가 및 포맷할 수도 있으며, 아래 단계를 따라 진행할 수 있습니다:

1. 추가된 타임라인 슬라이서를 클릭하여 타임라인(TIMELINE) 탭을 열고 타임라인 설정을 구성합니다.

2. 시간 표시 막대 스타일(Timeline Styles) 그룹에 있는 스타일(Styles) 버튼을 클릭합니다.

   
   

   
   

   
   

3. 새 시간 표시 막대 스타일(New Slicer Style..) 옵션을 선택하면 새 시간 표시 막대 스타일 대화 상자가 열립니다.

   
   

   
   

   
   

4. Name 입력란에 새 스타일 이름을 입력하고, Slicer Element 섹션에서 스타일을 적용할 요소를 선택한 뒤, Format 버튼을 클릭하여 원하는 스타일을 설정합니다.

   
   

   
   

   
   

5. 사용자가 만든 타임라인 슬라이서 스타일은 슬라이서 스타일 컬렉션 목록의 사용자 지정(Custom) 섹션에 표시됩니다.

   
   

   
   

   
   

6. 사용자 지정 타임라인 슬라이서 스타일에서 마우스 오른쪽 버튼을 클릭하면 다음 작업을 수행할 수 있습니다: 적용, 수정, 복제, 삭제, 기본값으로 설정.