@luzmo/ngx-embed v6.3.7

Angular component for Luzmo

This is an Angular library for embedding Luzmo dashboards in your Angular application.

Table of contents

1. Installation instructions
2. Luzmo Viz Item
3. Luzmo Dashboard
4. Changelog
5. Migration
6. Compatibility
7. Quick links

Installation instructions

npm i @luzmo/ngx-embed --save

OR

ng add @luzmo/ngx-embed@latest #This also adds an entry in app.module.ts or app.component.ts if using standalone components.

Luzmo Viz Item

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

In your app.module.ts import NgxLuzmoDashboardModule

import { NgxLuzmoDashboardModule, NgxLuzmoVizItemComponent } from '@luzmo/ngx-embed';

@NgModule({
    ...
  imports: [
    ...
    NgxLuzmoDashboardModule
  ],
})

OR import standalone component

@Component(
  imports: [ NgxLuzmoVizItemComponent ]
)

In your HTML template.

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

Working with events

<!-- Listening for events, logEvent is a function with console log -->
<luzmo-viz-item type="bar-chart" (load)="logEvent($event)" (customEvent)="logEvent($event)" (changedFilters)="logEvent($event)"> </luzmo-viz-item>

Available Inputs

Public methods on NgxLuzmoVizItemComponent instance

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

A Bar chart with display title hidden.

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

An event handler added to the luzmo-viz-item to listen for the load event.

<luzmo-viz-item #vizItemInstance id="vizItem" type="bar-chart" (load)="loadEvent($event)"></luzmo-viz-item>

import { NgxLuzmoVizItemComponent } from '@luzmo/ngx-embed';
...

@Component({
  ...
})

export class TestIntegrationComponent {
  @ViewChild('vizItemInstance') vizItemInstance: NgxLuzmoVizItemComponent;
  ...
  constructor() { }
  
  loadEvent(event: any) {
    console.log(event);
  }

  // To refresh data
  refresh() {
    this.vizItemInstance.refreshData(); // Unsubscribe in ngOnDestroy
  }
  allFunctions() {
    const filters = this.vizItemInstance.getFilters();
    const data = this.vizItemInstance.getData();
    this.vizItemInstance.refreshData();
    this.vizItemInstance.export();
  }
}

Events

Luzmo Dashboard

Usage Luzmo Dashboard

In your app.module.ts import NgxLuzmoDashboardModule

import { NgxLuzmoDashboardModule } from '@luzmo/ngx-embed';

@NgModule({
    ...
  imports: [
    ...
    NgxLuzmoDashboardModule
  ],
})

In your HTML template.

<luzmo-dashboard [dashboardId]="dashboardId" [language]="'en'"> </luzmo-dashboard>

OR

<!-- Embed a chart/item by passing the item id as well -->
<luzmo-dashboard [dashboardId]="dashboardId" [itemId]="itemId" [language]="'en'"> </luzmo-dashboard>

Working with events

<!-- Listening for events, logEvent is a function with console log -->
<luzmo-dashboard [dashboardId]="dashboardId" [language]="'en'" (load)="logEvent($event)" (customEvent)="logEvent($event)" (changedFilters)="logEvent($event)"> </luzmo-dashboard>

Available inputs

Below a list of available input options you can add to your ngx-luzmo-dashboard

Examples

A dashboard with a gray loader background

<luzmo-dashboard #dashboardInstance [dashboardId]="'035c0304-0bfe-4b7c-8c10-a4acb8eb9d76'" [loaderBackground]="'rgb(238,243,246)'"> </luzmo-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-dashboard #dashboardInstance [dashboardId]="'55cfb99c-d602-492b-b192-6c15277fdb9a'" [loaderSpinnerColor]="'purple'" [screenMode]="'mobile'" [switchScreenModeOnResize]="false"> </luzmo-dashboard>

In Component, service can also be used to facilitate different functionality (Only refresh data is implemented here, other methods can also be implemented in similar fashion)

import { NgxLuzmoDashboardService, NgxLuzmoDashboardComponent } from '@luzmo/ngx-embed';
...

@Component({
  ...
})

export class TestIntegrationComponent {
  @ViewChild('dashboardInstance') dashboardInstance: NgxLuzmoDashboardComponent;
  ...
  constructor() { }

  // To refresh data
  refresh() {
    this.dashboardInstance.refreshData().subscribe(); // Unsubscribe in ngOnDestroy
  }
  allFunctions() {
    this.dashboardInstance.getFilters().subscribe(console.log);
    this.dashboardInstance.getData('item-id').subscribe(console.log);
    this.dashboardInstance.reloadDashboard().subscribe(console.log);
    this.dashboardInstance.exportDashboard('png').subscribe(console.log);
    this.dashboardInstance.getAccessibleDashboards().subscribe(console.log);
  }
}

Public methods available on dashboardComponent instance

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

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

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

setAuthorization(key: string, token: string): Observable<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): Observable<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(): Observable<void>
// Reload the dashboard. (useful when the authorization is changed, and dashboard needs to be reloaded without reloading the iFrame)

exportDashboard(type?: ExportType): Observable<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(): Observable<AccessibleDashboards>
// Get accessible dashboards in a integration, make sure apiHost, authKey, authToken are set correctly on the instance.

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

Events

Changelog

• Changelog

Migration

Migrating from cumul.io to luzmo.

• Change import '@cumul.io/ngx-cumulio-dashboard to import @luzmo/ngx-embed.
• Change NgxCumulioDashboardModule to NgxLuzmoDashboardModule.
• Replace all references of Cumulio with Luzmo.
• Replace all references of cumulio-dashboard to luzmo-dashboard

Compatibility

Angular version compatibility, please select the compatible version of the library from the table below.

This library requires Angular version 16 and above.

For Angular version < 16.0.0 please use our old library

Quick links

Luzmo | Sample Integration | Migration | Changelog