@quicdata/analytics 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicdata/analytics",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "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/base-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-chart.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/base-chart.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-chart.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/base-chart.ts"],"names":[],"mappings":"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"}

package/widgets/base-chart.js

@@ -41,15 +41,122 @@ export class BaseChartWidget extends LitElement {
     .loading-overlay {
       position: absolute;
       inset: 0;
-      z-index: 2;
+      z-index: 10;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: rgba(255, 255, 255, 0.65);
+      background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(4px);
       -webkit-backdrop-filter: blur(4px);
       border-radius: 4px;
     }
+    .skeleton-line-chart {
+      width: 100%;
+      height: 100%;
+      min-height: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+    .skeleton-line-chart-canvas {
+      width: 70%;
+      max-width: 180px;
+      aspect-ratio: 1;
+      min-width: 0;
+    }
+    .skeleton-line-chart-canvas svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .skeleton-line-chart .zigzag {
+      fill: none;
+      stroke: #e5e7eb;
+      stroke-width: 2.5;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    .skeleton-line-chart .zigzag-shine {
+      fill: none;
+      stroke: url(#skeleton-line-gradient);
+      stroke-width: 2.5;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-dasharray: 15 85;
+      animation: analytics-line-shimmer 1.2s ease-in-out infinite;
+    }
+    @keyframes analytics-line-shimmer {
+      to { stroke-dashoffset: -100; }
+    }
+    .skeleton-bar-chart {
+      width: 100%;
+      height: 100%;
+      min-height: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+    .skeleton-bar-chart-canvas {
+      width: 70%;
+      max-width: 180px;
+      aspect-ratio: 1;
+      display: flex;
+      align-items: flex-end;
+      gap: 1rem;
+      min-width: 0;
+    }
+    .skeleton-bar-vert {
+      flex: 1;
+      min-width: 0;
+      border-radius: 4px 4px 0 0;
+      background: linear-gradient(
+        90deg,
+        #e5e7eb 0%,
+        #e5e7eb 40%,
+        #f3f4f6 50%,
+        #e5e7eb 60%,
+        #e5e7eb 100%
+      );
+      background-size: 200% 100%;
+      animation: analytics-skeleton-shimmer 1.2s ease-in-out infinite;
+    }
+    .skeleton-bar-vert:nth-child(1) { height: 55%; }
+    .skeleton-bar-vert:nth-child(2) { height: 70%; }
+    .skeleton-bar-vert:nth-child(3) { height: 60%; }
+    .skeleton-bar-vert:nth-child(4) { height: 80%; }
+    .skeleton-pie {
+      width: 100%;
+      height: 100%;
+      min-height: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+    .skeleton-circle {
+      width: 70%;
+      max-width: 180px;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      background: linear-gradient(
+        90deg,
+        #e5e7eb 0%,
+        #e5e7eb 40%,
+        #f3f4f6 50%,
+        #e5e7eb 60%,
+        #e5e7eb 100%
+      );
+      background-size: 200% 100%;
+      animation: analytics-skeleton-shimmer 1.2s ease-in-out infinite;
+    }
+    @keyframes analytics-skeleton-shimmer {
+      to { background-position: 200% 0; }
+    }
     .loading-spinner {
       width: 2rem;
       height: 2rem;
@@ -97,6 +204,22 @@ export class BaseChartWidget extends LitElement {
       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: analytics-skeleton-shimmer 1.2s ease-in-out infinite;
+    }
     .widget-body {
       flex: 1;
       min-height: 0;
@@ -275,10 +398,8 @@ export class BaseChartWidget extends LitElement {
             this._viewportUnobserve = observeViewport(this, { rootMargin: this.prefetchMargin || '200px', threshold: 0 }, {
                 onEnter: () => {
                     this._viewportVisible = true;
-                    if (!this._hasLoadedOnce) {
-                        this._hasLoadedOnce = true;
+                    if (!this._hasLoadedOnce)
                         this._loadData();
-                    }
                 },
                 onLeave: () => {
                     this._viewportVisible = false;
@@ -389,6 +510,7 @@ export class BaseChartWidget extends LitElement {
                         this._widgetFilters = filters;
                     if (hideFilter !== undefined)
                         this._hideFilter = hideFilter;
+                    this._hasLoadedOnce = true;
                     this._loading = false;
                     this._renderChart();
                 });
@@ -406,6 +528,7 @@ export class BaseChartWidget extends LitElement {
                     this.data = data;
                     this.meta = meta;
                     this._widgetData = null;
+                    this._hasLoadedOnce = true;
                     this._loading = false;
                     this._renderChart();
                 });
@@ -470,10 +593,16 @@ export class BaseChartWidget extends LitElement {
         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 canRefresh = Boolean(this._getEffectiveDataUrl());
-        const headerContent = this._effectiveTitle || canRefresh
+        const showSkeleton = this._loading && !this._hasLoadedOnce;
+        const showTitlePlaceholder = !this._effectiveTitle;
+        const headerContent = this._effectiveTitle || canRefresh || showTitlePlaceholder
             ? html `
             <header class="widget-header">
-              ${this._effectiveTitle ? html `<h2 class="widget-title">${this._effectiveTitle}</h2>` : html `<span></span>`}
+              ${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
@@ -496,19 +625,62 @@ export class BaseChartWidget extends LitElement {
             </header>
           `
             : '';
+        const showSpinnerOverlay = this._loading && this._hasLoadedOnce;
+        const isBarChart = this.tagName === 'ANALYTICS-BAR-CHART';
+        const isPieChart = this.tagName === 'ANALYTICS-PIE-CHART';
+        const skeletonContent = showSkeleton
+            ? isBarChart
+                ? html `
+            <div class="skeleton-bar-chart" aria-busy="true" aria-live="polite">
+              <div class="skeleton-bar-chart-canvas">
+                <div class="skeleton-bar-vert"></div>
+                <div class="skeleton-bar-vert"></div>
+                <div class="skeleton-bar-vert"></div>
+                <div class="skeleton-bar-vert"></div>
+              </div>
+            </div>
+          `
+                : isPieChart
+                    ? html `
+              <div class="skeleton-pie" aria-busy="true" aria-live="polite">
+                <div class="skeleton-circle"></div>
+              </div>
+            `
+                    : html `
+              <div class="skeleton-line-chart" aria-busy="true" aria-live="polite">
+                <div class="skeleton-line-chart-canvas">
+                  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
+                    <defs>
+                      <linearGradient id="skeleton-line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                        <stop offset="0%" stop-color="#e5e7eb"/>
+                        <stop offset="40%" stop-color="#e5e7eb"/>
+                        <stop offset="50%" stop-color="#f3f4f6"/>
+                        <stop offset="60%" stop-color="#e5e7eb"/>
+                        <stop offset="100%" stop-color="#e5e7eb"/>
+                      </linearGradient>
+                    </defs>
+                    <polyline class="zigzag" points="8,80 23,29 38,33 53,37 68,90 83,82 95,10"/>
+                    <polyline class="zigzag zigzag-shine" points="8,80 23,29 38,33 53,37 68,90 83,82 95,10"/>
+                  </svg>
+                </div>
+              </div>
+            `
+            : null;
         return html `
       <div class="widget-with-toolbar">
         ${headerContent}
         <div class="widget-body">
-          ${this._error
-            ? html `<div class="error">${this._error}</div>`
-            : html `<div class="chart"></div>`}
-          ${this._loading
+          ${skeletonContent !== null
+            ? skeletonContent
+            : this._error
+                ? html `<div class="error">${this._error}</div>`
+                : html `<div class="chart"></div>`}
+        </div>
+        ${showSpinnerOverlay
             ? html `<div class="loading-overlay" aria-busy="true" aria-live="polite">
-                <div class="loading-spinner" aria-hidden="true"></div>
-              </div>`
+              <div class="loading-spinner" aria-hidden="true"></div>
+            </div>`
             : nothing}
-        </div>
         ${hasWidgetFilters
             ? html `
               <analytics-widget-toolbar

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 };

package/widgets/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/table.ts"],"names":[],"mappings":"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"}

package/widgets/table.js

@@ -75,15 +75,54 @@ let TableWidget = class TableWidget extends LitElement {
     .loading-overlay {
       position: absolute;
       inset: 0;
-      z-index: 2;
+      z-index: 10;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: rgba(255, 255, 255, 0.65);
+      background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(4px);
       -webkit-backdrop-filter: blur(4px);
       border-radius: 4px;
     }
+    .skeleton {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      box-sizing: border-box;
+    }
+    .skeleton-row {
+      display: flex;
+      gap: 0.75rem;
+      align-items: center;
+      padding: 0.5rem 0;
+      border-bottom: 1px solid #f3f4f6;
+    }
+    .skeleton-cell {
+      height: 1rem;
+      border-radius: 4px;
+      background: linear-gradient(
+        90deg,
+        #e5e7eb 0%,
+        #e5e7eb 40%,
+        #f3f4f6 50%,
+        #e5e7eb 60%,
+        #e5e7eb 100%
+      );
+      background-size: 200% 100%;
+      animation: analytics-table-skeleton-shimmer 1.2s ease-in-out infinite;
+    }
+    .skeleton-row:first-child .skeleton-cell {
+      height: 1.25rem;
+      background: #f3f4f6;
+    }
+    .skeleton-row:first-child .skeleton-cell:nth-child(1) { flex: 1.2; }
+    .skeleton-row:first-child .skeleton-cell:nth-child(2) { flex: 1; }
+    .skeleton-row:first-child .skeleton-cell:nth-child(3) { flex: 0.8; }
+    .skeleton-row:not(:first-child) .skeleton-cell:nth-child(1) { flex: 1.2; min-width: 0; }
+    .skeleton-row:not(:first-child) .skeleton-cell:nth-child(2) { flex: 1; min-width: 0; }
+    .skeleton-row:not(:first-child) .skeleton-cell:nth-child(3) { flex: 0.8; min-width: 0; }
+    @keyframes analytics-table-skeleton-shimmer {
+      to { background-position: 200% 0; }
+    }
     .loading-spinner {
       width: 2rem;
       height: 2rem;
@@ -167,6 +206,22 @@ let TableWidget = class TableWidget extends LitElement {
       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: analytics-table-skeleton-shimmer 1.2s ease-in-out infinite;
+    }
     .widget-body {
       flex: 1;
       min-height: 0;
@@ -299,10 +354,8 @@ let TableWidget = class TableWidget extends LitElement {
             }, {
                 onEnter: () => {
                     this._viewportVisible = true;
-                    if (!this._hasLoadedOnce) {
-                        this._hasLoadedOnce = true;
+                    if (!this._hasLoadedOnce)
                         this._loadData();
-                    }
                 },
                 onLeave: () => {
                     this._viewportVisible = false;
@@ -446,6 +499,7 @@ let TableWidget = class TableWidget extends LitElement {
                         this._widgetFilters = [];
                     if (hideFilter !== undefined)
                         this._hideFilter = hideFilter;
+                    this._hasLoadedOnce = true;
                     this._loading = false;
                     if (this._loadDataPendingRefresh) {
                         this._loadDataPendingRefresh = false;
@@ -489,6 +543,7 @@ let TableWidget = class TableWidget extends LitElement {
                         this._widgetFilters = [];
                     if (hideFilter !== undefined)
                         this._hideFilter = hideFilter;
+                    this._hasLoadedOnce = true;
                     this._loading = false;
                     if (this._loadDataPendingRefresh) {
                         this._loadDataPendingRefresh = false;
@@ -577,10 +632,16 @@ let TableWidget = class TableWidget extends LitElement {
         const hasHeaderRows = Boolean(wd?.header_rows?.length);
         const tableFontSizeStyle = wd?.font_size ? `font-size: ${wd.font_size}` : nothing;
         const canRefresh = Boolean(this._getEffectiveDataUrl()) && !this.hideRefreshButton;
-        const headerContent = this._effectiveTitle || canRefresh
+        const showSkeleton = 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>` : html `<span></span>`}
+              ${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
@@ -613,12 +674,43 @@ let TableWidget = class TableWidget extends LitElement {
           ></analytics-widget-toolbar>
         `
             : html ``;
-        const bodyContent = this._error
-            ? html `<div class="error">${this._error}</div>`
-            : columns.length === 0
-                ? html `<div class="empty">No columns</div>`
-                : rows.length === 0
-                    ? html `
+        const showSpinnerOverlay = this._loading && this._hasLoadedOnce;
+        const bodyContent = showSkeleton
+            ? html `
+          <div class="skeleton" aria-busy="true" aria-live="polite">
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+            <div class="skeleton-row">
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+              <div class="skeleton-cell"></div>
+            </div>
+          </div>
+        `
+            : this._error
+                ? html `<div class="error">${this._error}</div>`
+                : columns.length === 0
+                    ? html `<div class="empty">No columns</div>`
+                    : rows.length === 0
+                        ? html `
                 <table style=${tableFontSizeStyle}>
                   <thead>
                     ${this._renderThead(columns, hasHeaderRows)}
@@ -630,7 +722,7 @@ let TableWidget = class TableWidget extends LitElement {
                   </tbody>
                 </table>
               `
-                    : html `
+                        : html `
                 <table style=${tableFontSizeStyle}>
                   <thead>
                     ${this._renderThead(columns, hasHeaderRows)}
@@ -645,12 +737,12 @@ let TableWidget = class TableWidget extends LitElement {
         ${headerContent}
         <div class="widget-body">
           ${bodyContent}
-          ${this._loading
+        </div>
+        ${showSpinnerOverlay
             ? html `<div class="loading-overlay" aria-busy="true" aria-live="polite">
-                <div class="loading-spinner" aria-hidden="true"></div>
-              </div>`
+              <div class="loading-spinner" aria-hidden="true"></div>
+            </div>`
             : nothing}
-        </div>
         ${filterToolbar}
       </div>
     `;