Package Exports
- @luzmo/vue-embed
- @luzmo/vue-embed/vue3/vue-embed.esm.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@luzmo/vue-embed) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Vue component for Luzmo dashboard.
This is a Vue.js library for embedding Luzmo dashboards in your Vue 2 or Vue 3 application.
Table of contents
Installation instructions
npm i @luzmo/vue-embedUsage
Vue 3
import { createApp } from 'vue';
import App from './App.vue';
import VueLuzmoDashboard from '@luzmo/vue-embed';
const app = createApp(App);
// Defines the component at app level
app.use(VueLuzmoDashboard);
app.mount('#app');Vue 2
import Vue from 'vue';
import App from './App.vue';
import VueLuzmoDashboard from '@luzmo/vue-embed/vue2';
Vue.use(VueLuzmoDashboard);
new Vue({
render: (h) => h(App),
}).$mount('#app');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 |
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
...
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. 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-dashboardtoimport @luzmo/vue-embed. - Replace all references of
cumulio-dashboardtoluzmo-dashboard