Item Slot Drop

Introduction

Every chart type has one or more slots -- the data dimensions that define it, such as "measure", "x-axis", or "legend". luzmo-item-slot-drop is a drop target for a single slot. Users fill it by dragging a luzmo-data-field (or a field from luzmo-data-field-panel ) onto it.

Use this component when you want to position individual slot targets yourself. If you prefer to render all slots for a chart type at once, use luzmo-item-slot-drop-panel instead.

Use the <luzmo-item-slot-drop> 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

Event detail types are exported from @luzmo/analytics-components-kit/types .

Types

Import the component entrypoint for the element registration. SlotConfig is the only component-owned type; all other useful types come from the shared types barrel.

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

import type { SlotConfig, SlotContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop';
import type {
  InfoVisibilityChangedEventDetail,
  Placement,
  SlotContent,
  SlotMenuActiveEventDetail,
  SlotMenuHighlightEventDetail,
  SlotName,
  VizItemSlot,
  VizItemType
} from '@luzmo/analytics-components-kit/types';

CSS Variables

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

Code examples

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

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

  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 measureSlot = document.getElementById('measureSlot');

  measureSlot.slotsContents = slotsContents;

  measureSlot.addEventListener('luzmo-slot-contents-changed', (event) => {
    slotsContents = [{ name: 'measure', content: event.detail.slotContents }];
    measureSlot.slotsContents = slotsContents;
  });
</script>