Nuxt.js Dashboard App: Build with Cube.js and Highcharts

Unlocking the Power of Data: Building a Nuxt.js Dashboard with Cube.js and Highcharts

In today’s data-driven world, making informed decisions requires more than just numbers. It demands insight, and that’s where Cube.js comes in – a powerful open-source analytics framework that helps you derive meaning from complex data sets.

The Challenge of Data Visualization

As data grows in importance, so does the need for effective visualization tools. Charts and dashboards play a crucial role in condensing large amounts of data into easily digestible formats. However, building custom interfaces or dashboards to represent unique data sets can be a daunting task. This is where Cube.js shines, providing visualization-agnostic frontend SDKs and API-backed server infrastructure to streamline the process.

Building a Nuxt.js Dashboard with Cube.js and Highcharts

In this tutorial, we’ll create a Nuxt.js dashboard application to display insights from a database using Cube.js and Highcharts. Our finished application will be a testament to the power of data visualization.

Understanding Cube.js

Cube.js is an open-source modular framework designed to build analytical web applications. Its primary focus is on internal business intelligence tools, making it an ideal choice for large-scale analytics features. With Cube.js, you can minimize developer effort while building custom analytics tools.

Getting Started with Cube.js

To begin, you’ll need an LTS version of Node.js (either Yarn or npm) and PostgreSQL installed on your device. Additionally, a basic understanding of JavaScript and Vue.js is required.

Installing the Cube.js CLI

Run yarn global add cubejs-cli to install the Cube.js CLI, which will be used for various Cube.js workflows.

Connecting to Your Database

We’ll use a SQL data dump of World country, language, and city data for our database. Download the dump and add it to a new database using the following commands:

“`
// Download the data dump
curl -o world.sql https://cube.dev/downloads/world.sql

// Create a new database
createdb sample-data

// Import the data dump into the new database
psql -d sample-data < world.sql
“`

Setting Up a New Cube.js Project

Run cubejs new -d postgres to set up a new Cube.js project with a PostgreSQL database.

Defining Your Data Schema

Navigate to http://localhost:4000 and under the Schema tab, tick all three boxes under public, click the +, and then select Generate Schema. This generates a Cube.js schema to model raw data into meaningful business definitions.

Visualizing Results

Cube.js provides a sandbox application to play around with data in your database. We’ll use this to visualize the “Country Language Count” measure and observe it with the “Country Language isofficial” dimension to create a pie chart.

Connecting to Your Nuxt Frontend

Initialize your Nuxt frontend by running yarn create nuxt-app cubejs-nuxt-dashboard. Make sure to pick Tailwind CSS as your preferred UI library.

Building Out Your Application

Create a new folder called containers and add a file called Base.vue. This will ensure every component stays within the screen and is well aligned.

Create a new file called navbar.vue and add it to your layout. This will display a navbar on every page route.

Setting Up the Cube.js Client

Navigate to ./pages and add the following code to index.vue:

“`

“`

Displaying Results

Create components to display results of your queries. We’ll start with displaying numbers on cards from the queries with only measures. Create a new file called CityCard.vue and add the following code:

“`

“`

Similarly, create two more cards called CountryCard.vue and LanguageCard.vue and add the same code, replacing “City.count” with “Country.count” and “Countrylanguage.count” respectively.

Adding Charts

Install Highcharts by running yarn add vue2-highcharts. Create a new file called PieChart.vue and add the following code:

“`

“`

Create a new file called BarChart.vue and add similar code, replacing the chart type with ‘bar’.

Finalizing Your Application

Add the charts and cards to your index.vue file:


<template>
<div>
<Navbar />
<div class="container">
<CityCard :resultSet="cityResultSet" title="City Count" />
<CountryCard :resultSet="countryResultSet" title="Country Count" />
<LanguageCard :resultSet="languageResultSet" title="Language Count" />
<PieChart :resultSet="pieResultSet" />
<BarChart :resultSet="barResultSet" />
</div>
</div>
</template>


Run your application, and you should see a fully functional Nuxt.js dashboard with Cube.js and Highcharts.

Conclusion

In this tutorial, we’ve demonstrated the power of Cube.js and Highcharts in building a custom Nuxt.js dashboard application. With Cube.js, you can easily derive insights from complex data sets and visualize them in a meaningful way. The possibilities are endless, and we hope this tutorial has inspired you to explore the world of data visualization.