Wijmo 2021 v2 가 출시되었습니다! 이번 출시에는 FlexMap의 공식 출시, Excel 메모 지원 및 새로운 ColumnGroups API가 포함되어있습니다. 아래에서 자세히 살펴보겠습니다.

FlexMap 공식 출시!

더 이상 FlexMap을 베타 버전으로 사용하지 않아도 됨을 알려드리게 되어 기쁩니다. FlexMap은 지리 데이터를 아름답게 시각화할 수 있는 새로운 맵 컨트롤입니다. 맵 컨트롤을 사용하면 데이터를 불러와 분석하는 일이 훨씬 쉬워질 수 있습니다. 이 JavaScript UI 컴포넌트를 통해 지리 데이터를 손쉽게 놀라운 시각화 자료로 만들 수 있습니다.

FlexMap은 분산형(Scatter) 및 버블(Bubble) 맵과 같은 단계구분도(Choropleth) 및 포인트 맵 렌더링을 지원합니다. 맵은 GeoJSON을 사용하여 지리적 특징 레이어와 포인트 레이어를 바인딩합니다.

NaturalEarthData를 공용 도메인인 GeoJSON 데이터의 소스로 권장하며, MapShaper를 필요에 따라 사용자 정의할 수 있습니다. 물론, 다른 많은 소스들이 있고, 이미 여러분만의 소스를 가지고 있을지도 모릅니다.

• JavaScript 단계구분도(Choropleth) 데모
• Angular 단계구분도(Choropleth) 데모
• React 단계구분도(Choropleth) 데모
• Vue 단계구분도(Choropleth) 데모

XLSX에서 Excel 메모 기능 추가

고객 요청을 기반으로, 우리는 wijmo.xslx 모듈에 Excel 메모 기능을 추가하였습니다. 이제 FlexGrid로 가져오거나 내보내는 경우, 또는 XLSX 모듈을 사용하여 통합 문서로 작업할 때 Excel 메모를 포함할 수 있습니다. WorkbookCell 클래스와 IWorkbookCell 인터페이스에도 메모 기능을 추가하였습니다.

WorkbookNote 클래스와 IWorkbookNote 인터페이스도 추가했습니다. 메모의 작성자, 텍스트, 위치 및 크기를 설정하는 사용자 정의가 가능합니다. 불러오기와 내보내기 기능도 더욱 향상되었습니다!

• JavaScript Excel 메모 가져오기 데모
• Angular Excel 메모 가져오기 데모
• React Excel 메모 가져오기 데모
• Vue Excel 메모 가져오기 데모

FlexGrid에서 새로 개선된 ColumnGroups API

이제 FlexGrid의 ColumnGroups는 ColumnGroupCollection 및 ColumnGroup 객체로 구성된 형식화된 객체 모델로 정의할 수 있습니다. 이전 ColumnGroups는 POJO를 통해서만 정의할 수 있었지만, 이제는 ColumnGroups를 정의하거나 선언할 수 있는 훨씬 강력한 방법이 생겼습니다.

Angular, React 및 Vue용 Interop 모듈은 새로운 ColumnGroup 클래스도 지원합니다. 원하는 JS 프레임워크의 마크업에서 ColumnGroups를 바로 선언할 수 있습니다.

ColumnGroup 속성 변경으로, ColumnGroup 객체의 추가/삭제/재정렬을 통해 FlexGrid가 자동으로 레이아웃 업데이트 할 수 있게 되었습니다.

기본적으로 columnGroups 속성은 첫 번째 단계의 ColumnGroup 객체를 추가할 수 있는 빈 ColumnGroupCollection 컬렉션을 반환합니다. 각 ColumnGroup 객체에는 하위 ColumnGroup 객체를 추가하여 열 그룹 트리를 생성할 수 있는 자체 '열' 컬렉션이 있습니다.

사용 예시:

let theGrid = new FlexGrid('#theGrid', {
        headersVisibility: 'Column',
        alternatingRowStep: 0,
        showMarquee: true,
        showSelectedHeaders: 'All',
        autoGenerateColumns: false,
        columnGroups: new ColumnGroupCollection([
            new ColumnGroup({ binding: 'name', header: 'Name', width: 150 }),
            new ColumnGroup({ binding: 'currency', header: 'Curr', width: 80, align: 'center' }),
            new ColumnGroup({ header: 'Allocation', align: 'center', collapseTo: 'alloc.amount', columns: new ColumnGroupCollection([
                    new ColumnGroup({ binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80 }),
                    new ColumnGroup({ binding: 'alloc.bond', header: 'Bonds', format: 'p0', width: 80 }),
                    new ColumnGroup({ header: 'Detail', align: 'center', columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'alloc.cash', header: 'Cash', format: 'p0', width: 80 }),
                            new ColumnGroup({ binding: 'alloc.other', header: 'Other', format: 'p0', width: 80 }),
                        ]) }),
                    new ColumnGroup({ binding: 'alloc.amount', header: 'Amount', format: 'c0', width: 100, cssClass: 'main-column' }),
                ]) }),
            new ColumnGroup({ header: 'Perf', align: 'center', columns: new ColumnGroupCollection([
                    new ColumnGroup({ header: 'Short', align: 'center', collapseTo: 'perf.ytd', isCollapsed: true, columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'perf.ytd', header: 'YTD', format: 'p2', width: 100, cssClass: 'main-column' }),
                            new ColumnGroup({ binding: 'perf.m1', header: '1 M', format: 'p2', width: 80 }),
                        ]) }),
                    new ColumnGroup({ header: 'Long', align: 'center', collapseTo: 'perf.m12', isCollapsed: true, columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'perf.m6', header: '6 M', format: 'p2', width: 80 }),
                            new ColumnGroup({ binding: 'perf.m12', header: '12 M', format: 'p2', width: 100, cssClassAll: 'main-column' }),
                        ]) }),
                ]) }),
        ]),
        itemsSource: DataService.getData(),
    });

드래그하여 ColumnGroups 재정렬

드래그 앤 드롭을 사용하여 ColumnGroups를 재정렬할 수 있는 기능도 추가되었습니다. 또한 ColumnGroup 내에서도 재정렬이 가능합니다. 이를 통해 최종 사용자가 그리드 열과 그룹이 정렬되는 방식을 완전히 컨트롤할 수 있게 됩니다.

Angular, React, Vue에서 ColumnGroups를 위한 CellTemplates 지원

ColumnGroups에 대한 선언 컴포넌트를 추가하는 것과 더불어, Angular, React 및 Vue에 대한 강력한 CellTemplate 지원을 추가했습니다. CellTemplates 사용으로 FlexGrid에서 특정 셀이 렌더링되는 모든 방식에 대해 사용자 정의가 가능합니다. CellTemplates는 HTML 요소, Wijmo 컴포넌트, 프레임워크 바인딩과 조건문을 지원합니다. 그리드의 각 셀을 사용자의 필요에 따라 정의할 수 있습니다.

예를 들어, 다음은 ColumnHeader 셀에서 ColumnGroups를 확장/축소하기 위해 체크박스를 사용하기 위한 몇 가지 Angular 마크업입니다.

<wj-flex-grid-column-group #allocGr header="Allocation" align="center" collapseTo="alloc.amount">
        <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" [autoSizeRows]="false" let-cell="cell" *ngIf="useCellTemplates">   
            <input type="checkbox" [(ngModel)]="allocGr.isCollapsed">
        </ng-template>
</wj-flex-grid-column-group>

결과는 다음과 같습니다(Allocation 열 머리글을 확인하세요.):

UndoStack에서 지원하는 ColumnGroups에서의 확장, 축소 및 재정렬 이벤트

당사의 UndoStack은 어플리케이션의 실행 취소/재실행 동작을 편리하게 추가할 수 있는 방법을 제공합니다. FlexGrid는 다양한 작업에 대해 실행 취소/재실행을 지원하는데, 이번 버전에서는 FlexGrid를 사용할 때 ColumnGroups 확장 및 축소 실행을 취소/다시 실행하는 기능을 추가했습니다.

ColumnGroups 저장과 유지

FlexGrid의 columnLayout 속성은 사용자가 정의한 열 레이아웃을 유지하는 데 사용할 수 있으므로 세션 간에 보존되며, 사용자가 열 레이아웃을 수정할 수 있도록 하는 어플리케이션에서 실행 취소/재실행 기능을 구현하는 데 사용할 수도 있습니다.

ColumnGroups에 대한 모든 변경 사항이 유지될 수 있도록 ColumnGroup 구성을 ColumnLayout 속성에 추가했습니다.

DataMap은 배열 및 객체 유형 속성을 지원합니다.

변경 로그

• [wijmo.xlsx] Excel 메모 기능이 추가되었습니다. 메모는 WorkbookCell.note 속성을 통해 검색과 설정을 할 수 있습니다. wijmo.xlsx는 다음과 같이 변경되었습니다.
• WorkbookCell 클래스 및 IWorkbookCell 인터페이스에 메모 속성을 추가했습니다.
• WorkbookNote 클래스 및 IWorkbookNote 인터페이스를 추가했습니다. "Excel/Workbook Viewer" 샘플은 간단한 메모 지원 구현으로 업데이트되었습니다.
• [FlexGrid] 이제 FlexGrid의 ColumnGroups는 ColumnGroupCollection 및 ColumnGroup 객체로 구성된 형식화된 객체 모델로 정의할 수 있습니다. ColumnGroup 속성 변경으로, ColumnGroup 객체의 추가/삭제/재정렬을 통해 FlexGrid가 자동으로 레이아웃 업데이트 할 수 있게 되었습니다.
  기본적으로 columnGroups 속성은 첫 번째 단계의 ColumnGroup 객체를 추가할 수 있는 빈 ColumnGroupCollection 컬렉션을 반환합니다. 각 ColumnGroup 객체에는 하위 ColumnGroup 객체를 추가하여 열 그룹 트리를 생성할 수 있는 자체 '열' 컬렉션이 있습니다. 기존의 POJO 배열을 사용하여 columnGroups를 정의하는 방식도 지원됩니다. 자세한 내용은 하단의 주요 변경 사항 섹션을 참조하십시오. "그리드 > 열 > 그룹화(객체 모델)" 샘플에서 기능을 확인하실 수 있습니다.
• [FlexGrid] getColumn 메서드에 includeAllColumnTypes 매개 변수를 포함한 두번째 옵션이 추가되었습니다. 이를 통해, 이름이나 바인딩으로 columnGroups 트리에서 열 그룹을 찾을 수 있습니다.
• [FlexGrid]columnGroups가 POJO 배열을 사용하여 정의된 경우에도 그리드에서 사용되는 효과적인 ColumnGroupCollection 컬렉션을 반환하는 getColumnGroups() 메서드가 추가되었습니다.
• [FlexGrid] 마우스를 이용해 드래그함으로써 열 그룹의 위치를 변경(순서를 바꾸거나 다른 그룹으로 옮기는 등)하는데 추가적인 도움을 줍니다. 자세한 내용은 하단의 주요 변경 사항 섹션을 참조하십시오.
• [FlexGrid] getColumn(true) 메서드 호출은 formatItem 또는 columnGroupCollapsedChanged와 같은 일부 이벤트에서 사용되는 CellRangeEventArgs 객체와 HitTestInfo 객체에 대해 수행되며, 영향을 받는 영역이 그룹 셀인 경우 그룹을 나타내는 ColumnGroup 객체(자식 열 포함)를 반환합니다. 이전에는 이 메서드가 columnGroups 트리의 리프 객체(바운드된 열)만 반환했습니다.
• [FlexGrid] columnLayout 속성에서 columnGroups 저장 및 복원을 지원하는 기능이 추가되었습니다.
• [UndoStack] 열 그룹의 재정렬 및 축소/확장 작업에 대한 기능이 추가되었습니다.
• [Angular] 각 템플릿에서 열 그룹 간 계층을 정의하기 위해 wj-flex-grid-column-group 컴포넌트가 추가되었으며, 이를 활용하여 그룹의 셀 템플릿을 정의할 수 있습니다. "그리드 > 열 > 그룹화(객체 모델)" 샘플에서 기능을 확인하실 수 있습니다.
• [React] 추가된 FlexGridColumnGroup 기능은 React 'render' 함수에서 열 그룹 계층을 정의하며, 그룹에 대한 셀 템플릿을 정의할 수 있습니다. "그리드 > 열 > 그룹화(객체 모델)" 샘플에서 기능을 확인하실 수 있습니다.
• [Vue] 추가된 wj-flex-grid-column-group 컴포넌트를 활용하여 Vue 템플릿에서 문단 간 계층을 정리하고 그룹에 대한 셀 템플릿을 정의할 수 있습니다. "그리드 > 열 > 그룹화(객체 모델)" 샘플에서 기능을 확인하실 수 있습니다.
• [PivotPanel] ivotPanel.deferUpdate 속성이 추가되었습니다. 이 속성은 기본 엔진이 지연된 업데이트 상태인지 여부를 정의합니다. (WJM-20028)
• [FlexGrid] DataMap은 이제 새롭게 추가된 'serializeKeys' 부울 속성을 false로 설정하여 복잡한 객체 또는 복잡한 객체의 배열인 key를 통해 올바른 방식으로 작동할 수 있습니다. 이러한 경우, DataMap은 key를 문자열로 변환하지 않으며, 브라우저의 Map class를 사용하여 키-값 쌍을 저장합니다.