5.1.6 • Published 2 months ago

@luzmo/react-embed v5.1.6

Weekly downloads
-
License
-
Repository
-
Last release
2 months ago

React component for Luzmo

This is a React library for embedding Luzmo dashboards in your React application.

Table of contents

  1. Installation instructions
  2. Luzmo viz item
  3. Luzmo Dashboard
  4. Changelog
  5. Migration
  6. Quick links

Installation instructions

npm i @luzmo/react-embed

Luzmo viz item

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

Usage

import { LuzmoVizItemComponent } from '@luzmo/react-embed';
import { useRef } from 'react';
...
  function LuzmoWrapper() {
    const ref = useRef<any>(null);
    return (
      <div className="App">
        <button
          onClick={(e) => console.log(ref.current.export())}
        >
          Export Dashboard
        </button>
        <LuzmoVizItemComponent
          ref={ref}
          authKey="<!-- your generated authKey -->"
          authToken="<!-- your generated authToken -->"
          type="bar-chart"
          load={(e) => console.log('load', e)}
        </LuzmoVizItemComponent>
      </div>
    );
  }
...

Properties: LuzmoVizItemComponent

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

PropertyTypeDescription
typestringThe type of viz item to embed.
optionsobjectThe options object to be passed on to viz item
slotsarrayThe slots array to specify which columns to use to fetch data. depends on the type of chart.
contextIdstringcontextId is a unique id that can be assigned to viz item which will be used in filtering with canFilter.
authKeystringAuthorization key generated via Luzmo API
authTokenstringAuthorization token generated via Luzmo API
canFilterstring | arraycanFilter can be either set to all or an array of contextId's.
filtersobjectfilters object is used to set initial filters.
appServerstringTenancy of luzmo.com to connect to (Default: 'https://app.luzmo.com/' for US set appServer to 'https://app.us.luzmo.com/')
apiHoststringAPI server to connect to (Default: 'https://api.luzmo.com/' , for US set apiHost to 'https://api.us.luzmo.com/')

Events LuzmoVizItemComponent

NameDescription
changedFiltersEmitted when filters are changed
customEventEmitted when a custom event is fired
exportedEmitted when export completes or fails
renderedEmitted when the item is rendered
loadEmitted when viz item is loaded

Public methods LuzmoVizItemComponent

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.

Luzmo Dashboard

Usage

import { LuzmoDashboardComponent, LuzmoDashboard } from '@luzmo/react-embed';
import { useRef } from 'react';
...
  function LuzmoWrapper() {
    const ref = useRef<LuzmoDashboard>(null);
    return (
      <div className="App">
        <button
          onClick={async (e) => console.log(await ref.current.exportDashboard())}
        >
          Export Dashboard
        </button>
        <LuzmoDashboardComponent
          ref={ref}
          authKey="<!-- your generated authKey -->"
          authToken="<!-- your generated authToken -->"
          dashboardSlug="test"
          switchScreenModeOnResize={false}
          loaderSpinnerColor="rgb(0, 81, 126)"
          loaderSpinnerBackground="rgb(236 248 255)"
          itemsRendered={(e) => console.log('itemsRendered', e)}>
        </LuzmoDashboardComponent>
      </div>
    );
  }
...

Properties

Below a list of available properties on the dashboard react component

PropertyTypeDescription
dashboardIdstringThe id of the Luzmo dashboard you wish to embed
dashboardSlugstringThe slug of the Luzmo dashboard you wish to embed (if a dashboardId is supplied that one will be used)
itemIdstringThe 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.
authKeystringAuthorization key generated via Luzmo API
authTokenstringAuthorization token generated via Luzmo API
languagestringThe language of the dashboard: eg. 'en' (Default: 'auto')
screenModestringThe screen mode of your dashboard: 'mobile', 'tablet', 'desktop', 'largeScreen', 'fixed' or 'auto' (Default: 'auto')
switchScreenModeOnResizebooleantrue: the embedded dashboard can switch screenModes on resize of the container , false: Dashboard will keep the same screenMode (Default: true)
loaderBackgroundstringBackground color of the loader element (Default: '#f9f9f9')
loaderFontColorstringFont color of the text of the loaders (Default: '#5a5a5a')
loaderSpinnerColorstringSpinner color of the loader (Default: 'rgba(255, 165, 0, 0.7)')
loaderSpinnerBackgroundstringBackground color of the spinner (Default: 'rgba(169, 169, 169, 0.14)')
appServerstringTenancy of luzmo.com to connect to (Default: 'https://app.luzmo.com/' for US set appServer to 'https://app.us.luzmo.com/')
timezoneIdstringThe 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.
apiHoststringAPI server to connect to (Default: 'https://api.luzmo.com/' for US set apiHost to 'https://api.us.luzmo.com/')
editModestringSpecifies 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" )
mainColorstringOptional 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)").
accentColorstringOptional 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

NameDescriptionEvent Arguments
changedFiltersEmitted when filters are changedChangedFiltersEvent
customEventEmitted when a custom event is firedCustomEvent
exportedEmitted when export completes or failsExportedEvent
itemsRenderedEmitted when all items are renderedItemsRenderedEvent
loadEmitted when dashboard is loadedLoadEvent

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>
// Promise that returns an array with the data of a item.

getFilters(): Promise<FilterGroup[]>
// Promise that returns an array of 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 item/chart when the id of that item is supplied. Without a itemId this refreshes the data in all items.

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

exportDashboard(type?: ExportType): Promise<ExportDashboard>
// Exports the current dashboard as either pdf or png.

getAccessibleDashboards(): Promise<AccessibleDashboard[]>
// Retrieves a list of all dashboards an integration has access to. authKey and authToken needs to be set for this function to work.

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

Changelog

Migration

Migrating from cumul.io to luzmo.

  • Change import '@cumul.io/react-cumulio-dashboard to import @luzmo/react-embed.
  • Replace all references of Cumulio to Luzmo.
  • Replace CumulioDashboardComponent to LuzmoDashboardComponent.
  • Replace CumulioDashboard to LuzmoDashboard.

Quick links

Luzmo | Codesandbox example | Migrations | Changelog

5.1.2-beta.5

2 months ago

5.1.2-beta.6

2 months ago

5.1.6

2 months ago

5.1.5

2 months ago

5.1.4

2 months ago

5.1.3

3 months ago

5.1.2-beta.0

3 months ago

5.1.2-beta.3

3 months ago

5.1.2-beta.4

3 months ago

5.1.2-beta.1

3 months ago

5.1.2-beta.2

3 months ago

5.1.2

3 months ago

5.1.1

3 months ago

5.1.0

3 months ago

5.1.0-beta.0

4 months ago

5.1.0-beta.2

4 months ago

5.1.0-beta.7

4 months ago

5.1.0-beta.3

4 months ago

5.1.0-beta.4

4 months ago

5.1.0-beta.5

4 months ago

5.1.0-beta.6

4 months ago

5.0.13-beta.18

5 months ago

5.0.13-beta.17

6 months ago

5.0.13-beta.19

4 months ago

5.0.18

5 months ago

5.0.13-beta.12

6 months ago

5.0.13-beta.11

7 months ago

5.0.13-beta.14

6 months ago

5.0.13-beta.13

6 months ago

5.0.13-beta.16

6 months ago

5.0.13-beta.15

6 months ago

5.0.13-beta.8

7 months ago

5.0.13-beta.9

7 months ago

5.0.17

7 months ago

5.0.13-beta.4

8 months ago

5.0.13-beta.5

8 months ago

5.0.13-beta.6

8 months ago

5.0.16

8 months ago

5.0.13-beta.2

8 months ago

5.0.13-beta.3

8 months ago

5.0.15

8 months ago

5.0.13-beta.0

8 months ago

5.0.14

8 months ago

5.0.13

8 months ago

5.0.12-beta.1

8 months ago

5.0.12-beta.0

8 months ago

5.0.12

8 months ago

5.0.11-beta.1

9 months ago

5.0.11-beta.0

9 months ago

5.0.10

9 months ago

5.0.9

10 months ago

5.0.8

10 months ago

5.0.6

10 months ago

5.0.7

10 months ago

5.0.5

11 months ago

5.0.4

11 months ago

5.0.3

1 year ago

5.0.2

1 year ago

5.0.1

1 year ago

5.0.0

1 year ago