Ruby on Rails에서 JavaScript 리포팅도구를 사용하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-04-20 11:29 조회 716회 댓글 0건

본문

관련링크

ActiveReportsJS는 서버 종속성이 없는 100% 클라이언트 측 리포팅 도구입니다. 즉, Ruby on Rails 응용 프로그램을 비롯하여 모든 웹 서버와 ActiveReportsJS를 함께 사용할 수 있습니다. 이 블로그에서는 Ruby on Rails 응용 프로그램과 ActiveReportsJS를 통합하는 방법에 대해 간단히 설명합니다. 아래와 같은 과정으로 진행됩니다.

JSON API를 제공하는 Ruby on Rails 응용 프로그램 만들기
JSON API의 데이터 모델 만들기
CSV 파일에서 데이터 초기화
JSON API 끝점 구성
ActiveReportsJS 보고서를 만들어 JSON API에서 데이터 시각화
정적 HTML 페이지를 만들어 보고서 뷰어에서 보고서 표시

필수 컴포넌트

다음 콘텐츠는 컴퓨터에 Ruby on Rails가 설치되어 있다고 가정합니다. 설치되지 않은 경우 Ruby on Rails 웹사이트에서 다운로드할 수 있습니다. 컴퓨터에 ActiveReportsJS도 설치되어 있으면 가장 좋습니다. 설치되지 않은 경우 그레이프시티 공식 홈페이지에서 다운로드할 수 있습니다.

Ruby on Rails 응용 프로그램 만들기

새로운 Ruby on Rails 응용 프로그램을 만들려면 터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다.

rails new ReportingOnRails --api

그런 다음 Visual Studio Code와 같이 즐겨 사용하는 코드 편집기에서 새로 만든 ReportingOnRails 디렉터리를 엽니다.

JSON API의 데이터 모델 만들기

E for Excel 웹사이트에서 다운로드할 수 있는 Sales 데이터 집합을 사용해 보겠습니다. 이 사이트에서는 100개의 레코드부터 5백만 개의 레코드까지 다양한 크기의 데이터 집합을 제공합니다. 단순화를 위해 100개의 레코드가 있는 첫 번째 데이터 집합을 사용하겠습니다.

데이터 집합에는 많은 필드가 있지만 이 예제에서는 이 중 몇 가지만 사용하겠습니다. JSON API의 데이터 모델을 만들려면 ReportingOnRails 디렉터리에서 다음 명령을 실행합니다.

rails g model Sale region:string country:string itemType:string unitsSold:float  
rake db:migrate

# or the following for Windows:  
# bin\rails g model Sale region:string country:string itemType:string unitsSold:float  
# ruby bin\rake db:migrate

CSV 파일에서 데이터 초기화

데이터를 다운로드하고 100-Sales-Records.zip 보관 파일에서 응용 프로그램의 lib\seeds 디렉터리로 압축을 해제합니다.

csv gem을 응용 프로그램에 설치합니다.

그런 다음 db/seeds.rb 파일을 열고 파일 내용을 다음 코드로 바꿉니다.

require 'csv'

csv_text = File.read(Rails.root.join('lib', 'seeds', '100 Sales Records.csv'))  
csv = CSV.parse(csv_text, :headers => true, :encoding => 'ISO-8859-1')  
# puts csv

csv.each do |row|  
 #puts row.to_hash  
 Sale.create!(region: row['Region'],  
 country: row['Country'],  
 itemType: row['Item Type'],  
 unitsSold: row['Units Sold'])  
end

마지막으로 터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다.

rake db:seed  
# or ruby bin\rake db:seed in Windows

JSON API 엔드포인트 구성

config/routes.rb 파일을 열고 파일 내용을 다음 코드로 바꿉니다.

Rails.application.routes.draw do  
 get 'api/sales', to: 'application#sales'  
end

이제 app/controllers/application_controller.rb를 열고 다음 코드 조각을 붙여넣습니다.

class ApplicationController < ActionController::API  
   def sales  
       @sales = Sale.all  

       render json: @sales  
     end  
end

그런 다음 아래 명령을 사용하여 응용 프로그램을 실행합니다.

rails server  
# or ruby bin\rails server for Windows

브라우저를 열어 http://localhost:3000/api/sales로 이동하고 JSON API가 반환한 데이터를 확인합니다.

ActiveReportsJS 보고서 만들기

이제 JSON API에서 데이터를 시각화하는 보고서를 만들어 보겠습니다.

독립 실행형 보고서 디자이너 응용 프로그램에서 파일 메뉴를 클릭하고 새로 만든 보고서를 위해 연속 페이지 레이아웃 템플릿을 선택합니다.

속성 검사자의 데이터 패널을 열고 추가 버튼을 클릭합니다.

데이터 소스 편집기 대화 상자에서 엔드포인트 필드에 http://localhost:3000/api/sales를 입력하고 변경 사항 저장 버튼을 클릭합니다.

ruby

데이터 패널에서 데이터 소스 근처에 있는 + 아이콘을 클릭합니다.

데이터 집합 편집기 대화 상자에서 이름 필드에는 Sales를, JSON 경로 필드에는 $.*를 입력합니다.

유효성 검사 버튼을 클릭하고 데이터베이스 필드 섹션이 [7개 항목] 텍스트를 표시하는지 확인하고 변경 사항 저장 버튼을 클릭합니다.

ruby

도구 모음 왼쪽에 있는 햄버거 메뉴를 사용하여 도구 상자를 확장합니다.

차트 항목을 도구 상자에서 보고서 페이지 영역의 왼쪽 위로 끌어 놓습니다. 차트 마법사 대화 상자가 나타납니다. 막대 유형을 선택하고 첫 번째 화면에서 다음 버튼을 클릭합니다.

대화 상자의 두 번째 화면에서 다음 이미지에 표시된 대로 데이터를 구성하고 다음 버튼을 클릭합니다.

ruby

세 번째 화면에서 마침 버튼을 클릭합니다.

보고서 페이지의 전체 너비를 채우기 위해 차트 보고서 항목의 크기를 조정합니다. 차트 범례를 클릭하여 속성을 속성 패널에 로드하고 방향 속성을 가로로, 위치 속성을 아래쪽으로 설정합니다.

파일 메뉴를 클릭하고 새로 만든 보고서를 응용 프로그램의 공용 폴더에 SalesReport.rdlx-json이라는 이름으로 저장합니다.

보고서를 표시할 정적 HTML 페이지 만들기

응용 프로그램의 공용 폴더에서 index.html 파일을 만들고 파일 내용을 다음 코드로 바꿉니다.

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Sales Report</title>  
  <link  
  rel="stylesheet"  
  href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"  
  type="text/css"  
/>  
<link  
  rel="stylesheet"  
  href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"  
  type="text/css"  
/>  
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"></script>  
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>  
<script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>  
<style>  
  #viewer-host {  
    width: 100%;  
    height: 100vh;  
  }  
</style>        
</head>

<body>  
  <div id="viewer-host"></div>  
  <script>  
      var viewer = new ActiveReports.Viewer("#viewer-host");  
      viewer.open('/SalesReport.rdlx-json');  
    </script>    
</body>  
</html>

응용 프로그램이 실행되는지 확인하고 브라우저를 방문하여 http://localhost:3000/index.html로 이동하고 보고서를 확인합니다. 단계를 올바르게 따른 경우 JSON API로부터 데이터를 표시하는 보고서가 나타납니다.

ruby