Every chart type is defined by one or more slots -- named data dimensions such as "measure", "x-axis", or "legend". When users configure a chart, they assign data fields (columns or formulas from a dataset) to these slots. The slot components below provide the UI for that assignment.
There are two interaction models to choose from:
Drag-and-drop -- Users drag fields from a luzmo-data-field-panel into slot drop targets. This works well for desktop layouts with room for a side-by-side field list and slot panel.
Dropdown pickers -- Users select fields from a dropdown menu inside each slot. This is a better fit for compact forms, mobile layouts, or any interface where drag-and-drop is impractical.
For each model there is a panel component and an individual component. The panel renders all slots for a chart type at once and automatically enforces slot constraints (rules about which fields can go where and how many are allowed). The individual component gives you more control over positioning and layout, but you are responsible for managing constraints yourself.
luzmo-item-slot-drop -- A drop target for a single slot. Use it when you want to position individual slots yourself.
luzmo-item-slot-drop-panel -- Renders all slot drop targets for a chart type in one go, with automatic constraint handling. Pair with luzmo-data-field-panel for a complete drag-and-drop experience.
luzmo-item-slot-picker -- A dropdown picker for a single slot. Use it when you want to position individual pickers yourself.
luzmo-item-slot-picker-panel -- Renders dropdown pickers for all slots of a chart type, with automatic constraint handling and an optional dataset picker.
Visit their individual pages for more information, full API reference, and interactive examples.
<luzmo-data-field-panel><luzmo-item-slot-drop-panel><luzmo-viz-item><luzmo-item-slot-picker-panel><luzmo-viz-item>