@quicdata/analytics 0.0.7 → 0.0.9

package/filters/widget-toolbar.js

@@ -122,7 +122,7 @@ let AnalyticsWidgetToolbar = class AnalyticsWidgetToolbar extends LitElement {
     static { this.styles = css `
     :host {
       position: absolute;
-      top: 0.5rem;
+      top: var(--analytics-widget-toolbar-top, 0.5rem);
       right: 0.5rem;
       z-index: var(--analytics-widget-toolbar-z-index, 20);
       opacity: 0;

package/package.json

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

package/widgets/analytics-report.d.ts

@@ -26,6 +26,7 @@ export declare class AnalyticsReport extends LitElement {
     private _excelUrlBase;
     private _loading;
     private _error;
+    private _refreshKey;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -39,6 +40,7 @@ export declare class AnalyticsReport extends LitElement {
     private get _pdfUrl();
     private get _excelUrl();
     private _print;
+    private _onRefresh;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"analytics-report.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/analytics-report.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAYrD,OAAO,0BAA0B,CAAC;AAClC,OAAO,YAAY,CAAC;AAEpB;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAyFpB;IAEF,oHAAoH;IACxD,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtF,0CAA0C;IACgB,MAAM,EAAE,MAAM,CAAC;IAEzE,gJAAgJ;IACjF,WAAW,EAAE,MAAM,CAAC;IAEnF,6DAA6D;IACzB,KAAK,EAAE,MAAM,CAAC;IAElD,sEAAsE;IAClC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAE1F,QAAyB,KAAK,CAAS;IACvC,QAAyB,QAAQ,CAAqB;IACtD,QAAyB,OAAO,CAA4C;IAC5E,QAAyB,eAAe,CAAS;IACjD,QAAyB,WAAW,CAAS;IAC7C,QAAyB,aAAa,CAAS;IAC/C,QAAyB,QAAQ,CAAU;IAC3C,QAAyB,MAAM,CAAgB;;IAmBtC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;YAevC,WAAW;IAwBzB,wJAAwJ;IACxJ,OAAO,CAAC,+BAA+B;IAWvC,OAAO,CAAC,eAAe;IAMvB,OAAO,KAAK,QAAQ,GAGnB;IAED,OAAO,KAAK,WAAW,GAItB;IAED,OAAO,KAAK,OAAO,GAIlB;IAED,OAAO,KAAK,SAAS,GAIpB;IAED,OAAO,CAAC,MAAM;IAIL,MAAM;CAiDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,eAAe,CAAC;KACrC;CACF"}
+{"version":3,"file":"analytics-report.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/analytics-report.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAYrD,OAAO,0BAA0B,CAAC;AAClC,OAAO,YAAY,CAAC;AAEpB;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAiHpB;IAEF,oHAAoH;IACxD,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAEtF,0CAA0C;IACgB,MAAM,EAAE,MAAM,CAAC;IAEzE,gJAAgJ;IACjF,WAAW,EAAE,MAAM,CAAC;IAEnF,6DAA6D;IACzB,KAAK,EAAE,MAAM,CAAC;IAElD,sEAAsE;IAClC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAE1F,QAAyB,KAAK,CAAS;IACvC,QAAyB,QAAQ,CAAqB;IACtD,QAAyB,OAAO,CAA4C;IAC5E,QAAyB,eAAe,CAAS;IACjD,QAAyB,WAAW,CAAS;IAC7C,QAAyB,aAAa,CAAS;IAC/C,QAAyB,QAAQ,CAAU;IAC3C,QAAyB,MAAM,CAAgB;IACtC,OAAO,CAAC,WAAW,CAAK;;IAmBxB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;YAevC,WAAW;IAwBzB,wJAAwJ;IACxJ,OAAO,CAAC,+BAA+B;IAWvC,OAAO,CAAC,eAAe;IAMvB,OAAO,KAAK,QAAQ,GAGnB;IAED,OAAO,KAAK,WAAW,GAItB;IAED,OAAO,KAAK,OAAO,GAIlB;IAED,OAAO,KAAK,SAAS,GAIpB;IAED,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,UAAU;IAIT,MAAM;CAgEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,eAAe,CAAC;KACrC;CACF"}

package/widgets/analytics-report.js

@@ -34,11 +34,12 @@ let AnalyticsReport = class AnalyticsReport extends LitElement {
       padding: 0.5rem 1rem;
       border-bottom: 1px solid var(--analytics-report-border, #e2e8f0);
       background: var(--analytics-report-header-bg, #f8fafc);
+      color: var(--analytics-report-header-color, #1e293b);
     }
     .report-title {
       font-size: 1rem;
       font-weight: 600;
-      color: var(--analytics-report-title-color, #1e293b);
+      color: var(--analytics-report-header-color, #1e293b);
       margin: 0;
     }
     .report-actions {
@@ -62,6 +63,29 @@ let AnalyticsReport = class AnalyticsReport extends LitElement {
       background: var(--analytics-report-btn-hover-bg, #f1f5f9);
       color: var(--analytics-report-btn-hover-color, #0f172a);
     }
+    .btn-refresh,
+    .report-actions button.btn-refresh {
+      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-report-header-color, #334155);
+      cursor: pointer;
+      transition: color 0.15s ease, background-color 0.15s ease;
+    }
+    .btn-refresh:hover {
+      color: var(--analytics-report-header-color, #0f172a);
+      background: var(--analytics-report-btn-hover-bg, #f1f5f9);
+    }
+    .btn-refresh svg {
+      width: 1rem;
+      height: 1rem;
+    }
     .report-filters {
       flex-shrink: 0;
       border-bottom: 1px solid var(--analytics-report-border, #e2e8f0);
@@ -103,6 +127,7 @@ let AnalyticsReport = class AnalyticsReport extends LitElement {
   `; }
     constructor() {
         super();
+        this._refreshKey = 0;
         this.reportId = '';
         this.apiUrl = '';
         this.customTitle = '';
@@ -213,6 +238,9 @@ let AnalyticsReport = class AnalyticsReport extends LitElement {
     _print() {
         window.open(this._previewUrl, '_blank', 'noopener')?.print();
     }
+    _onRefresh() {
+        this._refreshKey = Date.now();
+    }
     render() {
         if (this._loading) {
             return html `
@@ -234,6 +262,20 @@ let AnalyticsReport = class AnalyticsReport extends LitElement {
         <div class="report-header">
           <h1 class="report-title">${displayTitle}</h1>
           <div class="report-actions">
+            <button
+              type="button"
+              class="btn-refresh"
+              title="Refresh"
+              aria-label="Refresh data"
+              @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>
             <button type="button" @click=${this._print}>Print</button>
             <a href=${this._pdfUrl} target="_blank" rel="noopener" download>Download PDF</a>
             <a href=${this._excelUrl} target="_blank" rel="noopener" download>Download Excel</a>
@@ -253,8 +295,9 @@ let AnalyticsReport = class AnalyticsReport extends LitElement {
         <div class="report-table-wrap">
           <analytics-table
             data-url=${this._dataUrl}
-            .dataParams=${this._params}
+            .dataParams=${{ ...this._params, _refresh: this._refreshKey }}
             .title=${''}
+            hide-refresh-button
           ></analytics-table>
         </div>
       </div>
@@ -300,6 +343,9 @@ __decorate([
 __decorate([
     state()
 ], AnalyticsReport.prototype, "_error", void 0);
+__decorate([
+    state()
+], AnalyticsReport.prototype, "_refreshKey", void 0);
 AnalyticsReport = __decorate([
     customElement('analytics-report')
 ], AnalyticsReport);

package/widgets/base-chart.d.ts

@@ -88,6 +88,7 @@ export declare abstract class BaseChartWidget extends LitElement {
         type?: string;
     }>, _widgetData?: unknown): EChartsOption;
     private _onWidgetFilterChange;
+    private _onRefresh;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=base-chart.d.ts.map

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;
@@ -68,6 +175,7 @@ export class BaseChartWidget extends LitElement {
       min-height: 120px;
       display: flex;
       flex-direction: column;
+      --analytics-widget-toolbar-top: 2.5rem;
     }
     .widget-with-toolbar:hover analytics-widget-toolbar {
       opacity: 1;
@@ -77,12 +185,18 @@ export class BaseChartWidget extends LitElement {
       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: #374151;
+      color: var(--analytics-widget-header-color, #374151);
       line-height: 1.3;
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -90,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;
@@ -100,6 +230,33 @@ export class BaseChartWidget extends LitElement {
       height: 100%;
       min-height: 100px;
     }
+    .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;
+    }
   `; }
     /** Delay (ms) after last resize event before calling chart.resize(). */
     static { this._RESIZE_DELAY_MS = 300; }
@@ -241,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;
@@ -355,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();
                 });
@@ -372,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();
                 });
@@ -427,24 +584,103 @@ export class BaseChartWidget extends LitElement {
     _onWidgetFilterChange(e) {
         this._widgetFilterParams = { ...(e.detail?.params ?? {}) };
     }
+    _onRefresh() {
+        if (this._loading)
+            return;
+        this._loadData();
+    }
     render() {
         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 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>`
+                : 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 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">
-        ${this._effectiveTitle
-            ? html `<header class="widget-header"><h2 class="widget-title">${this._effectiveTitle}</h2></header>`
-            : ''}
+        ${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/table.d.ts

@@ -12,6 +12,8 @@ export declare class TableWidget extends LitElement {
     static styles: import("lit").CSSResult;
     /** Optional title override. When unset, the widget uses the title from the API definition. */
     title: string;
+    /** When true, the header refresh button is hidden (e.g. when table is embedded in analytics-report which has its own refresh). */
+    hideRefreshButton: boolean;
     /** API URL to fetch data (e.g. /api/analytics/widgets/1/data). When widgetId + apiUrl are set, overridden by buildWidgetDataUrl(apiUrl, widgetId). */
     dataUrl: string;
     /** Widget id (used with apiUrl to build data URL: /widgets/{id}/data). */
@@ -59,6 +61,7 @@ export declare class TableWidget extends LitElement {
     private _viewportUnobserve;
     constructor();
     private _boundOnDashboardFilterChange;
+    private _onRefresh;
     private _boundOnDashboardRefresh;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -20,7 +20,6 @@ let TableWidget = class TableWidget extends LitElement {
       flex-direction: column;
       width: 100%;
       height: 100%;
-      overflow: hidden;
     }
     table {
       width: 100%;
@@ -76,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;
@@ -105,6 +143,33 @@ let TableWidget = class TableWidget extends LitElement {
       padding: 2rem 0.75rem;
       color: #9ca3af;
     }
+    .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;
+    }
     .widget-with-toolbar {
       position: relative;
       width: 100%;
@@ -112,6 +177,7 @@ let TableWidget = class TableWidget extends LitElement {
       display: flex;
       flex-direction: column;
       min-height: 0;
+      --analytics-widget-toolbar-top: 2.5rem;
     }
     .widget-with-toolbar:hover analytics-widget-toolbar {
       opacity: 1;
@@ -121,12 +187,18 @@ let TableWidget = class TableWidget extends LitElement {
       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: #374151;
+      color: var(--analytics-widget-header-color, #374151);
       line-height: 1.3;
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -134,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;
@@ -184,6 +272,11 @@ let TableWidget = class TableWidget extends LitElement {
         this._viewportVisible = true;
         this._definitionTitle = '';
     }
+    _onRefresh() {
+        if (this._loading)
+            return;
+        this._loadData();
+    }
     connectedCallback() {
         super.connectedCallback();
         this._attachDashboard();
@@ -261,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;
@@ -408,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;
@@ -451,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;
@@ -538,6 +631,39 @@ let TableWidget = class TableWidget extends LitElement {
         const wd = this._widgetData;
         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 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>`
+                : 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 filterToolbar = hasWidgetFilters
             ? html `
           <analytics-widget-toolbar
@@ -548,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)}
@@ -565,7 +722,7 @@ let TableWidget = class TableWidget extends LitElement {
                   </tbody>
                 </table>
               `
-                    : html `
+                        : html `
                 <table style=${tableFontSizeStyle}>
                   <thead>
                     ${this._renderThead(columns, hasHeaderRows)}
@@ -577,17 +734,15 @@ let TableWidget = class TableWidget extends LitElement {
               `;
         return html `
       <div class="widget-with-toolbar">
-        ${this._effectiveTitle
-            ? html `<header class="widget-header"><h2 class="widget-title">${this._effectiveTitle}</h2></header>`
-            : ''}
+        ${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>
     `;
@@ -658,6 +813,9 @@ let TableWidget = class TableWidget extends LitElement {
 __decorate([
     property({ type: String })
 ], TableWidget.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-refresh-button' })
+], TableWidget.prototype, "hideRefreshButton", void 0);
 __decorate([
     property({ type: String, attribute: 'data-url' })
 ], TableWidget.prototype, "dataUrl", void 0);