LLM-friendly URL

Item Option Panel

Introduction

luzmo-item-option-panel renders the full grouped options editor for a chart type. Use it when you want to expose all supported options in one place instead of building a custom layout with individual luzmo-item-option controls.

The panel loads built-in option groups from item-type and presents them in an accordion. You can also provide your own grouped configuration through customOptionsConfiguration , along with customTranslations , to build a complete custom options editor while still using the built-in controls and behavior.

Pass the current slots and theme when available. These help the panel resolve chart-specific defaults, visibility rules, and theme-aware option controls. As with all configuration components, treat options as application state and update it in response to luzmo-options-changed .

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

Interactive example

Chart options<luzmo-item-option-panel>
Live bar chart<luzmo-viz-item>

Properties

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

Property HTML attribute Type Description
apiUrlapi-urlstring | undefined API URL forwarded to child controls for theme-dependent behavior. Default: https://api.luzmo.com .
authKeyauth-keystring | undefined Auth key forwarded to child controls.
authTokenauth-tokenstring | undefined Auth token forwarded to child controls.
customOptionsConfiguration — OptionsConfig | undefined Custom grouped options configuration. When provided, built-in item config is not loaded.
customTranslations — TranslationOverrides | TranslationsFile | undefined Custom translations for groups and options. Can be a full translations object or flat overrides keyed by group or option key.
itemTypeitem-typeVizItemType | string | undefined Item/chart type used to load built-in option configuration. Leave unset when customOptionsConfiguration is provided.
languagelanguagestring UI language used to load option labels and translations. Default: en .
options — Record<string, unknown> | undefined Current options object edited by the component.
sizesize's' | 'm' | 'l' | 'xl' Size variant forwarded to the accordion and nested controls. Default: m .
slots — VizItemSlots | undefined Current slots state passed to child option controls. Used by chart-specific visibility logic and defaults.
theme — ThemeConfig & Record<string, unknown> | undefined Theme object passed to child option controls. Useful for theme-aware controls such as color and styling editors.

Events

Name Payload type Description
luzmo-options-changedCustomEvent<{ options: Record<string, unknown> }> Fired when any option changes. Cancelable; event bubbles and is composed for parent-level handling.

Types

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

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

import type {
  OptionConfig,
  OptionsConfig,
  Slot,
  ThemeConfig,
  TranslationOverrides,
  TranslationsFile,
  VizItemType
} from '@luzmo/analytics-components-kit/types';
Type Import path Description
OptionsConfig@luzmo/analytics-components-kit/types Main type for customOptionsConfiguration . Describes grouped option definitions (note the plural -- OptionsConfig vs the single-option OptionConfig ).
OptionConfig@luzmo/analytics-components-kit/types Shape for a single option inside a group. Describes the option key, control type, and default value.
TranslationOverrides@luzmo/analytics-components-kit/types Flat override map keyed by group or option key. Used with customTranslations .
TranslationsFile@luzmo/analytics-components-kit/types Full translations object (groups + options). The panel accepts both TranslationOverrides and TranslationsFile for customTranslations .
Slot@luzmo/analytics-components-kit/types Shape of a slot entry in the slots array. Used by chart-specific visibility logic and option defaults.
ThemeConfig@luzmo/analytics-components-kit/types Theme configuration object passed through the theme property.
VizItemType@luzmo/analytics-components-kit/types String literal union of supported chart types.

The luzmo-options-changed event does not currently have a named exported interface. Its payload shape is CustomEvent<{ options: Record<string, unknown> }> .

CSS Variables

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

Variable Description
--luzmo-item-option-panel-font-size Base font size for the component when size="m" .
--luzmo-item-option-panel-font-size-s Font size for size="s" .
--luzmo-item-option-panel-font-size-l Font size for size="l" .
--luzmo-item-option-panel-font-size-xl Font size for size="xl" .
--luzmo-item-option-panel-divider-vertical-margin Vertical margin around divider rows between option groups.
--luzmo-item-option-divider-vertical-margin Vertical margin around nested luzmo-item-option controls.

Code examples

index.html
Web component
Angular
React
React Native
Vue
<luzmo-item-option-panel
  id="optionsPanel"
  item-type="bar-chart"
  language="en"
  size="m"
></luzmo-item-option-panel>

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

  let options = {
    mode: 'stacked',
    display: { title: true, legend: true }
  };

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

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

  optionsPanel.options = options;
  optionsPanel.slots = slots;

  optionsPanel.addEventListener('luzmo-options-changed', (event) => {
    options = event.detail.options;
    optionsPanel.options = options;
  });
</script>
Did this page help you?
Yes No