@quicdata/analytics 0.0.9 → 0.0.11

package/package.json

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

package/widgets/analytics-widget.d.ts

@@ -4,6 +4,7 @@ import './bar-chart.js';
 import './line-chart.js';
 import './pie-chart.js';
 import './table.js';
+import './number-kpi.js';
 /**
  * Generic analytics widget: pass widgetId + apiUrl (and optional config);
  * fetches the widget definition and renders the appropriate chart/table internally.

package/widgets/analytics-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analytics-widget.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/analytics-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,YAAY,CAAC;AAapB;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAmCpB;IAEF,sGAAsG;IAC1C,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtF,2FAA2F;IACjC,MAAM,EAAE,MAAM,CAAC;IAEzE,gGAAgG;IAC5D,KAAK,EAAE,MAAM,CAAC;IAElD,gEAAgE;IAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAE1F,2EAA2E;IACvC,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAEzE,4EAA4E;IACvC,IAAI,EAAE,OAAO,CAAC;IAEnD,yEAAyE;IACP,cAAc,EAAE,MAAM,CAAC;IAEzF,QAAyB,UAAU,CAAuB;IAC1D,QAAyB,WAAW,CAAgC;IACpE,QAAyB,QAAQ,CAAU;IAC3C,QAAyB,MAAM,CAAgB;;IAiBtC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;YAWvC,eAAe;IAqB7B,OAAO,KAAK,SAAS,GAGpB;IAED,OAAO,CAAC,kBAAkB;IA8DjB,MAAM;CAgBhB"}
+{"version":3,"file":"analytics-widget.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/analytics-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,YAAY,CAAC;AACpB,OAAO,iBAAiB,CAAC;AAazB;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAmCpB;IAEF,sGAAsG;IAC1C,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtF,2FAA2F;IACjC,MAAM,EAAE,MAAM,CAAC;IAEzE,gGAAgG;IAC5D,KAAK,EAAE,MAAM,CAAC;IAElD,gEAAgE;IAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAE1F,2EAA2E;IACvC,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAEzE,4EAA4E;IACvC,IAAI,EAAE,OAAO,CAAC;IAEnD,yEAAyE;IACP,cAAc,EAAE,MAAM,CAAC;IAEzF,QAAyB,UAAU,CAAuB;IAC1D,QAAyB,WAAW,CAAgC;IACpE,QAAyB,QAAQ,CAAU;IAC3C,QAAyB,MAAM,CAAgB;;IAiBtC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;YAWvC,eAAe;IAqB7B,OAAO,KAAK,SAAS,GAGpB;IAED,OAAO,CAAC,kBAAkB;IAyEjB,MAAM;CAgBhB"}

package/widgets/analytics-widget.js

@@ -7,6 +7,7 @@ import './bar-chart.js';
 import './line-chart.js';
 import './pie-chart.js';
 import './table.js';
+import './number-kpi.js';
 /** Map API chart_type to inner widget type. */
 const CHART_TYPE_TO_TAG = {
     Bar: 'analytics-bar-chart',
@@ -14,7 +15,7 @@ const CHART_TYPE_TO_TAG = {
     Line: 'analytics-line-chart',
     Pie: 'analytics-pie-chart',
     Donut: 'analytics-pie-chart',
-    Number: 'analytics-table', // KPI: fallback to table for now
+    Number: 'analytics-number-kpi',
     Table: 'analytics-table',
 };
 /**
@@ -159,6 +160,17 @@ let AnalyticsWidget = class AnalyticsWidget extends LitElement {
           ?lazy=${common.lazy}
           prefetch-margin=${common.prefetchMargin}
         ></analytics-pie-chart>`;
+            case 'analytics-number-kpi':
+                return html `<analytics-number-kpi
+          widget-id=${common.widgetId}
+          api-url=${common.apiUrl}
+          .title=${common.title}
+          .dataParams=${common.dataParams}
+          .dashboard=${common.dashboard}
+          .initialDefinition=${common.initialDefinition}
+          ?lazy=${common.lazy}
+          prefetch-margin=${common.prefetchMargin}
+        ></analytics-number-kpi>`;
             case 'analytics-table':
                 return html `<analytics-table
           widget-id=${common.widgetId}

package/widgets/index.d.ts

@@ -3,12 +3,14 @@ export { BarChartWidget } from './bar-chart.js';
 export { LineChartWidget } from './line-chart.js';
 export { PieChartWidget } from './pie-chart.js';
 export { TableWidget } from './table.js';
+export { NumberKpiWidget } from './number-kpi.js';
 export { AnalyticsWidget } from './analytics-widget.js';
 export { AnalyticsReport } from './analytics-report.js';
 import './bar-chart.js';
 import './line-chart.js';
 import './pie-chart.js';
 import './table.js';
+import './number-kpi.js';
 import './analytics-widget.js';
 import './analytics-report.js';
 //# sourceMappingURL=index.d.ts.map

package/widgets/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,YAAY,CAAC;AACpB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,YAAY,CAAC;AACpB,OAAO,iBAAiB,CAAC;AACzB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC"}

package/widgets/index.js

@@ -3,6 +3,7 @@ export { BarChartWidget } from './bar-chart.js';
 export { LineChartWidget } from './line-chart.js';
 export { PieChartWidget } from './pie-chart.js';
 export { TableWidget } from './table.js';
+export { NumberKpiWidget } from './number-kpi.js';
 export { AnalyticsWidget } from './analytics-widget.js';
 export { AnalyticsReport } from './analytics-report.js';
 // Register custom elements so they work when imported (e.g. in designer/dashboard)
@@ -10,5 +11,6 @@ import './bar-chart.js';
 import './line-chart.js';
 import './pie-chart.js';
 import './table.js';
+import './number-kpi.js';
 import './analytics-widget.js';
 import './analytics-report.js';

package/widgets/number-kpi.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+import type { WidgetDefinitionSubset } from '../core/fetch-data.js';
+import type { DashboardContainer } from '../dashboard/dashboard-container.js';
+/**
+ * Number KPI widget. Displays one or more large formatted numbers with labels.
+ * Data shape from backend transformNumber(): { chartType: 'Number', values, labels, options }.
+ */
+export declare class NumberKpiWidget extends LitElement {
+    static styles: import("lit").CSSResult;
+    title: string;
+    hideRefreshButton: boolean;
+    dataUrl: string;
+    widgetId: string | number;
+    apiUrl: string;
+    dataParams: Record<string, string | number | boolean>;
+    dashboard: DashboardContainer | null;
+    lazy: boolean;
+    prefetchMargin: string;
+    initialDefinition: WidgetDefinitionSubset | undefined;
+    private _kpiData;
+    private _loading;
+    private _error;
+    private _dashboardParams;
+    private _viewportVisible;
+    private _definitionTitle;
+    private _loadGeneration;
+    private _hasLoadedOnce;
+    private _dashboardEl;
+    private _viewportUnobserve;
+    private _loadDataInFlight;
+    private _loadDataPendingRefresh;
+    private _loadDataScheduled;
+    constructor();
+    private _boundOnDashboardFilterChange;
+    private _boundOnDashboardRefresh;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    firstUpdated(): void;
+    private _attachDashboard;
+    private _detachDashboard;
+    private _getEffectiveDataUrl;
+    private _getEffectiveParams;
+    private get _effectiveTitle();
+    private _defer;
+    private _loadData;
+    private _onRefresh;
+    /** Format a number: apply decimal places, shorten_numbers (1234 → 1.2K). */
+    private _formatValue;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=number-kpi.d.ts.map

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

@@ -0,0 +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,4EAA4E;IAC5E,OAAO,CAAC,YAAY;IAqBX,MAAM;CAqFhB"}

package/widgets/number-kpi.js

@@ -0,0 +1,569 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+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';
+/**
+ * Number KPI widget. Displays one or more large formatted numbers with labels.
+ * Data shape from backend transformNumber(): { chartType: 'Number', values, labels, options }.
+ */
+let NumberKpiWidget = class NumberKpiWidget extends LitElement {
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+    }
+
+    .widget-wrap {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    .widget-header {
+      flex-shrink: 0;
+      padding: 0.5rem 0.75rem 0.25rem 0.75rem;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+      background: var(--analytics-widget-header-bg, #fff);
+      color: var(--analytics-widget-header-color, #374151);
+    }
+
+    .widget-title {
+      margin: 0;
+      font-size: 0.9375rem;
+      font-weight: 600;
+      color: var(--analytics-widget-header-color, #374151);
+      line-height: 1.3;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .skeleton-title {
+      height: 1rem;
+      width: 8rem;
+      max-width: 60%;
+      border-radius: 4px;
+      background: linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 40%, #f3f4f6 50%, #e5e7eb 60%, #e5e7eb 100%);
+      background-size: 200% 100%;
+      animation: kpi-shimmer 1.2s ease-in-out infinite;
+    }
+
+    .btn-refresh {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: var(--analytics-widget-header-color, #6b7280);
+      cursor: pointer;
+      transition: color 0.15s ease, background-color 0.15s ease;
+    }
+    .btn-refresh:hover {
+      color: var(--analytics-widget-header-color, #374151);
+      background: #f3f4f6;
+    }
+    .btn-refresh:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+    .btn-refresh svg {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .kpi-body {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--analytics-kpi-body-padding, 0.75rem);
+      gap: var(--analytics-kpi-gap, 1.5rem);
+      flex-wrap: wrap;
+    }
+
+    .kpi-block {
+      display: flex;
+      flex-direction: column;
+      align-items: var(--analytics-kpi-align, center);
+      gap: var(--analytics-kpi-block-gap, 0.125rem);
+      min-width: 0;
+    }
+
+    .kpi-value {
+      font-size: var(--analytics-kpi-value-size, 1.75rem);
+      font-weight: var(--analytics-kpi-value-weight, 600);
+      color: var(--analytics-kpi-value-color, #1f2937);
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+
+    .kpi-label {
+      font-size: var(--analytics-kpi-label-size, 0.75rem);
+      font-weight: var(--analytics-kpi-label-weight, 400);
+      color: var(--analytics-kpi-label-color, #6b7280);
+      line-height: 1.3;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+
+    .kpi-prefix,
+    .kpi-suffix {
+      font-size: var(--analytics-kpi-affix-size, 1rem);
+      font-weight: var(--analytics-kpi-affix-weight, 400);
+      color: var(--analytics-kpi-affix-color, #6b7280);
+    }
+
+    /* Loading skeleton for KPI */
+    .skeleton-body {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      gap: 1.5rem;
+    }
+    .skeleton-block {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.375rem;
+    }
+    .skeleton-value {
+      width: 4rem;
+      height: 1.75rem;
+      border-radius: 4px;
+      background: linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 40%, #f3f4f6 50%, #e5e7eb 60%, #e5e7eb 100%);
+      background-size: 200% 100%;
+      animation: kpi-shimmer 1.2s ease-in-out infinite;
+    }
+    .skeleton-label {
+      width: 5rem;
+      height: 0.75rem;
+      border-radius: 4px;
+      background: linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 40%, #f3f4f6 50%, #e5e7eb 60%, #e5e7eb 100%);
+      background-size: 200% 100%;
+      animation: kpi-shimmer 1.2s ease-in-out infinite;
+    }
+
+    @keyframes kpi-shimmer {
+      to { background-position: 200% 0; }
+    }
+
+    .error {
+      color: #c00;
+      padding: 0.5rem;
+      font-size: 0.875rem;
+    }
+
+    .empty {
+      padding: 0.5rem;
+      color: #6b7280;
+    }
+
+    .loading-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.8);
+      backdrop-filter: blur(4px);
+      -webkit-backdrop-filter: blur(4px);
+      border-radius: 4px;
+    }
+    .loading-spinner {
+      width: 1.5rem;
+      height: 1.5rem;
+      border: 2px solid #e5e7eb;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: kpi-spin 0.7s linear infinite;
+    }
+    @keyframes kpi-spin {
+      to { transform: rotate(360deg); }
+    }
+  `; }
+    constructor() {
+        super();
+        this._loadGeneration = 0;
+        this._hasLoadedOnce = false;
+        this._dashboardEl = null;
+        this._viewportUnobserve = null;
+        this._loadDataInFlight = false;
+        this._loadDataPendingRefresh = false;
+        this._loadDataScheduled = false;
+        this._boundOnDashboardFilterChange = (e) => {
+            const ce = e;
+            this._dashboardParams = { ...(ce.detail?.params ?? {}) };
+            this._loadData();
+        };
+        this._boundOnDashboardRefresh = () => {
+            if (this.lazy && !this._viewportVisible)
+                return;
+            this._loadData();
+        };
+        this.title = '';
+        this.hideRefreshButton = false;
+        this.dataUrl = '';
+        this.widgetId = '';
+        this.apiUrl = '';
+        this.dataParams = {};
+        this.dashboard = null;
+        this.lazy = false;
+        this.prefetchMargin = '200px';
+        this.initialDefinition = undefined;
+        this._kpiData = null;
+        this._loading = false;
+        this._error = null;
+        this._dashboardParams = {};
+        this._viewportVisible = true;
+        this._definitionTitle = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._attachDashboard();
+    }
+    disconnectedCallback() {
+        this._viewportUnobserve?.();
+        this._viewportUnobserve = null;
+        this._detachDashboard();
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        if (changed.has('dashboard')) {
+            this._detachDashboard();
+            this._attachDashboard();
+        }
+        if (changed.has('widgetId') || changed.has('apiUrl')) {
+            this._definitionTitle = '';
+        }
+        if (changed.has('dataUrl') ||
+            changed.has('dataParams') ||
+            changed.has('widgetId') ||
+            changed.has('apiUrl')) {
+            if (this._getEffectiveDataUrl() && !this._loadDataScheduled) {
+                this._loadDataScheduled = true;
+                queueMicrotask(() => {
+                    this._loadDataScheduled = false;
+                    this._loadData();
+                });
+            }
+        }
+        if (changed.has('lazy')) {
+            this._viewportVisible = !this.lazy;
+        }
+    }
+    firstUpdated() {
+        if (this.lazy) {
+            this._viewportVisible = false;
+            this._viewportUnobserve = observeViewport(this, {
+                rootMargin: this.prefetchMargin || '200px',
+                threshold: 0,
+            }, {
+                onEnter: () => {
+                    this._viewportVisible = true;
+                    if (!this._hasLoadedOnce)
+                        this._loadData();
+                },
+                onLeave: () => {
+                    this._viewportVisible = false;
+                },
+            });
+        }
+    }
+    _attachDashboard() {
+        const d = this.dashboard;
+        if (!d)
+            return;
+        this._dashboardEl = d;
+        this._dashboardParams = typeof d.getDashboardParams === 'function' ? d.getDashboardParams() : {};
+        d.addEventListener(EVENT_DASHBOARD_FILTER_CHANGE, this._boundOnDashboardFilterChange);
+        d.addEventListener(EVENT_DASHBOARD_REFRESH, this._boundOnDashboardRefresh);
+    }
+    _detachDashboard() {
+        const d = this._dashboardEl;
+        if (!d)
+            return;
+        d.removeEventListener(EVENT_DASHBOARD_FILTER_CHANGE, this._boundOnDashboardFilterChange);
+        d.removeEventListener(EVENT_DASHBOARD_REFRESH, this._boundOnDashboardRefresh);
+        this._dashboardEl = null;
+        this._dashboardParams = {};
+    }
+    _getEffectiveDataUrl() {
+        if (this.apiUrl && this.widgetId) {
+            return buildWidgetDataUrl(this.apiUrl, this.widgetId);
+        }
+        return this.dataUrl;
+    }
+    _getEffectiveParams() {
+        const out = { ...(this.dataParams ?? {}) };
+        if (Object.keys(this._dashboardParams).length > 0) {
+            out.dashboard_params = this._dashboardParams;
+        }
+        return out;
+    }
+    get _effectiveTitle() {
+        return (this.title != null && this.title !== '') ? this.title : (this._definitionTitle ?? '');
+    }
+    _defer(fn) {
+        if (typeof requestAnimationFrame !== 'undefined') {
+            requestAnimationFrame(fn);
+        }
+        else {
+            setTimeout(fn, 0);
+        }
+    }
+    async _loadData() {
+        if (this.lazy && !this._viewportVisible)
+            return;
+        const dataUrl = this._getEffectiveDataUrl();
+        if (!dataUrl) {
+            this._error = null;
+            this._loading = false;
+            return;
+        }
+        if (this._loadDataInFlight) {
+            this._loadDataPendingRefresh = true;
+            return;
+        }
+        const gen = ++this._loadGeneration;
+        this._loadDataInFlight = true;
+        this._loading = true;
+        this._error = null;
+        try {
+            const useWidgetApi = Boolean(this.apiUrl && this.widgetId);
+            let params;
+            if (useWidgetApi && !this._definitionTitle) {
+                const def = this.initialDefinition ?? (await fetchWidgetDefinition(this.apiUrl, this.widgetId));
+                this._definitionTitle = def.title ?? '';
+                params = { ...(this.dataParams ?? {}) };
+            }
+            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;
+            const wd = res.widgetData;
+            const kpiData = wd && wd.chartType === 'Number'
+                ? { chartType: 'Number', values: wd.values ?? [], labels: wd.labels ?? [], options: wd.options }
+                : null;
+            this._defer(() => {
+                if (gen !== this._loadGeneration)
+                    return;
+                this._loadDataInFlight = false;
+                this._kpiData = kpiData;
+                this._hasLoadedOnce = true;
+                this._loading = false;
+                if (this._loadDataPendingRefresh) {
+                    this._loadDataPendingRefresh = false;
+                    this._loadData();
+                }
+            });
+        }
+        catch (e) {
+            const errMsg = e instanceof Error ? e.message : String(e);
+            this._defer(() => {
+                if (gen !== this._loadGeneration)
+                    return;
+                this._loadDataInFlight = false;
+                this._error = errMsg;
+                this._kpiData = null;
+                this._loading = false;
+                if (this._loadDataPendingRefresh) {
+                    this._loadDataPendingRefresh = false;
+                    this._loadData();
+                }
+            });
+        }
+    }
+    _onRefresh() {
+        if (this._loading)
+            return;
+        this._loadData();
+    }
+    /** Format a number: apply decimal places, shorten_numbers (1234 → 1.2K). */
+    _formatValue(value, decimal) {
+        const dec = decimal != null && decimal !== '' ? parseInt(decimal, 10) : undefined;
+        const abs = Math.abs(value);
+        // shorten_numbers: from widget config (checked via options or future config)
+        if (abs >= 1_000_000_000) {
+            const v = value / 1_000_000_000;
+            return (dec != null ? v.toFixed(dec) : v.toFixed(1)) + 'B';
+        }
+        if (abs >= 1_000_000) {
+            const v = value / 1_000_000;
+            return (dec != null ? v.toFixed(dec) : v.toFixed(1)) + 'M';
+        }
+        if (abs >= 10_000) {
+            const v = value / 1_000;
+            return (dec != null ? v.toFixed(dec) : v.toFixed(1)) + 'K';
+        }
+        if (dec != null)
+            return value.toFixed(dec);
+        if (Number.isInteger(value))
+            return value.toLocaleString();
+        return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    }
+    render() {
+        const canRefresh = Boolean(this._getEffectiveDataUrl()) && !this.hideRefreshButton;
+        const showSkeleton = this._loading && !this._hasLoadedOnce;
+        const showSpinnerOverlay = this._loading && this._hasLoadedOnce;
+        const showTitlePlaceholder = !this._effectiveTitle && !this.hideRefreshButton;
+        const headerContent = this._effectiveTitle || canRefresh || showTitlePlaceholder
+            ? html `
+            <header class="widget-header">
+              ${this._effectiveTitle
+                ? html `<h2 class="widget-title">${this._effectiveTitle}</h2>`
+                : showTitlePlaceholder
+                    ? html `<div class="skeleton-title" aria-hidden="true"></div>`
+                    : html `<span></span>`}
+              ${canRefresh
+                ? html `
+                    <button
+                      type="button"
+                      class="btn-refresh"
+                      title="Refresh"
+                      aria-label="Refresh data"
+                      ?disabled=${this._loading}
+                      @click=${this._onRefresh}
+                    >
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                        <path d="M3 3v5h5" />
+                        <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+                        <path d="M16 21h5v-5" />
+                      </svg>
+                    </button>
+                  `
+                : ''}
+            </header>
+          `
+            : '';
+        const bodyContent = showSkeleton
+            ? html `
+          <div class="skeleton-body" aria-busy="true" aria-live="polite">
+            <div class="skeleton-block">
+              <div class="skeleton-value"></div>
+              <div class="skeleton-label"></div>
+            </div>
+          </div>
+        `
+            : this._error
+                ? html `<div class="error">${this._error}</div>`
+                : !this._kpiData || this._kpiData.values.length === 0
+                    ? html `<div class="empty">No data</div>`
+                    : html `
+              <div class="kpi-body">
+                ${this._kpiData.values.map((value, i) => {
+                        const label = this._kpiData.labels[i] ?? '';
+                        const opt = this._kpiData.options?.[i];
+                        const prefix = opt?.prefix ?? '';
+                        const suffix = opt?.suffix ?? '';
+                        const formatted = this._formatValue(value, opt?.decimal);
+                        return html `
+                    <div class="kpi-block">
+                      <span class="kpi-value">
+                        ${prefix ? html `<span class="kpi-prefix">${prefix}</span>` : nothing}
+                        ${formatted}
+                        ${suffix ? html `<span class="kpi-suffix">${suffix}</span>` : nothing}
+                      </span>
+                      ${label ? html `<span class="kpi-label">${label}</span>` : nothing}
+                    </div>
+                  `;
+                    })}
+              </div>
+            `;
+        return html `
+      <div class="widget-wrap">
+        ${headerContent}
+        ${bodyContent}
+        ${showSpinnerOverlay
+            ? html `<div class="loading-overlay" aria-busy="true" aria-live="polite">
+              <div class="loading-spinner" aria-hidden="true"></div>
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], NumberKpiWidget.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-refresh-button' })
+], NumberKpiWidget.prototype, "hideRefreshButton", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-url' })
+], NumberKpiWidget.prototype, "dataUrl", void 0);
+__decorate([
+    property({ type: String, attribute: 'widget-id' })
+], NumberKpiWidget.prototype, "widgetId", void 0);
+__decorate([
+    property({ type: String, attribute: 'api-url' })
+], NumberKpiWidget.prototype, "apiUrl", void 0);
+__decorate([
+    property({ type: Object })
+], NumberKpiWidget.prototype, "dataParams", void 0);
+__decorate([
+    property({ type: Object })
+], NumberKpiWidget.prototype, "dashboard", void 0);
+__decorate([
+    property({ type: Boolean })
+], NumberKpiWidget.prototype, "lazy", void 0);
+__decorate([
+    property({ type: String, attribute: 'prefetch-margin' })
+], NumberKpiWidget.prototype, "prefetchMargin", void 0);
+__decorate([
+    property({ type: Object })
+], NumberKpiWidget.prototype, "initialDefinition", void 0);
+__decorate([
+    state()
+], NumberKpiWidget.prototype, "_kpiData", void 0);
+__decorate([
+    state()
+], NumberKpiWidget.prototype, "_loading", void 0);
+__decorate([
+    state()
+], NumberKpiWidget.prototype, "_error", void 0);
+__decorate([
+    state()
+], NumberKpiWidget.prototype, "_dashboardParams", void 0);
+__decorate([
+    state()
+], NumberKpiWidget.prototype, "_viewportVisible", void 0);
+__decorate([
+    state()
+], NumberKpiWidget.prototype, "_definitionTitle", void 0);
+NumberKpiWidget = __decorate([
+    customElement('analytics-number-kpi')
+], NumberKpiWidget);
+export { NumberKpiWidget };