@quicdata/analytics 0.0.3 → 0.0.5

package/widgets/base-chart.js

@@ -0,0 +1,524 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import * as echarts from 'echarts';
+import { buildWidgetDataUrl, fetchAnalyticsData, fetchWidgetData, fetchWidgetDefinition, } from '../core/fetch-data.js';
+import { EVENT_DASHBOARD_FILTER_CHANGE, EVENT_DASHBOARD_REFRESH, } from '../dashboard/index.js';
+import { observeViewport } from '../core/viewport-observer.js';
+import '../filters/index.js';
+/**
+ * Base Lit + ECharts widget. Fetches data from data-url (Laravel analytics API)
+ * or uses inline data, then renders Apache ECharts.
+ * When dashboard is set, merges dashboard params with dataParams and listens for
+ * analytics-dashboard-filter-change and analytics-dashboard-refresh.
+ */
+export class BaseChartWidget extends LitElement {
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      min-height: 120px;
+    }
+    .chart {
+      width: 100%;
+      height: 100%;
+      min-height: 120px;
+    }
+    .error {
+      color: #c00;
+      padding: 0.5rem;
+      font-size: 0.875rem;
+    }
+    .loading-body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100px;
+      padding: 1rem;
+    }
+    .loading-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.65);
+      backdrop-filter: blur(4px);
+      -webkit-backdrop-filter: blur(4px);
+      border-radius: 4px;
+    }
+    .loading-spinner {
+      width: 2rem;
+      height: 2rem;
+      border: 2px solid #e5e7eb;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: analytics-spin 0.7s linear infinite;
+    }
+    @keyframes analytics-spin {
+      to { transform: rotate(360deg); }
+    }
+    .widget-with-toolbar {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 120px;
+      display: flex;
+      flex-direction: column;
+    }
+    .widget-with-toolbar:hover analytics-widget-toolbar {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .widget-header {
+      flex-shrink: 0;
+      padding: 0.5rem 0.75rem 0.25rem 0.75rem;
+      min-width: 0;
+    }
+    .widget-title {
+      margin: 0;
+      font-size: 0.9375rem;
+      font-weight: 600;
+      color: #374151;
+      line-height: 1.3;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .widget-body {
+      flex: 1;
+      min-height: 0;
+      position: relative;
+      box-sizing: border-box;
+    }
+    .widget-body .chart {
+      height: 100%;
+      min-height: 100px;
+    }
+  `; }
+    /** Delay (ms) after last resize event before calling chart.resize(). */
+    static { this._RESIZE_DELAY_MS = 300; }
+    constructor() {
+        super();
+        this._loadGeneration = 0;
+        this._loadDataScheduled = false;
+        this._ignoreNextFilterChange = false;
+        this._chart = null;
+        this._dashboardEl = null;
+        this._resizeObserver = null;
+        /** Single debounce: each resize cancels previous, then we wait and call chart.resize() once. */
+        this._resizeTimeoutId = null;
+        this._hasLoadedOnce = false;
+        this._viewportUnobserve = null;
+        this._boundOnDashboardFilterChange = (e) => {
+            const ce = e;
+            this._dashboardParams = { ...(ce.detail?.params ?? {}) };
+            this._loadData(); // refetch with new dashboard params
+        };
+        this._boundOnDashboardRefresh = () => {
+            if (this.lazy && !this._viewportVisible)
+                return;
+            this._loadData(); // no state change; refetch with current params
+        };
+        this.title = '';
+        this.dataUrl = '';
+        this.widgetId = '';
+        this.apiUrl = '';
+        this.dataParams = {};
+        this.dashboard = null;
+        this.data = null;
+        this.meta = { columns: {} };
+        this.options = {};
+        this.lazy = false;
+        this.prefetchMargin = '200px';
+        this.initialDefinition = undefined;
+        this._loading = false;
+        this._error = null;
+        this._dashboardParams = {};
+        this._widgetFilters = [];
+        this._widgetFilterParams = {};
+        this._hideFilter = false;
+        this._widgetData = null;
+        this._viewportVisible = true;
+        this._definitionTitle = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._attachDashboard();
+    }
+    disconnectedCallback() {
+        this._viewportUnobserve?.();
+        this._viewportUnobserve = null;
+        this._detachDashboard();
+        if (this._resizeTimeoutId != null) {
+            clearTimeout(this._resizeTimeoutId);
+            this._resizeTimeoutId = null;
+        }
+        this._resizeObserver?.disconnect();
+        this._chart?.dispose();
+        this._chart = null;
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        if (changed.has('dashboard')) {
+            this._detachDashboard();
+            this._attachDashboard();
+        }
+        if (changed.has('widgetId') || changed.has('apiUrl')) {
+            this._widgetFilters = [];
+            this._widgetFilterParams = {};
+            this._definitionTitle = '';
+            this._ignoreNextFilterChange = true;
+        }
+        const onlyFilterState = (changed.has('_widgetFilterParams') || changed.has('_widgetFilters')) &&
+            !changed.has('dataUrl') &&
+            !changed.has('dataParams') &&
+            !changed.has('widgetId') &&
+            !changed.has('apiUrl');
+        if (onlyFilterState && this._ignoreNextFilterChange) {
+            this._ignoreNextFilterChange = false;
+        }
+        else if (changed.has('dataUrl') ||
+            changed.has('dataParams') ||
+            changed.has('widgetId') ||
+            changed.has('apiUrl') ||
+            changed.has('_widgetFilterParams')) {
+            if (!this._loadDataScheduled) {
+                this._loadDataScheduled = true;
+                queueMicrotask(() => {
+                    this._loadDataScheduled = false;
+                    this._loadData();
+                });
+            }
+        }
+        if (changed.has('lazy')) {
+            this._viewportVisible = !this.lazy;
+        }
+        if (changed.has('data') || changed.has('meta') || changed.has('options') || this._chart) {
+            this._renderChart();
+        }
+    }
+    _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 = {};
+    }
+    firstUpdated() {
+        const container = this.renderRoot.querySelector('.chart');
+        if (container) {
+            this._resizeObserver = new ResizeObserver(() => {
+                if (this._resizeTimeoutId != null) {
+                    clearTimeout(this._resizeTimeoutId);
+                    this._resizeTimeoutId = null;
+                }
+                this._resizeTimeoutId = setTimeout(() => {
+                    this._resizeTimeoutId = null;
+                    this._chart?.resize();
+                }, BaseChartWidget._RESIZE_DELAY_MS);
+            });
+            this._resizeObserver.observe(container);
+        }
+        if (this.lazy) {
+            this._viewportVisible = false;
+            this._viewportUnobserve = observeViewport(this, { rootMargin: this.prefetchMargin || '200px', threshold: 0 }, {
+                onEnter: () => {
+                    this._viewportVisible = true;
+                    if (!this._hasLoadedOnce) {
+                        this._hasLoadedOnce = true;
+                        this._loadData();
+                    }
+                },
+                onLeave: () => {
+                    this._viewportVisible = false;
+                },
+            });
+        }
+    }
+    _getEffectiveDataUrl() {
+        if (this.apiUrl && this.widgetId) {
+            return buildWidgetDataUrl(this.apiUrl, this.widgetId);
+        }
+        return this.dataUrl;
+    }
+    /** Display title: optional host `title` overrides definition title from API. */
+    get _effectiveTitle() {
+        return (this.title != null && this.title !== '') ? this.title : (this._definitionTitle ?? '');
+    }
+    /** Run a callback after the current update cycle to avoid Lit "change-in-update" warning. */
+    _defer(fn) {
+        if (typeof requestAnimationFrame !== 'undefined') {
+            requestAnimationFrame(fn);
+        }
+        else {
+            setTimeout(fn, 0);
+        }
+    }
+    _getEffectiveParams() {
+        const dashboardParams = this._dashboardParams;
+        const widgetParams = this.dataParams ?? {};
+        let widgetFilterParams = {};
+        if (this._hideFilter) {
+            for (const f of this._widgetFilters) {
+                if (f.default_value !== undefined && f.default_value !== null) {
+                    widgetFilterParams[f.param_name] = f.default_value;
+                }
+            }
+        }
+        else if (this._widgetFilters.length > 0) {
+            for (const f of this._widgetFilters) {
+                const setByUser = f.param_name in this._widgetFilterParams;
+                widgetFilterParams[f.param_name] = setByUser
+                    ? (this._widgetFilterParams[f.param_name] ?? '')
+                    : (f.default_value ?? '');
+            }
+        }
+        else {
+            widgetFilterParams = { ...this._widgetFilterParams };
+        }
+        const out = { ...widgetFilterParams, ...widgetParams };
+        if (Object.keys(dashboardParams).length > 0) {
+            out.dashboard_params = dashboardParams;
+        }
+        return out;
+    }
+    async _loadData() {
+        if (this.lazy && !this._viewportVisible)
+            return;
+        const dataUrl = this._getEffectiveDataUrl();
+        if (!dataUrl) {
+            this._error = null;
+            this._loading = false;
+            this._renderChart();
+            return;
+        }
+        const gen = ++this._loadGeneration;
+        this._loading = true;
+        this._error = null;
+        try {
+            const useWidgetApi = Boolean(this.apiUrl && this.widgetId);
+            if (useWidgetApi) {
+                let params;
+                if (this._widgetFilters.length === 0) {
+                    const def = this.initialDefinition ?? (await fetchWidgetDefinition(this.apiUrl, this.widgetId));
+                    this._definitionTitle = def.title ?? '';
+                    this._widgetFilters = def.filters ?? [];
+                    this._hideFilter = def.hide_filter ?? false;
+                    const defaultParams = {};
+                    for (const f of (def.filters ?? [])) {
+                        if (f.default_value !== undefined && f.default_value !== null) {
+                            defaultParams[f.param_name] = f.default_value;
+                        }
+                    }
+                    this._widgetFilterParams = { ...defaultParams, ...this._widgetFilterParams };
+                    this._ignoreNextFilterChange = true;
+                    params = { ...defaultParams, ...(this.dataParams ?? {}) };
+                    if (Object.keys(this._dashboardParams).length > 0) {
+                        params.dashboard_params = this._dashboardParams;
+                    }
+                }
+                else {
+                    params = this._getEffectiveParams();
+                }
+                const res = await fetchWidgetData(dataUrl, params);
+                if (gen !== this._loadGeneration)
+                    return;
+                const data = res.data ?? [];
+                const meta = res.meta ?? { columns: {} };
+                const widgetData = res.widgetData ?? null;
+                const filters = res.filters;
+                const hideFilter = res.hide_filter;
+                this._defer(() => {
+                    if (gen !== this._loadGeneration)
+                        return;
+                    this.data = data;
+                    this.meta = meta;
+                    this._widgetData = widgetData;
+                    if (filters?.length)
+                        this._widgetFilters = filters;
+                    if (hideFilter !== undefined)
+                        this._hideFilter = hideFilter;
+                    this._loading = false;
+                    this._renderChart();
+                });
+            }
+            else {
+                const params = this._getEffectiveParams();
+                const res = await fetchAnalyticsData(dataUrl, params);
+                if (gen !== this._loadGeneration)
+                    return;
+                const data = res.data ?? [];
+                const meta = res.meta ?? { columns: {} };
+                this._defer(() => {
+                    if (gen !== this._loadGeneration)
+                        return;
+                    this.data = data;
+                    this.meta = meta;
+                    this._widgetData = null;
+                    this._loading = false;
+                    this._renderChart();
+                });
+            }
+        }
+        catch (e) {
+            const errMsg = e instanceof Error ? e.message : String(e);
+            this._defer(() => {
+                if (gen !== this._loadGeneration)
+                    return;
+                this._error = errMsg;
+                this.data = [];
+                this._widgetData = null;
+                this._loading = false;
+                this._renderChart();
+            });
+        }
+    }
+    _renderChart() {
+        const container = this.renderRoot.querySelector('.chart');
+        if (!container)
+            return;
+        const rows = this.data ?? [];
+        const meta = this.meta?.columns ?? {};
+        const baseOption = this.buildOption(rows, meta, this._widgetData ?? null);
+        const merged = {
+            ...baseOption,
+            ...this.options,
+        };
+        // Re-init if container changed (e.g. after loading/error view replaced DOM)
+        if (this._chart && this._chart.getDom() !== container) {
+            this._chart.dispose();
+            this._chart = null;
+        }
+        if (!this._chart) {
+            this._chart = echarts.init(container);
+        }
+        this._chart.setOption(merged, { notMerge: true });
+    }
+    /**
+     * Build ECharts option from API data. Override in subclasses (bar, line, pie).
+     * When widgetData has categories + series (e.g. from split_by), use those for bar/line.
+     * Default: generic grid + empty series.
+     */
+    buildOption(_data, _meta, _widgetData) {
+        return {
+            grid: { left: 48, right: 24, top: 24, bottom: 48 },
+            xAxis: { type: 'category', data: [] },
+            yAxis: { type: 'value' },
+            series: [],
+        };
+    }
+    _onWidgetFilterChange(e) {
+        this._widgetFilterParams = { ...(e.detail?.params ?? {}) };
+    }
+    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;
+        return html `
+      <div class="widget-with-toolbar">
+        ${this._effectiveTitle
+            ? html `<header class="widget-header"><h2 class="widget-title">${this._effectiveTitle}</h2></header>`
+            : ''}
+        <div class="widget-body">
+          ${this._error
+            ? html `<div class="error">${this._error}</div>`
+            : html `<div class="chart"></div>`}
+          ${this._loading
+            ? html `<div class="loading-overlay" aria-busy="true" aria-live="polite">
+                <div class="loading-spinner" aria-hidden="true"></div>
+              </div>`
+            : nothing}
+        </div>
+        ${hasWidgetFilters
+            ? html `
+              <analytics-widget-toolbar
+                .filters=${this._widgetFilters}
+                .values=${this._widgetFilterParams}
+                .activeCount=${widgetActiveCount}
+                @analytics-filter-change=${this._onWidgetFilterChange}
+              ></analytics-widget-toolbar>
+            `
+            : ''}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], BaseChartWidget.prototype, "title", void 0);
+__decorate([
+    property({ type: String, attribute: 'data-url' })
+], BaseChartWidget.prototype, "dataUrl", void 0);
+__decorate([
+    property({ type: String, attribute: 'widget-id' })
+], BaseChartWidget.prototype, "widgetId", void 0);
+__decorate([
+    property({ type: String, attribute: 'api-url' })
+], BaseChartWidget.prototype, "apiUrl", void 0);
+__decorate([
+    property({ type: Object })
+], BaseChartWidget.prototype, "dataParams", void 0);
+__decorate([
+    property({ type: Object })
+], BaseChartWidget.prototype, "dashboard", void 0);
+__decorate([
+    property({ type: Object })
+], BaseChartWidget.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], BaseChartWidget.prototype, "meta", void 0);
+__decorate([
+    property({ type: Object })
+], BaseChartWidget.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean })
+], BaseChartWidget.prototype, "lazy", void 0);
+__decorate([
+    property({ type: String, attribute: 'prefetch-margin' })
+], BaseChartWidget.prototype, "prefetchMargin", void 0);
+__decorate([
+    property({ type: Object })
+], BaseChartWidget.prototype, "initialDefinition", void 0);
+__decorate([
+    state()
+], BaseChartWidget.prototype, "_loading", void 0);
+__decorate([
+    state()
+], BaseChartWidget.prototype, "_error", void 0);
+__decorate([
+    state()
+], BaseChartWidget.prototype, "_dashboardParams", void 0);
+__decorate([
+    state()
+], BaseChartWidget.prototype, "_widgetFilters", void 0);
+__decorate([
+    state()
+], BaseChartWidget.prototype, "_widgetFilterParams", void 0);
+__decorate([
+    state()
+], BaseChartWidget.prototype, "_hideFilter", void 0);
+__decorate([
+    state()
+], BaseChartWidget.prototype, "_widgetData", void 0);
+__decorate([
+    state()
+], BaseChartWidget.prototype, "_viewportVisible", void 0);
+__decorate([
+    state()
+], BaseChartWidget.prototype, "_definitionTitle", void 0);

package/widgets/index.d.ts

@@ -1,2 +1,14 @@
-export declare const widget: () => string;
+export { BaseChartWidget } from './base-chart.js';
+export { BarChartWidget } from './bar-chart.js';
+export { LineChartWidget } from './line-chart.js';
+export { PieChartWidget } from './pie-chart.js';
+export { TableWidget } from './table.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 './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,eAAO,MAAM,MAAM,cAElB,CAAA"}
+{"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"}

package/widgets/index.js

@@ -1,3 +1,14 @@
-export const widget = () => {
-    return 'widget';
-};
+export { BaseChartWidget } from './base-chart.js';
+export { BarChartWidget } from './bar-chart.js';
+export { LineChartWidget } from './line-chart.js';
+export { PieChartWidget } from './pie-chart.js';
+export { TableWidget } from './table.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)
+import './bar-chart.js';
+import './line-chart.js';
+import './pie-chart.js';
+import './table.js';
+import './analytics-widget.js';
+import './analytics-report.js';

package/widgets/line-chart.d.ts

@@ -0,0 +1,13 @@
+import type { EChartsOption } from 'echarts/types/dist/option';
+import { BaseChartWidget } from './base-chart.js';
+/**
+ * Line chart widget (Apache ECharts). Use data-url or inline data.
+ * When widgetData is present (from API), use its categories + series so x-axis is correct (e.g. split_by).
+ * Otherwise first column = categories, remaining = series.
+ */
+export declare class LineChartWidget extends BaseChartWidget {
+    buildOption(data: Record<string, unknown>[], meta: Record<string, {
+        type?: string;
+    }>, widgetData?: unknown): EChartsOption;
+}
+//# sourceMappingURL=line-chart.d.ts.map

package/widgets/line-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/line-chart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAuBlD;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,eAAe;IACzC,WAAW,CAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EACvC,UAAU,CAAC,EAAE,OAAO,GACnB,aAAa;CAgDjB"}

package/widgets/line-chart.js

@@ -0,0 +1,71 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { BaseChartWidget } from './base-chart.js';
+const LEGEND_NAME_MAX_LEN = 25;
+function legendConfig(multipleSeries) {
+    if (!multipleSeries)
+        return undefined;
+    return {
+        type: 'scroll',
+        bottom: 8,
+        left: 'center',
+        formatter: (name) => name.length > LEGEND_NAME_MAX_LEN ? name.slice(0, LEGEND_NAME_MAX_LEN) + '…' : name,
+    };
+}
+/**
+ * Line chart widget (Apache ECharts). Use data-url or inline data.
+ * When widgetData is present (from API), use its categories + series so x-axis is correct (e.g. split_by).
+ * Otherwise first column = categories, remaining = series.
+ */
+let LineChartWidget = class LineChartWidget extends BaseChartWidget {
+    buildOption(data, meta, widgetData) {
+        const wd = widgetData;
+        // Prefer widgetData whenever API sent it (categories = x-axis, series = one per split) so x-axis is never wrong.
+        if (wd && typeof wd === 'object' && Array.isArray(wd.categories)) {
+            const categories = wd.categories.map(String);
+            const seriesList = Array.isArray(wd.series) ? wd.series : [];
+            const series = seriesList.map((s) => ({
+                name: String(s?.name ?? ''),
+                type: 'line',
+                data: Array.isArray(s?.data) ? s.data.map((v) => Number(v) || 0) : [],
+                stack: wd.stack ? 'total' : undefined,
+            }));
+            const multiSeries = series.length > 1;
+            return {
+                grid: { left: 48, right: 24, top: 24, bottom: multiSeries ? 80 : 48 },
+                tooltip: { trigger: 'axis' },
+                legend: legendConfig(multiSeries),
+                xAxis: { type: 'category', data: categories },
+                yAxis: { type: 'value' },
+                series,
+            };
+        }
+        const keys = data.length ? Object.keys(data[0]) : Object.keys(meta);
+        if (keys.length === 0) {
+            return { xAxis: { type: 'category', data: [] }, yAxis: { type: 'value' }, series: [] };
+        }
+        const categoryKey = keys[0];
+        const valueKeys = keys.slice(1).filter((k) => meta[k]?.type === 'number' || typeof (data[0]?.[k]) === 'number');
+        const categories = [...new Set(data.map((r) => String(r[categoryKey] ?? '')))];
+        const series = valueKeys.length
+            ? valueKeys.map((name) => ({
+                name,
+                type: 'line',
+                data: data.map((r) => Number(r[name]) || 0),
+            }))
+            : [{ name: categoryKey, type: 'line', data: data.map((r) => Number(r[categoryKey]) || 0) }];
+        const multiSeries = series.length > 1;
+        return {
+            grid: { left: 48, right: 24, top: 24, bottom: multiSeries ? 80 : 48 },
+            tooltip: { trigger: 'axis' },
+            legend: legendConfig(multiSeries),
+            xAxis: { type: 'category', data: categories },
+            yAxis: { type: 'value' },
+            series,
+        };
+    }
+};
+LineChartWidget = __decorate([
+    customElement('analytics-line-chart')
+], LineChartWidget);
+export { LineChartWidget };

package/widgets/pie-chart.d.ts

@@ -0,0 +1,13 @@
+import type { EChartsOption } from 'echarts/types/dist/option';
+import { BaseChartWidget } from './base-chart.js';
+/**
+ * Pie/Donut chart widget (Apache ECharts). Use data-url or inline data.
+ * When widgetData is present (from API), use its items so slice labels use backend formatters (e.g. status -> Pending, Approved).
+ * Otherwise: first column = name, second = value; or single column = count per category.
+ */
+export declare class PieChartWidget extends BaseChartWidget {
+    buildOption(data: Record<string, unknown>[], meta: Record<string, {
+        type?: string;
+    }>, widgetData?: unknown): EChartsOption;
+}
+//# sourceMappingURL=pie-chart.d.ts.map

package/widgets/pie-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/pie-chart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAQlD;;;;GAIG;AACH,qBACa,cAAe,SAAQ,eAAe;IACxC,WAAW,CAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EACvC,UAAU,CAAC,EAAE,OAAO,GACnB,aAAa;CA2CjB"}