LLM-friendly URL

Quick start

Luzmo Flex is a SDK that enables you to create customizable visualizations fully from code, allowing you to build and embed powerful, hyper-personalized data analytics products.

You can use the embedding libraries to start using Flex in any webpage . Follow the guide below to quickly get started with Flex.

Installation instructions

Run the command corresponding to the choice of framework you prefer.

Command Line

Web component

Angular

React

React Native

Vue

npm install @luzmo/embed

Basic usage

ℹ️

In case you're looking for a step-by-step walkthrough to create your first Flex item, take a look at this Guide that explains how to create a Column chart with Luzmo's Flex SDK!

:::langSpecific{lang=web type=frontend} 2. Import the component in a JavaScript module.

index.js

Web component

Angular

React

React Native

Vue

import '@luzmo/embed';

You can also import the component in an HTML page.

index.html

Web component

Angular

React

React Native

Vue

<script type="module">
  import './node_modules/@luzmo/embed/index.js';
</script>
<!-- OR -->
<script
  type="module"
  src="./node_modules/@luzmo/embed/index.js">
</script>

Add the Luzmo VizItem component to your HTML page.

index.html

Web component

Angular

React

React Native

Vue

<!--
Clients on our US multi-tenant application environment,
or a dedicated instance on a specific VPC, should specify:
- appServer="https://app.us.luzmo.com/" (or your VPC-specific address)
- apiHost="https://api.us.luzmo.com/" (or your VPC-specific address)
-->
<luzmo-embed-viz-item
  appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
  apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
  authKey="< Embed authorization key >"
  authToken="< Embed authorization token >"
  options="< options to override >"
  slots="< slots for chart >"
  type="bar-chart"
></luzmo-embed-viz-item>

:::

:::langSpecific{lang=angular type=frontend} 2. Import the NgxLuzmoVizItemComponent in your standalone Angular component

app.module.ts

Web component

Angular

React

React Native

Vue

import { NgxLuzmoVizItemComponent } from '@luzmo/ngx-embed';

@Component({
  // ...
  imports: [
    // ...,
    NgxLuzmoVizItemComponent,
    // ...
  ],
  // ...
})

Add the Luzmo VizItem component in your Angular page

app.component.html

Web component

Angular

React

React Native

Vue

/*
Clients on our US multi-tenant application environment,
or a dedicated instance on a specific VPC, should specify:
- [appServer]="'https://app.us.luzmo.com/'" (or your VPC-specific address)
- [apiHost]="'https://api.us.luzmo.com/'" (or your VPC-specific address)
*/
<luzmo-viz-item
  [appServer]="'< Luzmo App server, defaults to https://app.luzmo.com >'"
  [apiHost]="'< Luzmo API server, defaults to https://api.luzmo.com >'"
  [authKey]="'< Embed authorization key >'"
  [authToken]="'< Embed authorization token >'"
  [options]="< options to override >"
  [slots]="< slots to set >"
  type="bar-chart"
></luzmo-viz-item>

:::

:::langSpecific{lang=reactnative type=frontend} 2. Minimal required parameters to securely embed a viz item in a React Native application

Dashboard.js

Web component

Angular

React

React Native

Vue

import { LuzmoVizItemComponent } from '@luzmo/react-native-embed';
// ...

  function LuzmoWrapper() {
    // ...

    /*
    Clients on our US multi-tenant application environment,
    or a dedicated instance on a specific VPC, should specify:
    - appServer="https://app.us.luzmo.com/" (or your VPC-specific address)
    - apiHost="https://api.us.luzmo.com/" (or your VPC-specific address)
    */
    return (
      <LuzmoVizItemComponent
        ref={ref}
        appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
        apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
        authKey="< Embed authorization key >"
        authToken="< Embed authorization token >"
        options="< options to override >"
        slots="< slots to set >"
        type="bar-chart"
      ></LuzmoVizItemComponent>
    );
  }

:::

:::langSpecific{lang=vue type=frontend} 2. Minimal required parameters to securely embed a viz item in a Vue 3 application

main.js

Web component

Angular

React

React Native

Vue

import { createApp } from 'vue';
import App from './App.vue';
import VueLuzmo from '@luzmo/vue-embed';
...

const app = createApp(App);
...

// Defines the component at app level
app.use(VueLuzmo);
...

app.mount('#app');

In your HTML template of your Vue application

Dashboard.vue

Web component

Angular

React

React Native

Vue

<template>
  ...
  <!--
  Clients on our US multi-tenant application environment,
  or a dedicated instance on a specific VPC, should specify:
  - :appServer="https://app.us.luzmo.com/" (or your VPC-specific address)
  - :apiHost="https://api.us.luzmo.com/" (or your VPC-specific address)
   -->
  <luzmo-viz-item
    ref="vizItemInstance"
    appServer="< Luzmo App server, defaults to https://app.luzmo.com >"
    apiHost="< Luzmo API server, defaults to https://api.luzmo.com >"
    authKey="< Embed authorization key >"
    authToken="< Embed authorization token >"
    options="< options to override >"
    slots="< slots to set >"
  ></luzmo-viz-item>
</template>

:::

ℹ️

The component reference contains in-depth information about the available component properties, methods, and events.
The chart docs reference contains all information about the various chart types, their slots and options.
The examples section shows concrete examples of what you can build with Flex.

Using filters in Flex

Flex provides powerful filtering features, In this section we are going to tackle some simpler use cases. These simpler use cases can be combined together to form more complicated use cases.

This section assumes you are familiar with concept of dataset and columns in Luzmo:

datasetId can be found out by browsing to the specific dataset page and finding the ID in the URL.
columnId can be found out using the dropdown on the column field in dataset view page.

Filtering in Flex

Filters allow you to filter out values that are displayed in a viz item. Some common use cases could be, wanting to show a specific set of countries, showing data only from a specific time frame etc.

Below gif shows how applying filter will affect a viz item.

Chart before and after applying filters

In the above gif, we only show data from a list of continents, the filter code for this example is as follows.

html

<luzmo-viz-item
  type="bar-chart"
  filters='[
    {
      "condition": "or",
      "filters": [
        {
          "expression": "? in ?",
          "parameters": [
            {
              "columnId": "4c1eee0b-3a5f-41e1-820f-d09440784c67",
              "datasetId": "f6b55beb-8a92-4976-81fa-1aecc7b27e49",
              "level": 1
            },
            ["Europe", "Asia", "Africa"]
          ]
        }
      ]
    }
  ]'
  slots='[
    {
      "name": "y-axis",
      "content": [
        {
          "type": "hierarchy",
          "label": "Region",
          "columnId": "4c1eee0b-3a5f-41e1-820f-d09440784c67",
          "datasetId": "f6b55beb-8a92-4976-81fa-1aecc7b27e49"
        }
      ]
    },
    {
      "name": "measure",
      "content": [
        {
          "type": "numeric",
          "format": "$,.2s",
          "label": "Total cost",
          "aggregationFunc": "sum",
          "columnId": "88916a0d-b238-4d2a-af84-63f6121088e1",
          "datasetId": "f6b55beb-8a92-4976-81fa-1aecc7b27e49"
        }
      ]
    }
  ]'
>
</luzmo-viz-item>

Lets take a close look at the filters option

Value passed to filters input is an array of objects.

json

[
  {
    "condition": "or",
    "filters": [
      {
        "expression": "? in ?",
        "parameters": [
          {
            "columnId": "4c1eee0b-3a5f-41e1-820f-d09440784c67",
            "datasetId": "f6b55beb-8a92-4976-81fa-1aecc7b27e49",
            "level": 1
          },
          ["Europe", "Asia", "Africa"]
        ]
      }
    ]
  }
]

The condition groups the filters array next to it in a OR condition, every entry in the filters array (present just below condition ) will be OR'ed .

Now lets have a look at the first object in filters array. It has the following fields.

The ? in ? tells the application to search for values from the list of values provided.

parameters is an array containing 2 values, first contains the information on which columnId and datasetId to apply filter on and the second value in the array is an array (It can also be a single value) of values to filter on.

A more verbose documentation can be found here

Another example, In this example the parameters second value is not an array.

json

[
  {
    "condition": "or",
    "filters": [
      {
        "expression": "? = ?",
        "parameters": [
          {
            "columnId": "4c1eee0b-3a5f-41e1-820f-d09440784c67",
            "datasetId": "f6b55beb-8a92-4976-81fa-1aecc7b27e49",
            "level": 1
          },
          "Asia"
        ]
      }
    ]
  }
]

Examples

More examples to help you better understand how to work with filters.

I want to filter countries with population greather than 0.20

To solve this problem we are going to use the ? > ? expression.

json

[
  {
    "condition": "or",
    "filters": [
      {
        "expression": "? > ?",
        "parameters": [
          {
            "columnId": "4c1eee0b-3a5f-41e1-820f-d09440784c67", // Column id of Population Column
            "datasetId": "f6b55beb-8a92-4976-81fa-1aecc7b27e49",
            "level": 1
          },
          0.20
        ]
      }
    ]
  }
]

I want to filter countries whose data was last updated on 24th Of June 2024

To solve this problem we are going to use the ? >= ? expression.

json

[
  {
    "condition": "or",
    "filters": [
      {
        "expression": "? >= ?",
        "parameters": [
          {
            "columnId": "4c1eee0b-3a5f-41e1-820f-d09440784c67", // Column id of Population Column
            "datasetId": "f6b55beb-8a92-4976-81fa-1aecc7b27e49",
            "level": 1
          },
          "2024-06-24T00:00:00.000Z"
        ]
      }
    ]
  }
]

I want to filter out countires whose data was updated between 22nd of June and 24th of June 2024

To solve this problem, we are going to use the ? between ? expression.

ℹ️

Same operation can be carried out using a cominbation of ? > ? and ? < ? expressions.

json

[
  {
    "condition": "or",
    "filters": [
      {
        "expression": "? between ?",
        "parameters": [
          {
            "columnId": "4c1eee0b-3a5f-41e1-820f-d09440784c67", // Column id of Population Column
            "datasetId": "f6b55beb-8a92-4976-81fa-1aecc7b27e49",
            "level": 1
          },
          ["2024-06-22T00:00:00.000Z", "2024-06-24T00:00:00.000Z"]
        ]
      }
    ]
  }
]

Did this page help you?

Yes