판매 중심 웹 응용 프로그램에서 판매 실적 및 주요 메트릭에 대한 실시간 정보를 제공하려면 사용자가 데이터와 상호 작용하고 데이터를 조작할 수 있는 기능이 중요합니다.

이 대시보드는 영업팀에 데이터 중심 의사 결정을 내리고, 추세를 모니터링하고, 개선 영역을 식별할 수 있는 기능을 제공합니다.

ActiveReportsJS를 통해 JavaScript 보고서 디자이너를 사용하여 고유한 대화형 판매 대시보드를 손쉽게 빌드하고, 사용자에게 대시보드를 다양한 파일 서식으로 내보내는 기능을 제공할 수 있습니다.

이 문서에서는 ActiveReportsJS의 대화형 필터링 기능을 활용하여 JavaScript 응용 프로그램용 고유한 대화형 판매 대시보드를 만드는 방법을 설명합니다. 이 문서에서는 다음과 같은 주제를 다룹니다.

• 데이터 소스 및 매개 변수 바인딩

• 표 및 차트 컨트롤 추가

• 대화형 필터 만들기

• JavaScript 앱에서 대시보드 로드 및 내보내기

완성된 보고서 및 응용 프로그램을 확인하려면 여기에서 찾아보십시오.

• 샘플 보고서 실행하기

데이터 소스 및 매개 변수 바인딩

가장 먼저 데이터 소스를 보고서에 바인딩하여 사용할 데이터의 집합을 만들어야 합니다.

포함된 JSON을 보고서에 사용합니다.

이 JSON은 SalesByContinentChannelCategoryYearStore.json 파일의 리포지토리에서 찾을 수 있습니다.

사용되는 데이터의 예를 보여주기 위해 아래에 코드 조각을 포함했습니다.

{
  "ContinentName": "Asia",
  "ChannelName": "Store",
  "StoreName": "Contoso Canberra Store",
  "CalendarYear": 2008,
  "ProductCategoryName": "Computers",
  "TotalCost": 1462542.42,
  "SalesAmount": 3377157.91
},

보고서에 데이터 소스 개체를 만들려면 오른쪽 상단의 데이터 패널로 이동하여 DataSource 옆의 추가 버튼을 클릭합니다.

그런 다음 데이터 소스 생성 마법사가 표시되면 데이터 공급자 드롭다운에서 "포함된 JSON"을 선택하고 JSON 파일을 선택합니다.

변경 사항 저장을 클릭하면 DataSource 패널에 데이터 소스가 표시됩니다.

다음으로 데이터 소스 옆의 작은 더하기 버튼을 클릭합니다. 이렇게 하면 이 데이터 소스에서 데이터 집합을 만들 수 있습니다.

여기에서 볼 수 있듯이 설정할 사항이 많지 않습니다. 데이터 집합을 만들려면 JSON 경로만 정의하면 됩니다.

이 경우 데이터 소스의 모든 JSON을 사용하려고 하므로 경로를 $.*로 설정합니다. 이렇게 설정한 후 유효성 검사를 클릭할 수 있으며, 모든 것이 올바로 설정되면 오류가 발생하지 않습니다.

 그런 다음 변경 사항 저장 버튼을 클릭하여 데이터 집합 만들기를 완료할 수 있습니다.

이 섹션에서 마지막으로 할 일은 매개 변수 두 개를 만드는 것입니다.

 ActiveReportsJS에서는 매개 변수를 사용하여 프로그래밍 방식으로 또는 보고서와의 사용자 상호 작용을 통해 더 동적인 보고서를 만들 수 있습니다.

생성된 데이터 집합 아래 매개 변수라고 하는 다른 섹션이 있습니다. 추가 버튼을 클릭하여 매개 변수 생성 패널을 엽니다.

여기에는 많은 입력이 있지만 그중 몇 가지 항목에만 초점을 맞추면 됩니다.

보시다시피 속성의 이름과 데이터 유형을 설정했습니다. 이름을 보고서의 매개 변수를 참조하는 데 사용되며, 데이터 유형은 설명이 따로 필요하지 않습니다.

또한 두 개의 다른 속성, 숨김과 값도 설정합니다.

'숨김'은 기본적으로 이 매개 변수가 매개 변수 선택 창에 표시되지 않는다는 것을 의미하며, 여기서는 보고서를 직접 사용하여 매개 변수를 설정하므로 그래도 괜찮습니다.

값, 이 경우 숫자 값도 설정합니다.

이 값은 이 매개 변수의 기본값으로 사용되지만 사용자가 나중에 변경할 수 있습니다.

이제 두 번째 매개 변수를 추가합니다.

보시다시피 이 매개 변수는 마지막 매개 변수와 유사하게 설정되었지만 두 가지 주요한 차이가 있습니다.

첫째, 다중 값 속성을 true로 설정하여 사용자가 매개 변수에 의해 제공된 값에서 여러 값을 선택할 수 있도록 했습니다.

둘째, 세 개의 항목을 값에 추가했습니다. 이 매개 변수는 기본적으로 다중 값 매개 변수이므로, 보고서 대시보드가 로드될 때 선택된 모든 옵션을 사용하려고 합니다.

이제 데이터와 매개 변수를 제대로 설정했으므로, 보고서에 표와 차트를 몇 개 추가할 수 있습니다.

표 및 차트 컨트롤 추가

이제 데이터 연결과 매개 변수가 있으므로, 보고서에 컨트롤을 몇 개 추가해야 합니다.

먼저 헤더가 있는 기본적인 가로 보고서를 만들었습니다.

첫 번째로 차트 집합 컨트롤을 추가합니다. 이렇게 하려면 컨트롤 도구 상자의 차트 컨트롤을 보고서 영역으로 끕니다. 이렇게 하면 차트 생성 마법사가 표시됩니다.

다음을 누르기 전에 선택된 데이터 집합이 AnnualSummaries이고 선택된 차트 유형이 막대인지 확인합니다.

이렇게 하면 데이터 집합의 데이터를 차트에 바인딩할 수 있는 창이 열립니다. 다음과 같이 필드를 설정합니다.

마지막으로, 최종 창에서 팔레트를 측면으로 설정합니다. 보고서에 차트가 있지만, 이 차트의 스타일을 지정하기 위해 몇 가지 일을 더 해야 합니다.

차트를 선택하고 필터 속성 옆의 추가 버튼을 클릭합니다. 각 매개 변수에 대한 필터를 추가합니다.

이렇게 하면 사용자가 보고서와 상호 작용할 때 차트를 업데이트할 수 있습니다.

이제 차트에 몇 가지 선택적 서식 옵션을 추가합니다. 아래와 같은 차트 영역과 속성이 수정되었습니다.

완료 후 보고서 미리 보기를 하면 차트가 다음과 같이 표시됩니다.

두 번째 차트에도 같은 일을 합니다. 단 ChannelName을 데이터 범주 필드로 사용하는 대신 ProductCategoryName을 사용합니다.

또한 첫 번째 차트를 설정할 때 추가한 것과 동일한 필터를 추가하고 한 가지만 빼고 첫 번째 차트와 동일한 속성을 수정했습니다. MediumTurquoise를 배경색으로 사용하는 대신 Gold를 사용합니다.

보고서 미리 보기를 하면 다음과 같이 표시됩니다.

이제 표 컨트롤을 추가할 수 있습니다.

첫 번째 컨트롤은 차트 위에 추가되므로, 표 도구 상자에서 표 컨트롤을 끌어서 보고서 영역에 놓습니다.

이렇게 하면 표 템플릿이 생성됩니다. 이 템플릿을 필요에 맞게 수정합니다.  

첫째, 표의 아래쪽 행 두 개를 삭제한 다음 두 번째 헤더 행을 추가합니다.

헤더 행을 사용하여 데이터를 표시합니다.

이제 첫 번째 행의 속성을 다음과 같이 채웁니다.

그런 다음 두 번째 행에서 다음 값/속성을 셀에 추가합니다.

이제 보고서 미리 보기를 하면 완성된 표가 표시됩니다.

다음으로 매출 기준 상위 10개의 매장을 표시할 표를 만들고 다른 표를 "채널별 판매" 차트 아래 보고서 영역으로 끕니다. 

이 차트의 경우, 푸터 행을 다시 한번 삭제하지만 표의 두 번째 행은 삭제하지 않습니다.

이제 첫 번째 행의 셀을 하나의 셀로 병합합니다.

또한 첫 번째 행 아래 다른 행을 추가해야 합니다. 이 표의 경우, 두 개의 헤더 행을 사용합니다.

이제 표가 있으므로 표를 다음과 같이 설정할 수 있습니다.

그룹 필터의 경우, 셀 하나를 선택하고 표 옆의 팝업에 표시되는 <세부 정보 그룹> 텍스트를 클릭합니다.

이렇게 하면 속성 패널에 세부 정보 속성이 표시됩니다.

아래 내용과 일치하도록 속성을 조정합니다.

최종적으로 추가하는 표는 실제로 피벗 테이블이라고도 하는 Tablix 컨트롤이 됩니다.

컨트롤 도구 상자에서 컨트롤 하나를 보고서 영역으로 끕니다. Tablix 마법사가 열립니다.

Tablix 마법사를 사용하면 Tablix에 데이터 및 필터, 집계와 같은 변경 사항을 추가할 수 있습니다. Tablix의 경우 위의 내용과 일치하는지 확인합니다. 

이전 컨트롤과 마찬가지로, CalendarYear 및 ContinentName을 필터 값으로 사용하는 동일한 필터를 추가합니다.

또한, 매출 합계를 보여주는 셀의 경우 서식을 $#,##0,,M으로 설정합니다.

마지막으로, Tablix 컨트롤 위에 "범주 및 위치별 판매"라고 하는 텍스트 상자를 놓습니다.

완료 후에는 보고서 미리 보기에서 새 표가 작동하는 모습을 확인할 수 있습니다.

대화형 필터 만들기

이제 보고서에 모든 핵심 컨트롤과 데이터를 포함했으므로, 사용자가 보고서와 상호 작용할 수 있는 컨트롤 몇 개를 추가합니다.

이렇게 하기 위해, 페이지의 상단에 있는 표 컨트롤 두 개를 헤더에 사용합니다. 하지만, 이 표의 셀 하나만 필요합니다. 각 표의 첫 번째와 세 번째 행 및 첫 번째와 세 번째 열을 삭제합니다.

이제 표를 만들었으므로, 데이터를 추가하고 몇 가지 속성을 설정합니다.

첫 번째 표는 대륙의 필터로 사용됩니다.

두 번째 표는 연도의 필터로 사용됩니다.

JavaScript 앱에서 대시보드 로드 및 내보내기

이제 대시보드 보고서가 완성되었으므로 사용자가 대시보드를 보고, 편집하고, 내보낼 수 있도록 보고서를 JavaScript 응용 프로그램에 로드합니다.

ActiveReportsJS JavaScript 보고서 뷰어는 예상보다 쉽게 응용 프로그램에 통합할 수 있습니다. 파일 참조의 경우 ARJS CDN을 사용하여 참조합니다.

HTML 파일의 헤더 태그 내에서 다음과 같은 참조를 추가합니다.

<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" />
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

핵심 ARJS JavaScript 파일, CSS 파일, 사용자가 보고서를 내보낼 수 있도록 허용하는 파일 등 모든 파일이 사용됩니다.

이제 스타일 태그 내에 다음 CSS를 추가합니다.

#viewer-host {
  width: 100%;
  height: 100vh;
}

이제 div를 CSS에서 참조한 뷰어-호스트 ID와 함께 추가합니다.

<div id="viewer-host"></div>

마지막으로, 뷰어와 보고서를 로드하는 JavaScript를 추가합니다.

var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("InteractiveDashboard.rdlx-json");

이제 rdlx-json 파일을 배치한 위치가 궁금할 수도 있습니다. 이 문서의 목적상 이 파일은 index.html 파일과 동일한 폴더에 배치하지만, 원하는 위치 어디에나 배치할 수 있습니다. 보고서 경로가 올바른지만 확인하면 됩니다.

이제 이를 실행하기 위해 Visual Studio Code용 Live Server 플러그인을 사용합니다.

이 파일을 위해 라이브 서버를 실행하면 브라우저에 다음과 같이 표시됩니다.

결론

그리고 이와 함께 끝이 납니다. 보시다시피, ActiveReportsJS를 사용하면 사용자를 위해 쉽게 대화형 대시보드를 만들고, 사용자에게 대시보드를 내보내는 기능을 제공할 수 있습니다.

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

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