Creating a Covid-19 Dashboard using Cube.js and VueJS
Cube.js is an open-source analytics framework that allows the creation of a dashboard with high-performance data. Cube.js is open to contribution from other developers and a guide to how you can contribute can be found here.
To use Cube.js, you will need to have it installed locally on your PC and then set up the backend to allow interaction with the front end.
Installation and Setting up Cube.js CLI
Cube.js can be installed either via NPM or Yarn:
NPM
Yarn
For some, you might want to install as root using sudo
Once you have the CLI installed the next step is to connect Cube.js to a database type, Cube.js supports a range of database type and deployment options but for the tutorial, I will be using Postgres database and deploying to Heroku. You can find the list of database supported here.
Creating a new Cube.js application is as simple as running this command using the Cube.js CLI that was installed earlier:
You should also get an output like the one below
After creating the application you will need to connect it your local dB (As at writing this tutorial the SQL file used is not online). The file structure will look like this
├── node_modules
├── schema
│ └── Orders.js
├── index.js
├── .env
├── package.json
└── package-lock.jsonThen .env file is where your credentials for database connection will be done, by default it comes with placeholders which will let you know what information is needed and also an API Secret, to learn more about database connection you can use this guide.
The .env file has a structure like this:
CUBEJS_DB_HOST=<YOUR_DB_HOST_HERE>
CUBEJS_DB_NAME=<YOUR_DB_NAME_HERE>
CUBEJS_DB_USER=<YOUR_DB_USER_HERE>
CUBEJS_DB_PASS=<YOUR_DB_PASS_HERE>
CUBEJS_WEB_SOCKETS=true
CUBEJS_DB_TYPE=postgres
CUBEJS_API_SECRET=secretThe next step is to define our data schema, data schema is what Cube.js use to generate and execute SQL and Cube.js makes this process in which you can generate it using the developer playground by simply starting dev server from the project directory if you’ve not changed directory do so by using the command below and also start the dev server as well:
Before moving forward
Before we move forward from here let us set up the data that will be stored in our database. From earlier I said we will be using Heroku Postgres. Setting up Heroku Postgres is quite easy, I find this link very useful on setting it up.
Once Heroku has been set up we need data to be pushed to the database, the data I used was gotten from Centers for Disease Control and Prevention. I exported this data as a .csv file and then wrote some Django model to load this file into the database. The repository link to the Django model can be found here, all you have to do is just input your Heroku Postgres DB configurations in settings.py. We also need to replace the .env file with the configuration settings gotten from Heroku.
Once this is configured you can go ahead and restart Cube.js development server and then navigate to http://localhost:4000 in your web browser so as to have access to the playground. One of the functionalities of this framework is that it can generate a Cube.js schema for you, chart scaffold, query testing, debug and query builder which let you generate charts with different chart libraries, it doesn’t end there It can also create a dashboard for you based on your schema (The dashboard as of now only supports React).
When you navigate to that link you screen should look like the image below
To create a schema, navigate to the Schema tab click on public and find your table name (For me it’s CovidTimeseries because that was what I defined in the Django model), then click on the + icon and select generate schema. If you take a look at your folder structure and look into the schema folder a new JS file will be automatically created, depending on the name of your table, mine is CovidTimeseries.js. You can play around in the playground and test things out using the inbuilt functionality of the Cube.js.
Deploy Backend Code to Heroku
Lastly, what we will be doing with the Backend Code is to deploy the code to Heroku. Navigate to your Heroku Dashboard on your browser and still using the app name you used to create Heroku Postgres resource, let’s set up Heroku locally from our terminal using the command below:
You can find the full documentation on how to deploy Cube.js using Heroku here.
Setting Up Front End for the application
We will be using Vue CLI to start a new project if you don’t have Vue CLI installed you can install using the following command in the terminal:
Once Vue CLI is installed, the next stepis to create the app I always advise creating the Vue app inside the same folder as your Cube.js folder. Also, Vue Project can also be created using the tool known Vue UI, all you just have to do is type in the command below using your terminal
But I prefer using the Vue CLI, so accept the default configuration, some dependencies will be installed and after successful creation of the project you should have an output like this
You can start your application using either npm or yarn, use either of this command in your terminal:
npm run serve OR yarn serveIf you used the Vue UI to initialize the project, you can start the application right there in your browser.
Your folder structure should look similar to this:
├── node_modules
├── public
│ └── index.html
│ └── favicon.ico
├── src
│ └── App.vue
│ └── main.js
│ ├── components
│ └── HelloWorld.vue
├── babel.config.js
├── package.json
├── yarn.lock
└── README.mdWith this your application should be running on port 8081, navigate to http://localhost:8080 in your browser and your screen should look like the image below
It’s worth noting that Cube.js allows you send queries and also access your data from the Cube.js Backend we created using JSON Query Format via REST API. The Cube.js client itself doesn’t provide visualization, it is designed to work with existing chart libraries from popular frameworks like Vue, React, Angular and others.
The Cube.js client we will be using is the one for Vue, so you can stop the application in your terminal using CTRL+C and then using the command below to install the Cube.js Client
Let’s set up the application dashboard!
I added some styles using Bootstrap which was install from CDN. Launch your favorite code editor and in the public/index.html file, add the bootstrap resources in the head tag of the HTML file
Once that is done let’s create a structure for our application and also display some data to show using the Cube.js Vue client we installed earlier we will be setting up Cube.js instance with the backend URL and API token in src/App.vue file
Then we will need to set up the app to use a QueryBuilder component to creating a query counting the total number in the table:
Cube.js Vue Client allows us to receive a child component called resultSet which is an object containing data obtained from the query. I created a new component called Chart.vue in components/Chart.vue and you can add the code below:
We also need to display a loading element such that while the data is been loaded the element shows first and then a number after. In our App.vue components let’s create a tile:
In the code above we are using QueryBuilder component that passes the data into the Chart component and with this, we have a counter that’s been loaded to the dashboard showing the list of total results in the table.
Let’s add some Chart
I use Laue library to create a chart, the first step is to install Laue in our application, change to your terminal and install Laue using the command below:
npm i laue OR yarn add laueLaue is pretty easy to use and you can find more about getting started here. In the main.js file, we will import Laue. This gives us access to all Laue items in any component. Let’s set up a BarChart component, create a new file called BarChart.vue in the component folder and add the following code:
To render this newly created chart, we will be using a type prop on the Chart component we created earlier by adding this additional render:
With this the BarChart component is finalized, the next thing we need is to add a query for the bar chart in the App.vue component using the code below:
And with this we have the bar chart created, The step is similar to the line chart and others.
Final thoughts
With this little implementation we have our dashboard created, the live application can be found here and also the repository link will be listed below for both the front end code and the backend code.
Here is the final snapshot of the application
Cube.js is a powerful framework, in that it combines the knowledge of analytics, database creation and chart to give you visualization agnostic front-end SDKs and API backed by analytical server infrastructure.
Note: If you have any comment or feedback, you can send it to the Slack Community.
Thank you for reading the tutorial and I hope you find it useful.
Repo link
Supporting links to this article
