Gatsby 웹 프레임워크와 Javascript 리포트 도구를 사용하는 방법

ReactJS Gatsby 웹 프레임워크와 Javascript 리포트 도구를 사용하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-09-14 10:50 조회 442회 댓글 0건

본문

관련링크

ActiveReportsJS는 제로 서버 종속성이 있는 100% 클라이언트 측 보고 도구입니다. 즉, Gatsby를 비롯하여 모든 웹 프레임워크와 ActiveReportsJS를 함께 사용할 수 있습니다. 이 문서에는 Gatsby 응용 프로그램과 ActiveReportsJS를 통합하는 방법에 대한 간단하면서 완전한 자습서가 포함되어 있습니다. 자습서를 마치면 다음을 수행할 수 있습니다.

새로운 Gatsby 응용 프로그램 만들기
SQLite 데이터베이스에서 데이터 가져오기
ActiveReportsJS 보고서를 만들어 GraphQL API에서 얻은 데이터 시각화
클라이언트 측 라우팅을 만들어 ActivReportsJS Report Viewer 컴포넌트 호스팅

필수 컴포넌트

다음 콘텐츠는 컴퓨터에 ActiveReportsJS가 설치되어 있다고 가정합니다. 설치되지 않은 경우 ActiveReportsJS 웹사이트에서 다운로드할 수 있습니다.

보고서 레이아웃을 사용자 정의할 준비가 되셨습니까?

지금 ActiveReportsJS의 무료 평가판을 다운로드하십시오!

응용 프로그램 만들기

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

# with npm v6.1+
npm init gatsby

# with npx(included by default with npm v5.2+)
npx create-gatsby

# with yarn
yarn create gatsby

사이트 제목, 프로젝트 디렉터리의 이름 및 기타 기능을 묻는 메시지가 표시됩니다. 다음은 응답 샘플입니다.

What would you like to name the folder where your site will be created?
√ ARJS/ gatsby-reporting
√ Will you be using JavaScript or TypeScript?
· TypeScript
√ Will you be using a CMS?
· No (or I'll add it later)
√ Would you like to install a styling system?
· Sass
√ Would you like to install additional features with other plugins?No items were selected

그런 다음 Visual Studio Code와 같이 즐겨 사용하는 코드 편집기에서 새로 만든 "gatsby-reporting" 폴더를 엽니다.

응용 프로그램 데이터 추가

Gatsby 프레임워크는 실제로 어디에서나 데이터를 로드할 수 있습니다. 이 문서에서는 Chinook SQLite 데이터베이스를 사용합니다.

이에 대한 설명은 여기를 참고하십시오. chinook.zip 파일을 다운로드하여 새로 만든 Gatsby 응용 프로그램의 "data" 폴더에 압축을 풉니다.

터미널 또는 명령 프롬프트에서 다음 명령을 실행하여 "gatsby-source-sqlite" 패키지를 설치합니다.

# with npm
npm i gatsby-source-sqlite

# with yarn
yarn add gatsby-source-sqlite

응용 프로그램의 루트 폴더에 있는 "gatsby-config.ts" 파일을 열고 다음 개체를 "plugins" 배열에 추가합니다.

{
 resolve: `gatsby-source-sqlite`,
 options: {
   fileName: "./data/chinook.db",
   queries: [
    {
       statement: "SELECT CustomerId, FirstName, LastName, Country FROM customers",
       idFieldName: "CustomerId",
       name: "customers"
    },
  ],
},
}

"npm run develop" 또는 "yarn develop" 명령을 사용하여 웹사이트를 로컬로 실행하고 브라우저에서 http://localhost:8000/___graphql URL을 엽니다. GraphQL API에서 "customers" 쿼리를 사용할 수 있습니다.

Gatsby

ActiveReportsJS 보고서 만들기

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

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

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

데이터 소스 편집기 대화 상자에서 NAME 필드에 "Chinook", ENDPOINT 필드에 http://localhost:8000/___graphql을 입력하고, "Content-Type" HTTP 헤더를 추가하고 값을 "application/json"으로 설정하고 마지막으로 변경 사항 저장 버튼을 클릭합니다.

데이터 소스 편집

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

데이터 집합 편집기 대화 상자에서:

NAME 필드에 Customers를 입력합니다.
HTTP Post 메서드를 선택합니다.
{"query":"{ allSqliteCustomers { edges { node { CustomerId, FirstName, LastName, Country } } } }"}를 POST 본문으로 입력합니다.
*$.data.allSqliteCustomers.edges.**를 JSON 경로로 입력합니다.
유효성 검사 버튼을 클릭하고 데이터베이스 필드 섹션에 [4개 항목] 텍스트가 표시되는지 확인한 다음 변경 사항 저장 버튼을 클릭합니다.

데이터 패널에서 Customers 데이터 집합을 보고서 본문에 끌어서 놓습니다. 열 머리글 행과 세부 정보 행으로 구성된 표 데이터 영역이 자동으로 생성됩니다.

각 열 머리글을 선택하고, 이름을 읽을 수 있도록 조정하고, 도구 모음의 해당 버튼을 사용하여 글꼴 두께를 '굵게'로 설정합니다.

CustomerID를 표시하는 텍스트 상자의 텍스트 맞춤을 '왼쪽'으로 설정합니다.

표 디자인은 다음 그림과 같습니다.

CustomerID

파일 메뉴를 클릭하고 새로 만든 보고서를 응용 프로그램의 public/static 폴더(만들어야 함)에 Customers.rdlx-json이라는 이름으로 저장합니다.

클라이언트 측 컴포넌트와 라우팅을 만들어 보고서 표시

ActiveReportsJS는 브라우저에서 보고서를 실행하고 브라우저의 웹 API에 액세스해야 하는 100% 클라이언트 측 보고 솔루션입니다. 따라서 ActiveReportsJS 코드는 서버 측이나 빌드 시간에 올바로 실행할 수 없습니다. 이 요구 사항을 충족하기 위해 클라이언트 전용 라우팅을 사용할 수 있습니다.

하지만, 먼저 ActiveReportsJS npm 패키지를 설치해야 합니다. 응용 프로그램을 중지하고 터미널 또는 명령 프롬프트에서 다음 명령을 실행합니다.

# with npm
npm install @grapecity/activereports-react

# with yarn
yarn add @grapecity/activereports-react

그런 다음 응용 프로그램의 "src" 폴더에 "Components"라는 새 폴더를 만들고 다음과 같은 내용이 포함된 reporting.tsx 파일을 만듭니다.

import * as React from 'react';
import {Viewer} from "@grapecity/activereports-react";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";

const Reporting = ({reportUri}:{reportUri:string}) => {
 return (
   <div style={{width:"100%", height: "100vh"}}>
       <Viewer report={{ Uri: reportUri }} />
   </div>
)
}

export import * as React from "react";
import { Router} from "@reach/router";
import Reporting from "../components/reporting";

// markup
const IndexPage = () => {
 return (
   <Router>
     <Reporting reportUri="static/Customers.rdlx-json" path="/" />
   </Router>
);
};

export default IndexPage;
default Reporting;

응용 프로그램의 "pages" 폴더에 있는 "index.tsx"의 이름을 [...].tsx로 바꾸고 다음과 같은 내용을 삽입합니다.

"npm run develop" 또는 "yarn develop" 명령을 사용하여 웹사이트를 로컬로 실행하고 브라우저에서 http://localhost:8000 URL을 엽니다. 보고서 뷰어에 "Customers" 보고서가 표시됩니다.

Customer 보고서