@luzmo/embed v6.1.7

Web Component for Luzmo

A modern Web Component for Luzmo dashboards in your web application.

Table of contents

1. Installation instructions
2. Luzmo Embed Viz Item
3. Luzmo Embed Dashboard
4. Changelog
5. Migration
6. 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>

Luzmo Embed Viz Item

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

Usage luzmo-embed-viz-item

Use the viz-item components as if they were native HTML tags.

In your HTML template.

<luzmo-embed-viz-item type="bar-chart" slots="slotsArray[]" options="optionsObject" authKey="luzmoAuthKey" authToken="luzmoAuthToken"></luzmo-embed-viz-item>

OR

<luzmo-embed-viz-item dashboardId="dashboardId" itemId="itemId" options="optionsObject" authKey="authKey" authToken="authToken"></luzmo-embed-viz-item>

Properties: luzmo-embed-viz-item

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

Events luzmo-embed-viz-item

Public methods luzmo-embed-viz-item

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.

Examples luzmo-embed-viz-item

A Bar chart with display title hidden.

<luzmo-embed-viz-item id="vizItem" type="bar-chart" options='{ "display": { "title": false } }'></luzmo-embed-viz-item>

Add an event listener to the viz item.

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

Get data from the viz item

const data = vizItemComponent.getData()

Get Active filters in the viz item

const filters = vizItemComponent.getFilters();

Export the viz item

vizItemComponent.export();

Luzmo Embed Dashboard

Usage luzmo-embed-dashboard

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: luzmo-embed-dashboard

Below a list of available properties on the dashboard web component

Events luzmo-embed-dashboard

Public methods luzmo-embed-dashboard

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 luzmo-embed-dashboard

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

Quick links

Luzmo | Demo - Sample Integration | Changelog | Migrations