Item Slot Drop Panel

Introduction

luzmo-item-slot-drop-panel renders all drag-and-drop slot targets for a given chart type in one go. It automatically loads the slot configuration for the selected item-type and enforces slot constraints (rules about which fields can go where and how many are allowed).

Pair this component with luzmo-data-field-panel , which provides the draggable fields users drop into each slot. For a dropdown-based alternative that doesn't require drag-and-drop, see luzmo-item-slot-picker-panel .

Use the <luzmo-item-slot-drop-panel> element in your HTML.

Interactive example

Properties

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

Events

SlotConstraintTriggeredEventDetail is exported from @luzmo/analytics-components-kit/types .

Types

This entrypoint currently has no component-owned type exports. All useful types are imported from the shared types barrel.

import '@luzmo/analytics-components-kit/item-slot-drop-panel';

import type {
  Placement,
  SlotConfig,
  SlotConstraint,
  SlotConstraintTriggeredEventDetail,
  SlotContentsChangedEventDetail,
  SlotName,
  SlotPosition,
  SlotPositioningConfig,
  VizItemSlot,
  VizItemType
} from '@luzmo/analytics-components-kit/types';

The panel-level luzmo-slots-contents-changed event does not currently have a named exported interface. Its payload shape is CustomEvent<{ slotsContents: VizItemSlot[]; linkedDatasetsIds: string[] }> .

CSS Variables

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

Code examples

<luzmo-item-slot-drop-panel
  id="dropPanel"
  item-type="bar-chart"
  language="en"
  size="m"
  api-url="https://api.luzmo.com"
  auth-key="your-auth-key"
  auth-token="your-auth-token"
></luzmo-item-slot-drop-panel>

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

  let slotsContents = [
    {
      name: 'measure',
      content: [
        {
          datasetId: '6f2f9f80-3d80-4f45-9d5c-6d1b2e4a8c11',
          columnId: '2a7c5e41-6d8f-4b2a-93c1-7e5d4f6a8b12',
          label: { en: 'Revenue' },
          type: 'numeric',
          aggregationFunc: 'sum'
        }
      ]
    }
  ];

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

  dropPanel.slotsContents = slotsContents;

  dropPanel.addEventListener('luzmo-slots-contents-changed', (event) => {
    slotsContents = event.detail.slotsContents;
    dropPanel.slotsContents = slotsContents;
  });
</script>