Deprecated

This package has been deprecated in favor of @luzmo/vue-embed

Vue.js Cumul.io Dashboards

This is a Vue.js library for embedding Cumul.io dashboards in your Vue 2 or Vue 3 application.

Table of contents

1. Installation instructions
2. Usage
3. Events
4. Public methods
5. Examples
6. Changelog
7. Migration
8. Quick links

Installation instructions

npm i @cumul.io/vue-cumulio-dashboard

Usage

Vue 3

import { createApp } from 'vue';
import App from './App.vue';
import VueCumulioDashboard from '@cumul.io/vue-cumulio-dashboard';

const app = createApp(App);
// Defines the component at app level
app.use(VueCumulioDashboard);
app.mount('#app');

Vue 2

import Vue from 'vue';
import App from './App.vue';
import VueCumulioDashboard from '@cumul.io/vue-cumulio-dashboard/vue2';

Vue.use(VueCumulioDashboard);

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

In your HTML template.

<cumulio-dashboard
  ref="dashboardInstance"
  :dashboardId="dashboardId"
  :language="'en'">
</cumulio-dashboard>

OR

<!-- Embed a Item by passing the item id as well -->
<cumulio-dashboard
  ref="dashboardInstance"
  :dashboardId="dashboardId"
  :itemId="itemId"
  :language="'en'">
</cumulio-dashboard>

Available props
Below a list of available props you can add to your cumulio-dashboard

Events

Public Methods

In Component

...

export default {
  name: 'Example',

  methods: {
    // To refresh data from item / dashboard
    refreshData(itemId){
      this.$refs.dashboardInstance.refreshData(itemId);
    },

    // Get data from a item
    async getData(){
      const result = await this.$refs.dashboardInstance.getData('6759f444-32b8-42d8-8786-eb88fc2a194');
      console.log(result)
    },

  }

  ...

}

getDashboards(): Promise<any[]>
// Returns an instantly resolved promise with an array of all the visible dashboards on a page with their information.

getFilters(): Promise<FilterGroup[]>
// Returns an instantly resolved promise with an array of all visible dashboards with their active filters.

getData(itemId: string ): Promise<ItemData[]>
// Returns a promise with the data of a item.

setAuthorization(key: string, token: string): Promise<void>
// Changes the authorization of all or one dashboard. Returns an empty promise.

refreshData(id?: string): Promise<void>
// Refreshes the data of a specific item when the id of that item is supplied. Without a itemId this refreshes the data in all items. Returns an empty promise.

reloadDashboard(): Promise<void>
// Reload the dashboard. (useful when the authorization is changed, and dashboard needs to be reloaded without reloading the iFrame). Returns an empty promise.

exportDashboard(type?: string): Promise<ExportDashboard>
// Exports the current dashboard as either pdf or png. a container class needs to be passed as an argument and an optional type parameter. Returns a promise with information on the export.

getAccessibleDashboards(): Promise<AccessibleDashboard[]>
// Get accessible dashboards in a integration, provide either dashboardId, dashboardSlug, container if a dashboard is already loaded.
// Or provide authKey, apiHost and authToken

setEditMode(editMode: string): Promise<void>
// Sets the editMode of the current dashboard. Accepted parameters: view , editLimited , editFull .

Examples

A dashboard with a gray loader background

<cumulio-dashboard
  ref="dashboardInstance"
  :dashboardId="dashboardId"
  :loaderBackground="'rgb(238,243,246)'">
</cumulio-dashboard>

A dashboard with a purple loader spinner color, screenMode mobile and switchScreenModeOnResize on false, so that the dashboard will stay in mobile mode

<cumulio-dashboard
  ref="dashboardInstance"
  :dashboardId="dashboardId"
  :loaderSpinnerColor="'purple'"
  :screenMode="'mobile'"
  @load="logEvent"
  :switchScreenModeOnResize="false">
</cumulio-dashboard>

Changelog

• Changelog

Migration

Migrating from version 2.X.X -> 3.X.X

• Filters are represented as a FilterGroup array instead of a Filter array. FilterGroup is an object containing the list of filters and AND/OR condition describing their relation. FilterGroup also can have child groups to support complex filtering logic

// FilterGroup 
{
  id: string;
  condition: 'and' | 'or';
  filters: Filter[]; 
  subGroups: FilterGroup[];
  origin: string;
  datasetId?: string; // dataset id in case of dahsboard level filters
  itemId?: string; // chart id in case of chart level filters
}

// Filter
{
  expression: string;
  parameters: [];
  properties: {
    id: string;
    origin: string;
    type: string;
    itemId: string;
    ignore?: string[];
  }
}

• getFilters() method response and changedFilters event data now contain filters as an array of FilterGroup objects instead of Filter objects

getFilters(): Promise<FilterGroup[]>

// changedFilters event data
{
  changed: FilterGroup[]; // changed filters
  filters: FilterGroup[]; // all filters
  // ... other event properties
}

Migrating from version 1.X.X -> 2.X.X

The way vue-cumulio-dashboard is imported for vue2 has changed. You can now import it in the following way.

import VueCumulioDashboard from '@cumul.io/vue-cumulio-dashboard/vue2';

Import for vue3 remains unchanged.

import VueCumulioDashboard from '@cumul.io/vue-cumulio-dashboard';

Migrating from version 0.X.X -> 1.X.X

• All methods that were called on service e.g CumulioService.getFilters, CumulioService.getData ... shall now be called on component instance (Which can be obtained using $refs).
• chartId is now called itemId, charts-rendered is now called items-rendered
• All events are now of the format { data: { ...eventData } }, eventData is of the format

{
  dashboardId?: string;
  dashboardSlug?: string;
  itemId?: string;
  language: string;
  name: string;
  screenMode: string;
  type: string;
  dimensions?: object; // populated depending on the event
  changed?: [];  // populated depending on the event
  filters?: [];  // populated depending on the event
  item?: string;    // populated depending on the event
  origin?: string;  // populated depending on the event
  object?: string;  // populated depending on the event
  data?: object;       // populated depending on the event
}

• getFilters now returns an array of filters. [...objectOfFilters], objectOfFilters is of the format

[{
  expression: string;
  parameters: [];
  properties: {
    id: string;
    ignore?: string[];
    origin: string;
    type: string;
    viz: string;
  }
}]

For more migrations click here.

Quick links

Cumul.io | Vue2 CodeSandbox Example | Vue3 CodeSandbox Example | Changelog | Migration