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

package/components/interactive-viz-item/index.js

@@ -0,0 +1,28 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+// Auto-generated initialization code
+(function() {
+	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+		let e = document.createElement("style");
+		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 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--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);
+	}
+})();
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../interactive-viz-item-CKRpHIwI.js";
+export { t as DEFAULT_RANKING_NUMBER, l as LuzmoInteractiveVizItem, i as RankingDirection, u as SortBy, n as SortDirection, a as applyChartMutation, s as calculateChartActions, r as convertSlotsToArray, e as getChartDatasetIds, o as mergeThemeIntoChart, c as normalizeChartConfig };

package/components/interactive-viz-item/interactive-viz-item.d.ts

@@ -0,0 +1,96 @@
+import '@luzmo/embed';
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/action-group';
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/number-field';
+import '@luzmo/lucero/overlay';
+import '@luzmo/lucero/picker';
+import '@luzmo/lucero/popover';
+import '@luzmo/lucero/tabs';
+import { CSSResultArray, TemplateResult } from 'lit';
+import '../filters';
+import '../item-option-panel';
+import '../item-slot-picker-panel';
+import { LuzmoElement } from '../../utils/base';
+import { type ChartFeedback, type FlexChartConfig } from './types';
+declare const LuzmoInteractiveVizItem_base: (new (...args: any[]) => {
+    language: string;
+}) & typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+/**
+ * @customElement luzmo-interactive-viz-item
+ * @description Renders an interactive visualization item: an embedded chart with inline top-N
+ * ranking and display-mode actions, a feedback bar, and an expandable configuration panel (slots,
+ * filters, options). Only accepts chart input; nothing renders without a `chart`. Framework-neutral
+ * so it can be reused anywhere (AI chat answers, dashboards, reports).
+ * @fires {CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>} luzmo-chart-options-changed - Fired when the inline actions (ranking, sort, display mode) change the chart options.
+ * @fires {CustomEvent<InteractiveVizItemChartChangedEventDetail>} luzmo-chart-changed - Fired when the config panel changes slots, filters, or options (full chart).
+ * @fires {CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>} luzmo-feedback-changed - Fired when the user changes the thumbs up/down rating.
+ * @slot chart-actions-extra - Host-injected actions rendered at the end of the inline actions bar (e.g. copy-to-dashboard).
+ * @csspart container - The viz item container.
+ * @csspart chart-container - The embedded chart wrapper.
+ * @csspart config-panel - The expandable configuration panel.
+ */
+export declare class LuzmoInteractiveVizItem extends LuzmoInteractiveVizItem_base {
+    static get styles(): CSSResultArray;
+    /** Loose chart config (type, options, slots, filters); slots may use the keyed-object form. */
+    chart: FlexChartConfig | null;
+    /** Current feedback (drives the thumbs up/down selection). */
+    feedback: ChartFeedback | null;
+    /** Message id from the backend. Feedback is only shown when set. */
+    messageId: string;
+    /** Auth key for the embedded chart and config panels. */
+    authKey: string;
+    /** Auth token for the embedded chart and config panels. */
+    authToken: string;
+    /**
+     * API URL for the embedded chart and config panels.
+     * @default https://api.luzmo.com
+     */
+    apiUrl: string;
+    /**
+     * App server URL for the embedded chart (assets, thumbnails).
+     * @default https://app.luzmo.com
+     */
+    appServer: string;
+    /** Content language for chart data and dataset metadata. Defaults to the UI `language`. */
+    contentLanguage: string;
+    /** When present, hides the inline chart actions (ranking, display mode). */
+    hideActions: boolean;
+    /** When present, hides the feedback bar. */
+    hideFeedback: boolean;
+    /** When present, hides the config-panel toggle and the panel itself. */
+    hideConfigPanel: boolean;
+    private _configPanelOpen;
+    private readonly _rankingTriggerId;
+    private get _effectiveContentLanguage();
+    private _dispatch;
+    private get _chartActions();
+    private get _rating();
+    private _toggleConfigPanel;
+    private _emitOptions;
+    private _emitChart;
+    private _handleDropdownChange;
+    private _currentRanking;
+    private _currentSort;
+    private _emitRankAndSort;
+    private _renderOptionDropdown;
+    private _renderRankingPicker;
+    private _handleDirectionChange;
+    private _handleNumberChange;
+    private _handleSortByChange;
+    private _handleSortDirectionChange;
+    private _renderActions;
+    private _renderChart;
+    private _renderFeedback;
+    private _toggleRating;
+    private _renderConfigPanel;
+    private _handleSlotsChanged;
+    private _handleFiltersChanged;
+    private _handleOptionsChanged;
+    protected render(): TemplateResult;
+}
+export {};

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

@@ -0,0 +1,117 @@
+/**
+ * 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 declare enum RankingDirection {
+    Top = "top",
+    Bottom = "bottom"
+}
+export declare enum SortDirection {
+    Asc = "asc",
+    Desc = "desc"
+}
+export declare enum SortBy {
+    Measure = "measure",
+    Category = "category"
+}
+export interface Ranking {
+    active: boolean;
+    number: number;
+    direction: RankingDirection;
+}
+export interface Sort {
+    direction: SortDirection;
+    by: SortBy;
+}
+export declare 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;
+}