This package has been deprecated

Author message:

Package has been deprecated in favor of @cumul.io/ngx-cumulio-dashboard

ngx-cumulio

Deprecated

This library has been deprecated in favor of @cumul.io/ngx-cumulio-dashboard

Angular Cumul.io Dashboards

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

Table of contents

1. Installation instructions
2. Usage
3. Examples
4. Public methods from the service ngxCumulioService
5. Compatibility
6. Quick links

Installation instructions

npm i ngx-cumulio --save

OR

ng add ngx-cumulio@latest #This also adds an entry in app.module.ts

Usage

In your app.module.ts import NgxCumulioModule as root

import { NgxCumulioModule } from 'ngx-cumulio';

@NgModule({
    ...
  imports: [
    ...
    NgxCumulioModule.forRoot()  // forRoot is required for a lazy loaded environment (not required if added via ng add command)
  ],
})

In your HTML template.

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

OR

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

Available Inputs Below a list of available input options you can add to your cumulio-dashboard

dashboard: string;                  // The id of the Cumul.io dashboard you wish to embed.
chart: string;                      // The id of the Cumul.io chart you wish to embed (Default: null)
key: string;                        // Authorization key generated via Cumul.io API (Default: null)
token: string;                      // Authorization token generated via Cumul.io API (Default: null)
language: string;                   // Sets the language of errors and loader, eg. 'en' (Default: 'auto')
screenmode: string;                 // Sets the screenmode of your dashboard: 'mobile', 'tablet', 'desktop', 'largeScreen', 'fixed' (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)')
chartDimensions: Object;            // (optional) The desired dimensions of the single chart you want to embed; can be set when 'chartId' is set, chartDimensions : { width: 100, height: 200 }. (Default: { width: 'auto', height: 'auto' }) 

Examples

A dashboard with a gray loader background

<cumulio-dashboard
    [dashboard]="'035c0304-0bfe-4b7c-8c10-a4acb8eb9d76'"
    [loaderBackground]="'rgb(238,243,246)'">
</cumulio-dashboard>

A dashboard with a purple spinner color of the loader with screenmode mobile and switchScreenmodeOnResize on false, so that the dashboard will stay in mobile mode

<cumulio-dashboard
    [dashboard]="'55cfb99c-d602-492b-b192-6c15277fdb9a'"
    [loaderSpinnerColor]="'purple'"
    [screenmode]="'mobile'"
    [switchScreenmodeOnResize]="false">
</cumulio-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 { NgxCumulioService } from 'ngx-cumulio';
...

@Component({
  ...
})

export class TestIntegrationComponent {
  ...
  constructor(private ngxCumulioService: NgxCumulioService) { }

  // To refresh data
  refresh(dashboardId?: string) {
    this.ngxCumulioService.refreshData(dashboardId).pipe(
      // chain this subscription to perform some action
    ).subscribe();  // Also unsubscribe it in ngOnDestroy
  }
}

Public methods from the service ngxCumulioService

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

getData(itemId: string, dashboard?: {dashboardId?: string, container?: string}): Observable<object[]>
// Returns an array the data of a chart of a certain dashboard by adding the dashboardId or the container of the iframe.

getFilters(): Observable<object[]>
// Returns an array of all visible dashboards with their active filters

setAuthorization(key: string, token: string, dashboard?: {dashboardId?: string, container?: string}): Observable<null>
// Changes the authorization of all or one dashboard and refreshes the data of those dashboards

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

exportDashboard({ container: string }, type?: string): Observable<null>
// Exports the current dashboard as either pdf or png. a container class needs to be passed as an argument and an optional type parameter.

onLoadEvent(): Observable<object{}>
// Hook to load event of a dashboard. Returns the load event information containing dashboard id, frame and the dashboard dimensions.

onCustomEvent(): Observable<object{}>
// Hook to custom events triggered in the dashboard. Returns the custom event information containing dashboard id, chart id and the event name & data.

onChartsRendered(): Observable<object{}>
// Hook to chartsRendered event of a dashboard. Returns the event information containing dashboard id, and frame. This event is triggered when all chart queries in the dashboard have finished.

getAccessibleDashboards({ dashboardId?: string, dashboardSlug?: string, apiHost?: string, authKey?: string, authToken?: string, container?: string }): Observable<object[]>
// Get accessible dashboards in a integration, provide either dashboardId, dashboardSlug, container if a dashboard is already loaded.
// Or provide authKey, apiHost and authToken

Compatibility

This library requires Angular version 8 and above.

Angular
8.x.x - 12.x.x

Quick links

Cumul.io | Sample Integration | Stackblitz Example