In the following tutorial, I’ll show you how to create a basic analytics dashboard with Node, Express, and . As a database, we’re going to use MongoDB with MongoDB BI Connector. If you’re not familiar with it, I highly recommend you go through the . It covers the basics of setting up Mongo and its BI Connector. Cube.js Building a MongoDB Dashboard tutorial Here how the final dashboard would look. You can check The full source code is the live demo on Heroku here. available on Github. Getting a Sample Dataset You can skip this step if you already have some data for your dashboard If you don’t have a local MongoDB instance, please download it . The BI Connector can be downloaded . here here There is a good with a curated list of JSON / BSON datasets from the web in order to practice in MongoDB. We’ll pick a for our dashboard. repository on Github tweets dataset and import it using the following command in your MongoDB directory. Download test data $ bin/mongorestore Your-Downloads-Folder/dump/twitter/tweets.bson Now make sure both MongoDB and MongoDB BI Connector processes are running. # Run MongoDB directory
$ bin/mongod

# Run MongoDB BI Connector directory
$ bin/mongosqld from from Setting up a Backend We’ll use an to create an application skeleton. express application generator # Install it you don’t have it already
$ npm install express-generator -g if Next, create a new express app with the view engine set to Handlebars (hbs). $ express --view=hbs express-analytics-dashboard We’re going to use as our analytical backend. It generates and executes SQL queries, as well as provides caching, data pre-aggregation, security, and API to query results and build visualizations. an open source framework, Cube.js You can learn more about it here. Cube.js can be easily embedded into an Express application. Let’s add it to our project dependencies. $ npm install --save @cubejs-backend/server-core @cubejs-backend/mongobi-driver dotenv We’ve added a core server package for Cube.js and the Cube.js MongoBI driver. We’ve also added a package to manage our credentials. Let’s create a file with the following credentials; we need them to tell Cube.js how to connect to Mongo. dotenv .env CUBEJS_DB_HOST=localhost
CUBEJS_DB_NAME=twitter
CUBEJS_DB_PORT= CUBEJS_DB_TYPE=mongobi
CUBEJS_API_SECRET=SECRET 3307 Now, let’s mount the Cube.js Server into our express application. Add the following code right after the routes declaration in your . app.js CubejsServerCore = ( ); app.use( , indexRouter); ( ).config();
CubejsServerCore.create().initApp(app); var require '@cubejs-backend/server-core' // ... '/' require 'dotenv' // ... With the above two lines of code, we have loaded all required configs from the file and mounted Cube.js into our Express app. By default, it’s mounted into the path namespace. But you can change it and a lot of other things by passing the to the . We’ll keep the default settings for our tutorial. .env /cubejs-api/v1/ configuration object CubejsServerCore.create()method Now, let’s create a Cube.js Schema for our tweets table. Cube.js uses Data Schema to generate and execute SQL; you can read more about it here. Create a folder, , with a file inside with the following content. schema Tweets.js cube( , { : , : { : { : }, : { : , : }, : { : , : }
  }, : { : { : , : }, : { : , : }
  }
}); `Tweets` sql `select * from tweets` measures count type `count` favoriteCount type `sum` sql `favorite_count` retweetCount type `sum` sql `retweet_count` dimensions location type `string` sql `\`user.location\`` lang type `string` sql `lang` In Cube.js, you can describe your queries in Javascript and then they will be compiled into SQL and executed inside your database. It uses and as basic units to describe various analytics queries. measures dimensions This tutorial is a good place to get started with Cube.js Schema. Now let’s move on to building a dashboard on the frontend. Alternative Setup: Run Cube.js in Serverless Mode If you want to run it as a microservice or as a serverless function - use Cube.js CLI. The code below shows how you can generate a new Cube.js app with Cube.js CLI: $ npm install -g cubejs-cli
$ cubejs create -d mongobi -t serverless It will create a new project pre-configured to be deployed to AWS Lambda with Serverless framework. You can learn more about Cube.js serverless deployment here. Building Analytics Dashboard We’ll use Bootstrap for styling, the Cube.js client to load data, and Chart.js to display it. Replace the content of views/index.hbs with the following. <link rel= href= integrity= crossorigin= > <script src= > <script src= > <div = id= > <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Total Tweets</h5>
                <div class="card-text">
                    <h3 id="total-tweets"></h3>
                </div>
            </div>
        </div>
    </div> <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Total Retweets</h5>
                <div class="card-text">
                  <h3 id="total-retweets"></h3>
                </div>
            </div>
        </div>
    </div> <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Total Favorites</h5>
                <div class="card-text">
                  <h3 id="total-favorites"></h3>
                </div>
            </div>
        </div>
    </div> <br /> <div class="row">
      <div class="col-md-6">
          <div class="card">
              <div class="card-body">
                  <h5 class="card-title">Top Tweets Locations</h5>
                  <div class="card-text">
                    <canvas id="pie-chart"></canvas>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-md-6">
          <div class="card">
              <div class="card-body">
                  <h5 class="card-title">Most Popular Languages</h5>
                  <div class="card-text">
                    <canvas id="bar-chart"></canvas>
                  </div>
              </div>
          </div>
      </div>
  </div> <script> cubejsApi = cubejs( ,
    { : }
  ); kpis = [
    { : , : },
    { : , : },
    { : , : }
  ];

  kpis.forEach( {
    cubejsApi.load({ : [kpi.measure]
    }).then( { .getElementById(kpi.element).textContent =
        numeral(resultSet.totalRow()[kpi.measure]).format( );
    })
  }); chartJsData = { { : [{ : resultSet.series()[ ].series.map( { r.value }), : [ , , , , ]
      }], : resultSet.categories().map( { c.category })
    }
  }

  cubejsApi.load({ : [ ], : [ ], : [
      { : , : , : [ ]
      }
    ], : }).then( { Chart( .getElementById( ), { : , : chartJsData(resultSet)
    })
  });

  cubejsApi.load({ : [ ], : [ ], : }).then( { Chart( .getElementById( ), { : , : chartJsData(resultSet), : { : { : } }
    })
  }); "stylesheet" "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" "anonymous" < = > script src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" </ > script "//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js" </ > script "https://unpkg.com/@cubejs-client/core@0.6.0/dist/cubejs-client-core.js" </ > script class "container" "app" < = > div class "row" </ > div < /> br </ > div var 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1NTIzOTk5MjcsImV4cCI6MTU1MjQ4NjMyN30.SOO-A6GfGH7ar3EoeBb0cjj10BVxO3ffjvmqQziXIZA' apiUrl 'http://localhost:3000/cubejs-api/v1' var measure "Tweets.count" element "total-tweets" measure "Tweets.retweetCount" element "total-retweets" measure "Tweets.favoriteCount" element "total-favorites" => kpi measures => resultSet document '0,0' // A helper method to format data for Chart.js // and add some nice colors var ( ) function resultSet return datasets data 0 ( ) function r return backgroundColor 'rgb(255, 99, 132)' 'rgb(255, 159, 64)' 'rgb(255, 205, 86)' 'rgb(75, 192, 192)' 'rgb(54, 162, 235)' labels ( ) function c return measures "Tweets.count" dimensions "Tweets.location" filters dimension "Tweets.location" operator "notEquals" values "" limit 5 => resultSet new document "pie-chart" type 'pie' data measures "Tweets.count" dimensions "Tweets.lang" limit 5 => resultSet new document "bar-chart" type 'bar' data options legend display false </ > script Let’s break this down into pieces. First, we’re loading our required libraries. The Cube.js client could be installed in different ways, here we’re just loading a UMD build from CDN. We’re also loading Bootstrap, Chart.js, and numeral.js to format numbers from CDN. <link rel= href= integrity= crossorigin= > <script src= > <script src= > "stylesheet" "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" "anonymous" < = > script src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" </ > script "//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js" </ > script "https://unpkg.com/@cubejs-client/core@0.6.0/dist/cubejs-client-core.js" </ > script The next part is just a plain HTML markup with the Bootstrap grid. The last part is where we load and display data in our dashboard widgets. For the sake of this tutorial, we don’t use any frontend libraries. But, if you want, Cube.js has bindings for all popular frontend frameworks, such as React. First, we’re initializing the Cube.js client and passing an API Token and API URL. Your API Token should be printed to the terminal upon the server start. The URL should be the same. cubejsApi = cubejs( ,
  { : }
); var 'YOUR-API-TOKEN' apiUrl 'http://localhost:3000/cubejs-api/v1' Next, we’re loading and displaying data for the upper row of the dashboard, the KPIs section. Here we display just the plain numbers with some formatting done by numeral.js. kpis = [
  { : , : },
  { : , : },
  { : , : }
];

kpis.forEach( {
  cubejsApi
    .load({ : [kpi.measure]
    })
    .then( { .getElementById(kpi.element).textContent = numeral(
        resultSet.totalRow()[kpi.measure]
      ).format( );
    });
}); var measure "Tweets.count" element "total-tweets" measure "Tweets.retweetCount" element "total-retweets" measure "Tweets.favoriteCount" element "total-favorites" => kpi measures => resultSet document "0,0" The row has one pie and one bar chart, plotted with Chart.js. To display the bar chart, we’re requesting the measure and grouping it by the dimension. We’re also applying a filter to exclude tweets with an empty location. Finally, we’re setting the limit to 5 to get only the top 5 locations. Tweets.count Tweets.location You can learn more about the Cube.js Query format here. For the bar chart, we’re doing a similar grouping, but instead of location, we’re grouping by the dimension. Tweets.lang chartJsData = { { : [
      { : resultSet.series()[ ].series.map( { r.value;
        }), : [ , , , , ]
      }
    ], : resultSet.categories().map( { c.category;
    })
  };
};

cubejsApi
  .load({ : [ ], : [ ], : [
      { : , : , : [ ]
      }
    ], : })
  .then( { Chart( .getElementById( ), { : , : chartJsData(resultSet)
    });
  });

cubejsApi
  .load({ : [ ], : [ ], : })
  .then( { Chart( .getElementById( ), { : , : chartJsData(resultSet), : { : { : } }
    });
  }); // A helper method to format data for Chart.js // and add some nice colors var ( ) function resultSet return datasets data 0 ( ) function r return backgroundColor "rgb(255, 99, 132)" "rgb(255, 159, 64)" "rgb(255, 205, 86)" "rgb(75, 192, 192)" "rgb(54, 162, 235)" labels ( ) function c return measures "Tweets.count" dimensions "Tweets.location" filters dimension "Tweets.location" operator "notEquals" values "" limit 5 => resultSet new document "pie-chart" type "pie" data measures "Tweets.count" dimensions "Tweets.lang" limit 5 => resultSet new document "bar-chart" type "bar" data options legend display false Now, to see the dashboard in action, start your server. $ npm start And visit to see your analytics dashboard in action. Also, we have a live demo of the app . The http://localhost:3000 hosted on Heroku here full source code is available on Github. Why Cube.js Why is using Cube.js better than hitting MongoDB directly with SQL queries? Cube.js solves a plethora of different problems every production-ready analytic application needs to solve: analytic SQL generation, query results caching and execution orchestration, data pre-aggregation, security, API for query results fetch, and visualization. These features allow you to build production-grade analytics applications that are able to handle thousands of concurrent users and billions of data points. They also allow you to do analytics on a production MongoDB read replica or even a MongoDB main node due to their ability to reduce the amount of actual queries issued to a MongoDB instance.

Fetch

Heroku

Twitter

Creating React Dashboard Ultimate Guide Part 1: Overview and Analytics Backend

Five Trending React Visualization Libraries 

Check Cube.js on Github

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

A DIY Guide to Building an Analytics Dashboard with Node, Express, and Cube.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Creating React Dashboard Ultimate Guide Part 1: Overview and Analytics Backend

10 Great Articles On Data Science And Programming!

10 FinTech Trends in 2021 [Part II]

10 Financial Predictions for 2021 to Protect Your Wealth

13 API Metrics That Every Platform Team Should be Tracking

Creating React Dashboard Ultimate Guide Part 1: Overview and Analytics Backend

10 Great Articles On Data Science And Programming!

10 FinTech Trends in 2021 [Part II]

10 Financial Predictions for 2021 to Protect Your Wealth

13 API Metrics That Every Platform Team Should be Tracking

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps