How to Build a SaaS Dashboard in React With Google Sheets and FusionCharts

In this tutorial I’ll explain the process of creating a SaaS dashboard by fetching data from Google Sheets using the Google Sheets API. To create this dashboard we will be using React, a JavaScript library for building user interfaces; FusionCharts, a JavaScript based charting library; and Bulma, a CSS framework based on Flexbox.

Coming Up

Here’s what we’ll be covering:

1. Setup
   
   

• React


• FusionCharts and FusionCharts React Component


• Bulma CSS Framework


• Google Sheets API Setup

Before we go ahead and set up, I want to show you a preview of the SaaS Dashboard you’ll be able to create, once you’ve gone through this tutorial. Here’s a live link of what we’ll be building.

1. Setup

To follow along, you’ll need to set up your project with following dependencies:

1. React


2. FusionCharts Core Package and its React Component


3. Bulma

Including React

Facebook’s React boilerplate will get us started in a jiffy. It will set up React along with all the utilities that we will need for our dashboard app. So, in the terminal of your choice (iTerm with Zsh for me) you can go ahead and enter:

$ npx create-react-app saas-dashboard

You can learn more about create-react-app, the boilerplate we have used here.

saas-dashboard is the working directory where the React boilerplate will be installed along with all utilities and dependencies, and we will be adding a few more that we will need for this tutorial as explained below.

Including FusionCharts Core Package and Its React Component 

We will be using FusionCharts to render charts in our dashboard app. You can go ahead and read more about FusionCharts on fusioncharts.com. 

There are multiple ways to install FusionCharts; for general instructions you can check out this documentation page.

FusionCharts Direct Download

You can directly download JavaScript files from the FusionCharts website and include them in your application using a <script> tag in /public/index.html of the dashboard app.

Using NPM

We’ll be using NPM in this tutorial. So, in the terminal, navigate to the working directory i.e. saas-dashboard and enter:

$ npm install --save fusioncharts

FusionCharts provides a lightweight and simple-to-use component for React that can be used to add JavaScript charts in React apps without any hassle. We will be using it in our app, so let’s install it using the command below:

$ npm install --save react-fusioncharts

You can learn more about the FusionCharts React component from the FusionCharts repo.

Including Bulma

To create the layout and UI for our dashboard app we will be using the Bulma CSS framework. So, in the terminal go ahead and enter:

$ npm install --save bulma

Now that we have added all the dependencies for our dashboard app, we can go and set up Google Sheets API.

Google Sheets API Setup

We’ll be creating a new project for our dashboard app on the Google Developer API console to consume data from Google Sheets. I’ll be calling it “gsheets-dashboard”. You can create a new project using this link.

Once the project is created, you’ll be redirected to the Google Developer API dashboard. Now, to enable the Google Sheets API for our app, click Go to APIs overview. Once you click Enable APIs and Services you’ll be presented with the API Library, so go ahead and search for “Google Sheets API”. 

Once you find it, click Enable, and after it is processed you should see the page as shown below:

In the sidebar, head over to Credentials and click the Create credentials button and select API Key. Click the Restrict Key and set a name for it (I’ve set it to “SaasDashboardAPIKey”).

Save the key generated, as we’ll need it to pull data from our Google Sheet later.

Under API Restrictions select the Google Sheets API and save. Now we are good to go for our next step where we’ll connect the Google Sheets API and fetch some data.

2. Connecting Google Sheets API & Fetching Data

We’ll head to the Google Sheet that we will be using for our dashboard app. Here’s a screenshot of how it looks, built with some sample data that I’ve collected for a fictional SaaS business. You’ll see there’s monthly data for three years, focusing on some Key Performance Indicators (KPIs) of a SaaS business. These include revenue, customers, and other growth indicators.

Now we need to share the sheet so that anyone can see it. For this, in the File menu, click Share. Then, click Get shareable link and after it’s processed, the sheet will be shared for “Anyone with link can view” access by default. 

Since we want to make the sheet public, head over to “Anyone with link can view” and click the More option in the drop-down. Select “On - Public on the web” option and save. 

You can access the sheet I’ll be using from this link.

We’ll keep a note of the spreadsheet ID (this can be found in the URL for Google Sheets, for me it’s 1QZ3vKssyG9xEG-RJklQlBezIR8WqCfML4EfO2qe5vbw). 

We will be using the batchGet method for our dashboard app. It returns one or more ranges of values from a spreadsheet. You can learn more about it here. Armed with both the API Key and spreadsheet ID, let’s head to Google Sheets API explorer to test it (you can also use browser/postman (I used this!) to test it and get JSON response which looks something like this):

I’ve censored the API Key–you can put your own API Key in its place. 

Now let’s open up our working directory (saas-dashboard for me) in a code editor and create a new file called config.js. Add your API key and spreadsheet ID as follows.

export default {
    apiKey: 'YOUR_API_KEY',
    spreadsheetId: '1kVwf5oIZMPqY4Y2WRj9NzeDgy3zBBj-px-Hl41sFlT8'
}

Now let’s head over to the App.js file. We’ll be adding everything directly to App.js, which our boilerplate has given us. This is not ideally the best architecture, rather just a display of the concepts.

The steps below show how I’ll connect our dashboard app to the Google Sheets API and fetch data from it:

1. Import config.js we created using the code below and declare a variable with a request URL for the Google Sheets API.

import config from './config';

const url = `https://sheets.googleapis.com/v4/spreadsheets/${ config.spreadsheetId }/values:batchGet?ranges=Sheet1&majorDimension=ROWS&key=${ config.apiKey }`;

2. Now, we’ll set an empty array in this.state as shown in the code below:

constructor() {
    super();
    this.state = {
     items:[]
    };
  }

3. Fetch the JSON data from React’s lifecycle componentDidMount method:

componentDidMount() {
    fetch(url).then(response => response.json()).then(data => {
      let batchRowValues = data.valueRanges[0].values;
 
      const rows = [];
      for (let i = 1; i < batchRowValues.length; i++) {
        let rowObject = {};
        for (let j = 0; j < batchRowValues[i].length; j++) {
          rowObject[batchRowValues[0][j]] = batchRowValues[i][j];
        }
        rows.push(rowObject);
      }
      
      this.setState({ items: rows });
    });
}

Awesome! Now that we have established a connection with our Google Sheets, we can start building the layout for our dashboard. 

Note: You can verify the connection by logging the items variable inside state.

3. Building the SaaS Dashboard Layout

We’ll be using Bulma to build the layout for our dashboard app. Bulma is a CSS framework based on Flexbox and gives us tons of pre-built and customisable elements and components.

Here’s how it will look. For more information on what these KPIs mean for a business, read Saas Metrics That Really Matter: KPIs You Should Be Tracking. Once you’ve created the dashboard, the final version will look like the screenshot below:

You can also check out the live dashboard here.

Now, let’s divide our dashboard’s layout into three parts:

1. Navigation Section


2. KPI Section


3. Charts Section

We will also overwrite some of the default styles provided by Bulma using our own CSS which will be present in the file App.css.

Creating the Navigation Section 

To create the navigation, we will be using Bulma’s Navbar component. Below is the resultant HTML snippet:

<nav className="navbar has-shadow is-spaced" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">
                <div className="navbar-item is-size-4 has-text-weight-semibold has-text-grey-darker">SaaS Dashboard<span className="is-size-6 has-text-grey has-text-weight-normal">by FusionCharts</span></div>
        </div>
        <div className="navbar-end" aria-label="menu" aria-expanded="false">
                <a id="btn-2018" className="navbar-item is-active has-text-link" href="#" onClick={this.updateDashboard}>2018</a>
                <a id="btn-2017" className="navbar-item" href="#" onClick={this.updateDashboard}>2017</a>
                <a id="btn-2016" className="navbar-item" herf="#" onClick={this.updateDashboard}>2016</a>
        </div>
</nav>

Now that our navigation section is ready, we’ll create a container to house the next two sections of our dashboard. Here’s the HTML snippet:

<div className="container is-fullhd">
  // kpi section
  
  // charts section
</div>

You can learn more about containers here.

Creating the KPI Section 

To create the KPI section, we’ll use an HTML <section> and use the Columns and Card components provided by Bulma. Below is the HTML snippet:

<section className="section is-bottom-paddingless has-paddingtop-size-1">
   <div className="columns">
      <div className="column">
         <div className="card">
            <div className="card-content">
               <div className="columns columns-kpi is-mobile is-desktop has-block-display">
                  <div className="column header is-two-thirds-desktop is-full-tablet is-two-thirds-mobile has-text-left is-bottom-paddingless">Renewed Users
                  </div>
                  <div id="renewed-users-changeper" className="column has-text-right has-text-left-tablet-only has-text-left-desktop-only is-bottom-paddingless" data-up="↑" data-down="↓">...</div>
               </div>
               <div id="renewed-users-val">...</div>
            </div>
         </div>
      </div>
   </div>
</section>

The above snippet will create one KPI card. Similarly, we will create cards for all four KPIs that we want to showcase.

Creating the Charts Section 

To create the charts section, we’ll again use an HTML <section> with Columns and Card components provided by Bulma. We’ll be leaving an empty <div> with the unique ID for the chart.

Below is the HTML snippet:

<section className="section is-bottom-paddingless has-paddingtop-size-1">
   <div className="columns is-multiline">
      <div className="column is-half-tablet is-one-third-desktop is-half-fullhd">
         <div className="card">
            <div className="card-content has-chart">
               <div className="columns is-marginless is-mobile is-desktop has-block-display">
                  <div className="column header is-two-thirds-desktop is-full-tablet is-two-thirds-mobile has-text-left is-bottom-paddingless">Monthly Reccuring Revenue</div>
                  <div id="mrr-changeper" className="column has-text-right has-text-left-tablet-only has-text-left-desktop-only is-bottom-paddingless" data-up="↑" data-down="↓">...</div>
               </div>
               <div id="mrr-val">...</div>
            </div>
            <div id="mrr-chart">
            </div>
         </div>
      </div>
   </div>
</section>

We will add all the chart cards in single column components to make our dashboard responsive, adding different breakpoints provided by Bulma for each column. You can learn more about these responsive break points in Bulma’s documentation.

The above snippet will create one chart card. Similarly, we will create cards for all six charts that we want to showcase. If you’ve followed the above steps thus far you should have a similar layout as in the image above. If not, don’t worry, I’ll be adding the link to Github repo for this dashboard at the end of the tutorial.

4. Creating KPI’s for SaaS Dashboard

Now that our layout is ready, we will define functionality for some of the elements and feed data to them from Google Sheets. We begin by defining a function called getData in our component which will take the year as an argument to de-structure Google Sheets’ data present in the app’s state.

Now, we’ll loop through the data to calculate values as needed for KPIs. Below is the code to create the KPI for “Renewed Users”.

getData = arg => {
   // google sheet data
   const arr = this.state.items;
   const arrLen = arr.length;

   // renewed users
   let renewedUsersVal = 0;
   let prevRenewedUsersVal = 0;
   let renewedUsersChangeper = 0;
   const renewedUsersChangeperElem = document.getElementById("renewed-users-changeper");

   for (let i = 0; i < arrLen; i++) {
      let monthStr = arr[i]["month"];
      if (monthStr.includes(arg)) {
         renewedUsersVal += parseInt(arr[i].renewed_users);
      } else if (monthStr.includes(parseInt(arg) - 1)) {
         prevRenewedUsersVal += parseInt(arr[i].renewed_users);
      }
   }

   // feeding kpi card values and chart kpi tickers
   document.getElementById("renewed-users-val").innerHTML = renewedUsersVal;
};

Similarly, we will define variables for other KPIs and assign a value to them upon looping through the data using the above code snippet.

5. Creating Charts for SaaS Dashboard

Now, we will form JSON data for the charts and use FusionCharts and its React component to render them.

In the getData function that we created in the previous step, we’ll define an empty array which will have data for the chart. Below is the code needed:

// chart cards
let chartDataArr = [];
      
// chart 1 => MRR
let mrrChangeper = 0;
const mrrChangeperElem = document.getElementById('mrr-changeper');

for (let i = 0; i < arrLen; i++) {
   let monthStr = arr[i]["month"];
   if (monthStr.includes(arg)) chartDataArr.push(arr[i]);
}

let chartDataArrLen = chartDataArr.length;

We will be using the “Multi-series 2D Single Y Combination Chart” (mscombi2d) chart in our dashboard. FusionCharts provides a ton of attributes which can be used to customize the look and feel of your charts.

Now, we will create a file called “chartCosmetics.js” which will have cosmetics options for our chart so that we don’t have to define them each time we create one. Here’s how it looks:

export default {
   currencyChart: {
      bgcolor: "#FFFFFF",
      canvasBgColor: "#FFFFFF",
      showBorder: "0",
      showCanvasBorder: "0",
      showLabels: "0",
      drawCrossLine: "1",
      divLineAlpha: "0",
      showYAxisValues: "0",
      chartLeftMargin: "0",
      chartRightMargin: "0",
      canvasRightMargin: "0",
      canvasLeftMargin: "0",
      chartBottomMargin: "0",
      canvasBottomMargin: "0",
      chartTopMargin: "0",
      canvasTopMargin: "0",
      showValues: "0",
      shadow: "0",
      legendPadding: "0",
      showShadow: "0",
      paletteColors: "#3273DC",
      drawAnchors: "0",
      showAlternateHGridColor: "0",
      crossLineColor: "#363636",
      crossLineAlpha: "15",
      drawCrossLineOnTop: "0",
      usePlotGradientColor: "1",
      plotFillAlpha: "15",
      plotColorinTooltip: "0",
      tooltipBorderAlpha: "0",
      toolTipPadding: "0",
      baseFontColor: "#205BBB",
      baseFontSize: "15",
      baseFont: "Nunito",
      tooltipbgalpha: "0",
      plotFillAngle: "90",
      numberPrefix: "$",
      plotToolText: "<b>$label: $dataValue</b>"
   },
   percentChart: {
      bgcolor: "#FFFFFF",
      canvasBgColor: "#FFFFFF",
      showBorder: "0",
      showCanvasBorder: "0",
      showLabels: "0",
      drawCrossLine: "1",
      divLineAlpha: "0",
      showYAxisValues: "0",
      chartLeftMargin: "0",
      chartRightMargin: "0",
      canvasRightMargin: "0",
      canvasLeftMargin: "0",
      chartBottomMargin: "0",
      canvasBottomMargin: "0",
      chartTopMargin: "0",
      canvasTopMargin: "0",
      showValues: "0",
      shadow: "0",
      legendPadding: "0",
      showShadow: "0",
      paletteColors: "#3273DC",
      drawAnchors: "0",
      showAlternateHGridColor: "0",
      crossLineColor: "#363636",
      crossLineAlpha: "15",
      drawCrossLineOnTop: "0",
      usePlotGradientColor: "1",
      plotFillAlpha: "15",
      plotColorinTooltip: "0",
      tooltipBorderAlpha: "0",
      toolTipPadding: "0",
      baseFontColor: "#205BBB",
      baseFontSize: "15",
      baseFont: "Nunito",
      tooltipbgalpha: "0",
      plotFillAngle: "90",
      numberSuffix: "%",
      plotToolText: "<b>$label: $dataValue</b>"
   }
};

Now, we will form a JSON data array for each chart and use the above cosmetic options:

// mrr-chart
let mrrChartDataArr = [];
let mrrChartCatArr = [];
for (let i = 0; i < chartDataArrLen; i++) {
   mrrChartCatArr.push({ label: chartDataArr[i].month });
   mrrChartDataArr.push({ value: chartDataArr[i].gross_revenue });
}

const mrrChartConfig = {
   type: "mscombi2d",
   width: "100%",
   height: "100%",
   dataFormat: "json",
   dataSource: {
      chart: chartCosmetics.currencyChart,
      categories: [
         {
            category: mrrChartCatArr
         }
      ],
      dataset: [
         {
            renderAs: "spline",
            lineThickness: "3",
            alpha: "50",
            data: mrrChartDataArr
         },
         {
            renderAs: "splinearea",
            showPlotBorder: "0",
            plotToolText: " ",
            data: mrrChartDataArr
         }
      ]
   }
};

// passing mrr chart JSON array to app's state
this.setState({ mrrChartData: mrrChartConfig });

// feeding value to KPI present in chart card
document.getElementById('mrr-val').innerHTML = `$${ chartDataArr[chartDataArrLen-1].gross_revenue }`;

Note: You have to declare a null variable in the app’s state for each chart so that it can be used later as we did above for Google Sheet data.

Now that the JSON data is ready for our charts, we will pass it to FusionCharts’ React component under the <div> element we created for each chart.

<div id="mrr-chart">
  <ReactFC {...this.state.mrrChartData} />
</div>

To learn more about the usage of the FusionCharts React component, you can refer to this developer documentation page. 

You can follow the above steps to create the remaining charts. We will now call getData function with 2018 as an argument from the componentDidMount method so that our dashboard loads with 2018 data by default. If you’ve followed the above steps thus far you should have a functional dashboard as in the image below:

Conclusion

This tutorial will help you create a SaaS dashboard using Google Sheets. Having followed along, you can now work your magic on adding more UI elements, charts, KPIs and additional features. I have added some styling and functionality myself and you can check out the final dashboard here.

For reference, you can check out the source code from the Github repository. If you have any questions or feedback, leave a comment below or yell at me on Twitter!