How to Use a Javascript Reporting Tool With the Gatsby Web Framework

August 15 2022

ActiveReportsJS is a 100% client-side reporting tool with zero server dependencies. It means that you can use ActiveReportsJS together with any web framework, including Gatsby. This article contains a simple yet thorough tutorial on integrating ActiveReportsJS with a Gatsby application. By the end, you will be able to do the following:

Create a new Gatsby application
Source the data from a SQLite database
Create an ActiveReportsJS report to visualize the data from the GraphQL API
Create client-side routing to host the ActivReportsJS Report Viewer component

Prerequisites

The following content assumes that you have ActiveReportsJS installed on your machine. You can obtain it from the ActiveReportsJS website if you don't have it.

Ready to Customize Report Layouts? Download a FREE trial of ActiveReportsJS today!

Create a Gatsby Application

To create a new Gatsby application, run the following command from a terminal or command prompt.

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

It asks for a site title, the name of the project’s directory, and other features. Here is the sample of responses:

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

Then open the newly created "gatsby-reporting" folder in your favorite code editor, such as Visual Studio Code.

Add Application Data

Gatsby framework can load the data from practically anywhere. In this article, we will be using the Chinook SQLite database. You can find its description here. Download and unpack the content of the chinook.zip file into the "data" folder of the newly created Gatsby application.

Install the "gatsby-source-sqlite" package by running the following command from the terminal or command prompt.

# with npm
npm i gatsby-source-sqlite
 
# with yarn
yarn add gatsby-source-sqlite

Open the "gatsby-config.ts" file that resides in the root folder of the application and add the following object into the "plugins" array:

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

Run the website locally using the "npm run develop" or "yarn develop" command and open the http://localhost:8000/___graphql URL in a browser. You can see the "customers" query is available via a GraphQL API.

Gatsby

Create an ActiveReportsJS Report

Let's create a report that visualizes these data from the GraphQL API.

In the Standalone Report Designer Application, click the File menu and select the Continuous Page Layout template for a newly created report.

Open the Data panel of the property inspector and click the Add button.

In the Data Source editor dialog, type "Chinook" for the NAME field, http://localhost:8000/___graphql for the ENDPOINT field, add the "Content-Type" HTTP Header and set its value to "application/json" and finally and click the Save Changes button.

Edit Data Source

Click the + icon near DataSource in the Data panel.

In the Data Set Editor dialog:

Type Customers in the NAME field
Select the HTTP Post method
Type {"query":"{ allSqliteCustomers { edges { node { CustomerId, FirstName, LastName, Country } } } }"} for the POST Body
Type $.data.allSqliteCustomers.edges.* for the JSON Path
Click the Validate button, ensure that the Database Fields section displays the [4 items] text, and click the Save Changes button

Customers

Drag and Drop the Customers dataset from the data panel into the report body. It will automatically create a Table data region consisting of the Column Headers Row and the Detail Row.

Select each column header, adjust its name to be readable, and set the Font Weight to Bold using the corresponding button on the toolbar.

Set the Text Alignment of the textbox that displays the CustomerID to Left.

The table design could look like in the following picture:

CustomerID

Click the File menu and save the newly created report in the public/static folder(it needs to be created) of the application under the name Customers.rdlx-json.

Create a Client-Side Component and Routing to Display Reports

ActiveReportsJS is a 100% client-side reporting solution that runs reports in a browser and needs access to the browser's Web API. Therefore, ActiveReportsJS code can't run correctly on the server-side or at building time. To fulfill this requirement, we can use client-only routing.

But first, we need to install the ActiveReportsJS npm packages. Stop the application and run the following command from a terminal or command prompt.

# with npm
npm install @grapecity/activereports-react
 
# with yarn
yarn add @grapecity/activereports-react

Then create a new folder called "Components" in the "src" folder of the application and the reporting.tsx file with the following content into it.

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 default Reporting;

Rename the "index.tsx" in the "pages" folder of the application to [...].tsx and insert the following content into it:

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;

Run the website locally using the "npm run develop" or "yarn develop" command and open the http://localhost:8000 URL in a browser. The report viewer will display the "Customers" report.

Customer Report