React Dashboard

In this blog post you will find more details on how to build a dashboard with React and CubeJS by using a Postgres SQL database. During this last quarter I've spotted an increased need of dashboards. Bill Gates said that if you have an issue you need to quantify it to better picture it, so you can take the best decision you have in your hands. A dashboard is a progress report.

Ionuț Cohen
February 20, 20214 min read

Image CC - CubeJS www.cube.dev

Source Code: https://cohen.ro/blog/reactjs-dashboard

Why do you need a Dashboard?

During this last quarter I've spotted an increased need of dashboards. Bill Gates said that if you have an issue you need to quantify it to better picture it, so you can take the best decision you have in your hands. "A dashboard is a type of graphical user interface which often provides at-a-glance views of key performance indicators (KPIs) relevant to a particular objective or business process. In other usage, "dashboard" is another name for "progress report" or "report" and considered a form of data visualization". -- CC Wikipedia

Let's Get Started!

01 - Install Postgres, Cube and React

We have to install first Postgres. I am on MAC so I typed brew install postgresql in terminal and run this command. For Windows users, I think you can download directly the tool from their website https://www.postgresql.org. After you've installed it, we have to create and link the new DB to the sql dump we will be using in our demo. In my example I am using a dummy sql dump. *** All the data from this database is dummy.

createdb mydb
psql --dbname mydb -f mydb-dump.sql
brew services start postgresql

Cubejs-CLI is the one, that will build the api on top of your database. NPX is the package manager from node.js, that will create a new folder named react-dashbord, where you will find the source code for this project.

npx cubejs-cli create my-dashboard -d postgres

02 - Make a .env file

Make a .env file and add in it:

CUBEJS_DB_TYPE=postgres
CUBEJS_DB_NAME=mydb
CUBEJS_API_SECRET=SECRET
CUBEJS_DEV_MODE=true

03 - Install pgAdmin 4

My suggestion is to install also and pgAdmin 4. This is the tool that helps you to manage your DB, to run queries etc.

trend

If all is fine until now, you can start the cube.js app

npm run dev
🦅 Dev environment available at http://localhost:4000

04 - Build the Schema

trend

This schema is needed in order to build the api and the queries in order to call them directly from your website. Click Generate Schema. We need this, just because from a website, you can not call directly the database, you need an api, that knows how to get the data and resend it to your dashboard via it's REST API in JSON format. React is extremily lightweight, so the graphs will load in a very fast pace ==> this is why REACT is the most important tool for your dashboard project.

React Dashboard (part1) - Build a REST API with CUBE.JS on top of Postgresql DB

My Video

05 - Dashboard App

Click on this tab and start selecting a type of dashboard. There are several types, I selected the first one, but you can use a materializecss one etc. Chose what type of dashboard you like the most.

React Dashboard (part2) - Build a REST API with CUBE.JS on top of Postgresql DB

My Video

06 - Build the Dashboard

On this build tab you can customize all the charts. This is your playgroud. Here you can check what kind of graph you want to use. Add dimensions, measurements and last but not least, please don't forget to click the button Add to Dashboard.

trend

If you encounter any issue related to react-scripts, where you will see that jests is older than the new last version, you can create a new .env file, within your dashboard-app project and paste this code in it: SKIP_PREFLIGHT_CHECK=true.

07 - Customize your Dashboard

Now you can rename the Dashboard title and you can play with the graphs.

React Dashboard (part3) - Build a REST API with CUBE.JS on top of Postgresql DB

My Video

More videos

You can find more info on Youtube here

@react @cubejs @postgres