Ashutosh Singh

Apache ECharts

Building an Apache ECharts Dashboard with Vue 3 and Cube

Quite commonly in our applications, we need to create interactive report builders to let users build custom reports and dashboards. This usually involves selecting the metrics, groupings, date ranges, filters, and chart types. To help developers build such interactive components, we've created a query builder component in Cube client libraries.

We've already covered how to use it in the [React client library](https://cube.dev/blog/react-query-builder-with-cubejs/), and in this blog post, we'll talk about using it with Vue.js. The query builder component uses the [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) technique and lets developers implement their own render logic. This way it gives maximum flexibility for building a custom-tailored UI with minimal API. Below you can see the demo of the query builder component with [Vuetify](https://vuetifyjs.com/en/).

You can find the [live demo of the example here](https://vue-query-builder-demo.cube.dev/) and [its source code is available on Github](https://github.com/cube-js/cube.js/tree/master/examples/vue-query-builder).

![Example gif](https://media.graphcms.com/oxRJf1yeRqaKIwWrxR8G)

## Setup a Demo Backend

Let's start by installing the Cube CLI if you don't have it already and creating a new project.

```
$ npm install -g cubejs-cli
$ cubejs create -d postgres vue-query-builder
```

In this tutorial we'll use a remote PostgreSQL database and our example e-commerce dataset. Cube uses environment variables for configuration, which starts with `CUBEJS_`. To configure the connection to our database, we need to specify the DB type, name and several other options. In the Cube project folder replace the contents of `.env` file with the following:

```
CUBEJS_DB_TYPE=postgres
CUBEJS_DB_HOST=demo-db-examples.cube.dev
CUBEJS_DB_PORT=5432
CUBEJS_DB_SSL=true
CUBEJS_DB_USER=cube
CUBEJS_DB_PASS=12345
CUBEJS_DB_NAME=ecom
CUBEJS_DEV_MODE=true
CUBEJS_WEB_SOCKETS=true
CUBEJS_API_SECRET=SECRET
```

Now that we have everything configured, let's start the Cube development server with the following command.

```
$ npm run dev
```

Navigate to [http://localhost:4000](http://localhost:4000/) in your browser to access the Cube Playground. It is a development environment that generates the Cube schema, creates scaffolding for charts, and lets you test your queries and debug them. It also has its own query builder, which lets you generate charts with different charting libraries.

![Backend setup](https://media.graphcms.com/rnfonR0sSdGaUXyhFHDO)

Now let’s move on to building our own query builder with Vue.js! 💻

## Building a Query Builder

We're going to use [Vue CLI](https://cli.vuejs.org/) to generate a new project. Run the following command to install Vue CLI if you don't have it already.

```
$ npm install -g @vue/cli
```

To a create a new project with Vue CLI run the following command inside the Cube project folder. Make sure to select `Vue 2` when asked to choose a preset.

```
$ vue create dashboard-app
```

To render the UI for query builder we are going to use [Vuetify](https://vuetifyjs.com/en/), a Vue UI Library with material components. Let's add it to our project. Run the following command inside the `dashboard-app` folder.

```
$ vue add vuetify
```

To create our color scheme you can open `src/plugins/vuetify.js` and add this code:

```diff
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        primary: '#7A77FF',
+      },
+    },
+  },
})

```

Now we can start our frontend application.

```
$ yarn serve
```

You can check your newly created Vue app at [http://localhost:8080](http://localhost:8080/). Next, let's install dependencies we'll need for building our Query Builder: Cube Vue client, Vue Chartkick, and Chart.js.

```
$ npm install --save vue-chartkick@0.6.1 chart.js@2 core-js @cubejs-client/core @cubejs-client/vue
```

Let's create a first simple Query Builder to allow users to select the metric from the dropdown list and then render it as a line chart over time.

Cube Query Builder component can load the list of available measures based on the data schema from the backend. We can access these measures as an `availableMeasures` slot prop. We'll render that list with the `v-select` component from Vuetify. Then when the user selects the measure, we're going to use a `setMeasures` slot prop to update the measures in our query and finally render the query result as a line chart with Vue Chartkick and Chart.js.

[You can learn more about other slot props in the Query Builder component in the docs.](https://cube.dev/docs/@cubejs-client-vue#query-builder)

Replace the content of the `src/HelloWord.vue` file with the following.

```jsx
<template>
  <v-container fluid class="text-center background pa-0">
    <query-builder :cubejs-api="cubejsApi" :query="query" :disableHeuristics="true" css="width: 100%">
      <template v-slot:builder="{measures,setMeasures,availableMeasures}">
        <v-container fluid class="pa-4 pa-md-8 pt-6 background-white">
          <v-row>
            <v-col cols="12" md="2">
              <v-select
                multiple
                label="Measures"
                outlined
                hide-details
                :value="measures.map(i => (i.name))"
                @change="setMeasures"
                :items="availableMeasures.map(i => (i.name))"
              />
            </v-col>
          </v-row>
        </v-container>
      </template>
      <template v-slot="{ resultSet }">
        <div class="pa-4 pa-md-8" v-if="resultSet">
          <div class="border-light pa-4 pa-md-12">
            <line-chart legend="bottom" :data="series(resultSet)"></line-chart>
          </div>
        </div>
      </template>
    </query-builder>
  </v-container>
</template>

<script>
import cubejs from '@cubejs-client/core'
import { QueryBuilder } from '@cubejs-client/vue'

const cubejsApi = cubejs("CUBEJS-TOKEN", {
  apiUrl: `http://localhost:4000/cubejs-api/v1`
});

export default {
  name: 'HelloWorld',

  components: {
    QueryBuilder
  },
  data: () => {
    const query = {
      limit: 100,
      timeDimensions: [
        {
          dimension: 'LineItems.createdAt',
          granularity: 'day',
          dateRange: 'Last 30 days'
        }
      ],
    }

    return {
      cubejsApi,
      query
    }
  },
  methods: {
    series (resultSet) {
      return resultSet.series().map(series => ({
        name: series.key,
        data: series.series.map(row => [row.x, row.value])
      }))
    }
  }
}
</script>

<style scopped>
  .background {
    background: #F3F3FB;
    min-height: 100vh;
  }
  .background-white {
    background: #fff;
  }
  .border-light {
    background: #FFFFFF;
    border-radius: 8px;
  }
</style>

```

Now we can use updated `HelloWorld` component in our `App` component. Replace the content of the `src/App.vue` with the following.

```jsx
<template>
  <v-app>
    <v-app-bar
      app
      color="#43436B"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cube.dev/downloads/logo-full.svg"
          transition="scale-transition"
        />
      </div>
    </v-app-bar>

    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',

  components: {
    HelloWorld
  }
}
</script>

```

The last small change we need to make is to register the `VueChartkick` plugin. Update the `src/main.js` file.

```diff
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
+ import Chart from 'chart.js'
+ import VueChartkick from 'vue-chartkick'

Vue.config.productionTip = false
+ Vue.use(VueChartkick, { adapter: Chart })

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

```

We've just built our first simple query builder 🎉. Navigate to [http://localhost:8080/](http://localhost:8080/) in your browser and you should be able to test it out.

![Measures example](https://media.graphcms.com/K94cVJSyR4iQ4Hiyqhy3)

We can already plot the count of orders over time. But what if we want to see the breakdown of orders by the status? To do so, we'd need to introduce the dimensions dropdown to let users select the grouping option.

We'll use more slot props for this: `dimensions`, `availableDimensions` and `setDimensions`. They work they same as slot props for measures allowing us to list the available dimensions and update the list of selected ones.

Update `src/HelloWorld.vue` file.

```diff
<template>
  <v-container fluid class="text-center background pa-0">
    <query-builder :cubejs-api="cubejsApi" :query="query" :disableHeuristics="true" css="width: 100%">
+    <template 
+       v-slot:builder="{
+    <template 
+       v-slot:builder="{
+       measures,
+       setMeasures,
+       availableMeasures,
+       dimensions,
+       setDimensions,
+       availableDimensions
+       }"
+     >
        <v-container fluid class="pa-4 pa-md-8 pt-6 background-white">
            <v-row>
	          <v-col cols="12" md="2">
	            <v-select
	              multiple
	              label="Measures"
	              outlined
		          hide-details
	              :value="measures.map(i => (i.name))"
	              @change="setMeasures"
	              :items="availableMeasures.map(i => (i.name))"
	            />
	          </v-col>
+             <v-col cols="12" md="2">
+               <v-select
+                 multiple
+                 label="Dimensions"
+                 outlined
+                 hide-details
+                 :value="dimensions.map(i => (i.name))"
+                 @change="setDimensions"
+                 :items="availableDimensions.map(i => (i.name))"
+               />
+             </v-col>
	        </v-row>
          </v-container>
        </template>
        <template v-slot="{ resultSet }">
	        <div class="pa-4 pa-md-8" v-if="resultSet">
	          <div class="border-light pa-4 pa-md-12">
	            <line-chart legend="bottom" :data="series(resultSet)"></line-chart>
	          </div>
	        </div>
	      </template>
      </query-builder>
  </v-container>
</template>
```

Refresh your browser and now you should be able to select the dimensions for grouping as well!

![Dimension exmaple](https://media.graphcms.com/OXyr0XjQymZObzKqfHNo)

That's all for this tutorial. Congratulations on completing it! 🎉

There are other controls you can add to your query builder like filters, date range, and granularity, as well as chart type selector. You can find [a more complicated example with all these controls here](https://vue-query-builder-demo.cube.dev/) and [its source code here on Github.](https://github.com/cube-js/cube.js/tree/master/examples/vue-query-builder)

Please send any comments or feedback you might have to this [Slack Community](http://slack.cube.dev/). Thank you and I hope you found this tutorial helpful!

Leonid Yakovlev

Vue 2 Query Builder with Cube

There are a couple of popular front-end frameworks today. We recently covered how to build an analytics dashboard with [React](https://cube.dev/blog/cubejs-open-source-dashboard-framework-ultimate-guide/) and [Angular](https://cube.dev/blog/angular-dashboard-tutorial-with-cubejs/). What both of these guides share is [Cube.js](https://cube.dev)—an open-source analytics framework, which powers these dashboards with high-performance data. Being open-source, Cube.js is open to contributions, and you can find a [contribution guide](https://github.com/statsbotco/cube.js/blob/master/CONTRIBUTING.md) in the repository on Github.
One of the latest contributions from the community is a Cube.js client for Vue. It was built by Ricardo Tapia from Qualibrate and he's got a great [blog post about that process](https://cube.dev/blog/how-we-build-analytics-at-qualibrate-using-cubejs-and-vuejs/). In this tutorial, I'll touch on some details and provide a step-by-step guide on building your own analytics dashboard with [Vue](https://vuejs.org/).


We will be using [Vue](https://vuejs.org/), [Cube.js](https://cube.dev), and [Laue](https://laue.js.org/). You can find a final dashboard [here](https://codesandbox.io/s/cubejs-vue-demo-trww8?fontsize=14) and a CodeSandbox with the source code below.

<iframe src="https://codesandbox.io/s/cubejs-vue-demo-trww8?fontsize=14" title="Cube.js Vue Demo" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

## Setting up a Cube.js Backend
We covered this topic in other tutorials, so if you already have your Cube.js backend set up and running, you can skip this section.

You can install Cube.js CLI, which is used for various Cube.js workflows, via NPM or Yarn.

```bash
npm install -g cubejs-cli
```

Let's prepare a Cube.js Backend to serve data for the dashboard we're building. Cube.js supports many databases and deployment options. You can learn more about it in the [documentation](https://cube.dev/docs/deployment). For this tutorial, we’ll use a Postgres database and deploy Cube.js to Heroku. Let's create a new Cube.js application using the CLI we just installed.

```bash
cubejs new vue-demo -d postgres
cd vue-demo
```

In case you don't have a database for the dashboard yet, you can download our demo e-commerce dataset for Postgres.

```bash
curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.sql
createdb ecom
psql --dbname ecom -f ecom-dump.sql

```

The next step is to define a data model. In a production application, you most likely will have multiple schema files, but for our demo app we are going to have only one cube. If you're not familiar with Cube.js data schema, there's an in-depth tutorial [here](https://cube.dev/docs/getting-started-cubejs-schema).

```javascript
cube(`Users`, {
  sql: `SELECT * FROM users`,

  measures: {
    count: {
      sql: `id`,
      type: `count`
    }
  },

  dimensions: {
    city: {
      sql: `city`,
      type: `string`
    },

    signedUp: {
      sql: `created_at`,
      type: `time`
    },

    companyName: {
      sql: `company_name`,
      type: `string`
    }
  }
});
```

Cube.js uses data schema to generate and execute SQL in the connected database. We can test it out by sending a sample request to the Cube.js REST API endpoint.

```bash
curl \
 -H "Authorization: EXAMPLE-API-TOKEN" \
 -G \
 --data-urlencode 'query={"measures":["Users.count"]}' \
 http://localhost:4000/cubejs-api/v1/load
```

You can learn more about the Cube.js Query format [here](https://cube.dev/docs/query-format).

Finally, let’s deploy our backend to Heroku:

```bash
git init
git add -A
git commit -am "Initial commit"
heroku create cubejs-vue-demo
git push heroku master
```

You can find full deployment guide in the [documentation](https://cube.dev/docs/deployment#heroku).

## Create Vue App
When the backend is up and running, it's time to build the dashboard. Since we're using Vue, the best way to create a new app is by using `vue-cli`.

First, install vue-cli if you don't have it already: 

```bash
npm install -g @vue/cli
# or using yarn
yarn global add @vue/cli
```
To create an app, you can use your terminal or start a tool called [Vue UI](https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui):

```bash
vue ui
```

This will run a website on your computer, which allows you to create apps, run, and monitor them. It also contains all links to documentation and other community resources.

To create an app using the terminal, all you need is a name:

```bash
vue create YOUR-APP-NAME
cd YOUR-APP-NAME
```

You can configure plugins for your application, but for the demo we'll use the default setup.

If you created the app using Vue UI, you can start it right there. If you're using the console, run the `serve` task:

```bash
npm run serve
# or using yarn
yarn serve
```

Now your application is running on your computer and is accessible via the browser.

## Setting up the dashboard

First, we'll add some basic styles using [Bootstrap](https://getbootstrap.com/). We'll install it from the CDN, but you can add it using npm or yarn. Open your `public/index.html` file and add Bootstrap resources:

```html
<head>
	...
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	 crossorigin="anonymous">
</head>

```

Now when bootstrap is installed, we can create some basic structure for the app:

```html
<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4">
      </div>
      <div class="col-sm-4">
      </div>
      <div class="col-sm-4">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
      </div>
      <div class="col-sm-6">
      </div>
    </div>
  </div>
</template>

```
Now we need some data to show. There's a full [documentation](https://cube.dev/docs/@cubejs-client-vue) for the Cube.js Vue client where you can find additional options. First, we need to set up a Cube.js instance with our backend URL and API token:

```javascript
// App.vue
import cubejs from "@cubejs-client/core";
import { QueryBuilder } from "@cubejs-client/vue";

const cubejsApi = cubejs(
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1OTQ2NjY4OTR9.0fdi5cuDZ2t3OSrPOMoc3B1_pwhnWj4ZmM3FHEX7Aus",
  { apiUrl: "https://awesome-ecom.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1" }
);

```

Now let's set up our app to use a [QueryBuilder component](https://cube.dev/docs/@cubejs-client-vue#query-builder) and create a query counting all users:

```javascript
// App.vue

export default {
  name: "App",
  components: {
    Chart,
    QueryBuilder
  },
  data() {
    return {
      cubejsApi,
      usersQuery: { measures: ["Users.count"] }
  }
};
```

The Cube.js Vue Client allows child components to receive a [resultSet](https://cube.dev/docs/@cubejs-client-core#result-set) object for a given query. Let's create a new component called `Chart`:

```html
# components/Chart.vue
<template>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">{{ title }}</h5>
      <div class="card-text">
        <div class="d-flex justify-content-center text-dark">
          <div class="spinner-border" role="status" v-if="loading">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
        <h1
          v-if="!loading && type === 'number'"
          height="300"
        >{{ values[0][metrics[0]] }}</h1>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Chart",
  props: {
    resultSet: Object,
    loading: Boolean,
    title: String,
  },
  computed: {
    values: function() {
      if (this.loading) return [];
      return this.resultSet.chartPivot();
    },
    metrics: function() {
      if (this.loading) return [""];
      return this.resultSet.seriesNames().map(x => x.key);
    }
  };
</script>

```

What we need here is to display a loading element while data is loading and show a number after. Let's get back to our `App.vue` component and create a first tile:

```html
<query-builder :cubejs-api="cubejsApi" :query="usersQuery">
  <template v-slot="{ loading, resultSet }">
    <Chart title="Total Users" :loading="loading" :result-set="resultSet"/>
  </template>
</query-builder>
```

We're using here a [QueryBuilder component](https://cube.dev/docs/@cubejs-client-vue#query-builder) that passes the data into the Chart component using [Vue Scoped Slot Props](https://vuejs.org/v2/guide/components-slots.html#Named-Slots). Now there's a counter on our dashboard showing total users. Let's add some charts!

Charts

To create a chart, we'll use the [Laue](https://laue.js.org/) library. It's pretty simple and has a great collection of examples online. First, we'll install Laue in our application:

```javascript
// main.js

import { Laue } from 'laue';

Vue.use(Laue);
```

This allows us to use all Laue items in any component. There are other installation methods in the [documentation](https://laue.js.org/guide). Now let's create a LineChart component:

```html
<template>
  <la-cartesian autoresize :data="values" :padding="[0, 0, 5, 0]">
    <la-line curve :width="2" color="#7DB3FF" :prop="metrics[0]"/>
    <la-y-axis :nbTicks="4"></la-y-axis>
    <la-x-axis prop="x" :format="dateFormatter" :interval="6"></la-x-axis>
    <la-tooltip></la-tooltip>
  </la-cartesian>
</template>

<script>
import moment from "moment";
export default {
  name: "LineChart",
  props: {
    values: Array,
    metrics: Array
  },
  methods: {
    dateFormatter: function(value) {
      return moment(value).format("MMM YY");
    }
  }
};
</script>
```

To render chart, we'll use a type prop on our Chart component. Let's add a conditional render there:

```html
<line-chart v-if="!loading && type === 'line'" :values="values" :metrics="metrics"/>
```

Now our LineChart component is done! What we need now is to add a query for the line chart in our App.vue component:

```html
<query-builder :cubejs-api="cubejsApi" :query="lineQuery">
  <template v-slot="{ loading, resultSet }">
    <Chart
      title="New Users Over Time"
      type="line"
      :loading="loading"
      :result-set="resultSet"
    />
  </template>
</query-builder>

<script>
...
data() {
  return {
    cubejsApi,
    usersQuery: { measures: ["Users.count"] },
    lineQuery: {
      measures: ["Users.count"],
      timeDimensions: [
        {
          dimension: "Users.createdAt",
          dateRange: ["2019-01-01", "2020-12-31"],
          granularity: "month"
        }
      ]
    }
  }
...
</script>
```
That's it for the line chart. The setup for the bar chart is pretty similar.

And the dashboard is complete! You can find the dashboard live [here](https://codesandbox.io/s/cubejs-vue-demo-trww8?fontsize=14) and the source code in this [CodeSandbox](https://codesandbox.io/s/cubejs-vue-demo-trww8). We hope you found this guide useful.

Timur Minulin

Vue Dashboard Tutorial Using Cube.js

_Originally published at [Qualibrate Blog](https://qualibrate.com/blog/data-science/our-path-towards-advanced-quality-reporting-analytics/)_

Here at [Qualibrate](https://qualibrate.com) 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.js](https://cube.dev) from [Statsbot.co](https://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.js 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.

## Set up a demo backend

_If you already have Cube.js 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](https://cube.dev/blog/building-mongodb-dashboard-using-node.js) to set up the Cube.js backend.

## Using the Vue.js library

Let’s create a new Vue CLI project using @vue/cli and navigate into it.

```sh
$ vue create cubejs-mongo-example && cd cubejs-mongo-example
```

Next, install the `@cubejs-client/vue` dependency.

```sh
$ npm install --save @cubejs-client/core @cubejs-client/vue
```

Also, we're going to add `vue-multiselect`, `vue-chartkick` and `Chart.js` for this example

```sh
$ npm install --save vue-multiselect vue-chartkick chart.js
```

Now we can start the development server

```sh
$ npm run serve
```

Voila! Your application will be launched and is available at http://localhost:8080
and should look like this:
![Screen 1](https://media.graphcms.com/nNGn515PRT25o6f0iGNw)

## Environment Variables

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]( https://cli.vuejs.org/guide/mode-and-env.html#environment-variables ))

```sh
VUE_APP_CUBEJS_API_TOKEN=<YOUR-API-TOKEN>
VUE_APP_CUBEJS_API_URL=<YOUR-API-URL>
```
Whenever your application is running, this configuration will be accessible through
the `process.env` object.

## Configure the dependencies

`src/main.js` is the default entrypoint to any generated `@vue/cli` project;
it’s where the Vue app is mounted. In this case, we’re putting global components
so that they’re available everywhere.

```js
import Vue from 'vue';
import VueChartkick from 'vue-chartkick';
import Chart from 'chart.js';
import App from './App.vue';

Vue.config.productionTip = false;
// Add ChartKick components with Chart.js Adapter
Vue.use(VueChartkick, { adapter: Chart });

new Vue({
  render: h => h(App),
}).$mount('#app');
```

## Using the QueryRenderer

The `<query-renderer/>` component takes a Cube.js 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.

```js
<template>
  <div class="hello">
	// Query Renderer component
	<query-renderer :cubejs-api="cubejsApi" :query="query">
  	<template v-slot="{ loading, resultSet }">
      	<chart-renderer
        	v-if="!loading"
        	:result-set="resultSet" />
  	</template>
	</query-renderer>
  </div>
</template>

<script>
import cubejs from '@cubejs-client/core';
import { QueryRenderer } from '@cubejs-client/vue';
import ChartRenderer from './ChartRenderer.vue';

const cubejsApi = cubejs(
  process.env.VUE_APP_CUBEJS_API_TOKEN,
  { apiUrl: process.env.VUE_APP_CUBEJS_API_URL },
);

export default {
  name: 'HelloWorld',
  components: {
	QueryRenderer,
	ChartRenderer,
  },
  data() {
	const query = {
  	measures: ['Orders.count'],
  	timeDimensions: [
    	{
      	dimension: 'LineItems.createdAt',
      	granularity: 'month',
    	},
  	],
	};

	return {
  	cubejsApi,
  	selected: undefined,
  	query,
	};
  },
  methods: {
	customLabel(a) {
  	return a.title;
	},
  },
};
</script>
```

Here is a simple example of a `<chart-renderer/>` component for displaying information
coming from `resultSet` mapping the result into an object that is compatible with the
`vue-chartkick` `line-chart` data series:

```js
<template>
  <div class="chart-renderer">
	<line-chart :data="series"></line-chart>
  </div>
</template>

<script>
export default {
  name: 'ChartRenderer',
  props: {
	resultSet: {
  	type: Object,
  	required: true,
	},
  },
  computed: {
	series() {
  	const seriesNames = this.resultSet.seriesNames();
  	const pivot = this.resultSet.chartPivot();
  	const series = [];
  	seriesNames.forEach((e) => {
    	const data = pivot.map(p => [p.x, p[e.key]]);
    	series.push({ name: e.key, data });
  	});
  	return series;
	},
  },
};
</script>
```

Up until this point it should look something like this:

![Screen 2](https://media.graphcms.com/soafIs2dTGGJGWf2PG5n)

## Using the QueryBuilder


The `<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 `setMeasures` and `addMeasures`, which change the underlying query
and update the `resultSet` on the background. Every available method is part of the
[scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) object.
The only required prop is `cubejsApi`. It expects an instance of your Cube.js API client returned by the Cube.js method.


[Here you can find more detailed reference of the `QueryBuilder` component](https://cube.dev/docs/@cubejs-client-vue)


```js
<template>
  <div class="hello">
	<query-builder :cubejs-api="cubejsApi">
  	<template v-slot="{ measures, setMeasures, availableMeasures, loading, resultSet }">
    	// Render whatever content
  	</template>
	</query-builder>
  </div>
</template>

<script>
import cubejs from '@cubejs-client/core';
import { QueryBuilder } from '@cubejs-client/vue';

const cubejsApi = cubejs(
  process.env.VUE_APP_CUBEJS_API_TOKEN,
  { apiUrl: process.env.VUE_APP_CUBEJS_API_URL },
);

export default {
  name: 'HelloWorld',
  components: {
	QueryBuilder,
  },
  data() {
	return {
  	cubejsApi,
	};
  },
};
</script>
```

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 `setMeasures` and
`setDimensions` methods set the collection directly to the query since these multiselect
controls make it a bit easier. `availableMeasures` and `availableDimensions` get the information
from the schema to show allowed inputs.

```html
<template>
  <div class="hello">
	<query-builder :cubejs-api="cubejsApi" :query="query">
  	<template v-slot="{ measures, setMeasures, availableMeasures, dimensions, setDimensions, availableDimensions, loading, resultSet }">
    	<div class="selects">
      	<multiselect
        	:multiple="true"
        	:customLabel="customLabel"
        	@input="setMeasures"
        	:value="measures"
        	:options="availableMeasures"
        	placeholder="Please Select"
        	label="Title"
        	track-by="name"/>
      	<multiselect
        	:multiple="true"
        	:customLabel="customLabel"
        	@input="setDimensions"
        	:value="dimensions"
        	:options="availableDimensions"
        	placeholder="Please Select"
        	label="Title"
        	track-by="name"/>
    	</div>
      	<chart-renderer
        	v-if="!loading && measures.length > 0"
        	:result-set="resultSet" />
  	</template>
	</query-builder>
  </div>
</template>
```

This is a fully working example and should look like this.

![Screen 3](https://media.graphcms.com/i9IR7fkNShqcxAOCqxfk)

```js
<template>
  <div class="hello">
	<query-builder :cubejs-api="cubejsApi" :query="query">
  	<template v-slot="{ measures, setMeasures, availableMeasures, dimensions, setDimensions, availableDimensions, loading, resultSet }">
    	<div class="selects">
      	<multiselect
        	:multiple="true"
        	:customLabel="customLabel"
        	@input="setMeasures"
        	:value="measures"
        	:options="availableMeasures"
        	placeholder="Please Select"
        	label="Title"
        	track-by="name"/>
      	<multiselect
        	:multiple="true"
        	:customLabel="customLabel"
        	@input="setDimensions"
        	:value="dimensions"
        	:options="availableDimensions"
        	placeholder="Please Select"
        	label="Title"
        	track-by="name"/>
    	</div>
      	<chart-renderer
        	v-if="!loading && measures.length > 0"
        	:result-set="resultSet" />
  	</template>
	</query-builder>
  </div>
</template>

<script>
import cubejs from '@cubejs-client/core';
import Multiselect from 'vue-multiselect';
import { QueryBuilder } from '@cubejs-client/vue';
import ChartRenderer from './ChartRenderer.vue';

const cubejsApi = cubejs(
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.e30.K9PiJkjegbhnw4Ca5pPlkTmZihoOm42w8bja9Qs2qJg',
  { apiUrl: 'https://awesome-ecom.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1' },
);

export default {
  name: 'HelloWorld',
  components: {
	Multiselect,
	QueryBuilder,
	ChartRenderer,
  },
  data() {
	const query = {
  	measures: [],
  	timeDimensions: [
  	],
	};

	return {
  	cubejsApi,
  	selected: undefined,
  	query,
	};
  },
  methods: {
	customLabel(a) {
  	return a.title;
	},
  },
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style scoped>
.hello {
  padding: 0 10rem;
}

.selects {
  display: flex;
}

.selects .multiselect {
  margin: 0.5rem;
}
</style>
```


Similar to measures, `availableMeasures`, and `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](https://cube.dev/docs/@cubejs-client-vue#query-builder).

Ricardo Tapia

User Stories

Qualibrate started using Cube to give their users the flexibility of advanced reporting and generating great dashboards. While implementing Cube to the workflow, Qualibrate improved the MongoDB connector and filled the gap with Vue supporting in Cube.

Vue

Building an Apache ECharts Dashboard with Vue 3 and Cube

Vue 2 Query Builder with Cube

Vue Dashboard Tutorial Using Cube.js

How We Build Analytics at Qualibrate Using Cube.js and Vue.js