@luzmo/vue-embed v5.1.6

Vue component for Luzmo.

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

Table of contents

1. Installation instructions
2. Luzmo viz item
3. Luzmo Dashboard
4. Changelog
5. Migration
6. Quick links

Installation instructions

npm i @luzmo/vue-embed

Usage

Vue 3 as a plugin install

import { createApp } from 'vue';
import App from './App.vue';
import VueLuzmoLib from '@luzmo/vue-embed';

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

Vue 3 as a global component

import Vue from 'vue';
import App from './App.vue';
import { LuzmoDashboard, LuzmoVizItemComponent } from '@luzmo/vue-embed';

const app = createApp(App);
// Defines the component at app level
app.component('luzmo-dashboard', LuzmoDashboard);
app.component('luzmo-viz-item', LuzmoVizItemComponent);
app.mount('#app');

Vue 3 as a local in defineComponent

<script lang="ts">
  import { defineComponent } from 'vue';
  import { LuzmoDashboard, LuzmoVizItemComponent } from '@luzmo/vue-embed';
  defineComponent({
    components: {
      'luzmo-dashboard': LuzmoDashboard,
      'luzmo-viz-item': LuzmoVizItemComponent
    }
  });
</script>
<template>
  <luzmo-dashboard />
</template>

Vue 3 as a local in script setup

<script setup lang="ts">
  import { LuzmoDashboard, LuzmoVizItemComponent } from '@luzmo/vue-embed';
</script>
<template>
  <LuzmoDashboard />
  <LuzmoVizItemComponent />
</template>

Luzmo Viz Item

For a more comprehensive documentation visit Flex SDK Docs - Luzmo Developer Docs

Usage

<!-- Embed a viz item by passing the options and slots -->
<luzmo-viz-item type="bar-chart" :options="options" :slots="slots" authKey="authKey" authToken="authToken"> </luzmo-viz-item>

OR

<!-- Embed a viz item by passing the item id and dashboard id -->
<luzmo-viz-item :dashboardId="dashboardId" :itemId="itemId" :options="options" authKey="authKey" authToken="authToken"> </luzmo-viz-item>

Available props

Below a list of available properties on the viz item web component

Events

Public methods

getData(): any
// Return an array of the data of the viz item that's embedded.

getFilters(): FilterGroup[];
// Return an array of active filters on the viz item.

refreshData(): void
// Refresh the data of the viz item.

setAuthorization(key: string, token: string): void
// Changes the authorization of the viz item. To fetch data based on new authorization parameters, refreshData() needs to be called.

export(): void
// Export the viz item as png.

Luzmo Dashboard

Usage

In your HTML template.

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

OR

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

Available props

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

Events

Public Methods

In Component

<script setup lang="ts">
  import { onMounted, ref, defineExpose } from '@vue';
  import { LuzmoDashboard } from '@luzmo/vue-embed';
  // This will enable typings for dashboardInstance for typescript.
  const dashboardInstance = ref<InstanceType<typeof LuzmoDashboard>>();
  
  function refreshData(itemId) {
    dashboardInstance.value.refreshData(itemId);
  }
  
  // Get data from a item
  async function getData() {
    const result = await dashboardInstance.getData('6759f444-32b8-42d8-8786-eb88fc2a194');
    console.log(result)
  }
  
  onMounted(() => {
    getData();
    refreshData();
  });

< /script>
<template>
  <LuzmoDashboard
  ref = "dashboardInstance"
  :dashboardId = "dashboardId"
  :language = "'en'" >
  </LuzmoDashboard>
</template>

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. To fetch data based on new authorization parameters, reloadDashboard() or refreshData() needs to be called.

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

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

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

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

Changelog

• Changelog

Migration

Migrating from cumul.io to luzmo.

• Change import '@cumul.io/vue-cumulio-dashboard to import @luzmo/vue-embed.
• Replace all references of cumulio-dashboard to luzmo-dashboard

Vue2 supported lib.

For vue2 support please use the package version < 5.0.0, any package less than 5.0.0 has vue2 support. Usage instruction for vue2 for older packages.

import LuzmoDashboard from '@luzmo/vue-embed/vue2';
Vue.use(VueLuzmoDashboard);
new Vue({
  render: (h) => h(App),
}).$mount('#app');

Quick links

Luzmo | Changelog | Migration