오늘날에는 비즈니스를 하려면 어디서든지 주문, 인벤토리 및 재무 데이터에 액세스할 수 있어야 합니다. 이러한 액세스를 지원하기 위해 온스크린 보고서가 유연하고 대화형일 뿐만 아니라 다양한 화면 해상도에서 사용 가능해야 합니다.

ActiveReportsJS에서는 어떤 브라우저, 데스크탑 및 모바일 장치에서든 작동하는 대화형 보고 기능을 사용하여 응답형 웹 응용 프로그램을 빌드할 수 있습니다.

이 문서에서는 Node.js 및 ActiveReportsJS에서 주문 추적 보고서를 위한 응답형 앱을 빌드하는 방법을 보여드리겠습니다. 이 앱을 사용하면 월별 주문량 표 또는 차트부터 개별 주문 및 제품 세부 정보까지 파악할 수 있습니다.

웹 기반 판매 보고서 빌드

판매 보고서를 빌드하기 위해 ACME Inc.라는 고객과 계약했다고 가정하겠습니다. 고객의 요청은 실제 보고서 모양의 첨부 자료와 함께 제공되며, 다음과 같은 모양입니다.

GrapeCity는 위와 같은 엔터프라이즈 레벨 보고서를 만들기 위해 ActiveReportsJS 디자이너를 제공합니다. 이것은 데이터를 가져오고 테이블, 막대형 차트, 원형 차트 등 여러 시각적 요소 유형을 사용하여 렌더링하도록 보고서를 구성하는 데 도움이 되는 직관적인 도구입니다.

ActiveReportsJS 디자이너는 보고서 정의를 특수 JSON 형식으로 저장하고 확장자가 .rdlx-json인 파일에 저장합니다.

Windows, macOS 또는 Linux 설치 프로그램을 사용하여 ActiveReportsJS를 설치하십시오.

보고서 제목 디자인

새 보고서를 만들려면 디자이너에서 파일 메뉴를 엽니다. RDL 옵션(데이터 기반 보고서의 표준 언어)을 선택한 다음 새 보고서를 MonthlyOrders.rdlx-json이라는 이름으로 저장합니다.

보고서 제목은 로고 이미지와 레이블이 포함된 컨테이너로 구성됩니다. 왼쪽에 있는 컨트롤 도구 상자를 확인하십시오.

도구 박스에서 보고서 컨트롤을 끌어와 보고서 캔버스 위에 놓을 수 있습니다.

이미지와 머리글이 포함된 제목을 만들려면 이러한 컨트롤을 유지하기 위한 컨테이너가 필요합니다. 컨테이너는 함께 이동하고자 하는 컨트롤을 그룹화하는 데 특히 유용합니다.

컨테이너 컨트롤을 끌어와 보고서 상단에 놓습니다.

이미지 컨트롤을 끌어와 컨테이너 위에 놓습니다. 이미지는 URL 또는 데이터베이스와 같은 외부 소스에서 가져오거나 포함할 수도 있습니다.

제목 텍스트를 표시할 컨테이너에 텍스트 상자를 추가합니다. 어울리는 제목 글꼴, 크기 및 색으로 사용자 정의합니다.

제목은 다음과 같은 모습이 됩니다.

도구 모음에서 탐색기 아이콘을 클릭합니다.

컨트롤 트리가 열리면 보고서 노드를 선택합니다. 오른쪽에서 속성 패널이 열립니다. 속성 탭에서 보고서 여백 크기를 1cm로 변경합니다.

보고서 제목을 만듭니다.

Container  
  Background Color: #f1f1f1  
  Items:  
      Image  
          Source: #551e5f  
          #551e5f: FitProportional  
      Textbox  
          Value: "Monthly Orders"

탐색기를 사용하여 컨트롤을 선택하거나 해당 속성을 볼 수 있습니다.

Node.js에서 데이터 액세스 정의

ActiveReportsJS 디자이너는 데이터 소스 및 데이터 집합 등 두 가지 엔터티 유형을 통해 데이터를 관리합니다.

데이터 소스는 URI나 JSON 파일과 같은 외부 데이터 저장소 또는 보고서에 포함할 수 있는 JSON 문서와의 연결 지점 역할을 합니다.

데이터 집합은 데이터 소스에서 데이터를 가져와 보고서 데이터 모델의 필드에 바인딩하는 중간 요소입니다. 소스 데이터 변환을 위한 식을 사용하는 계산 필드를 정의할 수도 있습니다. 그러면 보고서 구성 요소에서 데이터 집합 필드를 사용할 수 있습니다.

보고서는 HTTP 서비스에 위치한 외부 API를 통해 데이터에 액세스하여 결과를 JSON 형식으로 반환합니다. 보고서는 해당 서비스의 “실시간” 데이터를 기반으로 다양한 주문 정보를 보여줍니다.

보고서에서 고객 데이터에 대한 액세스를 정의하려면 데이터 소스 탭을 선택하는 것으로 시작합니다.

탭에서 추가를 클릭합니다.

새 데이터 소스 대화 상자가 열리면 이름 필드에 “고객”이라고 입력합니다.

고객 데이터 소스를 정의하려면 콘텐츠 URI 필드에서 고객 컬렉션을 JSON 형식으로 반환하는 HTTP Rest 서비스 엔드포인트의 URI를 입력합니다.

https://[some-api-service]/Customers

참고: 이 데이터 소스는 연결 구성일 뿐이며, 아직 아무 요청도 없는 상태입니다. 

더하기 기호를 클릭하고 고객 데이터 소스 연결을 사용하여 새 데이터 집합을 추가합니다.

데이터 집합 편집 대화 상자가 열립니다. 새 데이터 집합의 이름을 “고객”이라고 정합니다.

읽을 쿼리 필드 값을 수정합니다.

$.[*]

이 필드는 앞에서 정의한 URI에서 수신되는 JSON 형식의 데이터로부터 보고서 필드를 추론하는 데 필요한 JsonPath 식입니다.

유효성 검사 버튼을 클릭하고 바인딩 필드 섹션을 확장하여 데이터 집합에서 생성된 보고서 필드를 확인합니다.

이러한 필드는 데이터 소스의 JSON 결과에서 자동으로 생성된 것입니다.

이제 새 제품 데이터 소스 및 해당 데이터 집합을 만듭니다. 위의 고객 데이터 집합에 대해 설명한 프로세스를 사용하십시오. 콘텐츠 URI 필드에서 예를 들어 제품 컬렉션을 반환하는 엔드포인트의 URI를 입력합니다.

https://[some-api-service]/Products

다음 필드 값과 함께 위의 프로세스를 사용하여 주문 데이터 소스 및 해당 데이터 집합을 생성합니다.

콘텐츠 URI의 경우에는 주문 컬렉션을 해당 주문 항목과 함께 반환하는 HTTP Rest 서비스 엔드포인트의 URL을 사용합니다.

https://[some-api-service]/Orders

쿼리의 경우에는 다음을 사용합니다.

$.value[*]

계산 필드 사용 

하나 이상의 소스 필드를 보고서에 사용할 새로운 계산 필드로 변환해야 하는 경우가 있습니다. ActiveReportsJS는 이 요구를 충족하기 위해 풍부한 기능 집합이 기본 제공되는 식 언어를 제공합니다.

이 예시에서는 orderDate 필드를 “월/년” 형식으로 변환해 보겠습니다. 이 작업을 위해서는 사용자 정의 필드를 자동 바운딩 필드 목록에 추가해야 합니다.

계산 필드 섹션을 확장합니다.

MonthYear 필드를 추가합니다.

MonthYear 필드의 값으로 다음 수식을 입력합니다.

=DateTime.Parse(Fields!orderDate.Value).ToString("MM/yyyy")

기존의 주문 데이터 소스를 기반으로 새 OrderDetails 데이터 집합을 만들되, 쿼리 필드 값은 다음과 같습니다.

$.value.[*].orderDetails[*]

OrderDetails 데이터 집합에는 항목당 총액 필드가 포함되지 않습니다. 이 값은 보고서에서 두 번 이상 필요할 가능성이 큽니다. 따라서 필요할 때마다 이 값을 계산하거나 새로운 계산 필드를 만들어야 합니다. 후자의 옵션이 훨씬 효율적입니다.

계산 필드 섹션을 확장합니다.

부분합 필드를 추가합니다.

부분합 필드의 값으로 다음 수식을 입력합니다.

=Round(100 * (Fields!unitPrice.Value - (Fields!unitPrice.Value*Fields!discount.Value))*Fields!quantity.Value) / 100.0

차트 추가

검색한 판매 데이터를 사용자에게 그래픽으로 제공하려면:

보고서 상단의 제목 바로 아래에 차트 컨트롤을 추가합니다.

OrderDetails 데이터 집합에서 가져온 데이터를 사용하려면 차트를 수정합니다. 차트를 삽입하면 구성하기 쉬운 요소로 이루어진 트리 모양으로 탐색기 탭에 나타납니다.

다음과 같이 차트 속성을 정의합니다.

OrderDetails 데이터가 포함된 차트를 표시하려면 미리 보기를 클릭합니다.

테이블 추가

월별 주문량을 차트뿐 아니라 표 형식의 보기로도 만들어 보겠습니다. 차트 바로 아래에 새 테이블을 배치하겠습니다.

기본적으로 새 테이블은 3개의 열과 3개의 행으로 만들어집니다. 테이블 크기 변경, 행과 열 추가 또는 제거, 여러 개의 머리글, 바닥글 행 등을 정의할 수 있는 도구가 있습니다.

이제 다음과 같이 테이블을 구성합니다.

그런 다음 세부 정보 행의 셀을 병합합니다.

병합한 셀 텍스트 상자의 이름을 txtMonth로 지정하고 그 값을 =MonthName(Month(Fields!orderDate.Value)) & “/” & Year(Fields!orderDate.Value) 식에 설정합니다.

마지막으로 테이블 그룹을 정의해야 합니다.

=Year(Fields!orderDate.Value) 수식으로 그룹의 첫 번째 레벨을 설정하고 =Month(Fields!orderDate.Value)를 보조 레벨로 설정합니다.

새 테이블은 데이터의 첫 번째 레벨을 표 형식의 섹션으로 표시합니다.

다른 데이터 레벨을 추가하려면 tableMonths를 수정하고 새 세부 정보 행을 추가합니다.

새로 생성된 행의 높이를 늘린 다음 행 안에 tableOrders라는 테이블을 새로 만듭니다.

다음과 같이 새 테이블을 구성합니다.

그런 다음 필요하지 않은 머리글과 바닥글 행을 제거합니다.

다음으로 세부 정보 행의 1, 2, 3 셀을 병합하고 병합된 셀 값을 ="Order ID: " & [orderId] 식에 설정합니다.

미리 보기를 클릭하여 결과를 봅니다.

tableOrders는 보고서의 두 번째 레벨에 있으며, 특정 월에 이루어진 주문의 세부 정보를 표시합니다.

추가 세부 정보

주문 합계를 표시합니다. 각 주문의 합계를 표시하려면 tableOrders 안에 tableOrderTotal이라는 테이블을 새로 만듭니다.

현재 tableOrders 행 아래에 세부 정보 행을 새로 만들고 거기에 새 테이블을 삽입합니다.

다음과 같이 새 테이블을 구성합니다.

그런 다음 세부 정보 행의 가운데 셀과 오른쪽 셀만 병합합니다. 왼쪽 셀 수식을 “Total:”로 정의합니다. 병합된 셀 정렬을 왼쪽으로 지정하고 해당 형식을 통화로 지정합니다. 그런 다음 병합된 셀 수식을 =SUM(Fields!Subtotal.Value)으로 정의합니다.

이제 탐색기에서 tableOrderTotal 테이블을 선택하고 필터 속성을 확장합니다.

항목 추가를 클릭하고 다음 필드가 포함된 새 필터 기준을 추가합니다.

1. 필터 식: “=Fields!orderId.Value”

2. 연산자: “Equal”

3. 값: “=Fields!orderId.Value”

알다시피 새 tableOrderTotals 테이블은 OrderDetails 데이터 집합을 기반으로 합니다. 총액은 주문 세부 정보를 tableOrder 행 기준으로 필터링하고 부분합 필드 값을 모두 더해 얻은 값입니다.

미리 보기를 클릭하고 결과를 확인합니다.

마지막으로 주문 항목을 나타내는 테이블을 만들어 보겠습니다.

tableOrders에 세부 정보 행을 새로 만든 다음 행 안에 tableOrderDetails 테이블을 만듭니다. 다음과 같이 테이블을 구성합니다.

이 테이블에는 6개의 열이 생깁니다. 새 열을 추가한 후 다음과 같이 머리글 행 레이블을 정의합니다.

1. "Item"

2. "Qty"

3. "Unit Price"

4. "Discount"

5. "Discounted Price"

6. "Total Price"

행 세부 정보의 경우에는 주문 항목을 표시하도록 셀 수식을 구성합니다.

1. 셀 1 수식: "=Lookup([productId], [productId], [productName], "Products")"

2. 셀 2 수식: "=[quantity]"

3. 셀 3 수식: "=[unitPrice]"

4. 셀 4 수식: "=[discount]"

5. 셀 5 수식: "=[unitPrice] - ([unitPrice]*[discount])"

6. 셀 6 수식: "=[Subtotal]"

이제 주문 요약을 나타내도록 바닥글 행을 구성합니다. 오른쪽 끝의 두 셀을 병합한 후 다음과 같이 수식을 정의합니다.

1. 셀 1 수식: "TOTAL INVOICE VALUE:"

2. 셀 2 수식: "=SUM(([unitPrice] - ([unitPrice][discount]))[quantity])"

마지막으로 OrderDetails 테이블과 Orders 테이블에서 온 데이터의 관계를 생성해야 합니다. 탐색기에서 tableOrderDetails 테이블을 선택하고 필터 속성을 확장합니다.

항목 추가를 클릭하고 다음 필드가 포함된 새 필터 기준을 추가합니다.

1. 필터 식: "=Fields!orderId.Value"

2. 연산자: “Equal”

3. 값: "=Fields!orderId.Value"

미리 보기를 클릭하여 결과를 봅니다.

드릴다운

이제 사용자가 확장하기 전까지 tableOrders 및 tableOrderDetails를 축소된 상태로 유지할 드릴다운 기능을 추가해 보겠습니다.

다음 레이블의 이름을 변경합니다.

tableOrders를 선택하고 숨겨짐 및 토글 항목 속성을 다음과 같이 변경합니다.

tableOrderDetails를 선택하고 역시 축소 가능하게 만듭니다.

이제 “+/-” 기호를 클릭하여 세부 정보 레벨을 확장/축소할 수 있습니다.

먼저 월을 확장할 수 있습니다.

그런 다음 주문을 확장할 수 있습니다.

다음으로 주문 정보에 세부 정보를 더 추가해 보겠습니다.

기존 머리글 행 위에 새로 4개의 행을 추가한 다음 새 셀에 다음 수식을 입력합니다.

1. 연락처 이름: "=Lookup([customerId], [customerID], [contactName], "Customers").ToUpper()"

2. 주문 날짜: "=DateTime.Parse(Fields!orderDate.Value).ToString("MM/dd/yyyy")"

여러 위치에서 Lookup 함수를 사용한 것을 알 수 있습니다. Excel 스프레드시트의 Lookup과 마찬가지로, 이 함수는 두 필드의 관계를 기반으로 한 데이터 집합에서 다른 데이터 집합까지 탐색하는 간단한 쿼리를 만들 수 있도록 하며 그런 다음 세 번째 필드의 값을 가져옵니다.

tableOrderDetails의 머리글 행 안에서 셀을 선택하고 머리글 위에 새로 4개의 행을 삽입합니다.

고객 이름 및 주문 날짜를 포함하는 2개 필드를 새로 만듭니다. 고객 이름의 경우에는 Lookup 함수를 두 번 사용하여 Orders 데이터 집합을 스프링보드로 사용하면서 OrderDetails에서 Customer 데이터 집합까지 탐색할 것입니다.

1. 고객: "=Lookup(Lookup(Fields!orderId.Value, Fields!orderId.Value, Fields!customerId.Value, "Orders"), Fields!customerId.Value, Fields!companyName.Value, "Customers")"

주문 날짜의 경우에는 OrderDetails 데이터 집합에서 Orders 데이터 집합까지 탐색할 것입니다.

1. 주문 날짜: "=DateTime.Parse(Lookup(Fields!orderId.Value, Fields!orderId.Value, Fields!orderDate.Value, "Orders")).ToString("dd/MM/yyyy")"

고객 이름 및 주문 날짜를 보려면 미리 보기를 클릭합니다.

열 정렬

마지막으로 주문 세부 정보 열을 정렬 가능하도록 만들어 보겠습니다.

각 머리글 셀을 선택하고 사용자 정렬 섹션 아래의 정렬 식 필드를 다음 수식으로 채웁니다.

미리 보기를 클릭하고 주문 항목을 수량 기준으로 정렬합니다.

주문 항목을 총액 기준으로 정렬합니다.

호스트 및 NodeJS 앱 만들기

보고서를 정의했으면 응답형 웹 디스플레이를 만들 수 있습니다. 이것은 데스크탑과 모바일 장치에서 모두 보기 좋은 디스플레이입니다. ActiveReportsJS는 기본적으로 이 기능을 제공합니다.

샘플 응용 프로그램은 JavaScript 런타임 환경인 Node.JS를 사용하여 서버 측에서 웹 앱을 실행합니다.

ActiveReportsJS 뷰어 구성 요소를 사용하는 템플릿 엔진인 PureJS에서 웹 응용 프로그램을 만드는 데 필요한 단계를 수행합니다.

응용 프로그램용 OrdersReport 폴더를 새로 만듭니다.

명령 프롬프트에서 다음 행을 입력하여 Node.JS Express 패키지를 설치합니다.

npm install express

웹 응용 프로그램의 클라이언트 측에서 월별 판매 보고서를 보고 포함하는 데 필요한 ActiveReportsJS 모듈을 설치하려면 다음 명령을 입력합니다.

npm install @grapecity/activereports

다음 콘텐츠로 index.html 파일을 만듭니다.

<html>
<head>
  <meta charset="utf-8" />
  <title>ActiveReportsJS Viewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
​
  <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
  <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ie-polyfills.js"></script> <!--to run in IE-->
  <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
  <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
</head>
<body onload="load()">
  <div id="ARJSviewerDiv" style="height: 600px"></div>
  <script>
      function load() {
          const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
          viewer.open('MonthlyOrders.rdlx-json');
      }
  </script>
</body>
</html>

위 코드는 ActiveReportsJS 뷰어를 사용하여 클라이언트 측 웹 페이지에 보고서를 표시합니다. 

다음 콘텐츠가 포함된 server.js 파일을 추가하여 웹 서버 로직을 만듭니다.

const express = require('express'); //import Express.js module  
const app = express();  
const path = require('path');  
app.use(express.static(path.join(__dirname)));  
app.listen(8085);

Node.js 앱 실행

클라이언트 측 JavaScript 코드에 ActiveReportsJS 뷰어를 포함했으면 웹 앱을 실행하여 해당 기능의 일부가 작동하는 것을 볼 수 있습니다.

node .\server.js

데스크탑 브라우저에서 http://localhost:8085로 이동합니다.

응용 프로그램이 index.html 홈 페이지에 포함된 ActiveReportsJS 뷰어와 함께 실행되기 시작합니다.

상단에 있는 막대형 차트에는 월별 주문량이 표시됩니다.

차트 보고는 최대값과 최소값을 강조하고 범주 또는 기간에 따른 트렌드의 시각적 단서를 제공함으로써 대용량 데이터를 사용자가 즉시 이해할 수 있는 시각적 맵으로 전환하는 데 특히 유용합니다.

보고서에는 마우스를 놓으면 막대에 해당하는 데이터가 표시되는 도구 설명이 있습니다.

보고서의 일부 요소에 구성한 가시성 및 토글 항목 속성을 기억하고 있나요? 이 속성은 보고서의 여러 데이터 레벨에 대해 드릴다운을 수행할 때 유용합니다.

사용자는 앱의 드릴다운 기능을 사용하여 월부터 그 달의 주문 그리고 해당 주문 내의 항목까지 탐색할 수 있습니다. 또한 보고서를 디자인하면서 구성한 정렬 수식에 따라 열을 정렬할 수 있습니다. 드릴다운 및 정렬은 ActiveReportsJS의 대화형 기능입니다.

ActiveReportsJS 뷰어 구성 요소는 응답형이므로 다양한 장치의 여러 화면 크기에 맞게 적절히 렌더링됩니다. 웹 브라우저에서 사용할 수 있는 개발자 도구로 다양한 모바일 장치, 화면 크기, 페이지 방향 등을 빠르게 에뮬레이트할 수 있습니다.

Chrome 및 Safari 브라우저에서 사용할 수 있는 데스크탑 및 모바일 에뮬레이터에서 동일한 보고서 페이지의 여러 뷰를 비교해 보십시오.

월별 판매 보고서 만들기

이 문서에서는 GrapeCity의 ActiveReportsJS 디자이너를 사용하여 월별 판매 보고서를 만드는 방법을 연습해 보았습니다. 월 단위로 그룹화한 판매 차트를 비롯하여 월 및 주문 ID별로 판매를 통합한 표 형식의 대화형 드릴다운 보고서를 그리기 위해 정보를 집계하는 방법을 설명했습니다.

인기 있는 웹 프레임워크와 통합되어 더 완벽하고 시각적으로 보기 좋은 보고서 디자인을 포함한 ActiveReportsJS 기능을 둘러보십시오.

이 문서에서 만든 코드로 연습을 계속하려면 리포지토리를 다운로드하거나 복제하십시오.

드릴다운 아이디어를 확장하여 새로운 데이터 레벨을 보고서에 추가하는 연습을 제안합니다.

예를 들어, 제품에서 제품 세부 정보로 드릴다운할 수 있습니다. 또한 제품 범주별 판매량을 보여주는 차트가 포함된 새 보고서 및 해당 판매가 나열된 표 형식의 제품 목록을 만들어 볼 수 있습니다.