`@cubejs-client/vue`

@cubejs-client/vue provides Vue Components to easily integrate Cube within a Vue.js app.

QueryBuilder

<QueryBuilder /> is used to build interactive analytics query builders. It abstracts state management and API calls to Cube Backend. It uses scoped slot props technique.

Props

Name	Type	Description
cubeApi	CubeApi	`CubeApi` instance to use
initialChartType?	ChartType	The type of chart to display initially. Default is `line`.
disableHeuristics?	boolean	Defaults to `false`. This means that the default heuristics will be applied. For example: when the query is empty and you select a measure that has a default time dimension it will be pushed to the query.
query?	Query	Query parameters (learn more about the format). This property is reactive - if you change the object here, the internal query values will be overwritten. This is not two-way.
stateChangeHeuristics?	(state: QueryBuilderState) => QueryBuilderState	A function that accepts the `newState` just before it's applied. You can use it to override the defaultHeuristics or to tweak the query or the vizState in any way.
initialVizState?	VizState	-
wrapWithQueryRenderer?	boolean	Defaults to `true`. Use QueryRenderer to render. Set this to `false` to use your own QueryRenderer.

Slots

Default Slot

Slot Props

resultSet: A resultSet is an object containing data obtained from the query. ResultSet object provides a convenient interface for data manipulation.

Empty Slot

This slot functions as an empty/loading state; when the query is loading or empty, you can show something in the meantime.

Error Slot

This slot will be rendered if any error happens while the query is loading or rendering.

Slot Props

error: the error.
sqlQuery: the attempted query.

Builder Slot

measures, dimensions, segments, timeDimensions, filters - arrays containing the selected query builder members.
availableMeasures, availableDimensions, availableTimeDimensions, availableSegments - arrays containing available members to select. They are loaded via API from Cube Backend.
addMeasures, addDimensions, addSegments, addTimeDimensions - functions to control the adding of new members to query builder.
removeMeasures, removeDimensions, removeSegments, removeTimeDimensions - functions to control the removing of members to query builder.
setMeasures, setDimensions, setSegments, setTimeDimensions - functions to control the setting of members to query builder.
updateMeasures, updateDimensions, updateSegments, updateTimeDimensions - functions to control the updating of members to query builder.
chartType - string containing currently selected chart type.
updateChartType - function-setter for chart type.
isQueryPresent - bool indicating whether is query ready to be displayed or not.
query - current query, based on selected members.
setLimit, removeLimit - functions to control the number of results returned.
setOffset, removeOffset - functions to control the number of rows skipped before results returned. Use with limit to control pagination.

Example

Open in CodeSandbox

<template>
  <query-builder :cube-api="cubeApi" :query="query">
    <template #builder="{ measures, setMeasures, availableMeasures }">
      <multiselect
        placeholder="Please Select"
        label="Title"
        track-by="name"
        multiple
        :customLabel="customLabel"
        :value="measures"
        :options="availableMeasures"
        @input="(...args) => set(setMeasures, ...args)"
      />
    </template>
 
    <template #default="{ resultSet }">
      <chart-renderer v-if="resultSet" :result-set="resultSet" />
    </template>
 
    <template #empty>Loading...</template>
  </query-builder>
</template>
 
<script>
  import cube from "@cubejs-client/core";
  import Multiselect from "vue-multiselect";
  import { QueryBuilder } from "@cubejs-client/vue";
  import ChartRenderer from "./ChartRenderer.vue";
 
  const API_URL =
    "https://awesome-ecom.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1";
  const CUBE_TOKEN =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1OTQ2NjY4OTR9.0fdi5cuDZ2t3OSrPOMoc3B1_pwhnWj4ZmM3FHEX7Aus";
 
  const cubeApi = cube(CUBE_TOKEN, { apiUrl: API_URL });
 
  export default {
    name: "QueryBuilderExample",
    components: {
      Multiselect,
      QueryBuilder,
      ChartRenderer,
    },
    data() {
      const query = {
        measures: [],
        timeDimensions: [
          {
            dimension: "LineItems.createdAt",
            granularity: "month",
          },
        ],
      };
 
      return {
        cubeApi,
        selected: undefined,
        query,
      };
    },
    methods: {
      customLabel(a) {
        return a.title;
      },
      set(setMeasures, value) {
        setMeasures(value.map((e) => e.name));
      },
    },
  };
</script>

QueryRenderer

<QueryRenderer /> Vue component takes a query, fetches the given query, and uses the slot scoped props to render the resulting data.

Props

Name	Type	Description
cubeApi	CubeApi	`CubeApi` instance to use
loadSql?	"only" \| boolean	Indicates whether the generated by Cube SQL Code should be requested. See rest-api#sql. When set to `only` then only the request to /v1/sql will be performed. When set to `true` the sql request will be performed along with the query request. Will not be performed if set to `false`
queries?	object	-
query	Query	Analytic query. Learn more about it's format

Slots

Default Slot

Slot Props

resultSet: A resultSet is an object containing data obtained from the query. ResultSet object provides a convenient interface for data manipulation.

Empty Slot

This slot functions as an empty/loading state; when the query is loading or empty, you can show something in the meantime.

Error Slot

This slot will be rendered if any error happens while the query is loading or rendering.

Slot Props

error: the error.
sqlQuery: the attempted query.

Example

<template>
  <query-renderer :cube-api="cubeApi" :query="query" v-if="cubeApi">
    <template #default="{ resultSet }"> </template>
 
    <template #empty> Loading... </template>
  </query-renderer>
</template>
 
<script>
  import cube from "@cubejs-client/core";
  import { QueryRenderer } from "@cubejs-client/vue";
 
  const cubeApi = cube("YOUR-CUBE-API-TOKEN", {
    apiUrl: "http://localhost:4000/cubejs-api/v1",
  });
 
  export default {
    name: "QueryRendererExample",
    components: {
      QueryRenderer,
    },
    data() {
      const query = {
        measures: ["LineItems.count", "LineItems.quantity", "Orders.count"],
        timeDimensions: [
          {
            dimension: "LineItems.createdAt",
            granularity: "month",
          },
        ],
      };
 
      return {
        cubeApi,
        query,
      };
    },
  };
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

Types

ChartType

ChartType: "line" | "bar" | "table" | "area" | "number" | "pie"

QueryBuilderState

Name	Type
query	Query
chartType?	ChartType

VizState

Name	Type
chartType?	ChartType
pivotConfig?	PivotConfig
shouldApplyHeuristicOrder?	boolean

ngx ws-transport