@quicdata/analytics 0.0.3 → 0.0.5

package/dashboard/dashboard-container.js

@@ -0,0 +1,315 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { GridStack } from 'gridstack';
+import '../filters/index.js';
+import 'gridstack/dist/gridstack.min.css';
+/** Normalized layout: children always array (possibly empty), slots always array. */
+function getLayoutChildren(layout) {
+    return layout.children ?? [];
+}
+function getLayoutSlots(layout) {
+    return layout.slots ?? [];
+}
+export const EVENT_DASHBOARD_FILTER_CHANGE = 'analytics-dashboard-filter-change';
+export const EVENT_DASHBOARD_REFRESH = 'analytics-dashboard-refresh';
+export const EVENT_DASHBOARD_LAYOUT_CHANGE = 'analytics-dashboard-layout-change';
+/**
+ * Dashboard container: renders a grid of analytics widgets (Lit web components).
+ * Shows filter button and filter bar when layout.filters is set; dispatches filter-change and refresh
+ * When layout.children is set, uses GridStack (gridster); otherwise legacy slots + CSS grid.
+ * Passes apiUrl + widgetId to widgets; dispatches layout-change when grid layout changes.
+ */
+let DashboardContainer = class DashboardContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.layout = { slots: [] };
+        this._dashboardParams = {};
+        this._filterBarOpen = false;
+        this._refreshIntervalId = null;
+        this._gridStack = null;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .header {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.75rem;
+      margin-bottom: 0.75rem;
+    }
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .grid {
+      display: grid;
+      width: 100%;
+      height: 100%;
+      min-height: 200px;
+      box-sizing: border-box;
+    }
+    .grid-stack {
+      min-height: 200px;
+      width: 100%;
+    }
+    .grid-stack-item-content {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden;
+    }
+    .slot {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden;
+    }
+    .slot-title {
+      font-size: 0.875rem;
+      font-weight: 600;
+      padding: 0.25rem 0.5rem;
+      flex-shrink: 0;
+    }
+    .slot-chart {
+      flex: 1;
+      min-height: 0;
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._startRefreshInterval();
+    }
+    disconnectedCallback() {
+        this._destroyGridStack();
+        this._stopRefreshInterval();
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        const children = getLayoutChildren(this.layout);
+        if (children.length > 0) {
+            this._initGridStack();
+        }
+    }
+    updated(changed) {
+        if (changed.has('layout')) {
+            this._stopRefreshInterval();
+            this._startRefreshInterval();
+            const children = getLayoutChildren(this.layout);
+            if (children.length > 0 && this._gridStack) {
+                this._loadGridStackChildren();
+            }
+        }
+    }
+    _destroyGridStack() {
+        if (this._gridStack?.el) {
+            this._gridStack.destroy(false);
+            this._gridStack = null;
+        }
+    }
+    _initGridStack() {
+        const el = this.renderRoot.querySelector('.grid-stack');
+        if (!el || this._gridStack)
+            return;
+        const column = this.layout.column ?? 12;
+        this._gridStack = GridStack.init({ column, float: false }, el);
+        const saveCB = (node, w) => {
+            w.type = node.type;
+        };
+        this._gridStack.on('change', () => {
+            const saved = this._gridStack?.save(false, false, saveCB);
+            if (saved) {
+                const children = saved.map((s) => ({
+                    widgetId: String(s.id ?? ''),
+                    type: s.type,
+                    x: s.x ?? 0,
+                    y: s.y ?? 0,
+                    w: s.w ?? 1,
+                    h: s.h ?? 1,
+                }));
+                this.dispatchEvent(new CustomEvent(EVENT_DASHBOARD_LAYOUT_CHANGE, {
+                    bubbles: true,
+                    composed: true,
+                    detail: { children },
+                }));
+            }
+        });
+        this._loadGridStackChildren();
+    }
+    _loadGridStackChildren() {
+        const children = getLayoutChildren(this.layout);
+        if (!this._gridStack || children.length === 0)
+            return;
+        const apiUrl = this.layout.apiUrl ?? '';
+        const dashboard = this;
+        const widgets = children.map((c) => ({
+            id: c.widgetId,
+            x: c.x,
+            y: c.y,
+            w: c.w,
+            h: c.h,
+            type: c.type,
+            lazy: c.lazy,
+            prefetch_margin: c.prefetch_margin,
+        }));
+        const addRemove = (parent, w, add, grid) => {
+            if (!add || grid)
+                return undefined;
+            const widget = w;
+            const item = document.createElement('div');
+            item.className = 'grid-stack-item';
+            const content = document.createElement('div');
+            content.className = 'grid-stack-item-content';
+            const type = (widget.type || 'bar').toLowerCase();
+            const tag = type === 'line' ? 'analytics-line-chart' : type === 'pie' ? 'analytics-pie-chart' : type === 'table' ? 'analytics-table' : 'analytics-bar-chart';
+            const widgetEl = document.createElement(tag);
+            widgetEl.setAttribute('widget-id', String(widget.id ?? ''));
+            widgetEl.setAttribute('api-url', apiUrl);
+            if (widget.lazy) {
+                widgetEl.setAttribute('lazy', '');
+                const margin = widget.prefetch_margin;
+                if (margin)
+                    widgetEl.setAttribute('prefetch-margin', margin);
+            }
+            widgetEl.dashboard = dashboard;
+            content.appendChild(widgetEl);
+            item.appendChild(content);
+            return item;
+        };
+        this._gridStack.load(widgets, addRemove);
+    }
+    _startRefreshInterval() {
+        const rate = this.layout.refresh_rate ?? 0;
+        if (rate > 0) {
+            this._refreshIntervalId = setInterval(() => {
+                this.dispatchEvent(new CustomEvent(EVENT_DASHBOARD_REFRESH, {
+                    bubbles: true,
+                    composed: true,
+                }));
+            }, rate * 1000);
+        }
+    }
+    _stopRefreshInterval() {
+        if (this._refreshIntervalId != null) {
+            clearInterval(this._refreshIntervalId);
+            this._refreshIntervalId = null;
+        }
+    }
+    /** Current dashboard-level filter params (for widgets to merge). Returns {} when layout.hide_filter is true. */
+    getDashboardParams() {
+        if (this.layout?.hide_filter)
+            return {};
+        return { ...this._dashboardParams };
+    }
+    _onFilterChange(e) {
+        this._dashboardParams = { ...(e.detail?.params ?? {}) };
+        this.dispatchEvent(new CustomEvent(EVENT_DASHBOARD_FILTER_CHANGE, {
+            bubbles: true,
+            composed: true,
+            detail: { params: this._dashboardParams },
+        }));
+    }
+    _onFilterClose() {
+        this._filterBarOpen = false;
+    }
+    _onFilterToggle() {
+        this._filterBarOpen = !this._filterBarOpen;
+    }
+    render() {
+        const children = getLayoutChildren(this.layout);
+        const slots = getLayoutSlots(this.layout);
+        const useGridster = children.length > 0;
+        const { columns = '1fr 1fr', rows = 'auto', gap = '1rem', filters = [], hide_filter = false } = this.layout;
+        const gridStyle = `grid-template-columns: ${columns}; grid-template-rows: ${rows}; gap: ${gap};`;
+        const hasFilters = filters.length > 0 && !hide_filter;
+        const activeCount = Object.keys(this._dashboardParams).filter((k) => this._dashboardParams[k] !== '' && this._dashboardParams[k] != null).length;
+        return html `
+      ${hasFilters
+            ? html `
+            <div class="header">
+              <div class="header-row">
+                <analytics-filter-button
+                  .activeCount=${activeCount}
+                  .open=${this._filterBarOpen}
+                  @analytics-filter-toggle=${this._onFilterToggle}
+                ></analytics-filter-button>
+              </div>
+              ${this._filterBarOpen
+                ? html `
+                    <analytics-filter-bar
+                      .filters=${filters}
+                      .values=${this._dashboardParams}
+                      .showClose=${true}
+                      @analytics-filter-change=${this._onFilterChange}
+                      @analytics-filter-close=${this._onFilterClose}
+                    ></analytics-filter-bar>
+                  `
+                : ''}
+            </div>
+          `
+            : ''}
+      ${useGridster
+            ? html `<div class="grid-stack"></div>`
+            : html `
+            <div class="grid" style="${gridStyle}">
+              ${slots.map((slot) => html `
+                  <div class="slot" style="${slot.gridArea ? `grid-area: ${slot.gridArea};` : ''}">
+                    ${slot.title ? html `<div class="slot-title">${slot.title}</div>` : ''}
+                    <div class="slot-chart">
+                      ${this._renderSlot(slot)}
+                    </div>
+                  </div>
+                `)}
+            </div>
+          `}
+    `;
+    }
+    _renderSlot(slot) {
+        const dataUrl = slot.dataUrl ?? '';
+        const params = slot.dataParams ?? {};
+        const type = (slot.type || 'bar').toLowerCase();
+        const tag = type === 'line'
+            ? 'analytics-line-chart'
+            : type === 'pie'
+                ? 'analytics-pie-chart'
+                : type === 'table'
+                    ? 'analytics-table'
+                    : type === 'analytics-line-chart'
+                        ? 'analytics-line-chart'
+                        : type === 'analytics-pie-chart'
+                            ? 'analytics-pie-chart'
+                            : type === 'analytics-table'
+                                ? 'analytics-table'
+                                : 'analytics-bar-chart';
+        const lazy = slot.lazy ?? false;
+        const prefetchMargin = slot.prefetch_margin ?? '200px';
+        switch (tag) {
+            case 'analytics-line-chart':
+                return html `<analytics-line-chart data-url="${dataUrl}" .dataParams=${params} .dashboard=${this} .lazy=${lazy} prefetch-margin="${prefetchMargin}"></analytics-line-chart>`;
+            case 'analytics-pie-chart':
+                return html `<analytics-pie-chart data-url="${dataUrl}" .dataParams=${params} .dashboard=${this} .lazy=${lazy} prefetch-margin="${prefetchMargin}"></analytics-pie-chart>`;
+            case 'analytics-table':
+                return html `<analytics-table data-url="${dataUrl}" .dataParams=${params} .dashboard=${this} .lazy=${lazy} prefetch-margin="${prefetchMargin}"></analytics-table>`;
+            default:
+                return html `<analytics-bar-chart data-url="${dataUrl}" .dataParams=${params} .dashboard=${this} .lazy=${lazy} prefetch-margin="${prefetchMargin}"></analytics-bar-chart>`;
+        }
+    }
+};
+__decorate([
+    property({ type: Object })
+], DashboardContainer.prototype, "layout", void 0);
+__decorate([
+    state()
+], DashboardContainer.prototype, "_dashboardParams", void 0);
+__decorate([
+    state()
+], DashboardContainer.prototype, "_filterBarOpen", void 0);
+DashboardContainer = __decorate([
+    customElement('analytics-dashboard')
+], DashboardContainer);
+export { DashboardContainer };

package/dashboard/index.d.ts

@@ -0,0 +1,4 @@
+export { DashboardContainer, EVENT_DASHBOARD_FILTER_CHANGE, EVENT_DASHBOARD_REFRESH, EVENT_DASHBOARD_LAYOUT_CHANGE, } from './dashboard-container.js';
+export type { DashboardLayout, DashboardSlot, GridsterGridItem } from './dashboard-container.js';
+import './dashboard-container.js';
+//# sourceMappingURL=index.d.ts.map

package/dashboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/dashboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,6BAA6B,EAC7B,uBAAuB,EACvB,6BAA6B,GAC9B,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjG,OAAO,0BAA0B,CAAC"}

package/dashboard/index.js

@@ -0,0 +1,2 @@
+export { DashboardContainer, EVENT_DASHBOARD_FILTER_CHANGE, EVENT_DASHBOARD_REFRESH, EVENT_DASHBOARD_LAYOUT_CHANGE, } from './dashboard-container.js';
+import './dashboard-container.js';

package/designer/analytics-designer.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+import type { DashboardLayout } from '../dashboard/dashboard-container.js';
+export interface DesignerWidgetOption {
+    type: string;
+    label: string;
+}
+/**
+ * Designer: drag-drop widget types onto a grid, set data-url per slot, emit layout.
+ * Use with analytics-dashboard to render the saved layout.
+ */
+export declare class AnalyticsDesigner extends LitElement {
+    static styles: import("lit").CSSResult;
+    widgetOptions: DesignerWidgetOption[];
+    /** Base URL for widget data (e.g. /api/analytics). */
+    baseUrl: string;
+    private _slots;
+    private _dragOverId;
+    private _draggingType;
+    private _idCounter;
+    render(): import("lit-html").TemplateResult<1>;
+    private _typeLabel;
+    private _renderSlotPreview;
+    private _onPaletteDragStart;
+    private _onGridDragOver;
+    private _onGridDragLeave;
+    private _onGridDrop;
+    private _onSlotDrop;
+    private _addSlot;
+    private _removeSlot;
+    private _onSlotUrlChange;
+    private _emitLayout;
+    /** Set layout from outside (e.g. loaded from backend). */
+    setLayout(layout: DashboardLayout): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'analytics-designer': AnalyticsDesigner;
+    }
+}
+//# sourceMappingURL=analytics-designer.d.ts.map

package/designer/analytics-designer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-designer.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/designer/analytics-designer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,qCAAqC,CAAC;AAE1F,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAQD;;;GAGG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAsGpB;IAEyB,aAAa,EAAE,oBAAoB,EAAE,CAA0B;IAE1F,sDAAsD;IAC1B,OAAO,SAAM;IAEhC,OAAO,CAAC,MAAM,CAA0C;IACxD,OAAO,CAAC,WAAW,CAAuB;IACnD,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,UAAU,CAAK;IAEd,MAAM;IAsDf,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,WAAW;IAUnB,0DAA0D;IAC1D,SAAS,CAAC,MAAM,EAAE,eAAe;CAOlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF"}

package/designer/analytics-designer.js

@@ -0,0 +1,267 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+const DEFAULT_WIDGET_OPTIONS = [
+    { type: 'bar', label: 'Bar chart' },
+    { type: 'line', label: 'Line chart' },
+    { type: 'pie', label: 'Pie chart' },
+];
+/**
+ * Designer: drag-drop widget types onto a grid, set data-url per slot, emit layout.
+ * Use with analytics-dashboard to render the saved layout.
+ */
+let AnalyticsDesigner = class AnalyticsDesigner extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.widgetOptions = DEFAULT_WIDGET_OPTIONS;
+        /** Base URL for widget data (e.g. /api/analytics). */
+        this.baseUrl = '';
+        this._slots = [];
+        this._dragOverId = null;
+        this._draggingType = null;
+        this._idCounter = 0;
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      min-height: 400px;
+    }
+    .palette {
+      width: 180px;
+      flex-shrink: 0;
+      padding: 0.5rem;
+      border-right: 1px solid #ddd;
+      background: #f8f9fa;
+    }
+    .palette-title {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      color: #666;
+      margin-bottom: 0.5rem;
+    }
+    .palette-item {
+      padding: 0.5rem 0.75rem;
+      margin-bottom: 0.25rem;
+      background: #fff;
+      border: 1px solid #dee2e6;
+      border-radius: 4px;
+      cursor: grab;
+      font-size: 0.875rem;
+      user-select: none;
+    }
+    .palette-item:hover {
+      border-color: #0d6efd;
+      background: #f0f7ff;
+    }
+    .palette-item:active {
+      cursor: grabbing;
+    }
+    .canvas {
+      flex: 1;
+      padding: 1rem;
+      overflow: auto;
+      background: #fff;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-auto-rows: 160px;
+      gap: 1rem;
+      min-height: 300px;
+    }
+    .slot {
+      border: 2px dashed #dee2e6;
+      border-radius: 8px;
+      padding: 0.5rem;
+      display: flex;
+      flex-direction: column;
+      background: #fafafa;
+    }
+    .slot.drag-over {
+      border-color: #0d6efd;
+      background: #f0f7ff;
+    }
+    .slot-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.25rem;
+      font-size: 0.75rem;
+    }
+    .slot-type {
+      font-weight: 600;
+      color: #333;
+    }
+    .slot-url {
+      flex: 1;
+      min-width: 0;
+      padding: 0.2rem 0.4rem;
+      font-size: 0.7rem;
+      border: 1px solid #dee2e6;
+      border-radius: 4px;
+    }
+    .slot-preview {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #999;
+      font-size: 0.75rem;
+    }
+    .slot-remove {
+      padding: 0.1rem 0.4rem;
+      font-size: 0.7rem;
+      cursor: pointer;
+      color: #dc3545;
+      border: none;
+      background: none;
+    }
+    .slot-remove:hover {
+      text-decoration: underline;
+    }
+  `; }
+    render() {
+        return html `
+      <div class="palette">
+        <div class="palette-title">Widgets</div>
+        ${this.widgetOptions.map((w) => html `
+            <div
+              class="palette-item"
+              draggable="true"
+              @dragstart=${(e) => this._onPaletteDragStart(e, w.type)}
+              @dragend=${() => (this._draggingType = null)}
+            >
+              ${w.label}
+            </div>
+          `)}
+      </div>
+      <div class="canvas">
+        <div
+          class="grid"
+          @dragover=${this._onGridDragOver}
+          @dragleave=${this._onGridDragLeave}
+          @drop=${this._onGridDrop}
+        >
+          ${this._slots.map((slot) => html `
+              <div
+                class="slot ${this._dragOverId === slot.id ? 'drag-over' : ''}"
+                data-slot-id="${slot.id}"
+                @dragover=${(e) => e.preventDefault()}
+                @drop=${(e) => this._onSlotDrop(e, slot.id)}
+              >
+                <div class="slot-header">
+                  <span class="slot-type">${this._typeLabel(slot.type)}</span>
+                  <input
+                    class="slot-url"
+                    type="text"
+                    placeholder="Data URL"
+                    .value=${slot.dataUrl ?? ''}
+                    @input=${(e) => this._onSlotUrlChange(slot.id, e.target.value)}
+                  />
+                  <button type="button" class="slot-remove" @click=${() => this._removeSlot(slot.id)}>Remove</button>
+                </div>
+                <div class="slot-preview">
+                  ${this._renderSlotPreview(slot)}
+                </div>
+              </div>
+            `)}
+        </div>
+      </div>
+    `;
+    }
+    _typeLabel(type) {
+        return this.widgetOptions.find((w) => w.type === type)?.label ?? type;
+    }
+    _renderSlotPreview(slot) {
+        const dataUrl = slot.dataUrl ?? '';
+        const params = slot.dataParams ?? {};
+        const type = (slot.type || 'bar').toLowerCase();
+        if (type === 'line') {
+            return html `<analytics-line-chart data-url="${dataUrl}" .dataParams=${params} style="width:100%;height:100%;min-height:80px"></analytics-line-chart>`;
+        }
+        if (type === 'pie') {
+            return html `<analytics-pie-chart data-url="${dataUrl}" .dataParams=${params} style="width:100%;height:100%;min-height:80px"></analytics-pie-chart>`;
+        }
+        return html `<analytics-bar-chart data-url="${dataUrl}" .dataParams=${params} style="width:100%;height:100%;min-height:80px"></analytics-bar-chart>`;
+    }
+    _onPaletteDragStart(e, type) {
+        this._draggingType = type;
+        e.dataTransfer?.setData('text/plain', type);
+        e.dataTransfer.effectAllowed = 'copy';
+    }
+    _onGridDragOver(e) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+    }
+    _onGridDragLeave() {
+        this._dragOverId = null;
+    }
+    _onGridDrop(e) {
+        e.preventDefault();
+        this._dragOverId = null;
+        const type = e.dataTransfer?.getData('text/plain') || this._draggingType;
+        if (type) {
+            this._addSlot(type);
+        }
+    }
+    _onSlotDrop(e, _slotId) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._dragOverId = null;
+        const type = e.dataTransfer?.getData('text/plain') || this._draggingType;
+        if (type) {
+            this._addSlot(type);
+        }
+    }
+    _addSlot(type) {
+        const id = `slot-${++this._idCounter}`;
+        const dataUrl = this.baseUrl ? `${this.baseUrl.replace(/\/$/, '')}/widgets/0/data` : '';
+        this._slots = [...this._slots, { id, type, dataUrl, dataParams: {} }];
+        this._emitLayout();
+    }
+    _removeSlot(id) {
+        this._slots = this._slots.filter((s) => s.id !== id);
+        this._emitLayout();
+    }
+    _onSlotUrlChange(id, value) {
+        this._slots = this._slots.map((s) => (s.id === id ? { ...s, dataUrl: value } : s));
+        this._emitLayout();
+    }
+    _emitLayout() {
+        const layout = {
+            columns: 'repeat(4, 1fr)',
+            rows: 'auto',
+            gap: '1rem',
+            slots: this._slots.map(({ id: _id, ...slot }) => slot),
+        };
+        this.dispatchEvent(new CustomEvent('layout-change', { detail: layout, bubbles: true, composed: true }));
+    }
+    /** Set layout from outside (e.g. loaded from backend). */
+    setLayout(layout) {
+        this._slots = (layout.slots ?? []).map((s, i) => ({
+            ...s,
+            id: `slot-${++this._idCounter}-${i}`,
+        }));
+        this._emitLayout();
+    }
+};
+__decorate([
+    property({ type: Array })
+], AnalyticsDesigner.prototype, "widgetOptions", void 0);
+__decorate([
+    property({ type: String })
+], AnalyticsDesigner.prototype, "baseUrl", void 0);
+__decorate([
+    state()
+], AnalyticsDesigner.prototype, "_slots", void 0);
+__decorate([
+    state()
+], AnalyticsDesigner.prototype, "_dragOverId", void 0);
+AnalyticsDesigner = __decorate([
+    customElement('analytics-designer')
+], AnalyticsDesigner);
+export { AnalyticsDesigner };

package/designer/index.d.ts

@@ -0,0 +1,5 @@
+export { AnalyticsDesigner } from './analytics-designer.js';
+export type { DesignerWidgetOption } from './analytics-designer.js';
+import '../widgets/index.js';
+import './analytics-designer.js';
+//# sourceMappingURL=index.d.ts.map

package/designer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/designer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC"}

package/designer/index.js

@@ -0,0 +1,3 @@
+export { AnalyticsDesigner } from './analytics-designer.js';
+import '../widgets/index.js';
+import './analytics-designer.js';

package/filters/filter-bar.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+import type { FilterDefinition } from '../core/types.js';
+export declare const EVENT_FILTER_CHANGE = "analytics-filter-change";
+export declare const EVENT_FILTER_CLOSE = "analytics-filter-close";
+/**
+ * Filter bar: renders a row of filter controls from filter definitions.
+ * Emits analytics-filter-change when any value changes; analytics-filter-close when close is clicked.
+ */
+export declare class AnalyticsFilterBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Filter definitions (param_name, type, options). */
+    filters: FilterDefinition[];
+    /** Current filter values keyed by param_name. */
+    values: Record<string, string | number | boolean>;
+    /** Whether to show the close button. */
+    showClose: boolean;
+    /** Build params to send: use default_value only when param was never set (undefined). User input or Clear sets explicit value (including ''), so we do not use default_value then. */
+    private _effectiveParams;
+    private _emitChange;
+    private _onInput;
+    private _onClear;
+    private _onClose;
+    private _label;
+    /** Display value: show default_value only when param was never set (rerender). After user input or Clear, show the actual value (including ''). */
+    private _effectiveValue;
+    private _renderControl;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'analytics-filter-bar': AnalyticsFilterBar;
+    }
+}
+//# sourceMappingURL=filter-bar.d.ts.map