SpreadJS의 특수 시트 내부에 있는 전체 Gantt를 구현한 것입니다.

자체 헤더가 있으며 도형을 사용해 Gantt 작업을 그립니다.  

Gantt 시트는 다음을 포함하여 여러 옵션을 제공합니다.

• 기간 확대/축소 및 스크롤

• 작업 표시줄 및 눈금선 스타일

• 레이아웃

• 태스크 운영

• 달력

• 가져오기 및 내보내기

GanttSheet는 Gantt 동작 및 스프레드시트 사용자 인터페이스를 갖춘 빠른 데이터 바인딩 DataTable 보기를 기반으로 구축되었습니다.

특정 스키마를 사용하여 DataManager 보기에 바인딩될 수 있습니다.

GanttSheet 기능은 현재는 베타 버전이므로 v17 버전 릴리즈 이전에는 완벽하게 지원되지 않을 수 있습니다.

• GanttSheet 개요 데모

수식 에디터 패널

수식 에디터 패널을 사용하면 SpreadJS에서 길고 복잡한 수식을 보고, 편집하고, 디버깅하는 것이 쉬워집니다.

이 새로운 구성 요소는 다음과 같은 기능을 제공합니다.

1) 구문 강조 표시

​
수식 텍스트는 토큰 유형에 따라 다른 색으로 표시됩니다.

2) 서식 지정

길고 복잡한 수식은 적절한 들여쓰기와 중첩을 통해 별도의 라인으로 서식을 지정할 수 있습니다.

3) 유연한 개요 보기

수식 개요를 축소 및 확장할 수 있습니다.

4) 자동 완성 제안

제안 기능, 사용자 정의 이름, 열거된 매개변수를 사용하여 빠르고 정확하게 수식을 입력할 수 있습니다.

5) Tooltip 설명 정보

사용자가 함수 이름에 마우스를 올리거나 함수를 입력하면 함수에 관한 정보를 담은 도구 설명이 나타납니다.

6) 린트(Lint) 옵션

잘못된 매개 변수 또는 일치하지 않는 괄호와 같은 수식 오류에는 플래그가 표시됩니다.

7) 테마 사용자 정의

토큰, 도구 설명, 배경, 전경, 참조 범위와 같은 속성을 포함한 테마 CSS를 변경하여 수식 편집기의 모양을 바꿀 수 있습니다.

8) 구문 강조 표시

가독성을 높이기 위해 수식의 다양한 구문 요소(참조 범위 등)가 강조 표시됩니다.

• 수식 에디터 데모

접근성

Cell.altText 속성

SpreadJS에 더 많은 접근성 옵션 추가를 위하여 이번 릴리즈에 Cell.altText 속성을 추가했습니다.

이 속성을 사용하면 접근성이 True로 설정될 때 화면 읽기 도구가 읽게 될 특정 텍스트를 설정할 수 있습니다.

sheet.getCell(1, 1).value(1000).altText("Sales amount is {value}");

• 사용자 정의 대체 텍스트를 사용한 접근성

계산의 향상된 기능

1) SUMIFS 및 XLOOKUP 성능 개선

SUMIFS 및 XLOOKUP 함수의 성능이 향상되었습니다.

함수를 사용하는 통합 문서가 특정 환경에서 더 빠르게 작동합니다.

2) Excel 수동 계산 옵션

수동 계산을 지원합니다.

사용자 설정에 의해 자동으로 수식이 계산되는 것을 막을 수 있습니다.

대신, 수식은 편집하거나 새로운 수식을 입력되는 경우에만 계산됩니다.

새로운 CalculationMode 열거형을 통해 지원되며 기본값이 auto(자동)이고, manual(수동)으로 설정할 수도 있습니다.

자동 계산을 사용하면 관련 셀(dirty cells에서 참조되는 셀)이 변경된 경우, dirty cells(변경된 셀)이 계산됩니다.

수동 계산을 통해 셀은 직접 변경된 셀만 계산되며 변경된 셀을 참조하는 셀은 계산되지 않습니다.

• 계산 서비스 데모

3) FormularTextBox에서의 시트 간 참조 지원

SpreadJS에서 사용자는 "="을 입력하여 셀에 수식을 입력할 수 있습니다.

일반적으로 사용자는 동일한 시트에 있는 경우에만 해당 수식에서 참조할 셀을 커서로 선택할 수 있습니다.

이번 릴리즈에서는 다른 워크시트의 셀을 참조하기 위해 셀 수식을 편집하는 동안 다른 시트 탭을 클릭할 수 있는 기능을 추가했습니다.

이 기능은 선호도에 따라 CSS를 변경하여 활성화/비활성화할 수 있습니다.

통합 문서의 향상된 기능

1) 셀 defaultvalue 속성

셀에 대한 기본값을 설정할 수 있는 속성을 추가했습니다.

일반적으로 셀에 값이 없는 경우 공백으로 표시됩니다.

이번 릴리즈를 통해 모든 값이나 수식을 셀의 기본값으로 설정할 수 있습니다.

다음과 같은 간단한 속성으로 기본값을 가져오고 설정할 수 있습니다.

activeSheet.getCell(0, 0).defaultValue(20);
console.log("DefaultValue of cell(0,0) using defaulValue method: " + activeSheet.getCell(0, 0).defaultValue());

• 셀 defaultValue 데모

2) 날짜/시간 picker 및 슬라이더 개선

날짜/시간 picker 및 슬라이더가 개선되어 사용자가 기간이나 범위를 정의할 수 있습니다.

• 시작 시간 및 종료 시간 또는

• 시작 번호에서 종료 번호에 이르는 숫자 기간

이러한 개선은 시작 및 종료 속성이 날짜나 정수인 셀 값으로 저장할 수 있는 단순한 개체를 제시합니다.

• 날짜/시간 Picker
• 슬라이더

3) Excel 스타일 복사 최적화

SpreadJS의 스타일 복사가 Excel과 일치하도록 개선되었습니다.

이제 SpreadJS는 각 셀에 대한 동일한 스타일 정의를 추가하는 대신 셀에 대한 명명된 스타일을 생성하여 HTML 클립보드 콘텐츠의 상단에 추가합니다.

이는 명령 크기를 줄입니다.

TableSheet의 향상된 기능

Window Aggregation(창 집계) 함수

이번 릴리즈에 추가된 Window(창) 함수는 TableSheet에서 데이터 분석을 제공합니다.

이러한 함수는 특정 창(현재 행과 관련된 일련의 테이블 행)에 대한 집계, 순위, 분석 계산을 수행하고 각 행에 대한 결과를 생성합니다.

이를 통해 집계 및 비집계 값을 동시에 작업할 수 있습니다.

새로운 함수는 다음과 같습니다.

• 순위 함수

• CUMEDIST - 누적 분포 값 반환

• DENSERANK - 파티션 내의 현재 행 순위를 간격 없이 반환

• ROWNUMBER - 파티션 내의 현재 행 수를 반환

• W_PERCENTRANK - 순위 값의 백분율 반환

• W_RANK - 파티션 내의 현재 행 순위를 간격 없이 반환

• 분석 함수

• FIRSTVALUE - 창 프레임의 첫 번째 행에서 인수 값 반환

• LAG - 현재 행으로 이어지는 특정한 물리 오프셋에서 행의 값에 액세스 권한 제공

• LASTVALUE - 창 프레임의 마지막 행에서 인수 값 반환

• LEAD - 현재 행을 따르는 특정한 물리 오프셋에서 행의 값에 액세스 권한 제공

• NTHVALUE - 창 프레임의 N번째 행에서 인수 값 반환

• NTILE - 해당 파티션 내의 현재 행 버킷 수를 반환

Window 함수 구현에 대한 최적의 예시는 누계입니다.

Window 함수를 사용하여 일부 데이터의 누계를 생성하고 PARTITIONBY 함수와 같은 것을 사용해 매년 또는 이와 유사한 기간에 대한 누계를 얻습니다.

• TableSheet Window 함수 데모

디자이너의 향상된 기능

1) 기본 활성 리본 탭 설정

이번 릴리즈에서 디자이너 컴포넌트에 적용된 첫 번째 개선 사항은 리본에서 기본 활성 탭을 설정할 수 있는 기능입니다.

구성에서 기본 활성 탭을 설정하면 SpreadJS 디자이너 컴포넌트를 로딩하자마자 Home 탭 대신 지정한 탭이 열립니다.

// Use the activeRibbonTab method of the designer component to set the active ribbon tab.
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config);
let currentActiveRibbonTab = designer.activeRibbonTab();
if (currentActiveRibbonTab !== "insert") {
   designer.activeRibbonTab("insert");
}

2) Excel 테마, 색, 글꼴

테마, 색, 글꼴 버튼을 디자이너에 추가했습니다.

사용자는 이를 통해 테마나 색 설정을 전환하여 해당 테마 색을 참조하는 모든 도형, 차트, 내장된 셀 스타일에 영향을 미칠 수 있습니다.

3) Excel 파일 암호

SpreadJS는 암호를 통한 Excel 파일 열기 및 저장을 지원하며 파일 대화 상자에 있는 SpreadJS 디자이너에 해당 기능 추가했습니다.

4) 이름 관리자의 읽기 전용 이름

이번 릴리즈를 통해 이제 이름 관리자에서 이름을 읽기 전용으로 설정할 수 있습니다.

이를 통해 사용자가 통합 문서에 있는 특정 이름을 바꾸는 것을 방지할 수 있습니다.

Angular 16 지원

SpreadJS는 이제 Angular wrapper(래퍼) 및 디자이너 컴포넌트용 Angular 16을 지원합니다.

v16.2 릴리즈에서 SpreadJS에 많은 기능이 추가될 예정입니다.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ