@luzmo/analytics-components-kit 1.0.4-beta.2 → 1.0.4-beta.3

package/custom-elements.json

@@ -10911,6 +10911,493 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/interactive-viz-item/interactive-viz-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LuzmoInteractiveVizItem",
+          "cssParts": [
+            {
+              "description": "The viz item container.",
+              "name": "container"
+            },
+            {
+              "description": "The embedded chart wrapper.",
+              "name": "chart-container"
+            },
+            {
+              "description": "The expandable configuration panel.",
+              "name": "config-panel"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Host-injected actions rendered at the end of the inline actions bar (e.g. copy-to-dashboard).",
+              "name": "chart-actions-extra"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>"
+              },
+              "description": "Fired when the inline actions (ranking, sort, display mode) change the chart options.",
+              "name": "luzmo-chart-options-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<InteractiveVizItemChartChangedEventDetail>"
+              },
+              "description": "Fired when the config panel changes slots, filters, or options (full chart).",
+              "name": "luzmo-chart-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>"
+              },
+              "description": "Fired when the user changes the thumbs up/down rating.",
+              "name": "luzmo-feedback-changed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "FlexChartConfig | null"
+              },
+              "default": "null",
+              "description": "Loose chart config (type, options, slots, filters); slots may use the keyed-object form.",
+              "fieldName": "chart"
+            },
+            {
+              "name": "feedback",
+              "type": {
+                "text": "ChartFeedback | null"
+              },
+              "default": "null",
+              "description": "Current feedback (drives the thumbs up/down selection).",
+              "fieldName": "feedback"
+            },
+            {
+              "name": "message-id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Message id from the backend. Feedback is only shown when set.",
+              "fieldName": "messageId"
+            },
+            {
+              "name": "auth-key",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Auth key for the embedded chart and config panels.",
+              "fieldName": "authKey"
+            },
+            {
+              "name": "auth-token",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Auth token for the embedded chart and config panels.",
+              "fieldName": "authToken"
+            },
+            {
+              "name": "api-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "'https://api.luzmo.com'",
+              "description": "API URL for the embedded chart and config panels.",
+              "fieldName": "apiUrl"
+            },
+            {
+              "name": "app-server",
+              "type": {
+                "text": "string"
+              },
+              "default": "'https://app.luzmo.com'",
+              "description": "App server URL for the embedded chart (assets, thumbnails).",
+              "fieldName": "appServer"
+            },
+            {
+              "name": "content-language",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Content language for chart data and dataset metadata. Defaults to the UI `language`.",
+              "fieldName": "contentLanguage"
+            },
+            {
+              "name": "hide-actions",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When present, hides the inline chart actions (ranking, display mode).",
+              "fieldName": "hideActions"
+            },
+            {
+              "name": "hide-feedback",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When present, hides the feedback bar.",
+              "fieldName": "hideFeedback"
+            },
+            {
+              "name": "hide-config-panel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When present, hides the config-panel toggle and the panel itself.",
+              "fieldName": "hideConfigPanel"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'s' | 'm' | 'l' | 'xl'"
+              },
+              "default": "m",
+              "description": "The size of the element",
+              "fieldName": "size"
+            },
+            {
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language for UI labels.\nSupported values: 'en', 'nl', 'fr', 'de', 'es'",
+              "fieldName": "language",
+              "inheritedFrom": {
+                "name": "LocalizedMixin",
+                "module": "src/utils/base/localized-mixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "LocalizedMixin",
+              "module": "/src/utils/base"
+            }
+          ],
+          "superclass": {
+            "name": "LuzmoElement",
+            "module": "/src/utils/base"
+          },
+          "tagName": "luzmo-interactive-viz-item",
+          "customElement": true,
+          "members": [
+            {
+              "kind": "field",
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'en'",
+              "description": "The language for UI labels.\nSupported values: 'en', 'nl', 'fr', 'de', 'es'",
+              "attribute": "language",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LocalizedMixin",
+                "module": "src/utils/base/localized-mixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncLocale",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "LocalizedMixin",
+                "module": "src/utils/base/localized-mixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shadowRoot",
+              "type": {
+                "text": "ShadowRoot"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_dirParent",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl'"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isLTR",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasVisibleFocusInTree",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "LuzmoMixin",
+                "module": "src/utils/base/base.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LuzmoInteractiveVizItem",
+          "declaration": {
+            "name": "LuzmoInteractiveVizItem",
+            "module": "src/components/interactive-viz-item/interactive-viz-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/interactive-viz-item/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_RANKING_NUMBER",
+          "type": {
+            "text": "number"
+          },
+          "default": "5"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DEFAULT_RANKING_NUMBER",
+          "declaration": {
+            "name": "DEFAULT_RANKING_NUMBER",
+            "module": "src/components/interactive-viz-item/types.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/interactive-viz-item/helpers/chart-helpers.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "convertSlotsToArray",
+          "return": {
+            "type": {
+              "text": "SlotConfig[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "slots",
+              "type": {
+                "text": "SlotConfig[] | Record<string, unknown>"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "getChartDatasetIds",
+          "return": {
+            "type": {
+              "text": "string[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "slots",
+              "type": {
+                "text": "SlotConfig[]"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "normalizeChartConfig",
+          "return": {
+            "type": {
+              "text": "NormalizedChartConfig"
+            }
+          },
+          "parameters": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "FlexChartConfig"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "mergeThemeIntoChart",
+          "return": {
+            "type": {
+              "text": "NormalizedChartConfig"
+            }
+          },
+          "parameters": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "NormalizedChartConfig"
+              }
+            },
+            {
+              "name": "theme",
+              "type": {
+                "text": "Record<string, unknown>"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "calculateChartActions",
+          "return": {
+            "type": {
+              "text": "ChartActionDescriptor[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "NormalizedChartConfig"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "applyChartMutation",
+          "return": {
+            "type": {
+              "text": "NormalizedChartConfig"
+            }
+          },
+          "parameters": [
+            {
+              "name": "chart",
+              "type": {
+                "text": "NormalizedChartConfig"
+              }
+            },
+            {
+              "name": "mutation",
+              "type": {
+                "text": "ChartMutationRequest"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "convertSlotsToArray",
+          "declaration": {
+            "name": "convertSlotsToArray",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getChartDatasetIds",
+          "declaration": {
+            "name": "getChartDatasetIds",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "normalizeChartConfig",
+          "declaration": {
+            "name": "normalizeChartConfig",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mergeThemeIntoChart",
+          "declaration": {
+            "name": "mergeThemeIntoChart",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "calculateChartActions",
+          "declaration": {
+            "name": "calculateChartActions",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "applyChartMutation",
+          "declaration": {
+            "name": "applyChartMutation",
+            "module": "src/components/interactive-viz-item/helpers/chart-helpers.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/item-grid/actions.ts",

package/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/ai-chat';
+export * from './components/interactive-viz-item';
 export * from './components/ai-interaction-textarea';
 export * from './components/dataset-icon';
 export * from './components/dataset-selector-list';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.4-beta.2",
+  "version": "1.0.4-beta.3",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",
@@ -141,6 +141,11 @@
       "import": "./components/formula-field/index.js",
       "require": "./components/formula-field/index.cjs"
     },
+    "./interactive-viz-item": {
+      "types": "./components/interactive-viz-item/index.d.ts",
+      "import": "./components/interactive-viz-item/index.js",
+      "require": "./components/interactive-viz-item/index.cjs"
+    },
     "./item-grid": {
       "types": "./components/item-grid/index.d.ts",
       "import": "./components/item-grid/index.js",
@@ -323,6 +328,7 @@
     "@lit/localize": "^0.12.2",
     "@lit/react": "^1.0.6",
     "@lit/task": "^1.0.1",
+    "@luzmo/embed": "^6.13.0",
     "@luzmo/icons": "^1.0.1-alpha.41",
     "@luzmo/lucero": "^1.0.3-alpha.5",
     "colorjs.io": "^0.5.2",
@@ -347,7 +353,6 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.43.1",
     "@luzmo/dashboard-contents-types": "1.0.31",
-    "@luzmo/embed": "^6.13.0",
     "@tanstack/query-core": "^5.90.5",
     "dompurify": "^3.3.0",
     "gridstack": "^12.3.3",

package/react/README.md

@@ -55,6 +55,7 @@ function App() {
 - `LuzmoFormula` → `<luzmo-formula>`
 - `LuzmoFormulaEditor` → `<luzmo-formula-editor>`
 - `LuzmoFormulaField` → `<luzmo-formula-field>`
+- `LuzmoInteractiveVizItem` → `<luzmo-interactive-viz-item>`
 - `LuzmoItemGrid` → `<luzmo-item-grid>`
 - `LuzmoItemOption` → `<luzmo-item-option>`
 - `LuzmoItemOptionActionButtonGroup` → `<luzmo-item-option-action-button-group>`

package/react/components/interactive-viz-item/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/interactive-viz-item/types.ts

@@ -0,0 +1,122 @@
+/**
+ * A single field descriptor inside a chart slot. Deliberately loose because the
+ * chart config is produced by the AI stream: it may carry either the short
+ * (`set`/`column`/`formula`) or the long (`datasetId`/`columnId`/`formulaId`)
+ * key form, which `normalizeChartConfig` reconciles.
+ */
+export interface SlotContent {
+  columnId?: string;
+  datasetId?: string;
+  column?: string;
+  set?: string;
+  formulaId?: string;
+  formula?: string;
+  label?: Record<string, string> | string | null;
+  level?: number;
+  format?: string;
+  subtype?: string | null;
+  lowestLevel?: number;
+  [key: string]: unknown;
+}
+
+export interface SlotConfig {
+  name: string;
+  content: SlotContent[];
+}
+
+export interface ChartOptions {
+  theme?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+/**
+ * Loose chart shape as streamed by the AI. `slots` may be an array or the legacy
+ * keyed-object form; `normalizeChartConfig` produces the strict array shape.
+ */
+export interface FlexChartConfig {
+  type: string;
+  options: ChartOptions;
+  slots: SlotConfig[] | Record<string, unknown>;
+  filters?: unknown[];
+}
+
+export interface NormalizedChartConfig {
+  type: string;
+  options: ChartOptions;
+  slots: SlotConfig[];
+  filters?: unknown[];
+}
+
+export type ChartActionType = 'optionDropdown' | 'rankingPicker';
+
+export interface ChartOption {
+  key: string;
+  label: string;
+}
+
+export enum RankingDirection {
+  Top = 'top',
+  Bottom = 'bottom'
+}
+
+export enum SortDirection {
+  Asc = 'asc',
+  Desc = 'desc'
+}
+
+export enum SortBy {
+  Measure = 'measure',
+  Category = 'category'
+}
+
+export interface Ranking {
+  active: boolean;
+  number: number;
+  direction: RankingDirection;
+}
+
+export interface Sort {
+  direction: SortDirection;
+  by: SortBy;
+}
+
+export const DEFAULT_RANKING_NUMBER = 5;
+
+export interface ChartActionDescriptor {
+  type: ChartActionType;
+  mutationType: string;
+  values?: ChartOption[];
+  currentValue?: string;
+  ranking?: Ranking;
+  sort?: Sort;
+  importance: number;
+}
+
+export type ChartMutationRequest =
+  | { type: 'slots'; slotsContents: SlotConfig[] }
+  | { type: 'options'; options: ChartOptions }
+  | { type: 'filters'; filters: unknown[] }
+  | { type: 'chartAction'; actionType: string; key: string }
+  | { type: 'rankAndSort'; ranking: Ranking; sort: Sort }
+  | { type: 'fullReplace'; chart: NormalizedChartConfig };
+
+export type ChartFeedbackRating = -1 | 0 | 1;
+
+export interface ChartFeedback {
+  id?: string;
+  rating: ChartFeedbackRating;
+  comment?: string;
+}
+
+export interface InteractiveVizItemChartOptionsChangedEventDetail {
+  options: ChartOptions;
+}
+
+export interface InteractiveVizItemChartChangedEventDetail {
+  chart: FlexChartConfig;
+}
+
+export interface InteractiveVizItemFeedbackChangedEventDetail {
+  rating: ChartFeedbackRating;
+  comment?: string;
+}