Building Advanced Analytics with Cube Semantic Layer and Vue.js: A Qualibrate Case Study

Qualibrate is a Software as a Service (SaaS) company headquartered in Amsterdam, The Netherlands. The company operates within a team of 11-50 employees and uses a tech stack that includes MongoDB and React. Qualibrate's primary goal is to provide its users with a seamless experience on their platform, particularly in terms of advanced reporting and dashboard generation. They are committed to leveraging the best tools and technologies available to achieve this goal, and are not averse to collaborating with the wider community to improve their offerings. Their recent project involved integrating Cube from Statsbot.co into their workflow to enhance their platform's reporting capabilities.

Qualibrate, a SaaS company based in Amsterdam, was seeking an effective way to provide its users with the flexibility of advanced reporting and simplicity in generating dashboards. While there were several great products available in the market such as Kibana and Grafana, Qualibrate wanted to offer a seamless experience within their own platform. The challenge was to find a solution that would integrate well with their current platform which uses Vue.js. After considering various options, they found Cube from Statsbot.co to be a perfect fit for their use case. However, there was a significant caveat - Cube did not have an implementation for Vue.js. This led Qualibrate to consider working with the community to improve the MongoDB connector and integrate Cube into their workflow.

Qualibrate decided to leverage the power of community collaboration rather than trying to replicate an existing product. They started using Cube in their workflow and began to work on improving the MongoDB connector. Once they were able to map their database schemas and curate their relationships, they started to match the React components as closely as possible in Vue.js. They set up a demo backend using MongoDB, created a new Vue CLI project, and installed the @cubejs-client/vue dependency. They also added vue-multiselect, vue-chartkick, and Chart.js for this example. They then configured the Vue application's configuration variables through a .env file and set up global components in the src/main.js file. They used the QueryRenderer and QueryBuilder components of Cube to fetch data and generate queries. They also added the capability to select dimensions and measures, which would update the query and render the content accordingly.

• By integrating Cube into their workflow and improving the MongoDB connector, Qualibrate was able to provide a seamless and enhanced user experience on their platform. They were able to offer advanced reporting and simple dashboard generation capabilities to their users. The use of Cube's QueryRenderer and QueryBuilder components allowed them to fetch data and generate queries efficiently. The addition of the capability to select dimensions and measures provided users with more flexibility and control over their reporting and dashboard generation processes. This collaborative approach not only improved their product but also strengthened their relationship with the wider tech community.