The GoodData CoreUI Integration

Jiri Zajic's picture
Developer Advocate

There's a wealth of open source HTML bootstrap templates for analytics, and finding the option that best suits your needs is an important task that takes time. However, you can only see the real value of each template when you plug in actual data underneath. So we asked ourselves:

What does it take to replace the dummy template data with real-time interactive analytics powered by GoodData?

Let's find out.

Analytics HTML website templates

To choose the best template, you'll have to consider many different factors, but you should always start by asking yourself the question: Who is the consumer? Who is my typical customer? Once you know the answer to this, you can proceed to answering the questions below:

  • What is the licence?
  • Is the template up-to-date and well-maintained, with a community behind it that can offer help?
  • Does it contain the types of visualizations I'll be needing most?
  • Will it work well on desktop as well as on a tablet or phone?
  • Does it come only in plain HTML, or does it also come with out-of-the-box support for JSX (React), Handlebars (Ember), or some other language?

For this exercise, we decided to go with CoreUI, specifically CoreUI for React.js. To set it up, let's just peek into CoreUI's README:

# clone the repo
$ git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project

# go into app's directory
$ cd my-project

# install app's dependencies
$ yarn install // or npm install

And this is how it looks fresh out of the box:

CoreUI integration image

What's wrong with it? Absolutely nothing, except… it shows dummy data! So let's go ahead and replace the hard-coded numbers with some real analytics.

Before we begin

To supply CoreUI with real data from the GoodData platform, we'll first need to register for the GoodData Live Examples. This will give us access to a project (= workspace) with a preloaded demo dataset.

Import GoodData.UI

Now let's navigate to the source code of CoreUI for React.js and add GoodData.UI as a dependency:

# inside my-project folder
$ yarn add @gooddata/react-components

The GoodData platform is only accessible via secured HTTPS, so we need to tell that to react-scripts by updating package.json accordingly:

# /package.json

-    "start": "react-scripts start",
+    "start": "HTTPS=true react-scripts start",

Note: If you are using Windows (cmd.exe), use set HTTPS=true&&npm start instead. For more information, see the Create React App page.

Now, let's pull the data from a GoodData workspace. GoodData.UI uses asynchronous JavaScript calls (XMLHttpRequests to be precise), and it is a well-known fact that, due to browser security, these requests need to originate from the same domain as is their target (see CORS for more).

The CORS set up for production deployments is described in GoodData.UI documentation. For our local development, it is much easier to start with a local proxy. To set it up, add a setupProxy.js file to the /src/ folder with the following contents:

# /src/setupProxy.js 

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(proxy(['/gdc', '/packages', '/account.html'], {
    changeOrigin: true,
    cookieDomainRewrite: "localhost",
    secure: false,
    target: 'https://developer.na.gooddata.com',
    headers: {
      host: 'developer.na.gooddata.com',
      origin: null
    }
  }));
};

The last modification needed is to create a gooddata.js config file in the /src/ folder:

# /src/gooddata.js

import { factory } from '@gooddata/gooddata-js';

const sdk = factory();
// GoodData workspace id used by Live Examples
// https://gooddata-examples.herokuapp.com/
const projectId = 'xms7ga4tf3g3nzucd8380o2bev8oeknp';

window.gooddata = sdk; // only for dev purposes

export default {
  projectId,
  sdk
};

That's it! All the configuration needed is done, so now's a good time to restart the localhost development server. If it's still running, stop it with CTRL+C, then restart it by running:

$ yarn start // or npm start

Let's now move on to rendering our first KPI!

Render KPI

To render a KPI, let's start by navigating to /src/views/Dashboard/Dashboard.js then importing GoodData.UI and the configuration we created earlier to the beginning of the file:

# /src/views/Dashboard/Dashboard.js

import { Kpi } from '@gooddata/react-components';
import gooddata from './../../gooddata';

Now let's pick a nice place to put our first KPI component and add the following line:

<Kpi {...gooddata} measure="aeOt50ngicOD" />

Note: The "aeOt50ngicOD" identifier represents the metric "# Checks" that exists in our demo workspace. We hardcoded it here to help you get started quickly. If you don't like magical constants in your code, you may want to check out our Catalog CLI tool and our Catalog Labs app.

Since CoreUI for React comes with a server hot reloading feature, once the Dashboard.js file is updated and saved, we should see our app automatically refresh to reflect the new changes:

CoreUI integration image

Double check that we're running on HTTPS, and not HTTP! Log in with https://localhost:3000/account.html and use the credentials you previously registered with. You should see that the first KPI on your screen is now live and that its formatting is different from other KPIs—the comma is used as a delimiter instead of a dot.

Summary

Well that was it! You can find the result at https://github.com/gooddata/gooddataui-coreui-example/tree/article. In our next article, we'll see how to implement a basic authentication so that users don't have to manually visit https://localhost:3000/account.html, as well as how to deploy to production.

If you don't want to wait for the next article, you can see the source code of a complete solution including interactivity on GitHub.

Want to see for yourself how quick and easy it can be? Get started for free, make some insights from our library of visualizations and create your first dashboard!

December 20, 2019
Blog Bottom - Subscribe Newsletter

Want to ask about something specific?

Contact us