@luzmo/vue-embed
TypeScript icon, indicating that this package has built-in type declarations

5.1.6 • Public • Published

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

Property Type Description
type string The type of viz item to embed.
options object The options object to be passed on to viz item
slots array The slots array to specify which columns to use to fetch data. depends on the type of chart.
contextId string contextId is a unique id that can be assigned to viz item which will be used in filtering with canFilter.
authKey string Authorization key generated via Luzmo API
authToken string Authorization token generated via Luzmo API
canFilter string | array canFilter can be either set to all or an array of contextId's.
filters object filters object is used to set initial filters.
appServer string Tenancy of luzmo.com to connect to (Default: 'https://app.luzmo.com/' for US set appServer to 'https://app.us.luzmo.com/')
apiHost string API server to connect to (Default: 'https://api.luzmo.com/' , for US set apiHost to 'https://api.us.luzmo.com/')

Events

Name Description
changedFilters Emitted when filters are changed
customEvent Emitted when a custom event is fired
exported Emitted when export completes or fails
rendered Emitted when the item is rendered
load Emitted when viz item is loaded

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

Property Type Description
dashboardId string The id of the Luzmo dashboard you wish to embed
dashboardSlug string The slug of the Luzmo dashboard you wish to embed (if a dashboardId is supplied that one will be used)
itemId string The id of the Luzmo item you wish to embed. The dashboardId should be provided as well if you what to embed just a Luzmo item.
itemDimensions { width: number/string; height: number/string; } width and height of item only applies when itemId is provided.
authKey string Authorization key generated via Luzmo API
authToken string Authorization token generated via Luzmo API
language string The language of the dashboard: eg. 'en' (Default: 'auto')
screenMode string The screen mode of your dashboard: 'mobile', 'tablet', 'desktop', 'largeScreen', 'fixed' or 'auto' (Default: 'auto')
switchScreenModeOnResize boolean true: the embedded dashboard can switch screenModes on resize of the container , false: Dashboard will keep the same screenMode (Default: true)
loaderBackground string Background color of the loader element (Default: '#f9f9f9')
loaderFontColor string Font color of the text of the loaders (Default: '#5a5a5a')
loaderSpinnerColor string Spinner color of the loader (Default: 'rgba(255, 165, 0, 0.7)')
loaderSpinnerBackground string Background color of the spinner (Default: 'rgba(169, 169, 169, 0.14)')
appServer string Tenancy of luzmo.com to connect to (Default: 'https://app.luzmo.com/' for US set appServer to 'https://app.us.luzmo.com/')
timezoneId string The timezone you you wish to use in your dashboard. This timezone id needs to be a valid id that is available in the IANA timezone database, for example: Europe/Brussels or America/New_York.
apiHost string API server to connect to (Default: 'https://api.luzmo.com/' for US set apiHost to 'https://api.us.luzmo.com/')
editMode string Specifies if the embedded dashboard should be editable or not. Accepted values: "view" , "editLimited" , "editFull" . Use "view" if you don't want the embedded dashboard to be editable. (Default: "view" )
mainColor string Optional override of the main color used in the whitelabeling of the embedded dashboard editor. If not provided, the main color of the whitelabeling colors set on the organization will be used. Should be specified as a string of rgb values (i.e. "rgb(50,50,50)").
accentColor string Optional override of the accent color used in the whitelabeling of the embedded dashboard editor. If not provided, the accent color of the whitelabeling colors set on the organization will be used. Should be specified as a string of rgb values (i.e. "rgb(50,50,50)").



Events

Name Description Event Arguments
@changedFilters Emitted when filters are changed ChangedFiltersEvent
@customEvent Emitted when a custom event is fired CustomEvent
@exported Emitted when export completes or fails ExportedEvent
@itemsRendered Emitted when all items are rendered ItemsRenderedEvent
@load Emitted when dashboard is loaded LoadEvent

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

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

Package Sidebar

Install

npm i @luzmo/vue-embed

Weekly Downloads

849

Version

5.1.6

License

none

Unpacked Size

36.2 kB

Total Files

6

Last publish

Collaborators

  • luzmoteam
  • cumul.io_team