Originally published at Qualibrate Blog
Here at Qualibrate we’ve been trying to manage the best way to give users the flexibility of advanced reporting and simplicity in generating great dashboards, and while Kibana, Grafana, et al. are great products, we wanted to give our users a seamless experience when they’re using our platform.
After discussing the variety of options available versus the case of building our own, we found Cube from Statsbot.co. We thought that their offering was perfect for our use case, but there was a big caveat—our current platform uses the Vue.js for which there was no implementation. That’s when the spark ignited; why should we reinvent the wheel by trying to copy an incredible product, when instead we could take advantage of what a great community gives us and try to work on this together. We started using Cube in our workflow when we saw there was a opportunity to make an improvement on the MongoDB connector. That moment, our relationship with the community began.
Once we were able to map our database schemas and curate our relationships, our work began. We tried to match the React components as closely as possible in Vue.js. This is the result.
If you already have Cube Backend up and running you can skip this step.
Since we’re using MongoDB for our product, we’ll use it for our tutorial as well. Please follow this guide to set up the Cube backend.
Let’s create a new Vue CLI project using @vue/cli and navigate into it.
Next, install the
Also, we're going to add
Chart.js for this example
Now we can start the development server
Voila! Your application will be launched and is available at http://localhost:8080 and should look like this:
Vue applications configuration variables can be loaded through a .env file and
will be available if using the
VUE_APP_ convention (More information available here)
Whenever your application is running, this configuration will be accessible through
src/main.js is the default entrypoint to any generated
it’s where the Vue app is mounted. In this case, we’re putting global components
so that they’re available everywhere.
<query-renderer/> component takes a Cube object and a formulated query
in order to fetch the data and return a
resultSet. It handles the request asynchronously
and renders the slot once it’s been resolved.
Here is a simple example of a
<chart-renderer/> component for displaying information
resultSet mapping the result into an object that is compatible with the
line-chart data series:
Up until this point it should look something like this:
<query-builder/> component is a utility that gets the schema information
from the API and allows you to generate the query with some helper methods.
Some of these include
addMeasures, which change the underlying query
and update the
resultSet on the background. Every available method is part of the
scoped slots object.
The only required prop is
cubejsApi. It expects an instance of your Cube API client returned by the Cube method.
Then we’re going to add the capability to select some dimensions and measures.
It will update the query and render the content accordingly. The
setDimensions methods set the collection directly to the query since these multiselect
controls make it a bit easier.
availableDimensions get the information
from the schema to show allowed inputs.
This is a fully working example and should look like this.
Similar to measures,
updateMeasures, there are properties
to render and dimensions, segments, time, filters, and chart types to manage.
You can find the full list of properties in the documentation.
Fully managed hosting of your Cube apps