@quicdata/analytics 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicdata/analytics",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/widgets/number-kpi.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 import type { WidgetDefinitionSubset } from '../core/fetch-data.js';
 import type { DashboardContainer } from '../dashboard/dashboard-container.js';
+import '../filters/index.js';
 /**
  * Number KPI widget. Displays one or more large formatted numbers with labels.
  * Data shape from backend transformNumber(): { chartType: 'Number', values, labels, options }.
@@ -21,10 +22,14 @@ export declare class NumberKpiWidget extends LitElement {
     private _loading;
     private _error;
     private _dashboardParams;
+    private _widgetFilters;
+    private _widgetFilterParams;
+    private _hideFilter;
     private _viewportVisible;
     private _definitionTitle;
     private _loadGeneration;
     private _hasLoadedOnce;
+    private _ignoreNextFilterChange;
     private _dashboardEl;
     private _viewportUnobserve;
     private _loadDataInFlight;
@@ -45,6 +50,7 @@ export declare class NumberKpiWidget extends LitElement {
     private _defer;
     private _loadData;
     private _onRefresh;
+    private _onWidgetFilterChange;
     /** Format a number: apply decimal places, optionally shorten (1234 → 1.2K). */
     private _formatValue;
     render(): import("lit-html").TemplateResult<1>;

package/widgets/number-kpi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-kpi.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/number-kpi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAA0B,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAM5F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAO9E;;;GAGG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAsMpB;IAEkC,KAAK,EAAE,MAAM,CAAC;IACqB,iBAAiB,EAAE,OAAO,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACtD,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,IAAI,EAAE,OAAO,CAAC;IACe,cAAc,EAAE,MAAM,CAAC;IACrD,iBAAiB,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAE1F,QAAyB,QAAQ,CAA6B;IAC9D,QAAyB,QAAQ,CAAU;IAC3C,QAAyB,MAAM,CAAgB;IAC/C,QAAyB,gBAAgB,CAA4C;IACrF,QAAyB,gBAAgB,CAAU;IACnD,QAAyB,gBAAgB,CAAS;IAElD,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,YAAY,CAAmC;IACvD,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,kBAAkB,CAAS;;IAsBnC,OAAO,CAAC,6BAA6B,CAInC;IAEF,OAAO,CAAC,wBAAwB,CAG9B;IAEO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA2B5C,YAAY,IAAI,IAAI;IAkB7B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,MAAM;YAQA,SAAS;IA+DvB,OAAO,CAAC,UAAU;IAKlB,+EAA+E;IAC/E,OAAO,CAAC,YAAY;IAsBX,MAAM;CAqFhB"}
+{"version":3,"file":"number-kpi.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/number-kpi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAA0B,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAM5F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAM9E,OAAO,qBAAqB,CAAC;AAE7B;;;GAGG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BA2MpB;IAEkC,KAAK,EAAE,MAAM,CAAC;IACqB,iBAAiB,EAAE,OAAO,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACtD,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,IAAI,EAAE,OAAO,CAAC;IACe,cAAc,EAAE,MAAM,CAAC;IACrD,iBAAiB,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAE1F,QAAyB,QAAQ,CAA6B;IAC9D,QAAyB,QAAQ,CAAU;IAC3C,QAAyB,MAAM,CAAgB;IAC/C,QAAyB,gBAAgB,CAA4C;IACrF,QAAyB,cAAc,CAAqB;IAC5D,QAAyB,mBAAmB,CAA4C;IACxF,QAAyB,WAAW,CAAU;IAC9C,QAAyB,gBAAgB,CAAU;IACnD,QAAyB,gBAAgB,CAAS;IAElD,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,YAAY,CAAmC;IACvD,OAAO,CAAC,kBAAkB,CAA6B;IACvD,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,kBAAkB,CAAS;;IAyBnC,OAAO,CAAC,6BAA6B,CAInC;IAEF,OAAO,CAAC,wBAAwB,CAG9B;IAEO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuC5C,YAAY,IAAI,IAAI;IAkB7B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,mBAAmB;IAyB3B,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,MAAM;YAQA,SAAS;IA6EvB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,qBAAqB;IAI7B,+EAA+E;IAC/E,OAAO,CAAC,YAAY;IAsBX,MAAM;CAmGhB"}

package/widgets/number-kpi.js

@@ -4,6 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { buildWidgetDataUrl, fetchWidgetData, fetchWidgetDefinition, } from '../core/fetch-data.js';
 import { EVENT_DASHBOARD_FILTER_CHANGE, EVENT_DASHBOARD_REFRESH, } from '../dashboard/index.js';
 import { observeViewport } from '../core/viewport-observer.js';
+import '../filters/index.js';
 /**
  * Number KPI widget. Displays one or more large formatted numbers with labels.
  * Data shape from backend transformNumber(): { chartType: 'Number', values, labels, options }.
@@ -24,6 +25,11 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
       display: flex;
       flex-direction: column;
       min-height: 0;
+      --analytics-widget-toolbar-top: 2.5rem;
+    }
+    .widget-wrap:hover analytics-widget-toolbar {
+      opacity: 1;
+      pointer-events: auto;
     }
 
     .widget-header {
@@ -212,6 +218,7 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
         super();
         this._loadGeneration = 0;
         this._hasLoadedOnce = false;
+        this._ignoreNextFilterChange = false;
         this._dashboardEl = null;
         this._viewportUnobserve = null;
         this._loadDataInFlight = false;
@@ -241,6 +248,9 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
         this._loading = false;
         this._error = null;
         this._dashboardParams = {};
+        this._widgetFilters = [];
+        this._widgetFilterParams = {};
+        this._hideFilter = false;
         this._viewportVisible = true;
         this._definitionTitle = '';
     }
@@ -261,11 +271,23 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
         }
         if (changed.has('widgetId') || changed.has('apiUrl')) {
             this._definitionTitle = '';
+            this._widgetFilters = [];
+            this._widgetFilterParams = {};
+            this._ignoreNextFilterChange = true;
+        }
+        const onlyFilterState = (changed.has('_widgetFilterParams') || changed.has('_widgetFilters')) &&
+            !changed.has('dataUrl') &&
+            !changed.has('dataParams') &&
+            !changed.has('widgetId') &&
+            !changed.has('apiUrl');
+        if (onlyFilterState && this._ignoreNextFilterChange) {
+            this._ignoreNextFilterChange = false;
         }
-        if (changed.has('dataUrl') ||
+        else if (changed.has('dataUrl') ||
             changed.has('dataParams') ||
             changed.has('widgetId') ||
-            changed.has('apiUrl')) {
+            changed.has('apiUrl') ||
+            changed.has('_widgetFilterParams')) {
             if (this._getEffectiveDataUrl() && !this._loadDataScheduled) {
                 this._loadDataScheduled = true;
                 queueMicrotask(() => {
@@ -321,7 +343,26 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
         return this.dataUrl;
     }
     _getEffectiveParams() {
-        const out = { ...(this.dataParams ?? {}) };
+        let widgetFilterParams = {};
+        if (this._hideFilter) {
+            for (const f of this._widgetFilters) {
+                if (f.default_value !== undefined && f.default_value !== null) {
+                    widgetFilterParams[f.param_name] = f.default_value;
+                }
+            }
+        }
+        else if (this._widgetFilters.length > 0) {
+            for (const f of this._widgetFilters) {
+                const setByUser = f.param_name in this._widgetFilterParams;
+                widgetFilterParams[f.param_name] = setByUser
+                    ? (this._widgetFilterParams[f.param_name] ?? '')
+                    : (f.default_value ?? '');
+            }
+        }
+        else {
+            widgetFilterParams = { ...this._widgetFilterParams };
+        }
+        const out = { ...widgetFilterParams, ...(this.dataParams ?? {}) };
         if (Object.keys(this._dashboardParams).length > 0) {
             out.dashboard_params = this._dashboardParams;
         }
@@ -358,17 +399,27 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
         try {
             const useWidgetApi = Boolean(this.apiUrl && this.widgetId);
             let params;
-            if (useWidgetApi && !this._definitionTitle) {
+            if (useWidgetApi && this._widgetFilters.length === 0) {
                 const def = this.initialDefinition ?? (await fetchWidgetDefinition(this.apiUrl, this.widgetId));
                 this._definitionTitle = def.title ?? '';
-                params = { ...(this.dataParams ?? {}) };
+                this._widgetFilters = def.filters ?? [];
+                this._hideFilter = def.hide_filter ?? false;
+                const defaultParams = {};
+                for (const f of (def.filters ?? [])) {
+                    if (f.default_value !== undefined && f.default_value !== null) {
+                        defaultParams[f.param_name] = f.default_value;
+                    }
+                }
+                this._widgetFilterParams = { ...defaultParams, ...this._widgetFilterParams };
+                this._ignoreNextFilterChange = true;
+                params = { ...defaultParams, ...(this.dataParams ?? {}) };
+                if (Object.keys(this._dashboardParams).length > 0) {
+                    params.dashboard_params = this._dashboardParams;
+                }
             }
             else {
                 params = this._getEffectiveParams();
             }
-            if (Object.keys(this._dashboardParams).length > 0) {
-                params.dashboard_params = this._dashboardParams;
-            }
             const res = await fetchWidgetData(dataUrl, params);
             if (gen !== this._loadGeneration)
                 return;
@@ -376,11 +427,17 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
             const kpiData = wd && wd.chartType === 'Number'
                 ? { chartType: 'Number', values: wd.values ?? [], labels: wd.labels ?? [], options: wd.options, shorten_numbers: wd.shorten_numbers }
                 : null;
+            const filters = res.filters;
+            const hideFilter = res.hide_filter;
             this._defer(() => {
                 if (gen !== this._loadGeneration)
                     return;
                 this._loadDataInFlight = false;
                 this._kpiData = kpiData;
+                if (filters?.length)
+                    this._widgetFilters = filters;
+                if (hideFilter !== undefined)
+                    this._hideFilter = hideFilter;
                 this._hasLoadedOnce = true;
                 this._loading = false;
                 if (this._loadDataPendingRefresh) {
@@ -410,6 +467,9 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
             return;
         this._loadData();
     }
+    _onWidgetFilterChange(e) {
+        this._widgetFilterParams = { ...(e.detail?.params ?? {}) };
+    }
     /** Format a number: apply decimal places, optionally shorten (1234 → 1.2K). */
     _formatValue(value, decimal, shorten) {
         const dec = decimal != null && decimal !== '' ? parseInt(decimal, 10) : undefined;
@@ -436,6 +496,8 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
     }
     render() {
         const canRefresh = Boolean(this._getEffectiveDataUrl()) && !this.hideRefreshButton;
+        const hasWidgetFilters = this._widgetFilters.length > 0 && !this._hideFilter;
+        const widgetActiveCount = Object.keys(this._widgetFilterParams).filter((k) => this._widgetFilterParams[k] !== '' && this._widgetFilterParams[k] != null).length;
         const showSkeleton = this._loading && !this._hasLoadedOnce;
         const showSpinnerOverlay = this._loading && this._hasLoadedOnce;
         const showTitlePlaceholder = !this._effectiveTitle && !this.hideRefreshButton;
@@ -512,6 +574,16 @@ let NumberKpiWidget = class NumberKpiWidget extends LitElement {
               <div class="loading-spinner" aria-hidden="true"></div>
             </div>`
             : nothing}
+        ${hasWidgetFilters
+            ? html `
+              <analytics-widget-toolbar
+                .filters=${this._widgetFilters}
+                .values=${this._widgetFilterParams}
+                .activeCount=${widgetActiveCount}
+                @analytics-filter-change=${this._onWidgetFilterChange}
+              ></analytics-widget-toolbar>
+            `
+            : ''}
       </div>
     `;
     }
@@ -558,6 +630,15 @@ __decorate([
 __decorate([
     state()
 ], NumberKpiWidget.prototype, "_dashboardParams", void 0);
+__decorate([
+    state()
+], NumberKpiWidget.prototype, "_widgetFilters", void 0);
+__decorate([
+    state()
+], NumberKpiWidget.prototype, "_widgetFilterParams", void 0);
+__decorate([
+    state()
+], NumberKpiWidget.prototype, "_hideFilter", void 0);
 __decorate([
     state()
 ], NumberKpiWidget.prototype, "_viewportVisible", void 0);