데이터 표 및 그리드는 모던 UI 디자인에서 필수 요소가 되었습니다. 이를 통해 사용자는 쉽게 대용량 데이터 집합을 보고, 값을 비교하고, 실증적인 데이터를 기반으로 결정을 내릴 수 있습니다. 하지만 작업 중인 데이터 집합을 기준 표에서 쉽게 볼 수 없는 경우가 있거나 데이터 요소 간에 상관관계를 더욱 쉽게 볼 수 있도록 제외된 특정 데이터를 원하는 인스턴스가 있을 수 있습니다. 감사하게도 소프트웨어 엔지니어와 컴퓨터 프로그래머가 이를 수행할 수 있도록 하는 데이터 표의 더욱 진보된 양식을 개발했습니다. 바로 피벗 테이블입니다.

피벗 테이블은 데이터 발견과 같은 작업에서 매우 유용한 데이터 표입니다. 이를 통해 사용자는 로드한 데이터 집합에서 복잡한 분석 계산을 수행하고 표시하려는 데이터를 결정하고 데이터의 방향을 결정할 수 있습니다. 이를 통해 사용자는 기존의 데이터 표를 사용 중인 경우 일반적으로 놓친 추세를 볼 수 있습니다.

다행히 Wijmo에서는 사용할 수 있는 최고의 Angular 피벗 테이블인 PivotGrid를 제공합니다. 간편하게 구현하고 쉽게 사용자 정의할 수 있으며 응용 프로그램에 쉽게 통합할 수 있는 광범위한 기능 목록도 있습니다.

이 문서에서는 Wijmo의 Angular 피벗 테이블인 PivotGrid를 사용하여 다음을 수행하는 방법에 대해 간략하게 설명합니다.

• PivotEngine으로 데이터 로드
• PivotPanel 및 PivotGrid 설정
• 사용자 정의 필드 만들기
• PivotChart를 사용하여 차트 양식으로 데이터 표시

완료된 프로젝트를 다운로드하여 다음 과정을 진행하려는 경우 여기에서 응용 프로그램의 소스 코드를 찾아볼 수 있습니다. 이제 한번 시작해 보겠습니다!

Pivot Engine으로 데이터 로드

Wijmo의 Angular 피벗 테이블인 PivotGrid를 구현하기 전에 필요한 모든 리소스를 Angular 응용 프로그램에 로드해야 합니다. 수행해야 하는 첫 번째는 Wijmo UI 컴포넌트 라이브러리를 설치하는 것이며 이는 NPM을 통해 수행할 것입니다. Angular 응용 프로그램 내에서 다음 명령을 실행합니다.

npm i @grapecity/wijmo.angular2.all

이렇게 하면 응용 프로그램에서 Wijmo 라이브러리가 설치됩니다. 설치 경로를 보고 angular2 패키지를 지정한다는 것을 눈치 채셨을 것입니다. Wijmo는 핵심 JavaScript 라이브러리와 함께 Angular, React 및 Vue를 지원합니다. 따라서 불필요한 파일을 설치하지 않으므로 angular2 패키지를 지정합니다. 

다음으로 Wijmo의 CSS 파일을 포함하고 올바른 Wijmo 모듈을 응용 프로그램으로 가져와야 합니다. app.module.ts 파일을 열고 다음을 포함합니다.

import { WjOlapModule } from '@grapecity/wijmo.angular2.olap';
...
imports: [
    ...
    WjOlapModule
],

스타일을 위해 응용 프로그램의 styles.css 파일 상단에서 다음을 포함합니다.

@import '@grapecity/wijmo.styles/wijmo.css';

멋집니다! 이제 필요한 모든 관련 Wijmo 파일을 포함했습니다. 마지막으로 할 일은 Angular 피벗 테이블에 데이터를 제공하는 데 사용할 서비스를 만드는 것입니다. 다음 명령을 사용하여 서비스를 생성합니다.

ng g s data

이는 서비스 파일 및 서비스 테스트 파일을 생성합니다. 테스트 파일은 무시할 수 있지만 새로운 서비스 파일을 열고 다음을 추가합니다.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  products = [
    { product: 'Wijmo', platform: 'Web' },
    { product: 'ActiveReports', platform: 'Desktop' },
    { product: 'ActiveReportsJS', platform: 'Web' },
    { product: 'ComponentOne', platform: 'Desktop' },
    { product: 'Spread', platform: 'Desktop' },
    { product: 'SpreadJS', platform: 'Web' },
    { product: 'GCDocs', platform: 'Desktop' }
  ];

  agents = [
    { agent: 'Ashlyn Dunlop', region: 'East' },
    { agent: 'Keith Vang', region: 'East' },
    { agent: 'Bobbi Rodrigues', region: 'West' },
    { agent: 'Charli Medina', region: 'West' },
    { agent: 'Kaitlin Salt', region: 'West' },
  ];

  constructor() { }

  randomInt(min: number, max: number) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  getOrdersList(count: number) {
    var year = new Date().getFullYear(), data = [];
    for(var i = 0; i < count; i++) {
      let productIdx = this.randomInt(0, 6);
      let agentIdx = this.randomInt(0, 4);
      data.push({
        orderId: this.randomInt(1, 10000),
        platform: this.products[productIdx].platform,
        product: this.products[productIdx].product,
        agent: this.agents[agentIdx].agent,
        region: this.agents[agentIdx].region,
        date: new Date(year - this.randomInt(0, 2), this.randomInt(0, 11), this.randomInt(0, 27)),
        sales: this.randomInt(10, 50),
        downloads: this.randomInt(10, 200),
        revenue: this.randomInt(500, 3500)
      });
    }
    return data;
  }
}

여기에서 데이터에는 실제 값이 없습니다. 단순히 컴포넌트의 기능을 표시하기 위해 생성된 모의 데이터이므로 많은 시간을 할애하지 않을 것입니다. 알아야 할 중요한 사항은 데이터 집합의 각 행이 9개의 다양한 데이터 요소를 구성하는 대용량 데이터 집합이 있다는 것입니다. 

이제 응용 프로그램을 설정하여 Wijmo의 Angular 피벗 테이블인 PivotGrid를 마지막으로 구현할 수 있습니다.

응용 프로그램의 app.component.ts 파일을 열고 다음 코드를 추가합니다.

import { Component } from '@angular/core';
import { DataService } from './data.service';

import * as wjOlap from '@grapecity/wijmo.olap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ng: wjOlap.PivotEngine;

  constructor(private dataService: DataService) {
    this.ng = new wjOlap.PivotEngine({
      itemsSource: dataService.getOrdersList(1000)
    });
  }
}

보시다시피 몇 줄에 불과한 코드입니다.

파일에서는 PivotEngine이라는 Wijmo 컴포넌트를 초기화합니다. PivotEngine은 데이터의 관리를 처리하며 PivotEngine 없이 Wijmo의 PivotGrid 및 PivotPanel 컨트롤은 작동할 수 없습니다. PivotEngine을 피벗 테이블의 기초로 생각할 수 있으며 PivotEngine 없이 테이블에는 사용자에게 표시할 데이터가 없습니다. 

Wijmo 컴포넌트 초기화와 함께 itemsSource 속성도 설정합니다. 이러한 설정은 엔진에, "이게 너가 관리하려는 데이터야." 라고 말해주는 것과 같은 역할을 합니다. 이 응용 프로그램의 경우 서비스에서 getOrdersList() 함수를 호출하며 이는 로드할 1,000개의 행이 있는 데이터를 반환합니다.

이제 데이터와 함께 로드 된 PivotEngine이 있으며 해당 데이터를 화면에 표시할 차례입니다.

PivotPanel 및 PivotGrid 설정

이제 PivotEngine이 설정되었으며 이를 사용해야 합니다. 지난 섹션에서 언급한 대로 엔진은 데이터를 관리합니다. 따라서 데이터와 상호작용하는 사용자의 경우 UI 요소인 PivotPanel 및 PivotGrid에 연결해야 합니다.

Wijmo의 PivotGrid를 언급했지만 PivotPanel에 대해서는 아무것도 말하지 않았습니다. PivotPanel은 사용자가 표시 중인 데이터와 직접 상호 작용하는 방법입니다. 여기에는 선택한 필드의 데이터를 추가로 사용자 정의하기 위한 필드 설정 메뉴의 액세스 권한은 물론 데이터 필드가 열, 행, 필터 및 값 필드인지를 결정하는 작업이 포함됩니다.

추가 설명 대신 PivotPanel 및 PivotGrid로 수행할 수 있는 작업을 보여드리는 것이 더 나을 것입니다. 응용 프로그램에 추가하려면 app.component.html 파일을 열고 다음 코드를 추가합니다.

<div class="flextable">
  <wj-pivot-panel [itemsSource]="ng"></wj-pivot-panel>
  <wj-pivot-grid #pivotGrid [itemsSource]="ng"></wj-pivot-grid>
</div>

이것이 전부입니다! Wijmo의 Angular 피벗 테이블을 구현하는 것은 정말 쉽습니다. PivotEngine과 같이 PivotGrid 및 PivotPanel은 모두 itemsSource로 공급해야 합니다. 하지만 PivotEngine과 달리 이러한 컴포넌트는 간단한 배열을 채택하지 않으며 PivotEngine을 채택합니다! 따라서 이전 섹션에서 설정한 ng 변수를 사용하여 모든 컴포넌트에 대한 itemsSource로 할당할 수 있습니다. 

응용 프로그램을 실행하기 전 마지막 한 가지 작업은 레이아웃을 정리하도록 약간의 스타일을 추가하는 것입니다. styles.css 파일을 열고 다음을 추가합니다.

.flextable {
    display: flex;
}

.wj-pivotpanel {
    width: 500px;
    margin: 0px 10px;
}

PivotPanel 및 PivotGrid가 나란히 표시되도록 응용 프로그램을 설정하고 PivotGrid에 더 많은 공간을 만들도록 PivotPanel의 너비를 설정합니다. 

이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.

보시다시피 PivotGrid에 아무것도 로드되지 않았으며 이는 예상대로입니다. PivotPanel에 일부 필드를 설정하지 않는 한 어떤 것도 표시되지 않습니다. 이를 수정하고 몇 개의 필드를 추가해 보겠습니다.

PivotPanel을 통해 볼 수 있듯이 다음 필드를 패널의 다양한 영역에 추가했습니다.

이제 지역 전반에서 에이전트 별, 제품 및 플랫폼 별 모든 판매 메트릭의 분석을 확인할 수 있습니다.

계속하기 전에 의논해야 할 마지막 한 가지는 필드 설정 메뉴입니다. 이 메뉴는 PivotGrid에 있는 셀을 마우스 오른쪽 버튼으로 클릭하거나 PivotPanel에서 필드 이름을 마우스 오른쪽 버튼으로 클릭하여 액세스할 수 있습니다.

필드 설정… 옵션을 선택하면 필드 설정 모달이 열립니다.

여기에서는 데이터가 요약되는 방법을 변경하고, 계산을 추가하고(예: 이전 행에서 % 차이), 필터를 추가하고, 선택한 형식을 기반으로 한 미리 보기가 포함된 데이터가 표시되는 방법을 포맷할 수 있습니다.

이는 판매 필드에 대한 필드 설정 메뉴이므로 기본 정수 형식 대신 통화 형식으로 표시할 형식을 변경할 것입니다.

보시다시피 업데이트된 형식의 미리 보기도 보여줍니다. 확인 버튼을 클릭하면 다음이 표시되어야 합니다.

보시다시피 판매 열은 이제 정수 형식 대신 통화 형식으로 모두 표시하고 있습니다.

사용자 정의 필드 만들기

이제 PivotPanel 및 PivotGrid를 구현하고 사용의 기본 사항을 검토했으며 PivotEngine을 사용하여 데이터를 사용자 정의할 차례입니다. 자동으로 생성할 수 있도록 허용하는 대신 PivotEngine을 통해 수동으로 속성을 설정하여 이를 수행할 수 있습니다.

app.component.ts 파일을 열고 다음을 추가합니다.

this.ng = new wjOlap.PivotEngine({
  itemsSource: dataService.getOrdersList(1000),
  fields:[
    { binding: 'date', header: 'Quarter', format: '\"Q\"q yyyy' },
    { binding: 'date', header: 'Month', format: 'MMMM' },
    { binding: 'agent', header: 'Agent' },
    { binding: 'region', header: 'Region' },
    { binding: 'platform', header: 'Platform' },
    { binding: 'product', header: 'Product' },
    { binding: 'sales', header: 'Sales', format: 'c2' },
    { binding: 'downloads', header: 'Downloads', format: 'n0' },
    { binding: 'revenue', header: 'Revenue', format: 'c2' },
  ]
});

보시다시피 fields 속성은 객체의 배열을 채택하며 사용자가 PivotPanel에서 선택할 수 있는 다양한 필드를 만드는 데 사용됩니다. 기본적으로 이러한 객체에는 두 개의 속성인 binding 및 header 속성만 있어야 합니다. 바인딩 속성은 엔진에 이 필드가 바인딩되는 속성 이름을 알려줍니다. Agent, Region, Platform 및 Product에 대해 이는 저희가 설정하는 유일한 속성입니다. 

하지만 설정할 수 있는 또 다른 속성이 있으며 이는 format 속성입니다. 사용자가 서식을 변경하도록 필드 설정 메뉴를 사용할 수 있는 방법과 같이 개발자는 필드를 표시할 기본 형식을 설정할 수 있습니다.

형식 설정과 함께 동일한 데이터 요소에서 여러 필드를 실제로 만들고 양쪽 모두에 대해 다른 형식을 설정할 수 있습니다. 이 응용 프로그램에서는 분기별 및 월별 날짜 필드를 설정합니다. 이제 이를 저장하고 응용 프로그램을 열면 몇 개의 필드를 선택할 것이며 다음과 같이 표시되어야 합니다.

보시다시피 단일 데이터 요소를 사용하여 분기별 및 월별 필드를 만들었습니다. 이제 사용자는 분기별 및 월별 보기로 판매 데이터 분석을 확인하여 더 큰 분석도 볼 수 있습니다.

PivotChart를 사용하여 차트 양식으로 데이터 표시

Wijmo의 Angular 피벗 테이블인 PivotGrid와 함께 Wijmo는 PivotPanel 및 PivotGrid와 협력하도록 PivotChart 컨트롤도 제공합니다. PivotGrid와 같이 PivotChart는 PivotPanel의 영역에서 변경 사항을 반영하도록 자동으로 업데이트됩니다.

PivotChart 추가는 PivotGrid 및 PivotPanel 추가와 같이 간단합니다. app.component.html 파일을 열고 다음과 같이 수정합니다.

<div class="flextable">
  <wj-pivot-panel [itemsSource]="ng"></wj-pivot-panel>
  <wj-pivot-grid #pivotGrid [itemsSource]="ng"></wj-pivot-grid>
</div>
<wj-pivot-chart #pivotChart [itemsSource]="ng" [showTitle]=true [showLegend]="'Auto'"></wj-pivot-chart>

다 끝났습니다! PivotChart의 itemsSource로 PivotEngine을 전달합니다. 이제 응용 프로그램을 저장하여 다시 로드하는 경우, Value 영역에 필드를 추가하는 경우 PivotChart에 반영된 모습을 볼 수 있습니다. 

아래 이미지를 살펴보십시오. 

보시다시피 행 필드로 Quarter 및 Platform 필드를 설정한 다음 값 필드로 Sales 및 Downloads 필드를 설정했습니다. 그러면 PivotChart는 PivotGrid의 방식과 유사하게 PivotPanel 내부에서 선택한 데이터의 분석을 표시합니다.

결론

이 튜토리얼에서는 Angular 피벗 테이블 사용의 몇 가지 혜택과 Wijmo를 사용하여 데이터를 관리하도록 자체 피벗 테이블, 피벗 차트 및 피벗 패널을 구현하는 방법에 대해 검토했습니다.