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.
Image CC - CubeJS www.cube.dev
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
.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.
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
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
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
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.
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:
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
You can find more info on Youtube here
@react @cubejs @postgres