Item definitions

Every chart type in the Analytics Components Kit is described by a set of item definitions -- metadata that specifies which data slots the chart accepts, which options are available to configure its appearance and behavior, and what labels to display in different languages. When you set item-type="bar-chart" on a component such as luzmo-item-slot-drop-panel or luzmo-item-option-panel , the component loads that chart type's definitions automatically.

You rarely need to work with these definitions directly -- the components handle them for you. However, understanding them is useful when you want to:

• Build a chart type picker that lists every supported visualization.

• Override the built-in slot or option configuration for a component.

• Inspect what slots or options a chart type supports at runtime.

• Integrate chart metadata into your own application logic.

Available item types

The kit provides three exports that describe the available chart types. Import them from the main package or from the item-list subpath:

import { itemTypes, itemList, itemGroups } from '@luzmo/analytics-components-kit/item-list';

itemTypes

An array of base chart type identifiers. Each identifier has a corresponding slot configuration and options configuration. These are the values you can pass to the item-type property on any ACK component.

itemList

A superset of itemTypes that includes palette variants and aliases. Variants map to a base type with preset options -- for example, grouped-bar-chart resolves to type: 'bar-chart' with options: { mode: 'grouped' } . Aliases map one name to another -- for example, pie-chart resolves to type: 'donut-chart' . Use itemList when building a chart type picker so users see all visual variations.

itemGroups

The same item types organized into named groups (charts, tables, numbers, filters, and so on). Use itemGroups when you want to render a grouped chart type picker.

Full list of base item types

For live examples and per-chart slot and option documentation, see the Flex chart docs .

Slot configurations

A slot configuration defines the data dimensions a chart type accepts. Each slot has a name (e.g. measure , y-axis , legend ), a human-readable label, a data type ( categorical , numeric , or mixed), and constraint rules that control how many fields can be assigned and how slots interact with each other.

Slot configs are re-exported by the kit via the item-slots-configs subpath. Each chart type has its own named export:

import { barChartSlotsConfig } from '@luzmo/analytics-components-kit/item-slots-configs';
import { lineChartSlotsConfig } from '@luzmo/analytics-components-kit/item-slots-configs';

Example: bar chart slots

import { barChartSlotsConfig } from '@luzmo/analytics-components-kit/item-slots-configs';

// barChartSlotsConfig value:
[
  {
    name: 'y-axis',
    label: 'Category',
    type: 'categorical',
    rotate: true,
    options: { areDatetimeOptionsEnabled: true }
  },
  {
    name: 'measure',
    label: 'Measure',
    type: 'numeric',
    rotate: false,
    options: { isCumulativeSumEnabled: true },
    canAcceptMultipleDataFields: true,
    canAcceptFormula: true,
    keepOnlyFirstWhenOtherSlotFilled: ['legend']
  },
  {
    name: 'legend',
    label: 'Group by',
    type: 'categorical',
    rotate: true,
    options: { areDatetimeOptionsEnabled: true },
    clearWhenOtherSlotHasMultipleItems: ['measure']
  }
]

Slot configuration fields

The name values in a slot configuration correspond directly to the slot names expected by the Flex SDK slots property. See the Flex component API reference for details on how type , slots , and options are consumed at render time.

Overriding slot configuration

Panel components like luzmo-item-slot-drop-panel load the slot config automatically from item-type . If you need to customize the slots -- for example, to hide a slot or change its label -- pass a slotsConfiguration array instead:

<luzmo-item-slot-drop-panel
  item-type="bar-chart"
  id="customSlots">
</luzmo-item-slot-drop-panel>

<script>
  const panel = document.getElementById('customSlots');
  panel.slotsConfiguration = [
    { name: 'measure', label: 'Revenue', type: 'numeric' },
    { name: 'y-axis', label: 'Period', type: 'categorical' }
  ];
</script>

When slotsConfiguration is set, the built-in config loaded from item-type is ignored.

Options configurations

An options configuration defines the controls available in the chart options editor. Each config is a nested array of option groups. Groups contain individual option entries, each specifying a control type (switch, picker, slider, color picker, etc.), a default value, and optional visibility rules.

Options configs are re-exported via the item-options-configs subpath:

import { barChartOptionsConfig } from '@luzmo/analytics-components-kit/item-options-configs';
import { lineChartOptionsConfig } from '@luzmo/analytics-components-kit/item-options-configs';

Example: options config structure

The following is an illustrative excerpt showing the general shape. Actual configs contain many more entries.

import { barChartOptionsConfig } from '@luzmo/analytics-components-kit/item-options-configs';

// Illustrative structure
[
  {
    key: 'general',
    type: 'group',
    open: true,
    children: [
      {
        key: 'mode',
        control: {
          type: 'picker',
          default: 'grouped',
          enum: ['grouped', 'stacked', '100']
        },
        visibleIf: ({ slots }) => {
          return slots?.find(s => s?.name === 'legend')?.content?.length > 0 ||
                 slots?.find(s => s?.name === 'measure')?.content?.length > 1;
        }
      },
      {
        key: 'display.title',
        control: { type: 'switch', default: true }
      },
      {
        key: 'bars.roundedCorners',
        control: { type: 'slider', min: 0, max: 20, step: 1 }
      },
      {
        key: 'color',
        control: { type: 'color-picker' }
      }
    ]
  },
  {
    key: 'legend',
    type: 'group',
    open: false,
    children: [
      {
        key: 'legend.position',
        control: {
          type: 'position-picker',
          default: 'topRight',
          enum: ['topLeft', 'top', 'topRight', 'right',
                 'bottomRight', 'bottom', 'bottomLeft', 'left']
        }
      }
    ]
  }
]

Key concepts

• Groups ( type: 'group' ) organize related options. The open flag controls whether the group is expanded by default.

• Keys use dot notation to represent nested paths in the options object (e.g. display.title , bars.roundedCorners ).

• Control types include switch , picker , slider , color-picker , position-picker , and others.

• visibleIf is an optional callback that receives the current slots and options state, returning true when the option should be shown. This allows options to appear or hide based on the chart's current data configuration.

• default specifies the initial value when no explicit value has been set.

Overriding options configuration

The luzmo-item-option-panel and luzmo-item-option components both accept a custom configuration via customOptionsConfiguration (on the panel) or customOptionConfiguration (on the individual component). When provided, the built-in config is not loaded.

Import summary

// Item type lists
import { itemTypes, itemList, itemGroups } from '@luzmo/analytics-components-kit/item-list';

// Slot configurations (one export per chart type)
import { barChartSlotsConfig } from '@luzmo/analytics-components-kit/item-slots-configs';
import { lineChartSlotsConfig } from '@luzmo/analytics-components-kit/item-slots-configs';

// Options configurations (one export per chart type)
import { barChartOptionsConfig } from '@luzmo/analytics-components-kit/item-options-configs';
import { lineChartOptionsConfig } from '@luzmo/analytics-components-kit/item-options-configs';

The naming convention is consistent: convert the item type from kebab-case to camelCase and append the config suffix. For example, line-chart becomes lineChartSlotsConfig , and lineChartOptionsConfig .