Building Analytics React Dashboard With Cube.js

Imagine that you need to develop a web application from scratch to monitor and analyze raw data. For example, you own an average size online store. You are not satisfied with the existing solutions for data analytics and you want to manage what components will be in your admin panel by yourself. It is also very important for you to work with raw data and build analytical charts yourself.

Often, you have to work with bulky libraries and write your own web application, which takes an enormous amount of time. The solution comes from Cube.js + Flatlogic dashboards.

The best way to start is to use one of Flatlogic React’s dashboards and Cube.js.

• You can check out the final dashboard here.
• The source code is available on Github here.

Let’s Build the Dashboard

In this example, we will use the Sing App React template in order to eliminate steps of setting up a react environment from scratch and to have a dashboard interface from the beginning.

The first step is connecting your database with Cube.js. First of all, you need to install 

@cubejs-client/core

@cubejs-client/react

1 import { LineChart, Line, XAxis, YAxis } from 'recharts';
2 import cubejs from '@cubejs-client/core';
3 import { QueryRenderer } from '@cubejs-client/react';
4
5 const cubejsApi = cubejs(`api-token`);

Now you are ready to get any data you like. According to the docs, here’s how your component with chart should look:

<QueryRenderer 
2 query={{
3    measures: ['Stories.count'],
4    dimensions: ['Stories.time.month']
5  }} 
6  cubejsApi={cubejsApi} 
7  render={({ resultSet }) => {
8    if (!resultSet) {
9     return 'Loading...';
10    }
11
12    return (
13      <LineChart data={resultSet.rawData()}>
14        <XAxis dataKey="Stories.time"/>
15        <YAxis/>
16        <Line type="monotone" dataKey="Stories.count" stroke="#8884d8"/>
17      </LineChart>
18    );
19  }}
20/>

QueryRender

The main property is 

query

You don’t have to know all Cube.js concepts to implement 

query

QueryRender

The render property of 

QueryRender

Advantages

• Implementation speed and easy-to-understand API
• Cube.js is visualization agnostic. This means you can use your favorite chart library, like Chart.js, Recharts, C3.js, or any other.
• Cube.js Data Schema works as an ORM for your analytics. It allows you to model everything from simple counts to cohort retention and funnel analysis.
• It is designed to work on top of your database, so all your data stays with you. All major SQL databases are supported.

The Final Result

Now with Cube.js and Flatlogic Dashboards, you can easily start your own web app with custom graphics and connect any database to visualize raw data. Here is an example using e-commerce data. You can play with it here.

Originally published at https://statsbot.co/blog/building-analytics-react-dashboard-with-cube.js