Cube.js

Cube. Js – a complete open source data analysis solution that acts as a data layer between the front end and the back end by providing a high-performance infrastructure for large-scale data set analysis and a front-end friendly API for building dashboard reports and other data analysis applications.

The Cube. Js client executes the query, and the Cube. Js back end converts the business logic (dimensions, Measures and filters) into SQL statements through Cube. The design of business logic is in line with the data design concept of MY open source chart library VE-Charts.

The data design of VE-Charts uses fundamental concepts of data analysis to provide visualizations and data using a combination of dimensions and measurements. The data received by VE-Charts is in JSON format and is divided into Dimensions and Measures.

What are dimensions and measures?

  • Dimensions Dimensions determine how visual content data is grouped, typically presented on the X-axis of a bar chart or slices of a pie chart, such as time, region, product type, and so on.
  • Metrics Metrics are calculations used in visualization that result in specific reference values, usually presented on the Y-axis of a bar chart or in the columns of a table. Measures are created by an expression composed of aggregate functions (such as Sum or Max) combined with one or more fields, such as evaporation, precipitation, sales, and so on.

Vue Dashboard

Next we build a Dashboard application using Vue, Cubo.js and VE-Charts. Check out the Demo here, or check out the example below

Building Dashboard requires two client libraries that use Cube. Js:

  • @cubejs-client/coreCreate Cube. Js instance based on backend service URL and API Token
  • @cubejs-client/vueBased on Vue componentsThe client API
// Dashboard.vue
import cubejs from "@cubejs-client/core";
import { QueryBuilder } from "@cubejs-client/vue";
    
const cubejsApi = cubejs(
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.e30.K9PiJkjegbhnw4Ca5pPlkTmZihoOm42w8bja9Qs2qJg",
  { apiUrl: "https://react-query-builder.herokuapp.com/cubejs-api/v1"});Copy the code

The QueryBuilder API is used to build interactive analysis query builders. It abstracts the state management and API calls of Cube. Js Backend. With the Scoped Slot Props feature in Vue, the results of data processing are transmitted to the ChartAdapter components as Props.

// Dashboard.vue
<! -- New Users Over Time Query -->
<query-builder :cubejs-api="cubejsApi" :query="lineQuery">
  <template v-slot="{ loading, resultSet }">
    <! -- Diagram adapter component -->
    <chart-adapter v-if=! "" loading" type="line" :result-set="resultSet"/>
  </template>
</query-builder>
Copy the code

Diagram adapter component

Render different types of charts

// ChartAdapter.vue
<template>
  <div class="cube-chart-adpater">
    <! Render statistics -->
    <statistic v-if="type === 'stat'" :title="title" :value="statValue" />
    <! -- Render line graph -->
    <ve-line-chart v-if="type === 'line'" :data="chartData" :settings="lineSettings" />
    <! Render bar chart -->    
    <ve-bar-chart v-if="type === 'bar'" :data="chartData" :settings="barSettings" />
  </div>
</template>
Copy the code

Data mapping

According to the client ResultSet API, the data is processed and mapped to the chart library data format.

// ChartAdapter.vue
export default{... computed: {// Series name
    seriesNames () {
      return this.resultSet.seriesNames()
    },
    / / metric
    metrics () {
      if (this.loading) return [' '];
      return this.seriesNames.map(x= > x.key);
    },
    // Normalize the query result
    chartPivot () {
      if (this.loading) return [];
      return this.resultSet.chartPivot();
    },
    // Statistics indicator value
    statValue () {
      return parseFloat(this.chartPivot[0] [this.metrics[0]])
    }
  },
  mounted () {
    let dimensionsData = []
    const measuresData = []
    this.seriesNames.forEach((e) = > {
      const data = this.chartPivot.map(v= > v[e.key]);
      measuresData.push({ name: e.key, data });
      dimensionsData = this.chartPivot.map(v= > dayjs(v.x).format('YYYY-MM'))});// Data needed to build VE-Charts
    const chartData = {
      dimensions: {
        name: 'DateTime'.data: dimensionsData
      },
      measures: measuresData
    }
    this.chartData = chartData
  }
  ...
}

Copy the code

Render charts using VE-Charts

Ve-charts is a component library based on ve2. X and ECharts 4.x to solve the trouble caused by complicated ECharts configuration items and data conversion. Provides highly configurable, simple, and efficient componentization solutions for building charts.

Introduction of ve – charts

// main.js
import VeCharts from 've-charts'  // Full import
import 've-charts/lib/ve-charts.min.css'
    
Vue.use(VeCharts)
Copy the code

Components can be introduced in Vue projects like this:

<ve-bar-chart
  :data="chartData"/ / data:settings="chartSettings"// Chart configuration:title="title"// General configuration />
Copy the code

Data interface design

When VE-Charts was created in the early stage, ECharts was still in the 3.x version without the 4.x version dataset API. In order to unify the front and back end data interfaces, we removed component data transmission parameters and served the requirements of visual presentation, so we redesigned the data transmission format of visual charts. As mentioned earlier, no more expansion.

For the full ve-Charts document click here

To summarize

Use a diagram to illustrate how the Vue Dashboard renders visual charts.

reference

  • Vue Dashboard Tutorial Using Cube.js