@quicdata/analytics 0.0.2 → 0.0.4

package/widgets/base-chart.d.ts

@@ -0,0 +1,94 @@
+import { LitElement } from 'lit';
+import type { EChartsOption } from 'echarts/types/dist/option';
+import type { WidgetDefinitionSubset } from '../core/fetch-data.js';
+import type { DashboardContainer } from '../dashboard/dashboard-container.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 declare abstract class BaseChartWidget extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Optional title override. When unset, the widget uses the title from the API definition. */
+    title: string;
+    /** API URL to fetch data (e.g. /api/analytics/widgets/1/data). When widgetId + apiUrl are set, this is overridden by buildWidgetDataUrl(apiUrl, widgetId). */
+    dataUrl: string;
+    /** Widget id (used with apiUrl to build data URL: /widgets/{id}/data). */
+    widgetId: string;
+    /** API base URL (host + prefix, e.g. /api/analytics). Used with widgetId to build data URL. */
+    apiUrl: string;
+    /** Query params for data-url (e.g. date_from, date_to). Widget params override dashboard params for same key. */
+    dataParams: Record<string, string | number | boolean>;
+    /** When set, widget receives dashboard filter/refresh events and merges dashboard params into requests. */
+    dashboard: DashboardContainer | null;
+    /** Inline data instead of fetching (for designer preview). */
+    data: Record<string, unknown>[] | null;
+    /** Inline meta (columns) when using inline data. */
+    meta: {
+        columns: Record<string, {
+            type?: string;
+        }>;
+    };
+    /** ECharts option overrides merged on top of buildOption() result. */
+    options: Partial<EChartsOption>;
+    /** When true, only fetch/render when widget enters viewport; pause refresh when out of viewport. */
+    lazy: boolean;
+    /** CSS margin around viewport to trigger visibility earlier (e.g. '200px'). Used when lazy is true. */
+    prefetchMargin: string;
+    /** When set (e.g. by analytics-widget), definition is not fetched again; used to avoid duplicate definition requests. */
+    initialDefinition: WidgetDefinitionSubset | undefined;
+    private _loading;
+    private _error;
+    private _loadGeneration;
+    private _loadDataScheduled;
+    private _ignoreNextFilterChange;
+    private _dashboardParams;
+    private _widgetFilters;
+    private _widgetFilterParams;
+    private _hideFilter;
+    private _widgetData;
+    private _chart;
+    private _resizeObserver;
+    private _resizeDelayId;
+    private _resizeDebounceId;
+    private _dashboardEl;
+    /** Initial delay (ms) before entering debounce; each new resize signal cancels and restarts. */
+    private static readonly _RESIZE_DELAY_MS;
+    /** Debounce (ms) after delay; resize runs only when no signal for this long. */
+    private static readonly _RESIZE_DEBOUNCE_MS;
+    private _viewportVisible;
+    /** Title from widget definition (API). Optional `title` attribute overrides this. */
+    private _definitionTitle;
+    private _hasLoadedOnce;
+    private _viewportUnobserve;
+    constructor();
+    private _boundOnDashboardFilterChange;
+    private _boundOnDashboardRefresh;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _attachDashboard;
+    private _detachDashboard;
+    firstUpdated(): void;
+    private _getEffectiveDataUrl;
+    /** Display title: optional host `title` overrides definition title from API. */
+    private get _effectiveTitle();
+    /** Run a callback after the current update cycle to avoid Lit "change-in-update" warning. */
+    private _defer;
+    private _getEffectiveParams;
+    private _loadData;
+    private _renderChart;
+    /**
+     * 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: Record<string, unknown>[], _meta: Record<string, {
+        type?: string;
+    }>, _widgetData?: unknown): EChartsOption;
+    private _onWidgetFilterChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=base-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,535 @@
+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;
+    }
+  `; }
+    /** Initial delay (ms) before entering debounce; each new resize signal cancels and restarts. */
+    static { this._RESIZE_DELAY_MS = 300; }
+    /** Debounce (ms) after delay; resize runs only when no signal for this long. */
+    static { this._RESIZE_DEBOUNCE_MS = 300; }
+    constructor() {
+        super();
+        this._loadGeneration = 0;
+        this._loadDataScheduled = false;
+        this._ignoreNextFilterChange = false;
+        this._chart = null;
+        this._resizeObserver = null;
+        this._resizeDelayId = null;
+        this._resizeDebounceId = null;
+        this._dashboardEl = 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._resizeDebounceId != null) {
+            clearTimeout(this._resizeDebounceId);
+            this._resizeDebounceId = 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._resizeDelayId != null)
+                    clearTimeout(this._resizeDelayId);
+                if (this._resizeDebounceId != null)
+                    clearTimeout(this._resizeDebounceId);
+                this._resizeDelayId = setTimeout(() => {
+                    this._resizeDelayId = null;
+                    this._resizeDebounceId = setTimeout(() => {
+                        this._resizeDebounceId = null;
+                        this._chart?.resize();
+                    }, BaseChartWidget._RESIZE_DEBOUNCE_MS);
+                }, 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;
+        if (this.data != null && !this.widgetId) {
+            this._error = null;
+            this._loading = false;
+            this._renderChart();
+            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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +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"}

package/widgets/index.js

@@ -0,0 +1,14 @@
+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"}