@luzmo/react-embed v5.4.2

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. Luzmo IQ Components
5. Changelog
6. Migration
7. 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

Events LuzmoVizItemComponent

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(type: 'png' | 'xlsx' | 'csv' | 'xlsx-raw' | 'csv-raw'): void
// Export the viz item as png, csv, xlsx, xlsx-raw, csv-raw.

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

Luzmo IQ components

How to use the IQ components

import { LuzmoIQChatComponent } from '@luzmo/react-embed';
import { useRef } from 'react';
...
  function LuzmoWrapper() {
    const ref = useRef<any>(null);
    return (
      <div className="App">
        <LuzmoIQChatComponent
          ref={ref}
          authKey="<!-- your generated authKey -->"
          authToken="<!-- your generated authToken -->"
          options="options" 
            />
      </div>
    );
  }
...

import { LuzmoIQAnswerComponent } from '@luzmo/react-embed';
import { useRef } from 'react';
...
  function LuzmoWrapper() {
    const ref = useRef<any>(null);
    return (
      <div className="App">
        <LuzmoIQAnswerComponent
          ref={ref}
          authKey="<!-- your generated authKey -->"
          authToken="<!-- your generated authToken -->"
          options="options"
          messages="messages"  
            />
      </div>
    );
  }
...

Properties

IQ chat component

All available properties for the IQ chat component can be seen in the table below.

IQ answer component

All available properties for the IQ answer component can be seen in the table below.

Customization options

IQ chat component

The IQChatOptions interface provides a range of configuration options that allow you to customize the appearance and functionalitie of the IQ chat component. These options help tailor the chat experience to fit specific use cases by controlling elements such as welcome messages, translations, interaction options, and whether to display charts or text summaries. The table below provides a detailed overview of each configurable parameter and its purpose.

IQ answer component

The IQAnswerOptions interface allows to customize the appearance and functionality of the IQ answer component. These options help define whether certain elements, such as charts, text summaries, or feedback panel, are displayed to users. The table below provides a detailed overview of each configurable parameter and its purpose:

CSS Variables

The following CSS variables can be used to customize various aspects of the IQ components. They are grouped based on their functionality, such as general styling, chat appearance, bubble styles, messages, and feedback.

General Styling

These variables control the overall appearance of elements like borders, background colors, font sizes, and spacing.

--luzmo-iq-border-color: rgba(0,0,0,.1);          /* Border color */
--luzmo-iq-border-radius: .5rem;                  /* Standard border radius */
--luzmo-iq-border-radius-lg: .75rem;              /* Large border radius */
--luzmo-iq-border-radius-xl: 1rem;                /* Extra-large border radius */
--luzmo-iq-border-radius-full: 999rem;            /* Full (circle) border radius */
--luzmo-iq-border-width: 1px;                     /* Standard border width */
--luzmo-iq-background-color: #ffffff;             /* Default background color */
--luzmo-iq-background-hover-color: #f8fafc;       /* Background color on hover */
--luzmo-iq-background-active-color: #f1f5f9;      /* Background color when active */
--luzmo-iq-font-size: .875rem;                    /* Default font size */
--luzmo-iq-font-weight: 400;                      /* Standard font weight */
--luzmo-iq-font-color: #333;                      /* Default font color */
--luzmo-iq-spacing-1: .125rem;                    /* Small spacing */
--luzmo-iq-spacing-5: 1rem;                       /* Large spacing */

Messages Styling

These variables define the appearance of both human and system messages in the chat.

--luzmo-iq-human-message-background: blue;        /* Default background color for human messages */
--luzmo-iq-human-message-color: white;            /* Default text color for human messages */
--luzmo-iq-system-message-background: rgb(226, 232, 240); /* Default background for system messages */
--luzmo-iq-system-message-color: #333;            /* Default text color for system messages */

State Loader and Spinner Styling

These variables are used for customizing the appearance of state loaders and spinners within the chat component.

--luzmo-iq-spinner-color: magenta;                /* Default spinner color */
--luzmo-iq-spinner-border-width: .125rem;         /* Default spinner border width */
--luzmo-iq-spinner-opacity: .5;                   /* Default spinner opacity */
--luzmo-iq-state-loader-background: #778393;      /* Default background color of the loader */
--luzmo-iq-state-loader-color: #333;              /* Default text color for the loader */

Feedback and Ratings

These variables control the appearance of feedback icons and rating elements.

--luzmo-iq-positive-feedback-icon-hover-color: rgb(20, 120, 63); /* Default hover color for positive feedback */
--luzmo-iq-negative-feedback-icon-hover-color: rgb(216, 64, 64); /* Default hover color for negative feedback */
--luzmo-iq-rating-icon-size: 1rem;                /* Default size of the rating icons */
--luzmo-iq-info-icon-size: 1rem;                  /* Default size of the info icons */

Tooltips

These variables are used to adjust the appearance of tooltips.

--luzmo-iq-tooltip-background-color: #000;     /* Tooltip background color, defaults to #000 (black) */
--luzmo-iq-tooltip-color: #fff;                /* Tooltip text color, defaults to #fff (white) */
--luzmo-iq-tooltip-font-size: 0.8125rem;       /* Tooltip font size, defaults to 0.8125rem */

Events

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

• 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