This package has been deprecated

Author message:

Deprecated in favor of @luzmo/embed
TypeScript icon, indicating that this package has built-in type declarations

4.0.1 • Public • Published


This package has been deprecated in favor of @luzmo/embed

Web Component for Dashboards

A modern Web Component for 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

2. Import the component

In a JavaScript module:

import '';

OR In an HTML page:

<script type="module">
  import './node_modules/';




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.



<!-- Embed a item by passing the item id as well -->


Below a list of available properties on the dashboard web component

Property Type Description
dashboardId string The id of the dashboard you wish to embed
dashboardSlug string The slug of the dashboard you wish to embed (if a dashboardId is supplied that one will be used)
itemId string The id of the item you wish to embed
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 API
authToken string Authorization token generated via 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 to connect to (Default: '' for US set appServer to '')
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: '' , for US set apiHost to '')
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)").


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<CumulioDashboard[]>
// 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 and refreshes the data of those dashboards.

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".


A dashboard with a gray loader background


A secured dashboard using an authorization key & token

  authKey="<!-- your generated authKey-->"
  authToken="<!-- your generated authToken -->">

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


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

Get data from an item

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

Get filters used in the dashboard

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

Export the dashboard

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

Get accessible dashboards of an integration

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



From 3.x.x to 4.x.x

  • cumulio-dashboard.umd.js is removed from the package.
  • ESM file is renamed to index.js (older: cumulio-dashboard.esm.js) and CommonJS file is now called index.cjs

From 2.x.x to 3.x.x

  • Filters are represented as a FilterGroup array instead of a Filter array. FilterGroup is an object containing the list of filters and AND/OR condition describing their relation. FilterGroup also can have child groups to support complex filtering logic
// FilterGroup 
  id: string;
  condition: 'and' | 'or';
  filters: Filter[]; 
  subGroups: FilterGroup[];
  origin: string;
  datasetId?: string; // dataset id in case of dahsboard level filters
  itemId?: string; // chart id in case of chart level filters

// Filter
  expression: string;
  parameters: [];
  properties: {
    id: string;
    origin: string;
    type: string;
    itemId: string;
    ignore?: string[];
  • getFilters() method response and changedFilters event data now contain filters as an array of FilterGroup objects instead of Filter objects
getFilters(): Promise<FilterGroup[]>
// changedFilters event data
  changed: FilterGroup[]; // changed filters
  filters: FilterGroup[]; // all filters
  // ... other event properties

From 1.x.x to 2.x.x

  • No Changes.

For more migrations click here.

Quick links | Demo - Sample Integration | Codesandbox example | Changelog | Migrations

Package Sidebar


npm i

Weekly Downloads






Unpacked Size

455 kB

Total Files


Last publish


  • cumul.io_team
  • luzmoteam