데이터 표) 및 그리드는 현대 UI 디자인의 필수 요소가 되었습니다.

이를 통해 사용자는 대규모 데이터 집합을 쉽게 보고, 값을 비교할 수 있고, 실증적인 데이터를 기반으로 결정을 내릴 수 있습니다.

그러나 작업 중인 데이터 집합을 기준표에서 쉽게 볼 수 없는 경우, 데이터 요소 간의 상관 관계를 더 쉽게 볼 수 있도록 특정 데이터를 제외하려는 경우가 존재할 수 있습니다.

감사하게도 소프트웨어 엔지니어와 컴퓨터 프로그래머는 피벗 테이블이라는 더 발전된 형태의 데이터 테이블을 개발했습니다.피벗 테이블은 데이터 검색과 같은 작업에서 사용자를 돕는 데이터 표입니다.

이를 통해 사용자는 로드한 데이터 집합에서 복잡한 분석 계산을 수행합니다. 또, 표시하려는 데이터를 결정하고 데이터의 방향을 결정할 수 있습니다.

이를 통해 사용자는 기존 데이터 표를 사용하는 경우 일반적으로 놓칠 수 있는 추세를 자세히 볼 수 있습니다.

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

이번 스터디에서는 Wijmo의 React 피벗 테이블인 PivotGrid를 사용해 다음과 같은 작업을 진행하고자 합니다.

• PivotEngine으로 데이터 로드

• PivotPanel 및 PivotGrid 설정

• 사용자 정의 필드 만들기

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

샘플 프로젝트를 다운로드 받아 Wijmo의 React 피벗 테이블인 PivotGrid를 사용해 보세요!

• 샘플 프로젝트 다운로드 받기

Pivot Engine으로 데이터 로드 

PivotGrid를 구현하기 전에 필요한 모든 리소스를 React 응용 프로그램에 로드해야 합니다.

가장 먼저 해야 할 일은 Wijmo UI 컴포넌트 라이브러리를 설치하는 것입니다.

NPM을 통해 수행할 것이기 때문에 React 응용 프로그램 내에 다음 명령을 실행합니다.

npm i @grapecity/wijmo.react.all

응용 프로그램에서 Wijmo 라이브러리가 설치됩니다.

설치 경로에서 react 패키지를 지정한다는 것을 눈치채셨나요? 

Wijmo는 핵심 JavaScript 라이브러리와 함께 Angular, React 및 Vue를 지원합니다.

따라서 불필요한 파일을 설치하지 않도록 react 패키지를 지정하고 있습니다.

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

App.js 파일을 열고 다음을 포함합니다.

import './App.css';
import '@grapecity/wijmo.styles/wijmo.css';
​
import * as wjOlap from '@grapecity/wijmo.olap';
import * as wjcOlap from '@grapecity/wijmo.react.olap';
​
import { useState } from 'react';
​
function App() {...}
​
export default App;

모든 관련 Wijmo 파일을 포함했습니다.

마지막으로 할 일은 PivotGrid를 채우는 데 사용할 일부 데이터를 생성하는 것입니다.

src 폴더 내에서 data.js라는 새 파일을 만들고 다음 코드를 파일에 추가합니다.

var 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' }
];

var 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' },
];

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

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

컴포넌트의 기능을 보여 줄 목적에 대한 모의 데이터일 뿐이므로 여기에 많은 시간을 할애하지 않겠습니다.

알아야 할 중요한 사항은 컴포넌트를 채우는 데 사용할 대용량 데이터 집합이 있다는 것입니다. 

이제 Wijmo의 React 피벗 테이블인 PivotGrid를 구현할 수 있습니다.

응용 프로그램의 App.js 파일을 열고 다음 코드를 추가하겠습니다.

import './App.css';
import '@grapecity/wijmo.styles/wijmo.css';
import { getOrderList } from './data';

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

import { useState } from 'react';

function App() {
  const [ng, setNG] = useState(new wjOlap.PivotEngine({
    itemsSource: getOrderList(1000)
  }));
  return (...);
}

export default App;

보시다시피 몇 줄의 코드에 불과하지만, 여기에서 무슨 일이 일어나고 있는지 설명해야 합니다.

파일에서는 PivotEngine이라는 Wijmo 컴포넌트를 초기화합니다.

PivotEngine은 데이터 관리를 처리하며 PivotEngine이 없다면 Wijmo의 PivotGrid 및 PivotPanel 컨트롤은 작동할 수 없습니다.

PivotEngine을 피벗 테이블의 기초로 생각할 수 있습니다. 이것이 없다면 테이블에는 사용자에게 표시할 데이터가 없습니다. 

Wijmo 컴포넌트 초기화와 함께 itemsSource 속성도 설정합니다. 해당 설정은 엔진에 "이게 네가 관리하려는 데이터야."라고 말해주는 것과 같은 역할을 합니다.

이 응용 프로그램의 경우 서비스에서 getOrdersList() 함수를 호출하며 이는 로드할 1,000개의 행이 있는 데이터를 반환합니다.

이제 PivotEngine에 데이터가 로드되었으므로 화면에 표시할 차례입니다.

PivotPanel 및 PivotGrid 설정  

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

이전에 Wijmo의 PivotGrid를 언급했지만, PivotPanel에 대해서는 많은 설명을 하지 않았습니다.

PivotPanel은 사용자가 표시 중인 데이터와 직접 상호 작용하는 방법입니다.

여기에는 선택한 필드의 데이터를 추가로 사용자 정의하기 위한 필드 설정 메뉴의 액세스 권한은 물론, 데이터 필드가 열, 행, 필터 및 값 필드인지를 결정하는 작업이 포함됩니다.

추가 설명 대신 PivotPanel 및 PivotGrid로 수행할 수 있는 작업을 보여 드리겠습니다.

응용 프로그램에 추가하려면 App.js 파일을 열고 다음 코드를 추가합니다.

function App() {
 const [ng, setNG] = useState(new wjOlap.PivotEngine({
   itemsSource: getOrderList(1000)
}));
 return (
   <div className="App">
     <div className='flextable'>
       <wjcOlap.PivotPanel itemsSource={ng}></wjcOlap.PivotPanel>
       <wjcOlap.PivotGrid itemsSource={ng}></wjcOlap.PivotGrid>
     </div>
   </div>
);
}

끝입니다! Wijmo의 React 피벗 테이블을 구현하기는 정말 쉽습니다.

PivotEngine과 같이 PivotGrid 및 PivotPanel은 모두 itemsSource로 공급해야 합니다.  

하지만 PivotEngine과 달리 이러한 컴포넌트는 간단한 배열을 채택하지 않으며 PivotEngine을 선택하여 사용합니다.

따라서 이전 섹션에서 설정한 ng 변수를 사용하여 모든 컴포넌트에 대한 itemsSource로 할당할 수 있습니다. 

응용 프로그램을 실행하기 전에 레이아웃을 정리하도록 약간의 스타일을 추가하고 싶습니다.

App.css 파일을 열고 다음을 추가합니다.

.App {
 margin: 30px;
}
​
.flextable {
   display: flex;
}
​
.wj-pivotpanel {
   width: 500px;
   margin: 0px 10px;
}

index.css 파일을 열고 다음 코드를 추가합니다.

.wj-pivotpanel {
 width: 500px !important;
 margin: 0px 10px !important;
}
​
.wj-pivotgrid {
 height: 600px !important;
}

PivotPanel 및 PivotGrid가 나란히 표시되도록 응용 프로그램을 설정합니다.

또한, PivotGrid에 더 많은 공간을 만들도록 PivotPanel의 너비를 설정해 보겠습니다.

이제 응용 프로그램을 실행하면 다음과 같이 표시됩니다.

예상대로 PivotGrid에 아무것도 로드되지 않았습니다.

PivotPanel에 일부 필드를 설정하지 않는 한 어떤 것도 표시되지 않습니다.

이를 수정하고 몇 개의 필드를 추가해 보겠습니다. 

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

계속하기 전에 논의해야 할 마지막 사항은 바로 필드 설정 메뉴입니다.

이 메뉴는 PivotGrid에 있는 셀을 마우스 오른쪽 버튼으로 클릭하거나 PivotPanel에서 필드 이름을 마우스 오른쪽 버튼으로 클릭하여 액세스할 수 있습니다.

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

여기에서는 데이터 요약 방법을 변경하고, 계산을 추가합니다. (예: 이전 행에서 % 차이)

또한 필터를 추가하고, 선택한 형식을 기반으로 한 미리 보기가 포함된 데이터 표시 방법을 포맷할 수 있습니다.

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

보시는 바와 같이 업데이트된 형식의 미리 보기도 보여 줍니다.

확인 버튼을 클릭하면 다음이 표시되어야 합니다.

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

사용자 정의 필드 만들기 

PivotPanel 및 PivotGrid를 구현하고 사용의 기본 사항을 검토했으니 PivotEngine을 사용하여 데이터를 사용자 정의할 시간입니다.

자동으로 생성할 수 있도록 허용하는 대신 PivotEngine을 통해 수동으로 속성을 설정하여 작업을 수행할 수 있습니다.

App.js 파일을 열고 다음을 추가합니다.

function App() {
  const [ng, setNG] = useState(new wjOlap.PivotEngine({
    itemsSource: getOrderList(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' },
    ]
  }));
  return (
    <div className="App">
      <div className='flextable'>
        <wjcOlap.PivotPanel itemsSource={ng}></wjcOlap.PivotPanel>
        <wjcOlap.PivotGrid itemsSource={ng}></wjcOlap.PivotGrid>
      </div>
    </div>
  );
}

fields 속성은 개체의 배열을 사용하여 사용자가 PivotPanel에서 선택할 수 있는 다양한 필드를 만드는 데 사용됩니다.

기본적으로 이러한 개체에는 두 개의 속성인 바인딩 및 헤더 속성만 있어야 합니다.

바인딩 속성은 엔진에 이 필드가 바인딩 되는 속성 이름을 알려줍니다.

 Agent(에이전트), Region(지역), Platform(플랫폼) 및 Product(제품)의 경우 설정하는 유일한 속성입니다.  

그러나 우리가 설정할 수 있는 또 다른 속성이 있습니다. 이는 바로 형식 속성입니다.

사용자가 필드 설정 메뉴를 사용하여 형식을 변경하는 방법과 마찬가지로 개발자는 필드를 표시하려는 기본 형식을 설정할 수 있습니다.

형식 설정과 함께 실제로 동일한 데이터 요소에서 여러 필드를 생성하고 양쪽 모두에 대해 다른 형식을 지정할 수 있습니다.

이 응용 프로그램에서는 분기별 및 월별 날짜 필드를 설정합니다.  

이제 이를 저장하고 응용 프로그램을 열면 몇 개의 필드를 선택하고 다음을 볼 수 있습니다.

단일 데이터 요소를 사용하여 분기별 및 월별 필드를 만들었습니다.

이제 사용자는 분기별 및 월별 보기로 판매 데이터 분석을 확인하여 더 큰 분석을 볼 수 있습니다.

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

Wijmo의 React 피벗 테이블인 PivotGrid와 함께 PivotPanel 및 PivotGrid에서 작동하는 PivotChart 컨트롤도 제공합니다.

PivotGrid와 같이 PivotChart는 PivotPanel의 영역에서 변경 사항을 반영하도록 자동으로 업데이트됩니다. 

PivotChart 추가는 PivotGrid 및 PivotPanel 추가와 같이 간단합니다.

App.js 파일을 열고 다음과 같이 return() 메서드를 수정합니다.

return (
 <div className="App">
   <div className='flextable'>
     <wjcOlap.PivotPanel itemsSource={ng}></wjcOlap.PivotPanel>
     <wjcOlap.PivotGrid itemsSource={ng}></wjcOlap.PivotGrid>
   </div>
   <wjcOlap.PivotChart itemsSource={ng} showTitle={false} showLegend={'Auto'}></wjcOlap.PivotChart>
 </div>
);

다 끝났습니다! PivotChart의 itemsSource로 PivotEngine을 전달합니다.

이제 응용 프로그램을 저장하여 다시 로드하면 Value 영역에 필드를 추가하는 경우, PivotChart에 반영된 모습을 볼 수 있습니다.

아래 이미지를 살펴보세요!

행 필드로 Quarter(분기) 및 Platform(플랫폼) 필드를 설정한 다음 값 필드로 판매 및 다운로드 필드를 설정했습니다.

그러면 PivotChart는 PivotGrid의 방식과 유사하게 PivotPanel 내부에서 선택한 데이터의 분석을 표시합니다.

결론 

이번 스터디에서는 React 피벗 테이블 사용의 이점과 Wijmo를 사용하여 자체 피벗 테이블, 피벗 차트 및 피벗 패널을 구현하여 데이터를 관리하는 방법에 대해 살펴보았습니다.

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

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