@luzmo/embed

Web Component for Luzmo dashboard

A modern Web Component for Luzmo dashboards in your web 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

1. Install the component from npm

npm i @luzmo/embed

2. Import the component

In a JavaScript module:

import '@luzmo/embed';

OR In an HTML page:

<script type="module">
  import './node_modules/@luzmo/embed/index.js';
</script>

OR

<script type="module" src="./node_modules/@luzmo/embed/index.js"></script>

Usage

Use the dashboard components as if they were native HTML tags. Use the id of the dashboard you wish to embed. In your HTML template.

<luzmo-embed-dashboard dashboardId="55cfb99c-d602-492b-b192-6c15277fdb9a" language="en"> </luzmo-embed-dashboard>

OR

<!-- Embed a item by passing the item id as well -->
<luzmo-embed-dashboard dashboardId="55cfb99c-d602-492b-b192-6c15277fdb9a" itemId="59fe5bd7-5070-42f5-98f4-da7f931e316c"> </luzmo-embed-dashboard>

Properties:

Below a list of available properties on the dashboard web component

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. Accepts a JSON string.
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

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

getData(itemId: string): Promise<ItemData>
// Returns an array the data of a chart of a certain dashboard by adding the dashboardId or the container of the iframe.

getFilters(): Promise<FilterGroup[]>
// Returns an array of active filters.

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(itemId?: string): Promise<void>
// Refreshes the data of a specific chart when the id of that item is supplied. Without a itemId this refreshes the data in all items.

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

exportDashboard(type?: ExportType): 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.

getAccessibleDashboards(): Promise<AccessibleDashboard[]>
// Get accessible dashboards in a integration, make sure 'apiHost', 'authKey', 'authToken' are set correctly on the instance.

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

Examples

A dashboard with a gray loader background

<luzmo-embed-dashboard dashboardId="035c0304-0bfe-4b7c-8c10-a4acb8eb9d76" loaderBackground="rgb(238,243,246)"> </luzmo-embed-dashboard>

A secured dashboard using an authorization key & token

<luzmo-embed-dashboard dashboardId="035c0304-0bfe-4b7c-8c10-a4acb8eb9d76" authKey="<!-- your generated authKey-->" authToken="<!-- your generated authToken -->"> </luzmo-embed-dashboard>

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

<luzmo-embed-dashboard id="dashboard" dashboardId="55cfb99c-d602-492b-b192-6c15277fdb9a" loaderSpinnerColor="purple" screenMode="mobile" switchScreenModeOnResize="false"> </luzmo-embed-dashboard>

Add an event listener when all items are rendered

// get the component, here we query the component that has an id 'dashboard'
const dashboardComponent = document.getElementById('dashboard');
dashboardComponent.addEventListener('itemsRendered', (event) => {
  // do something after all items are rendered
  console.log(event);
});

Get data from an item

dashboardComponent.getData('59fe5bd7-5070-42f5-98f4-da7f931e316c').then((data) => {
  // do something with the item data
  console.log('Item data', data);
});

Get filters used in the dashboard

dashboardComponent.getFilters().then((data) => {
  // do something with the item data
  console.log('Item data', data);
});

Export the dashboard

dashboardComponent.exportDashboard('png').then((data) => {
  // do something with the item data
  console.log('Item data', data);
});

Get accessible dashboards of an integration

dashboardComponent.getAccessibleDashboards().then((dashboards) => {
  // do something with the dashboards
  console.log('Accessible dashboards', dashboards);
});

Changelog

• Changelog

Migration

Migrating from cumul.io to luzmo.

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

Quick links

Luzmo | Demo - Sample Integration | Changelog | Migrations