@luzmo/analytics-components-kit 1.0.3-beta.10 → 1.0.3-beta.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +320 -11
- package/components/ai-chat/ai-chat.d.ts +8 -4
- package/components/ai-chat/empty-state/ai-chat-empty-state.d.ts +1 -1
- package/components/ai-chat/index.cjs +1 -1
- package/components/ai-chat/index.d.ts +1 -1
- package/components/ai-chat/index.js +1 -1
- package/components/{ai-chat-Du1gOCyo.cjs → ai-chat-8O_eA0_D.cjs} +6 -5
- package/components/{ai-chat-BUiqA_bv.js → ai-chat-BYlVFmdP.js} +11 -7
- package/components/ai-interaction-textarea/ai-interaction-textarea.d.ts +7 -2
- package/components/ai-interaction-textarea/index.cjs +1 -1
- package/components/ai-interaction-textarea/index.d.ts +1 -0
- package/components/ai-interaction-textarea/index.js +1 -1
- package/components/ai-interaction-textarea/types.d.ts +5 -0
- package/components/{ai-interaction-textarea-DnM5PwjW.cjs → ai-interaction-textarea-BK25Gh9y.cjs} +3 -3
- package/components/{ai-interaction-textarea-Cei62Fen.js → ai-interaction-textarea-KVfak9dJ.js} +6 -3
- package/components/data-field/data-field.d.ts +2 -2
- package/components/data-field/index.d.ts +1 -0
- package/components/data-field-level/data-field-level.d.ts +2 -2
- package/components/data-field-panel/data-field-panel.d.ts +3 -3
- package/components/data-fields-select/data-fields-select.d.ts +1 -1
- package/components/data-fields-select/index.d.ts +1 -0
- package/components/data-fields-select/types.d.ts +4 -0
- package/components/dataset-selector-list/dataset-selector-list.d.ts +1 -1
- package/components/dataset-selector-list/index.d.ts +1 -0
- package/components/dataset-selector-row/dataset-selector-row.d.ts +2 -2
- package/components/dataset-selector-row/index.d.ts +1 -0
- package/components/display-settings/display-settings.d.ts +3 -3
- package/components/display-settings/index.d.ts +1 -1
- package/components/display-settings/types.d.ts +5 -1
- package/components/display-settings-binning/display-settings-binning.d.ts +1 -1
- package/components/display-settings-binning/index.d.ts +1 -0
- package/components/display-settings-datetime/display-settings-datetime.d.ts +1 -1
- package/components/display-settings-datetime/index.d.ts +1 -0
- package/components/display-settings-grand-totals/display-settings-grand-totals.d.ts +1 -1
- package/components/display-settings-grand-totals/index.d.ts +1 -0
- package/components/display-settings-numeric/display-settings-numeric.d.ts +1 -1
- package/components/display-settings-numeric/index.d.ts +1 -0
- package/components/display-settings-period-over-period/display-settings-period-over-period.d.ts +1 -1
- package/components/display-settings-period-over-period/index.d.ts +1 -0
- package/components/filters/filters.d.ts +1 -1
- package/components/filters/index.d.ts +1 -1
- package/components/filters/types.d.ts +4 -0
- package/components/formula/index.cjs +1 -1
- package/components/formula/index.js +1 -1
- package/components/{formula-CB0-0Hfu.js → formula-BZuUMeUb.js} +8 -4
- package/components/{formula-codemirror-PraolCXa.js → formula-codemirror-CYBD_5bC.js} +3 -3
- package/components/{formula-codemirror-CHAgmjDb.cjs → formula-codemirror-p7ssM_dZ.cjs} +2 -2
- package/components/{formula-display-store-lENPCY-p.js → formula-display-store-BtD83k2x.js} +1 -1
- package/components/{formula-display-store-ianfhYAz.cjs → formula-display-store-_432SuSV.cjs} +1 -1
- package/components/formula-editor/index.cjs +1 -1
- package/components/formula-editor/index.js +3 -3
- package/components/{formula-editor-BTy_o9zr.js → formula-editor-C1zz5pEL.js} +5 -5
- package/components/{formula-editor-CCPiES8u.cjs → formula-editor-DfTDtGC4.cjs} +2 -2
- package/components/formula-field/index.cjs +1 -1
- package/components/formula-field/index.js +1 -1
- package/components/{formula-field-CdwPfr3i.js → formula-field-B2TQe1Z_.js} +1 -1
- package/components/{formula-field-DUdeqGIv.cjs → formula-field-Dd1vnGZA.cjs} +1 -1
- package/components/{formula-input-base-D40h4WMK.js → formula-input-base-B-Li9TP4.js} +1 -1
- package/components/{formula-input-base-Bdy8riVz.cjs → formula-input-base-DjJ2Q4gu.cjs} +1 -1
- package/components/formula-u4CxsVki.cjs +45 -0
- package/components/{groupings-Cm5tMojA.cjs → groupings-BdNTQMKX.cjs} +1 -1
- package/components/{groupings-FgSCJQwV.js → groupings-JilcSOEe.js} +1 -1
- package/components/index.cjs +1 -1
- package/components/index.js +7 -7
- package/components/item-grid/helpers/grid-events.d.ts +1 -1
- package/components/item-grid/index.d.ts +1 -0
- package/components/item-grid/item-grid.d.ts +4 -4
- package/components/item-option/index.d.ts +1 -0
- package/components/item-option/item-option.d.ts +1 -0
- package/components/item-option/types.d.ts +8 -0
- package/components/item-option-action-button-group/index.d.ts +1 -0
- package/components/item-option-action-button-group/item-option-action-button-group.d.ts +1 -0
- package/components/item-option-color-palette-picker/index.d.ts +1 -0
- package/components/item-option-color-palette-picker/item-option-color-palette-picker.d.ts +1 -0
- package/components/item-option-color-picker/index.d.ts +1 -0
- package/components/item-option-color-picker/item-option-color-picker.d.ts +1 -1
- package/components/item-option-color-range/index.d.ts +1 -0
- package/components/item-option-color-range/item-option-color-range.d.ts +1 -1
- package/components/item-option-multi-language-field/index.d.ts +1 -0
- package/components/item-option-multi-language-field/item-option-multi-language-field.d.ts +1 -0
- package/components/item-option-number-field/index.d.ts +1 -0
- package/components/item-option-number-field/item-option-number-field.d.ts +1 -0
- package/components/item-option-panel/index.d.ts +1 -0
- package/components/item-option-panel/item-option-panel.d.ts +1 -1
- package/components/item-option-picker/index.d.ts +1 -0
- package/components/item-option-picker/item-option-picker.d.ts +1 -0
- package/components/item-option-position-picker/index.d.ts +1 -0
- package/components/item-option-position-picker/item-option-position-picker.d.ts +1 -0
- package/components/item-option-positions-number-field/index.d.ts +1 -0
- package/components/item-option-positions-number-field/item-option-positions-number-field.d.ts +1 -0
- package/components/item-option-radio-button-group/index.d.ts +1 -0
- package/components/item-option-radio-button-group/item-option-radio-button-group.d.ts +1 -0
- package/components/item-option-slider/index.d.ts +1 -0
- package/components/item-option-slider/item-option-slider.d.ts +1 -0
- package/components/item-option-switch/index.d.ts +1 -0
- package/components/item-option-switch/item-option-switch.d.ts +1 -0
- package/components/item-option-text-field/index.d.ts +1 -0
- package/components/item-option-text-field/item-option-text-field.d.ts +1 -0
- package/components/item-slot-drop/index.d.ts +2 -0
- package/components/item-slot-drop/item-slot-drop.d.ts +2 -0
- package/components/item-slot-drop-panel/index.d.ts +1 -0
- package/components/item-slot-drop-panel/item-slot-drop-panel.d.ts +2 -2
- package/components/item-slot-picker/index.d.ts +1 -0
- package/components/item-slot-picker/item-slot-picker.d.ts +1 -1
- package/components/item-slot-picker-panel/index.d.ts +2 -0
- package/components/item-slot-picker-panel/item-slot-picker-panel.d.ts +4 -4
- package/components/slot-menu/index.d.ts +1 -0
- package/components/slot-menu/slot-menu.d.ts +5 -3
- package/components/slot-menu-list/index.d.ts +1 -0
- package/components/slot-menu-list/slot-menu-list.d.ts +1 -1
- package/components/viz-item-menu/index.d.ts +1 -1
- package/components/viz-item-menu/types.d.ts +8 -0
- package/components/viz-item-menu/viz-item-menu.d.ts +3 -3
- package/custom-elements.json +190 -72
- package/package.json +1 -1
- package/react/components/ai-chat.component.ts +9 -9
- package/react/components/ai-interaction-textarea/index.ts +1 -0
- package/react/components/ai-interaction-textarea/types.ts +6 -0
- package/react/components/ai-interaction-textarea.component.ts +5 -5
- package/react/components/data-field-level.component.ts +5 -5
- package/react/components/data-field-panel.component.ts +7 -7
- package/react/components/data-field.component.ts +5 -5
- package/react/components/data-fields-select/index.ts +1 -0
- package/react/components/data-fields-select/types.ts +5 -0
- package/react/components/data-fields-select.component.ts +4 -4
- package/react/components/dataset-selector-list.component.ts +3 -3
- package/react/components/dataset-selector-row.component.ts +5 -5
- package/react/components/display-settings/types.ts +7 -1
- package/react/components/display-settings-binning.component.ts +3 -3
- package/react/components/display-settings-datetime.component.ts +3 -3
- package/react/components/display-settings-grand-totals.component.ts +3 -3
- package/react/components/display-settings-numeric.component.ts +3 -3
- package/react/components/display-settings-period-over-period.component.ts +3 -3
- package/react/components/display-settings.component.ts +7 -7
- package/react/components/filters/types.ts +6 -0
- package/react/components/filters.component.ts +3 -3
- package/react/components/item-grid.component.ts +9 -9
- package/react/components/item-option/index.ts +1 -0
- package/react/components/item-option/types.ts +10 -0
- package/react/components/item-option-action-button-group.component.ts +5 -3
- package/react/components/item-option-color-palette-picker.component.ts +5 -3
- package/react/components/item-option-color-picker.component.ts +4 -4
- package/react/components/item-option-color-range.component.ts +4 -4
- package/react/components/item-option-multi-language-field.component.ts +5 -3
- package/react/components/item-option-number-field.component.ts +5 -3
- package/react/components/item-option-panel.component.ts +3 -3
- package/react/components/item-option-picker.component.ts +5 -3
- package/react/components/item-option-position-picker.component.ts +5 -3
- package/react/components/item-option-positions-number-field.component.ts +5 -3
- package/react/components/item-option-radio-button-group.component.ts +5 -3
- package/react/components/item-option-slider.component.ts +5 -3
- package/react/components/item-option-switch.component.ts +5 -3
- package/react/components/item-option-text-field.component.ts +5 -3
- package/react/components/item-option.component.ts +9 -4
- package/react/components/item-slot-drop-panel.component.ts +5 -5
- package/react/components/item-slot-drop.component.ts +7 -5
- package/react/components/item-slot-picker-panel.component.ts +9 -9
- package/react/components/item-slot-picker.component.ts +3 -3
- package/react/components/slot-menu-list.component.ts +3 -3
- package/react/components/slot-menu.component.ts +13 -11
- package/react/components/viz-item-menu/types.ts +10 -0
- package/react/components/viz-item-menu.component.ts +9 -9
- package/react/esm/components/ai-chat.component.d.ts +5 -5
- package/react/esm/components/ai-interaction-textarea/index.d.ts +1 -0
- package/react/esm/components/ai-interaction-textarea/index.js +1 -0
- package/react/esm/components/ai-interaction-textarea/types.d.ts +5 -0
- package/react/esm/components/ai-interaction-textarea/types.js +1 -0
- package/react/esm/components/ai-interaction-textarea.component.d.ts +3 -3
- package/react/esm/components/data-field-level.component.d.ts +3 -7
- package/react/esm/components/data-field-panel.component.d.ts +4 -4
- package/react/esm/components/data-field.component.d.ts +3 -7
- package/react/esm/components/data-fields-select/index.d.ts +1 -0
- package/react/esm/components/data-fields-select/index.js +1 -0
- package/react/esm/components/data-fields-select/types.d.ts +4 -0
- package/react/esm/components/data-fields-select/types.js +1 -0
- package/react/esm/components/data-fields-select.component.d.ts +3 -3
- package/react/esm/components/data-fields-select.component.js +1 -1
- package/react/esm/components/dataset-selector-list.component.d.ts +2 -2
- package/react/esm/components/dataset-selector-row.component.d.ts +3 -3
- package/react/esm/components/display-settings/types.d.ts +5 -1
- package/react/esm/components/display-settings-binning.component.d.ts +2 -2
- package/react/esm/components/display-settings-datetime.component.d.ts +2 -2
- package/react/esm/components/display-settings-grand-totals.component.d.ts +2 -2
- package/react/esm/components/display-settings-numeric.component.d.ts +2 -2
- package/react/esm/components/display-settings-period-over-period.component.d.ts +2 -2
- package/react/esm/components/display-settings.component.d.ts +4 -4
- package/react/esm/components/filters/types.d.ts +4 -0
- package/react/esm/components/filters.component.d.ts +2 -2
- package/react/esm/components/item-grid.component.d.ts +5 -5
- package/react/esm/components/item-option/index.d.ts +1 -0
- package/react/esm/components/item-option/index.js +1 -0
- package/react/esm/components/item-option/types.d.ts +8 -0
- package/react/esm/components/item-option/types.js +1 -0
- package/react/esm/components/item-option-action-button-group.component.d.ts +4 -2
- package/react/esm/components/item-option-action-button-group.component.js +2 -0
- package/react/esm/components/item-option-color-palette-picker.component.d.ts +4 -2
- package/react/esm/components/item-option-color-palette-picker.component.js +2 -0
- package/react/esm/components/item-option-color-picker.component.d.ts +3 -3
- package/react/esm/components/item-option-color-picker.component.js +1 -1
- package/react/esm/components/item-option-color-range.component.d.ts +3 -3
- package/react/esm/components/item-option-color-range.component.js +1 -1
- package/react/esm/components/item-option-multi-language-field.component.d.ts +4 -2
- package/react/esm/components/item-option-multi-language-field.component.js +2 -0
- package/react/esm/components/item-option-number-field.component.d.ts +4 -2
- package/react/esm/components/item-option-number-field.component.js +2 -0
- package/react/esm/components/item-option-panel.component.d.ts +2 -2
- package/react/esm/components/item-option-picker.component.d.ts +4 -2
- package/react/esm/components/item-option-picker.component.js +2 -0
- package/react/esm/components/item-option-position-picker.component.d.ts +4 -2
- package/react/esm/components/item-option-position-picker.component.js +2 -0
- package/react/esm/components/item-option-positions-number-field.component.d.ts +4 -2
- package/react/esm/components/item-option-positions-number-field.component.js +2 -0
- package/react/esm/components/item-option-radio-button-group.component.d.ts +4 -2
- package/react/esm/components/item-option-radio-button-group.component.js +2 -0
- package/react/esm/components/item-option-slider.component.d.ts +4 -2
- package/react/esm/components/item-option-slider.component.js +2 -0
- package/react/esm/components/item-option-switch.component.d.ts +4 -2
- package/react/esm/components/item-option-switch.component.js +2 -0
- package/react/esm/components/item-option-text-field.component.d.ts +4 -2
- package/react/esm/components/item-option-text-field.component.js +2 -0
- package/react/esm/components/item-option.component.d.ts +7 -3
- package/react/esm/components/item-option.component.js +5 -1
- package/react/esm/components/item-slot-drop-panel.component.d.ts +3 -3
- package/react/esm/components/item-slot-drop.component.d.ts +5 -3
- package/react/esm/components/item-slot-drop.component.js +2 -0
- package/react/esm/components/item-slot-picker-panel.component.d.ts +5 -5
- package/react/esm/components/item-slot-picker.component.d.ts +2 -2
- package/react/esm/components/slot-menu-list.component.d.ts +2 -2
- package/react/esm/components/slot-menu.component.d.ts +8 -6
- package/react/esm/components/slot-menu.component.js +2 -0
- package/react/esm/components/viz-item-menu/types.d.ts +8 -0
- package/react/esm/components/viz-item-menu.component.d.ts +6 -6
- package/react/esm/components/viz-item-menu.component.js +2 -2
- package/react/esm/types.d.ts +3 -0
- package/react/luzmo-stub.d.ts +57 -36
- package/react/types.ts +3 -0
- package/types/ai-chat.types.d.ts +11 -0
- package/types/slot.types.d.ts +10 -0
- package/types.d.ts +3 -0
- package/components/formula-CHD4rr5_.cjs +0 -41
package/README.md
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
# Luzmo Analytics Components Kit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A collection of web components for building analytics interfaces with Luzmo. Built with [Lit](https://lit.dev/) and designed to work seamlessly with Luzmo's visualization platform.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
ACK produces and edits chart configuration (type, slots, options, filters). It does not render charts itself. You hand the configuration to Luzmo Embed (`@luzmo/embed`), which renders the visualization.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
> **Full documentation**: for detailed guides, component APIs, theming, and examples, see the [Analytics Components Kit docs](https://developer.luzmo.com/guide/ack--overview).
|
|
8
|
+
|
|
9
|
+
## How it works
|
|
10
|
+
|
|
11
|
+
1. **Configure**: users interact with ACK components to pick data fields, assign them to chart slots, set options, and define filters. Each change fires an event your app captures.
|
|
12
|
+
2. **Store**: your app keeps the resulting `slotsContents`, `options`, and `filters` as its own state. ACK follows a one-way data flow: your app is the single source of truth.
|
|
13
|
+
3. **Render**: pass `{ type, slots, options, filters }` into a Luzmo Embed component (`luzmo-embed-viz-item` for a single chart, or let `luzmo-item-grid` render a multi-chart layout).
|
|
10
14
|
|
|
11
15
|
## Installation
|
|
12
16
|
|
|
@@ -14,16 +18,321 @@
|
|
|
14
18
|
npm install @luzmo/analytics-components-kit
|
|
15
19
|
```
|
|
16
20
|
|
|
17
|
-
|
|
21
|
+
To render the configured charts, also install Luzmo Embed (optional):
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @luzmo/embed
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Optional framework wrappers for embedding: `@luzmo/react-embed`, `@luzmo/ngx-embed`, `@luzmo/vue-embed`.
|
|
28
|
+
|
|
29
|
+
> **Important**: This package is linked to `@luzmo/dashboard-contents-types@1.0.31`. Ensure you are using this version when working with `slotsContents`, `slotConfiguration`, `options`, and grid configurations.
|
|
30
|
+
|
|
31
|
+
## Authentication
|
|
32
|
+
|
|
33
|
+
Every component that fetches data needs an **embed authorization** token. This is a short-lived, scoped token, not your org API credentials. It follows a two-tier model:
|
|
34
|
+
|
|
35
|
+
1. **Server-side**: your backend uses your org API key/token (environment variables, never shipped to the client) to call the Luzmo SDK and generate an embed authorization object.
|
|
36
|
+
2. **Client-side**: your frontend fetches that object from your backend and reads the `authKey` / `authToken` fields (or `id` / `token` if you return the raw Luzmo authorization object). These are passed to every component.
|
|
37
|
+
|
|
38
|
+
Set `auth-key` and `auth-token` consistently on every component that accesses data:
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<luzmo-data-field-panel
|
|
42
|
+
auth-key="your-auth-key"
|
|
43
|
+
auth-token="your-auth-token"
|
|
44
|
+
></luzmo-data-field-panel>
|
|
45
|
+
|
|
46
|
+
<luzmo-item-slot-drop-panel
|
|
47
|
+
auth-key="your-auth-key"
|
|
48
|
+
auth-token="your-auth-token"
|
|
49
|
+
item-type="bar-chart"
|
|
50
|
+
>
|
|
51
|
+
</luzmo-item-slot-drop-panel>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
For the full walkthrough (generating embed tokens, token management, and multi-tenancy), see the [authentication patterns guide](https://developer.luzmo.com/guide/ack--patterns).
|
|
55
|
+
|
|
56
|
+
## Available Components
|
|
57
|
+
|
|
58
|
+
Import individual components so bundlers can tree-shake unused code. eg.
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
import '@luzmo/analytics-components-kit/data-field-panel';
|
|
62
|
+
import '@luzmo/analytics-components-kit/item-slot-drop-panel';
|
|
63
|
+
import '@luzmo/analytics-components-kit/item-option-panel';
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Data Fields
|
|
67
|
+
|
|
68
|
+
Present the columns and formulas from a dataset so users can pick the data they want to visualize.
|
|
69
|
+
|
|
70
|
+
| Component | Import | Description | Reference |
|
|
71
|
+
| ---------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
|
|
72
|
+
| Data Field | `@luzmo/analytics-components-kit/data-field` | Single draggable representation of a dataset column or formula | [Docs](https://developer.luzmo.com/guide/ack--components--data-fields--luzmo-data-field) |
|
|
73
|
+
| Data Field Panel | `@luzmo/analytics-components-kit/data-field-panel` | Panel listing all fields for one or more datasets, with search and dataset switching | [Docs](https://developer.luzmo.com/guide/ack--components--data-fields--luzmo-data-field-panel) |
|
|
74
|
+
|
|
75
|
+
### Data Slots
|
|
76
|
+
|
|
77
|
+
Let users assign data fields to chart slots (e.g. `x-axis`, `measure`, `legend`). Drag-and-drop for desktop, dropdown pickers for compact/mobile layouts.
|
|
78
|
+
|
|
79
|
+
| Component | Import | Description | Reference |
|
|
80
|
+
| ---------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
|
|
81
|
+
| Item Slot Drop | `@luzmo/analytics-components-kit/item-slot-drop` | Drop target for a single slot | [Docs](https://developer.luzmo.com/guide/ack--components--data-slots--luzmo-item-slot-drop) |
|
|
82
|
+
| Item Slot Drop Panel | `@luzmo/analytics-components-kit/item-slot-drop-panel` | All slot drop targets for a chart type (drag & drop); auto constraints | [Docs](https://developer.luzmo.com/guide/ack--components--data-slots--luzmo-item-slot-drop-panel) |
|
|
83
|
+
| Item Slot Picker | `@luzmo/analytics-components-kit/item-slot-picker` | Dropdown picker for a single slot | [Docs](https://developer.luzmo.com/guide/ack--components--data-slots--luzmo-item-slot-picker) |
|
|
84
|
+
| Item Slot Picker Panel | `@luzmo/analytics-components-kit/item-slot-picker-panel` | Dropdown pickers for all slots (no drag & drop); optional dataset picker | [Docs](https://developer.luzmo.com/guide/ack--components--data-slots--luzmo-item-slot-picker-panel) |
|
|
85
|
+
|
|
86
|
+
> Prefer the panel components (`data-field-panel`, `item-slot-drop-panel`, `item-slot-picker-panel`) over the individual primitives: panels auto-load slot configs and apply inter-slot constraints for you (e.g. "no multiple measures when the legend is filled"). Use the primitives only when you need custom layout/styling and can handle constraints yourself.
|
|
87
|
+
|
|
88
|
+
### Item Options
|
|
89
|
+
|
|
90
|
+
Let users adjust how a chart looks and behaves (colors, labels, chart mode, legend position, ...).
|
|
91
|
+
|
|
92
|
+
| Component | Import | Description | Reference |
|
|
93
|
+
| ----------------- | --------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
94
|
+
| Item Option | `@luzmo/analytics-components-kit/item-option` | Single option control (expose only what you need) | [Docs](https://developer.luzmo.com/guide/ack--components--item-options--luzmo-item-option) |
|
|
95
|
+
| Item Option Panel | `@luzmo/analytics-components-kit/item-option-panel` | Full grouped options editor for a chart type | [Docs](https://developer.luzmo.com/guide/ack--components--item-options--luzmo-item-option-panel) |
|
|
96
|
+
|
|
97
|
+
Individual option control editors are also exported for fully custom option UIs: `item-option-action-button-group`, `item-option-color-palette-picker`, `item-option-color-picker`, `item-option-color-range`, `item-option-multi-language-field`, `item-option-number-field`, `item-option-picker`, `item-option-position-picker`, `item-option-positions-number-field`, `item-option-radio-button-group`, `item-option-slider`, `item-option-switch`, and `item-option-text-field`.
|
|
98
|
+
|
|
99
|
+
### Filters
|
|
100
|
+
|
|
101
|
+
| Component | Import | Description | Reference |
|
|
102
|
+
| --------- | ----------------------------------------- | --------------------------------------- | --------------------------------------------------------------------------------- |
|
|
103
|
+
| Filters | `@luzmo/analytics-components-kit/filters` | Filter editor with nested AND/OR groups | [Docs](https://developer.luzmo.com/guide/ack--components--filters--luzmo-filters) |
|
|
104
|
+
|
|
105
|
+
`<luzmo-filters>` outputs the standard Luzmo filter format (`ItemFilterGroup[]` from `@luzmo/dashboard-contents-types`), compatible with `luzmo-embed-viz-item`'s `filters` property and `luzmo-item-grid` items' `filters`.
|
|
106
|
+
|
|
107
|
+
### Chart rendering
|
|
108
|
+
|
|
109
|
+
| Component | Import | Description | Reference |
|
|
110
|
+
| --------- | ------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
|
|
111
|
+
| Item Grid | `@luzmo/analytics-components-kit/item-grid` | Interactive grid to arrange, resize, and manage multiple charts (renders internally) | [Docs](https://developer.luzmo.com/guide/ack--components--chart-rendering--luzmo-item-grid) |
|
|
112
|
+
|
|
113
|
+
To render a single chart, use `luzmo-embed-viz-item` from `@luzmo/embed` (not part of this kit); see [Rendering](#rendering).
|
|
114
|
+
|
|
115
|
+
## Usage: Drag & Drop Data Flow
|
|
116
|
+
|
|
117
|
+
1. Add `<luzmo-data-field-panel>` for data fields and `<luzmo-item-slot-drop-panel>` for slots (or `<luzmo-item-slot-picker-panel>` for mobile).
|
|
118
|
+
2. Feed the panel its data via `dataset-ids` (auto-fetch, with `api-url` + auth) or `datasetsDataFields` (your own data).
|
|
119
|
+
3. Set `item-type` (e.g. `bar-chart`) on the slot panel and listen to `luzmo-slots-contents-changed` to capture the slots state.
|
|
120
|
+
4. Treat `slotsContents` as your app state (re-apply it after each change for one-way data flow) and use `{ type, slots, options, filters }` to render the configured chart.
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
import '@luzmo/analytics-components-kit/data-field-panel';
|
|
124
|
+
import '@luzmo/analytics-components-kit/item-slot-drop-panel';
|
|
125
|
+
|
|
126
|
+
const fieldsPanel = document.querySelector('luzmo-data-field-panel')!;
|
|
127
|
+
const dropPanel = document.querySelector('luzmo-item-slot-drop-panel')!;
|
|
128
|
+
|
|
129
|
+
for (const panel of [fieldsPanel, dropPanel]) {
|
|
130
|
+
panel.apiUrl = 'https://api.luzmo.com'; // EU (default); US: https://api.us.luzmo.com; or your VPC host
|
|
131
|
+
panel.authKey = 'your-auth-key';
|
|
132
|
+
panel.authToken = 'your-auth-token';
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
fieldsPanel.datasetIds = ['your-dataset-id'];
|
|
136
|
+
|
|
137
|
+
// Tell the slot panel which chart type to build slots for (bar-chart, line-chart, ...)
|
|
138
|
+
dropPanel.itemType = 'bar-chart';
|
|
139
|
+
|
|
140
|
+
dropPanel.addEventListener('luzmo-slots-contents-changed', (event) => {
|
|
141
|
+
const { slotsContents } = (event as CustomEvent<{ slotsContents: unknown[] }>).detail;
|
|
142
|
+
dropPanel.slotsContents = slotsContents; // re-apply state (one-way data flow)
|
|
143
|
+
|
|
144
|
+
// `slotsContents` is the `slots` half of the chart state; combine it with the
|
|
145
|
+
// chart `type`, `options`, and `filters` you track to render (see Rendering).
|
|
146
|
+
});
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
`item-slot-drop-panel` and `item-slot-picker-panel` emit the same `luzmo-slots-contents-changed` event, so you can share one handler and swap them with CSS media queries for responsive layouts.
|
|
150
|
+
|
|
151
|
+
See the [Data Field Panel reference](https://developer.luzmo.com/guide/ack--components--data-fields--luzmo-data-field-panel) for the full list of properties, events, and examples.
|
|
152
|
+
|
|
153
|
+
## Rendering
|
|
154
|
+
|
|
155
|
+
ACK produces the configuration; `luzmo-embed-viz-item` (from `@luzmo/embed`) renders it. Store the state your ACK components emit and map it onto the viz item:
|
|
156
|
+
|
|
157
|
+
| Viz item input | Controlled by | ACK component(s) |
|
|
158
|
+
| -------------- | ------------------- | -------------------------------------------------------------------------------------- |
|
|
159
|
+
| `type` | which chart to draw | slot/option components via `item-type` |
|
|
160
|
+
| `slots` | data the chart uses | `item-slot-drop`, `item-slot-drop-panel`, `item-slot-picker`, `item-slot-picker-panel` |
|
|
161
|
+
| `options` | look and behavior | `item-option`, `item-option-panel` |
|
|
162
|
+
| `filters` | rows included | `filters` |
|
|
163
|
+
|
|
164
|
+
```typescript
|
|
165
|
+
import '@luzmo/embed';
|
|
166
|
+
|
|
167
|
+
const vizItem = document.querySelector('luzmo-embed-viz-item')!;
|
|
168
|
+
vizItem.appServer = 'https://app.luzmo.com'; // EU (default); US: https://app.us.luzmo.com; or your VPC host
|
|
169
|
+
vizItem.apiHost = 'https://api.luzmo.com'; // EU (default); US: https://api.us.luzmo.com; or your VPC host
|
|
170
|
+
vizItem.authKey = 'your-auth-key';
|
|
171
|
+
vizItem.authToken = 'your-auth-token';
|
|
172
|
+
|
|
173
|
+
// Map your ACK-produced state onto the viz item (your app is the single source of truth)
|
|
174
|
+
vizItem.type = itemType; // chart type
|
|
175
|
+
vizItem.slots = slotsContents; // from luzmo-slots-contents-changed
|
|
176
|
+
vizItem.options = options; // from luzmo-options-changed
|
|
177
|
+
vizItem.filters = filters; // from luzmo-filters-changed
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
See the Flex reference and the "Using luzmo-embed-viz-item with the kit" guide in the [ACK docs](https://developer.luzmo.com/guide/ack--overview) for every viz item property, event, and method.
|
|
181
|
+
|
|
182
|
+
## Item Grid
|
|
183
|
+
|
|
184
|
+
Use `<luzmo-item-grid>` to render and edit a dashboard grid of charts (it embeds charts internally). Each item needs an `id`. Choose one of two modes:
|
|
185
|
+
|
|
186
|
+
- **Uncontrolled**: seed the grid once with the `initial-items` attribute; the grid manages layout state internally.
|
|
187
|
+
- **Controlled**: drive the grid with the `items` property and keep your app state in sync from the events.
|
|
188
|
+
|
|
189
|
+
```ts
|
|
190
|
+
const grid = document.querySelector('luzmo-item-grid')!;
|
|
191
|
+
grid.appServer = 'https://app.luzmo.com'; // EU (default); US: https://app.us.luzmo.com; or your VPC host
|
|
192
|
+
grid.apiHost = 'https://api.luzmo.com'; // EU (default); US: https://api.us.luzmo.com; or your VPC host
|
|
193
|
+
grid.authKey = 'your-auth-key';
|
|
194
|
+
grid.authToken = 'your-auth-token';
|
|
195
|
+
|
|
196
|
+
grid.items = [
|
|
197
|
+
{
|
|
198
|
+
id: 'chart-1',
|
|
199
|
+
type: 'bar-chart',
|
|
200
|
+
position: { col: 0, row: 0, sizeX: 24, sizeY: 20 },
|
|
201
|
+
options: { mode: 'grouped' },
|
|
202
|
+
slots: [
|
|
203
|
+
// Each slot references a chart-type slot by `name` (bar-chart: y-axis, measure, legend).
|
|
204
|
+
// Slot content describes the column/formula, not just its ids.
|
|
205
|
+
{
|
|
206
|
+
name: 'y-axis',
|
|
207
|
+
content: [
|
|
208
|
+
{
|
|
209
|
+
datasetId: 'b35d4aaf-5f36-47a0-94e6-91a989d1635f',
|
|
210
|
+
columnId: 'cb43b7f7-ede1-410f-88c1-5a93e1f9b92c',
|
|
211
|
+
label: { en: 'Campaign' },
|
|
212
|
+
type: 'hierarchy'
|
|
213
|
+
}
|
|
214
|
+
]
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
name: 'measure',
|
|
218
|
+
content: [
|
|
219
|
+
{
|
|
220
|
+
datasetId: 'b35d4aaf-5f36-47a0-94e6-91a989d1635f',
|
|
221
|
+
columnId: '8953c794-830c-46e5-bdb7-eee9b15dd8f5',
|
|
222
|
+
label: { en: 'Opened emails' },
|
|
223
|
+
type: 'hierarchy',
|
|
224
|
+
aggregationFunc: 'count',
|
|
225
|
+
format: ',.0f'
|
|
226
|
+
}
|
|
227
|
+
]
|
|
228
|
+
}
|
|
229
|
+
]
|
|
230
|
+
}
|
|
231
|
+
];
|
|
232
|
+
|
|
233
|
+
// Controlled mode: re-apply the corrected items after each layout change
|
|
234
|
+
grid.addEventListener('luzmo-item-grid-layout-changed', (e) => {
|
|
235
|
+
grid.items = (e as CustomEvent).detail.updatedItems;
|
|
236
|
+
});
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
> Slot content is a full field descriptor (`datasetId`/`columnId` or `formulaId`, plus `label`, `type`, and modifiers like `aggregationFunc`, `level`, or `format`), not just an id pair. The easiest way to produce valid slot content is to let the drag & drop panels emit it; see [Usage: Drag & Drop Data Flow](#usage-drag--drop-data-flow).
|
|
240
|
+
|
|
241
|
+
Key events: `luzmo-item-grid-ready`, `luzmo-item-grid-layout-changed`, `luzmo-item-grid-item-action` (cancelable), and `luzmo-item-grid-item-states-changed`. Imperative helpers (`addGridItem`, `removeGridItem`, `cloneGridItem`, `updateGridItem*`) return the updated `GridItemData[]`.
|
|
242
|
+
|
|
243
|
+
See the [Item Grid reference](https://developer.luzmo.com/guide/ack--components--chart-rendering--luzmo-item-grid) for controlled vs uncontrolled details, all properties, events, methods, and examples.
|
|
244
|
+
|
|
245
|
+
## Utilities
|
|
246
|
+
|
|
247
|
+
Import helpers from `@luzmo/analytics-components-kit/utils` when you need ACK-compatible data or chart-state transformations without mounting a component.
|
|
248
|
+
|
|
249
|
+
```typescript
|
|
250
|
+
import { loadDataFieldsForDatasets, switchItem } from '@luzmo/analytics-components-kit/utils';
|
|
251
|
+
import { itemTypes } from '@luzmo/analytics-components-kit/item-list';
|
|
252
|
+
|
|
253
|
+
// Load datasets with their columns/formulas, converted to component-ready data fields
|
|
254
|
+
const datasets = await loadDataFieldsForDatasets(['dataset-id-1'], {
|
|
255
|
+
// apiUrl: EU (default) https://api.luzmo.com; US: https://api.us.luzmo.com; or your VPC host
|
|
256
|
+
dataBrokerConfig: { apiUrl: 'https://api.luzmo.com', authKey: 'your-auth-key', authToken: 'your-auth-token' }
|
|
257
|
+
});
|
|
258
|
+
|
|
259
|
+
// Switch chart type while preserving compatible slot data
|
|
260
|
+
const newItem = await switchItem({ oldItemType: 'bar-chart', newItemType: 'line-chart', slots, options });
|
|
261
|
+
|
|
262
|
+
// Build a chart picker from the available chart types
|
|
263
|
+
const chartOptions = itemTypes.map((item) => ({ label: item.label, value: item.type }));
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
See the [Utilities reference](https://developer.luzmo.com/guide/ack--utilities) for signatures, return types, behavior notes, and more examples.
|
|
267
|
+
|
|
268
|
+
## Types
|
|
269
|
+
|
|
270
|
+
Import TypeScript types from the dedicated entrypoint:
|
|
271
|
+
|
|
272
|
+
```typescript
|
|
273
|
+
import type {
|
|
274
|
+
DatasetDataField,
|
|
275
|
+
SlotContentsChangedEventDetail,
|
|
276
|
+
SlotConstraintTriggeredEventDetail,
|
|
277
|
+
ItemFilterGroup
|
|
278
|
+
} from '@luzmo/analytics-components-kit/types';
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
Runtime values are exported from the main package (or `@luzmo/analytics-components-kit/utils`), e.g. `import { PeriodOverPeriodCondition } from '@luzmo/analytics-components-kit';`.
|
|
282
|
+
|
|
283
|
+
## Language & Localization
|
|
284
|
+
|
|
285
|
+
Components render labels, placeholders, and data in the language you specify via two properties:
|
|
286
|
+
|
|
287
|
+
- `language`: UI language (button labels, slot names, menu items). Supported: `en`, `nl`, `fr`, `de`, `es`.
|
|
288
|
+
- `content-language`: locale-aware formatting and data labels (number formats, date patterns, column names). Defaults to `language`.
|
|
289
|
+
|
|
290
|
+
```html
|
|
291
|
+
<luzmo-data-field-panel
|
|
292
|
+
language="nl"
|
|
293
|
+
content-language="nl"
|
|
294
|
+
></luzmo-data-field-panel>
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
See the [patterns guide](https://developer.luzmo.com/guide/ack--patterns) for multi-language data labels.
|
|
298
|
+
|
|
299
|
+
## Item Definitions
|
|
300
|
+
|
|
301
|
+
Each chart type has a slots config, options config, and context config. Access them through dedicated subpaths (one named export per item type):
|
|
302
|
+
|
|
303
|
+
```typescript
|
|
304
|
+
import { itemGroups, itemTypes, itemList } from '@luzmo/analytics-components-kit/item-list';
|
|
305
|
+
import { barChartSlotsConfig } from '@luzmo/analytics-components-kit/item-slots-configs';
|
|
306
|
+
import { barChartOptionsConfig } from '@luzmo/analytics-components-kit/item-options-configs';
|
|
307
|
+
import { barChartContextConfig } from '@luzmo/analytics-components-kit/item-context-configs';
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
Use `itemTypes` for the complete, authoritative list of chart types (`bar-chart`, `line-chart`, `donut-chart`, `scatter-plot`, `heat-map`, tables, numbers, and more). See the [Item Definitions guide](https://developer.luzmo.com/guide/ack--item-definitions) for details.
|
|
18
311
|
|
|
19
|
-
|
|
312
|
+
## Theming
|
|
313
|
+
|
|
314
|
+
Components are themed via global CSS custom properties (`--luzmo-*`). Set them on `:root` / `html` for app-wide theming, or scope them to a container. eg.
|
|
315
|
+
|
|
316
|
+
```css
|
|
317
|
+
:root {
|
|
318
|
+
--luzmo-primary: #4434ff;
|
|
319
|
+
--luzmo-background-color: #ffffff;
|
|
320
|
+
--luzmo-font-color: #333;
|
|
321
|
+
}
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
Each component also exposes `--luzmo-{component}-*` variables for fine-grained overrides (only override variables prefixed with `--luzmo-`):
|
|
325
|
+
|
|
326
|
+
```css
|
|
327
|
+
luzmo-item-slot-drop {
|
|
328
|
+
--luzmo-item-slot-drop-height: 3rem;
|
|
329
|
+
--luzmo-item-slot-drop-border-radius: 8px;
|
|
330
|
+
}
|
|
331
|
+
```
|
|
20
332
|
|
|
21
333
|
## Browser Support
|
|
22
334
|
|
|
23
|
-
|
|
24
|
-
- Last 2 versions of Firefox
|
|
25
|
-
- Last 2 versions of Safari
|
|
26
|
-
- Last 2 versions of Edge
|
|
335
|
+
Last 2 versions of Chrome, Firefox, Safari, and Edge.
|
|
27
336
|
|
|
28
337
|
## License
|
|
29
338
|
|
|
@@ -19,10 +19,10 @@ import type { AiPromptAgent, AiPromptItemTask, AiPromptScreenMode, DashboardStat
|
|
|
19
19
|
* See {@link AiChatSession} / createAiChatSession for callbacks and external fetchStreaming.
|
|
20
20
|
* @fires {CustomEvent<AiChatStepEvent>} luzmo-step - Fired for every incremental, kit-assembled event during a streamed response (decision, text, progress, dashboard-title/layout/item, chart, interrupt, plus forward-by-default unrecognized chunks). Use `isRecognizedStep` to narrow.
|
|
21
21
|
* @fires {CustomEvent<AiChatCompleteEvent>} luzmo-complete - Fired exactly once per response with the authoritative final result (dashboard/chart/name) or an `error`.
|
|
22
|
-
* @fires luzmo-message-sent - Fired when a user sends a message
|
|
23
|
-
* @fires luzmo-datasets-changed - Fired when the selected datasets change
|
|
24
|
-
* @fires luzmo-conversation-id-changed - Fired when the conversation ID is updated from the API
|
|
25
|
-
* @fires luzmo-stop - Fired when an in-flight prompt is stopped
|
|
22
|
+
* @fires {CustomEvent<AiChatMessageSentEventDetail>} luzmo-message-sent - Fired when a user sends a message
|
|
23
|
+
* @fires {CustomEvent<AiChatDatasetsChangedEventDetail>} luzmo-datasets-changed - Fired when the selected datasets change
|
|
24
|
+
* @fires {CustomEvent<AiChatConversationIdChangedEventDetail>} luzmo-conversation-id-changed - Fired when the conversation ID is updated from the API
|
|
25
|
+
* @fires {CustomEvent<void>} luzmo-stop - Fired when an in-flight prompt is stopped
|
|
26
26
|
*
|
|
27
27
|
* @property {string} --luzmo-ai-chat-background - Background of the chat container
|
|
28
28
|
* @property {string} --luzmo-ai-chat-border-radius - Border radius of the chat container
|
|
@@ -69,6 +69,10 @@ export declare class LuzmoAiChat extends LuzmoElement {
|
|
|
69
69
|
* When true, disables the entire chat interface
|
|
70
70
|
*/
|
|
71
71
|
disabled: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* When true, shows a stop control on the prompt input while a response is generating
|
|
74
|
+
*/
|
|
75
|
+
stoppable: boolean;
|
|
72
76
|
/**
|
|
73
77
|
* When true, shows context menu (3 dots) on assistant messages
|
|
74
78
|
*/
|
|
@@ -5,7 +5,7 @@ import type { AiChatEmptyStateSuggestion } from './types';
|
|
|
5
5
|
/**
|
|
6
6
|
* @customElement luzmo-ai-chat-empty-state
|
|
7
7
|
* @summary Empty state for AI chat with title, subtitle, and prompt suggestions.
|
|
8
|
-
* @fires luzmo-suggestion-selected - Fired when the user selects a suggestion chip
|
|
8
|
+
* @fires {CustomEvent<AiChatEmptyStateSuggestionSelectedDetail>} luzmo-suggestion-selected - Fired when the user selects a suggestion chip
|
|
9
9
|
*
|
|
10
10
|
* @property {string} --luzmo-ai-chat-empty-state-header-actions-gap - Gap between the title and the actions block
|
|
11
11
|
* @property {string} --luzmo-ai-chat-empty-state-actions-gap - Gap between the actions label and suggestion chips
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
18
18
|
* SOFTWARE.
|
|
19
19
|
* */
|
|
20
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ai-chat-
|
|
20
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ai-chat-8O_eA0_D.cjs");exports.AiChatSession=e.i,exports.AiChatSessionController=e.r,exports.LuzmoAiChat=e.n,exports.LuzmoAiChatEmptyState=e.T,exports.buildAiPromptDeleteRequest=e._,exports.buildAiPromptProperties=e.v,exports.buildAiPromptRequest=e.y,exports.buildAnalystAiPromptProperties=e.b,exports.buildDashboardAiPromptProperties=e.x,exports.buildItemAiPromptProperties=e.S,exports.chartToItemAsset=e.C,exports.createAiChatSession=e.a,exports.createInitialProgress=e.f,exports.createInitialStreamState=e.o,exports.createStreamHandler=e.s,exports.extractChartFromChunk=e.u,exports.extractDashboardFromChunk=e.d,exports.fetchStreamingResponse=e.m,exports.getAgentStreamDefinition=e.c,exports.getAiPromptUrl=e.w,exports.hasProgressChunk=e.p,exports.isRecognizedStep=e.t,exports.parseStreamLine=e.h,exports.processStreamChunk=e.l,exports.readNdjsonStream=e.g;
|
|
@@ -4,7 +4,7 @@ declare global {
|
|
|
4
4
|
'luzmo-ai-chat': LuzmoAiChat;
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
|
-
export type { ProgressTreeNode } from '../../types/ai-chat.types';
|
|
7
|
+
export type { ProgressTreeNode, AiChatMessageSentEventDetail, AiChatDatasetsChangedEventDetail, AiChatConversationIdChangedEventDetail } from '../../types/ai-chat.types';
|
|
8
8
|
export { isRecognizedStep } from './ai-chat-events';
|
|
9
9
|
export type { AiChatCompleteEvent, AiChatRecognizedStepType, AiChatStepBase, AiChatStepEvent, RecognizedStepEvent, UnknownStepEvent } from './ai-chat-events';
|
|
10
10
|
export { AiChatSession, AiChatSessionController, createAiChatSession } from './session';
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 45%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
|
|
25
25
|
}
|
|
26
26
|
})();
|
|
27
|
-
import { C as e, S as t, T as n, _ as r, a as i, b as a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, w as S, x as C, y as w } from "../ai-chat-
|
|
27
|
+
import { C as e, S as t, T as n, _ as r, a as i, b as a, c as o, d as s, f as c, g as l, h as u, i as d, l as f, m as p, n as m, o as h, p as g, r as _, s as v, t as y, u as b, v as x, w as S, x as C, y as w } from "../ai-chat-BYlVFmdP.js";
|
|
28
28
|
export { d as AiChatSession, _ as AiChatSessionController, m as LuzmoAiChat, n as LuzmoAiChatEmptyState, r as buildAiPromptDeleteRequest, x as buildAiPromptProperties, w as buildAiPromptRequest, a as buildAnalystAiPromptProperties, C as buildDashboardAiPromptProperties, t as buildItemAiPromptProperties, e as chartToItemAsset, i as createAiChatSession, c as createInitialProgress, h as createInitialStreamState, v as createStreamHandler, b as extractChartFromChunk, s as extractDashboardFromChunk, p as fetchStreamingResponse, o as getAgentStreamDefinition, S as getAiPromptUrl, g as hasProgressChunk, y as isRecognizedStep, u as parseStreamLine, f as processStreamChunk, l as readNdjsonStream };
|