LLM-friendly URL

Multiple charts in grid

Introduction

luzmo-item-grid is a grid layout component that lets users arrange, resize, and manage multiple charts on a grid. Use it when you want to give end users an interactive canvas for building or customizing a multi-chart view.

The grid renders each chart internally using luzmo-embed-viz-item , so you don't need to wire up the embed component yourself. You do need to pass the same auth-key and auth-token credentials you would use for any embedded visualization.

Use the <luzmo-item-grid> element in your HTML.

Interactive example

Item grid<luzmo-item-grid>

Properties

Use HTML attributes for primitive values in markup, and JS properties for objects, arrays, and programmatic updates.

Property HTML attribute Type Description
apiHostapi-hoststring Luzmo API host. Default: https://api.luzmo.com .
appServerapp-serverstring App server used by embedded viz items. Default: https://app.luzmo.com/ .
authKeyauth-keystring | undefined Auth key used by embedded viz items (and related data calls).
authTokenauth-tokenstring | undefined Auth token used by embedded viz items (and related data calls).
cacheTimecache-timenumber | undefined Data broker cache time in ms.
columnscolumnsnumber Number of grid columns. Default: 48 .
contentLanguagecontent-languagestring Language used for locale-aware formatting and data labels. Default: en .
defaultItemActionsMenu — InputActionGroup[] | undefined Default actions menu structure used for all items (unless overridden per item).
items — GridItemData[] Items rendered in the grid (type, position, slots, options, filters, ...).
languagelanguagestring UI language. Default: en .
placementItemActionsMenuplacement-item-actions-menuPlacement Placement of the item actions menu. Default: right-start .
renderers — Record<string, GridItemRenderer> Reserved for custom renderers (not applied by the current luzmo-item-grid implementation).
rowHeightrow-heightnumber Row height in px. Default: 16 .
theme — ThemeConfig | Record<string, unknown> | undefined Theme configuration (system theme id or custom theme object).
viewModeview-modeboolean When true, disables drag/resize and item actions. Default: false .

Events

Name Payload type Description
luzmo-item-grid-readyCustomEvent<{ element: HTMLElement; grid: GridStack; items: GridItemData[] }> Fired when the GridStack instance is initialized.
luzmo-item-grid-changedCustomEvent<{ element: HTMLElement; grid: GridStack; items: GridItemData[] }> Fired after item positions or sizes change.
luzmo-item-grid-item-actionCustomEvent<{ action: string; actionType: 'toggle' | 'button'; active: boolean; id: string; items: GridItemData[]; element: HTMLElement; type?: VizItemType; slots?: VizItemSlot[]; options?: VizItemOptions; filters: ItemFilterGroup[]; deletedId?: string; originalElement?: HTMLElement }> Fired when an item action is performed (for example edit-data , item-options , delete , clone ). Cancelable.

Types

The component entrypoint exports several component-owned types for grid items and actions. Shared types used in GridItemData properties come from the public types barrel.

ts
import '@luzmo/analytics-components-kit/item-grid';

import type {
  Action,
  ActionGroup,
  DefaultActionType,
  GridItemData,
  GridItemRenderer,
  InputActionGroup
} from '@luzmo/analytics-components-kit/item-grid';
import type {
  ItemFilterGroup,
  Placement,
  ThemeConfig,
  VizItemSlot,
  VizItemType
} from '@luzmo/analytics-components-kit/types';
Type Import path Description
GridItemData@luzmo/analytics-components-kit/item-grid Main item contract for the items array. Contains id , type , position , slots , options , filters , and optional action overrides.
GridItemRenderer@luzmo/analytics-components-kit/item-grid Callback type for custom renderers passed through the renderers property.
InputActionGroup@luzmo/analytics-components-kit/item-grid Input shape for defaultItemActionsMenu . Describes a group of actions before internal normalization.
ActionGroup@luzmo/analytics-components-kit/item-grid Normalized action group shape (after processing InputActionGroup ).
Action@luzmo/analytics-components-kit/item-grid Shape of a single action inside an ActionGroup .
DefaultActionType@luzmo/analytics-components-kit/item-grid String literal union of built-in action types (e.g. edit-data , item-options , delete , clone ).
VizItemSlot@luzmo/analytics-components-kit/types Element of the slots array inside GridItemData .
VizItemType@luzmo/analytics-components-kit/types String literal union of supported chart types. Used as GridItemData['type'] .
ItemFilterGroup@luzmo/analytics-components-kit/types Shape of filter entries inside GridItemData['filters'] .
ThemeConfig@luzmo/analytics-components-kit/types Theme configuration object for the theme property.
Placement@luzmo/analytics-components-kit/types Popover/overlay placement values for placementItemActionsMenu .

GridItemData['options'] uses VizItemOptions from @luzmo/dashboard-contents-types , not from the ACK public types barrel. The grid's event detail types ( GridItemActionEventDetail and the lifecycle detail) are not currently public exports; refer to the event payload shapes in the Events table above.

CSS Variables

All CSS variables in this list can be set on luzmo-item-grid { ... } .

Variable Description
--luzmo-item-grid-min-height Minimum grid height.
--luzmo-item-grid-background Grid background color.
--luzmo-item-grid-item-background Grid item background.
--luzmo-item-grid-item-border-radius Grid item border radius.
--luzmo-item-grid-item-box-shadow Grid item box shadow.
--luzmo-item-grid-item-border-style Grid item border style.
--luzmo-item-grid-item-border-color Grid item border color.
--luzmo-item-grid-item-border-width Grid item border width.
--luzmo-item-grid-item-border-top-width Grid item border-top width.
--luzmo-item-grid-item-border-right-width Grid item border-right width.
--luzmo-item-grid-item-border-bottom-width Grid item border-bottom width.
--luzmo-item-grid-item-border-left-width Grid item border-left width.
--luzmo-item-grid-item-backdrop-filter Backdrop filter applied to grid items.
--luzmo-item-grid-item-resizing-opacity Opacity applied while resizing.
--luzmo-item-grid-item-drag-handle-color Drag handle icon color.
--luzmo-item-grid-item-drag-handle-padding Drag handle padding.
--luzmo-item-grid-item-drag-handle-cursor Drag handle cursor.
--luzmo-item-grid-item-drag-handle-z-index Drag handle z-index.
--luzmo-item-grid-item-drag-handle-position-top Drag handle top position.
--luzmo-item-grid-item-drag-handle-position-right Drag handle right position.
--luzmo-item-grid-item-drag-handle-position-bottom Drag handle bottom position.
--luzmo-item-grid-item-drag-handle-position-left Drag handle left position.
--luzmo-item-grid-resize-handle-z-index Resize handle z-index.
--luzmo-item-grid-resize-handle-background Resize handle background.
--luzmo-item-grid-resize-handle-background-hover Resize handle background on hover.
--luzmo-item-grid-resize-handle-background-active Resize handle background while resizing.
--luzmo-item-grid-resize-handle-border-radius Resize handle border radius.
--luzmo-item-grid-resize-handle-opacity Base resize handle opacity.
--luzmo-item-grid-resize-handle-opacity-hover Resize handle opacity on item hover/active.
--luzmo-item-grid-resize-handle-opacity-active Resize handle opacity on handle hover.
--luzmo-item-grid-resize-handle-transition Resize handle opacity transition.
--luzmo-item-grid-resize-handle-edge-size Thickness of edge resize handles.
--luzmo-item-grid-resize-handle-side-size Length of edge resize handles.
--luzmo-item-grid-resize-handle-edge-offset Edge handle offset from the item edge.
--luzmo-item-grid-resize-handle-corner-size Size of corner resize handles.
--luzmo-item-grid-resize-handle-corner-offset Corner handle offset from the item corner.
--luzmo-item-grid-item-actions-padding Padding applied to the item actions menu container.
--luzmo-item-grid-item-action-group-gap Gap between action buttons in the item actions menu.
--luzmo-item-grid-item-actions-flex-direction Flex direction of the item actions menu (for example row , column ).
--luzmo-item-grid-item-action-button-background-color-default Action button background (default).
--luzmo-item-grid-item-action-button-background-color-hover Action button background on hover.
--luzmo-item-grid-item-action-button-background-color-down Action button background while pressed.
--luzmo-item-grid-item-action-button-background-color-focus Action button background on focus.
--luzmo-item-grid-item-action-button-content-color-default Action button content color (default).
--luzmo-item-grid-item-action-button-content-color-hover Action button content color on hover.
--luzmo-item-grid-item-action-button-content-color-down Action button content color while pressed.
--luzmo-item-grid-item-action-button-content-color-focus Action button content color on focus.
--luzmo-item-grid-item-delete-button-background-color-hover Delete button background on hover.
--luzmo-item-grid-item-delete-button-background-color-down Delete button background while pressed.
--luzmo-item-grid-item-delete-button-background-color-focus Delete button background on focus.
--luzmo-item-grid-item-delete-button-content-color-hover Delete button content color on hover.
--luzmo-item-grid-item-delete-button-content-color-down Delete button content color while pressed.
--luzmo-item-grid-item-delete-button-content-color-focus Delete button content color on focus.
--luzmo-item-grid-item-dimensions-hint-font-size Font size of the resize dimensions hint.
--luzmo-item-grid-item-dimensions-hint-font-family Font family of the resize dimensions hint.
--luzmo-item-grid-item-dimensions-hint-padding Padding of the resize dimensions hint.
--luzmo-item-grid-item-dimensions-hint-border-width Border width of the resize dimensions hint.
--luzmo-item-grid-item-dimensions-hint-border-color Border color of the resize dimensions hint.
--luzmo-item-grid-item-dimensions-hint-border-radius Border radius of the resize dimensions hint.
--luzmo-item-grid-item-dimensions-hint-background Background of the resize dimensions hint.
--luzmo-item-grid-item-dimensions-hint-color Text color of the resize dimensions hint.

Code examples

index.html
Web component
Angular
React
React Native
Vue
<luzmo-item-grid
  id="dashboardGrid"
  app-server="https://app.luzmo.com"
  api-host="https://api.luzmo.com"
  auth-key="your-auth-key"
  auth-token="your-auth-token"
  language="en"
  columns="48"
  row-height="16"
></luzmo-item-grid>

<script type="module">
  import '@luzmo/analytics-components-kit/item-grid';

  let items = [
    {
      id: 'sales-chart',
      type: 'bar-chart',
      options: { mode: 'stacked' },
      slots: [
        {
          name: 'measure',
          content: [
            {
              datasetId: '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11',
              columnId: '2a7c5e41-6d8f-4b2a-93c1-7e5d4f6a8b12',
              label: { en: 'Revenue' },
              type: 'numeric',
              aggregationFunc: 'sum'
            }
          ]
        }
      ],
      position: { col: 0, row: 0, sizeX: 24, sizeY: 18 }
    },
    {
      id: 'margin-chart',
      type: 'line-chart',
      options: {},
      slots: [
        {
          name: 'measure',
          content: [
            {
              datasetId: '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11',
              columnId: '3b8d6f52-7e9a-4c3b-a4d2-8f6e5a7b9c23',
              label: { en: 'Margin' },
              type: 'numeric',
              aggregationFunc: 'sum'
            }
          ]
        }
      ],
      position: { col: 24, row: 0, sizeX: 24, sizeY: 18 }
    }
  ];

  const dashboardGrid = document.getElementById('dashboardGrid');

  dashboardGrid.items = items;

  dashboardGrid.addEventListener('luzmo-item-grid-changed', (event) => {
    items = event.detail.items;
    dashboardGrid.items = items;
  });

  dashboardGrid.addEventListener('luzmo-item-grid-item-action', (event) => {
    console.log('item action', event.detail.action, event.detail.id);
  });
</script>
Did this page help you?
Yes No