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. Luzmo IQ components
5. Changelog
6. Migrations
7. Quick links

Installation instructions

``bash
npm i @luzmo/vue-embed
`

Usage

$3

`javascript
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');
`

$3

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

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

`

$3

`javascript



`

$3

`javascript



`

Luzmo Viz Item

$3

$3

`html



OR



`

$3

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/') |

$3

| Name | Description |
|------------------------|------------------------------------------------------------------|
| authorizationExpired | Emitted when the authorization token has expired |
| changedFilters | Emitted when filters are changed |
| customEvent | Emitted when a custom event is fired |
| exported | Emitted when export completes or fails |
| load | Emitted when viz item is loaded |
| rendered | Emitted when the item is rendered |

$3

`typescript
// Return an array of the data of the viz item that's embedded.
getData(): ItemData;

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

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

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

// Export the viz item as png, csv, xlsx, xlsx-raw, csv-raw.
export(type: 'png' | 'xlsx' | 'csv' | 'xlsx-raw' | 'csv-raw'): void;
`



Luzmo Dashboard

$3

In your HTML template.

`html


OR



`

$3

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') |
| editorLanguage | string | The language of the dashboard editor: 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)"). |

$3

| 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 |

$3

In Component

`typescript