@quicdata/analytics 0.0.3 → 0.0.5

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@quicdata/analytics",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
+  "style": "analytics.css",
   "exports": {
     "./package.json": "./package.json",
+    "./analytics.css": "./analytics.css",
     ".": {
       "types": "./index.d.ts",
       "import": "./index.js",
@@ -22,12 +24,33 @@
       "import": "./widgets/index.js",
       "default": "./widgets/index.js"
     },
-    "./core/index": "./src/core/index.js",
-    "./widgets/index": "./src/widgets/index.js"
+    "./dashboard": {
+      "types": "./dashboard/index.d.ts",
+      "import": "./dashboard/index.js",
+      "default": "./dashboard/index.js"
+    },
+    "./designer": {
+      "types": "./designer/index.d.ts",
+      "import": "./designer/index.js",
+      "default": "./designer/index.js"
+    }
   },
   "dependencies": {
+    "echarts": "^5.5.0",
+    "gridstack": "^12.0.0",
+    "lit": "^3.3.0",
     "tslib": "^2.3.0"
   },
+  "files": [
+    "*.js",
+    "*.d.ts",
+    "*.css",
+    "core",
+    "widgets",
+    "dashboard",
+    "designer",
+    "filters"
+  ],
   "nx": {
     "targets": {
       "build": {
@@ -35,13 +58,15 @@
         "options": {
           "main": "libs/analytics/src/index.ts",
           "outputPath": "dist/libs/analytics",
-          "additionalEntryPoints": [
-            "libs/analytics/src/core/index.ts",
-            "libs/analytics/src/widgets/index.ts"
-          ],
           "tsConfig": "libs/analytics/tsconfig.lib.json",
-          "generateExportsField": true,
-          "rootDir": "libs/analytics/src"
+          "rootDir": "libs/analytics/src",
+          "assets": [
+            {
+              "input": "libs/analytics/src",
+              "glob": "analytics.css",
+              "output": "."
+            }
+          ]
         }
       }
     }

package/widgets/analytics-report.d.ts

@@ -0,0 +1,49 @@
+import { LitElement, nothing } from 'lit';
+import '../filters/filter-bar.js';
+import './table.js';
+/**
+ * Analytics report component: show report by report definition id.
+ * Similar to analytics-widget: has filters, print, and export (PDF/Excel) buttons.
+ * Renders report data inline with analytics-table (same as table widget); filter bar above; toolbar with Print, Download PDF, Download Excel.
+ */
+export declare class AnalyticsReport extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Report definition id (used with apiUrl to load definition and preview). */
+    reportId: string;
+    /** API base URL (e.g. /api/analytics). */
+    apiUrl: string;
+    /** Optional title override. When set (non-empty), overrides report name from definition. Use attribute "custom-title" to avoid native title. */
+    customTitle: string;
+    /** @deprecated Use custom-title. Optional title override. */
+    title: string;
+    /** Initial filter params (e.g. { year: '2025', haulier_id: '1' }). */
+    dataParams: Record<string, string | number | boolean>;
+    private _name;
+    private _filters;
+    private _params;
+    private _previewUrlBase;
+    private _pdfUrlBase;
+    private _excelUrlBase;
+    private _loading;
+    private _error;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _loadReport;
+    /** Build initial params: dataParams first, then filter default_value for any param not set. Runs from beginning so first data request uses defaults. */
+    private _paramsFromFiltersAndDataParams;
+    private _onFilterChange;
+    private get _dataUrl();
+    private get _previewUrl();
+    private get _pdfUrl();
+    private get _excelUrl();
+    private _print;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'analytics-report': AnalyticsReport;
+    }
+}
+//# sourceMappingURL=analytics-report.d.ts.map

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

@@ -0,0 +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,8EAA8E;IAClB,QAAQ,EAAE,MAAM,CAAC;IAE7E,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"}

package/widgets/analytics-report.js

@@ -0,0 +1,306 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { fetchReportDefinition, buildReportDataUrl, buildReportPreviewUrl, buildReportPdfUrl, buildReportExcelUrl, appendParamsToUrl, } from '../core/fetch-data.js';
+import { EVENT_FILTER_CHANGE } from '../filters/filter-bar.js';
+import '../filters/filter-bar.js';
+import './table.js';
+/**
+ * Analytics report component: show report by report definition id.
+ * Similar to analytics-widget: has filters, print, and export (PDF/Excel) buttons.
+ * Renders report data inline with analytics-table (same as table widget); filter bar above; toolbar with Print, Download PDF, Download Excel.
+ */
+let AnalyticsReport = class AnalyticsReport extends LitElement {
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 200px;
+    }
+    .report-root {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      min-height: 200px;
+    }
+    .report-header {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.5rem 1rem;
+      border-bottom: 1px solid var(--analytics-report-border, #e2e8f0);
+      background: var(--analytics-report-header-bg, #f8fafc);
+    }
+    .report-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--analytics-report-title-color, #1e293b);
+      margin: 0;
+    }
+    .report-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .report-actions button,
+    .report-actions a {
+      padding: 0.375rem 0.75rem;
+      font-size: 0.875rem;
+      border-radius: 6px;
+      border: 1px solid var(--analytics-report-btn-border, #cbd5e1);
+      background: var(--analytics-report-btn-bg, #fff);
+      color: var(--analytics-report-btn-color, #334155);
+      cursor: pointer;
+      text-decoration: none;
+    }
+    .report-actions button:hover,
+    .report-actions a:hover {
+      background: var(--analytics-report-btn-hover-bg, #f1f5f9);
+      color: var(--analytics-report-btn-hover-color, #0f172a);
+    }
+    .report-filters {
+      flex-shrink: 0;
+      border-bottom: 1px solid var(--analytics-report-border, #e2e8f0);
+    }
+    .report-table-wrap {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      background: #fff;
+    }
+    .report-table-wrap analytics-table {
+      flex: 1;
+      min-height: 0;
+    }
+    .loading,
+    .error {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 200px;
+      padding: 1rem;
+      color: #64748b;
+    }
+    .error {
+      color: #b91c1c;
+    }
+    .loading-spinner {
+      width: 2rem;
+      height: 2rem;
+      border: 2px solid #e2e8f0;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: analytics-report-spin 0.7s linear infinite;
+    }
+    @keyframes analytics-report-spin {
+      to { transform: rotate(360deg); }
+    }
+  `; }
+    constructor() {
+        super();
+        this.reportId = '';
+        this.apiUrl = '';
+        this.customTitle = '';
+        this.title = '';
+        this.dataParams = {};
+        this._name = '';
+        this._filters = [];
+        this._params = { ...(this.dataParams ?? {}) };
+        this._previewUrlBase = '';
+        this._pdfUrlBase = '';
+        this._excelUrlBase = '';
+        this._loading = false;
+        this._error = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(EVENT_FILTER_CHANGE, this._onFilterChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(EVENT_FILTER_CHANGE, this._onFilterChange);
+    }
+    updated(changed) {
+        if (!this.apiUrl || !this.reportId || this._loading)
+            return;
+        if (changed.has('reportId') || changed.has('apiUrl')) {
+            this._name = '';
+            this._filters = [];
+            this._previewUrlBase = '';
+            this._pdfUrlBase = '';
+            this._excelUrlBase = '';
+            this._params = { ...(this.dataParams ?? {}) };
+            this._loadReport();
+        }
+        else if (this._name === '' && !this._error) {
+            this._loadReport();
+        }
+    }
+    async _loadReport() {
+        if (!this.apiUrl || !this.reportId || this._loading)
+            return;
+        this._loading = true;
+        this._error = null;
+        try {
+            const def = await fetchReportDefinition(this.apiUrl, this.reportId);
+            this._name = def.name ?? '';
+            this._filters = def.filters ?? [];
+            this._params = this._paramsFromFiltersAndDataParams(this._filters);
+            this._previewUrlBase = def.preview_url ?? '';
+            this._pdfUrlBase = def.download_pdf_url ?? '';
+            this._excelUrlBase = def.download_excel_url ?? '';
+        }
+        catch (e) {
+            this._error = e instanceof Error ? e.message : String(e);
+            this._name = '';
+            this._filters = [];
+            this._previewUrlBase = '';
+            this._pdfUrlBase = '';
+            this._excelUrlBase = '';
+        }
+        finally {
+            this._loading = false;
+        }
+    }
+    /** Build initial params: dataParams first, then filter default_value for any param not set. Runs from beginning so first data request uses defaults. */
+    _paramsFromFiltersAndDataParams(filters) {
+        const out = { ...(this.dataParams ?? {}) };
+        for (const f of filters) {
+            if (f.param_name && (f.param_name in out))
+                continue;
+            if (f.default_value !== undefined && f.default_value !== null) {
+                out[f.param_name] = f.default_value;
+            }
+        }
+        return out;
+    }
+    _onFilterChange(e) {
+        if (e.detail?.params) {
+            this._params = { ...e.detail.params };
+        }
+    }
+    get _dataUrl() {
+        if (!this.apiUrl || !this.reportId)
+            return '';
+        return buildReportDataUrl(this.apiUrl, this.reportId);
+    }
+    get _previewUrl() {
+        if (this._previewUrlBase)
+            return appendParamsToUrl(this._previewUrlBase, this._params);
+        if (!this.apiUrl || !this.reportId)
+            return '';
+        return buildReportPreviewUrl(this.apiUrl, this.reportId, this._params);
+    }
+    get _pdfUrl() {
+        if (this._pdfUrlBase)
+            return appendParamsToUrl(this._pdfUrlBase, this._params);
+        if (!this.apiUrl || !this.reportId)
+            return '#';
+        return buildReportPdfUrl(this.apiUrl, this.reportId, this._params);
+    }
+    get _excelUrl() {
+        if (this._excelUrlBase)
+            return appendParamsToUrl(this._excelUrlBase, this._params);
+        if (!this.apiUrl || !this.reportId)
+            return '#';
+        return buildReportExcelUrl(this.apiUrl, this.reportId, this._params);
+    }
+    _print() {
+        window.open(this._previewUrl, '_blank', 'noopener')?.print();
+    }
+    render() {
+        if (this._loading) {
+            return html `
+        <div class="loading" aria-busy="true" aria-live="polite">
+          <div class="loading-spinner" aria-hidden="true"></div>
+        </div>
+      `;
+        }
+        if (this._error) {
+            return html `<div class="error" role="alert">${this._error}</div>`;
+        }
+        if (!this.reportId || !this.apiUrl) {
+            return nothing;
+        }
+        const custom = (this.customTitle ?? '').trim();
+        const displayTitle = custom !== '' ? custom : (this._name || 'Report');
+        return html `
+      <div class="report-root">
+        <div class="report-header">
+          <h1 class="report-title">${displayTitle}</h1>
+          <div class="report-actions">
+            <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>
+          </div>
+        </div>
+        ${this._filters.length > 0
+            ? html `
+              <div class="report-filters">
+                <analytics-filter-bar
+                  .filters=${this._filters}
+                  .values=${this._params}
+                  .showClose=${false}
+                ></analytics-filter-bar>
+              </div>
+            `
+            : ''}
+        <div class="report-table-wrap">
+          <analytics-table
+            data-url=${this._dataUrl}
+            .dataParams=${this._params}
+            .title=${''}
+          ></analytics-table>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'report-id' })
+], AnalyticsReport.prototype, "reportId", void 0);
+__decorate([
+    property({ type: String, attribute: 'api-url' })
+], AnalyticsReport.prototype, "apiUrl", void 0);
+__decorate([
+    property({ type: String, attribute: 'custom-title' })
+], AnalyticsReport.prototype, "customTitle", void 0);
+__decorate([
+    property({ type: String })
+], AnalyticsReport.prototype, "title", void 0);
+__decorate([
+    property({ type: Object })
+], AnalyticsReport.prototype, "dataParams", void 0);
+__decorate([
+    state()
+], AnalyticsReport.prototype, "_name", void 0);
+__decorate([
+    state()
+], AnalyticsReport.prototype, "_filters", void 0);
+__decorate([
+    state()
+], AnalyticsReport.prototype, "_params", void 0);
+__decorate([
+    state()
+], AnalyticsReport.prototype, "_previewUrlBase", void 0);
+__decorate([
+    state()
+], AnalyticsReport.prototype, "_pdfUrlBase", void 0);
+__decorate([
+    state()
+], AnalyticsReport.prototype, "_excelUrlBase", void 0);
+__decorate([
+    state()
+], AnalyticsReport.prototype, "_loading", void 0);
+__decorate([
+    state()
+], AnalyticsReport.prototype, "_error", void 0);
+AnalyticsReport = __decorate([
+    customElement('analytics-report')
+], AnalyticsReport);
+export { AnalyticsReport };

package/widgets/analytics-widget.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, nothing } from 'lit';
+import type { DashboardContainer } from '../dashboard/dashboard-container.js';
+import './bar-chart.js';
+import './line-chart.js';
+import './pie-chart.js';
+import './table.js';
+/**
+ * Generic analytics widget: pass widgetId + apiUrl (and optional config);
+ * fetches the widget definition and renders the appropriate chart/table internally.
+ * Use this so developers don't need to know the chart type.
+ */
+export declare class AnalyticsWidget extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Widget id (used with apiUrl to load definition and data). */
+    widgetId: string;
+    /** API base URL (e.g. /api/analytics). Used with widgetId to fetch definition and data. */
+    apiUrl: string;
+    /** Optional title override. When unset, the inner widget uses the title from the definition. */
+    title: string;
+    /** Query params for data requests (e.g. date_from, date_to). */
+    dataParams: Record<string, string | number | boolean>;
+    /** When set, the inner widget receives dashboard filter/refresh events. */
+    dashboard: DashboardContainer | null;
+    /** When true, the inner widget only fetches when it enters the viewport. */
+    lazy: boolean;
+    /** CSS margin for viewport prefetch when lazy is true (e.g. '200px'). */
+    prefetchMargin: string;
+    private _chartType;
+    private _definition;
+    private _loading;
+    private _error;
+    constructor();
+    updated(changed: Map<string, unknown>): void;
+    private _loadDefinition;
+    private get _innerTag();
+    private _renderInnerWidget;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+//# sourceMappingURL=analytics-widget.d.ts.map

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

@@ -0,0 +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,gEAAgE;IACJ,QAAQ,EAAE,MAAM,CAAC;IAE7E,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"}