Embed a Luzmo Dashboard as Flex elements in a CSS grid

Open the project in StackBlitz to get started:

Edit config/config.ts to display a different dashboard.

Features

• Embed any dashboard designed in Luzmo Studio
• Responsive and/or fixed width dashboards
• Synced and/or unsynced responsive dashboards
• Cross-visualization filters as condigured in Luzmo Studio
• Display theme settings, including grid gap width
• Full front-end control over the grid and its vializations
• Vizualization options and slots can be manipualted programmatically

How it works

Dashboards can be build in Luzmo Studio as usual.

Luzmo's Core API is used to fetch the visualizations and layout of a given dashboard, based on its ID.

Luzmo Flex components are used to embed the dashboard as it's individual components.

A CSS grid layout is used to position visualizations in a grid. It's configured to be identical to the grid configured in Luzmo Studio for the given dashboard.

This example does not persist user changes. In a production environment, you should save grid modifications made by individual users. One option is to store the edited Luzmo dashboard as a variant with access for a specific user.

Optional extensions

• A Flex-based implementation allows you to overwrite options and slots of individual charts programmatically. For example, to add a formula that simulates new product pricing as submitted by your user.
• A Flex-based implementation allows you to alter the grid programmatically. For example, to hide/show charts for specific users.

Technology Stack

• HTML5, CSS (Baseline May 2024 or higher), Typescript, and Vite
• Luzmo Flex Components
• Luzmo Core API

Getting Started

Prerequisites

• A Luzmo account with API and Flex access

Installation

1. Clone the repository

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. To change the dashboard, update config/config.ts and add a valid embed key and token to .env.development, or another .env file.

Limitations

• The dashboard title is not shown, but could be easily added.
• When the dashboard is loaded at the exact same time as its being saving in Luzmo Studio after editing, visualizations may fail to display. Refreshing the dashboard will solve this problem.