@quicdata/analytics 0.0.2 → 0.0.4

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

package/widgets/analytics-widget.js

@@ -0,0 +1,230 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { fetchWidgetDefinition } from '../core/fetch-data.js';
+// Register inner widgets so they are defined when we render them
+import './bar-chart.js';
+import './line-chart.js';
+import './pie-chart.js';
+import './table.js';
+/** Map API chart_type to inner widget type. */
+const CHART_TYPE_TO_TAG = {
+    Bar: 'analytics-bar-chart',
+    BarHorizontal: 'analytics-bar-chart',
+    Line: 'analytics-line-chart',
+    Pie: 'analytics-pie-chart',
+    Donut: 'analytics-pie-chart',
+    Number: 'analytics-table', // KPI: fallback to table for now
+    Table: 'analytics-table',
+};
+/**
+ * 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.
+ */
+let AnalyticsWidget = class AnalyticsWidget extends LitElement {
+    static { this.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 120px;
+    }
+    .widget-inner {
+      width: 100%;
+      height: 100%;
+      min-height: 120px;
+    }
+    .loading,
+    .error {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 120px;
+      padding: 1rem;
+      color: #6b7280;
+    }
+    .error {
+      color: #b91c1c;
+    }
+    .loading-spinner {
+      width: 2rem;
+      height: 2rem;
+      border: 2px solid #e5e7eb;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: analytics-widget-spin 0.7s linear infinite;
+    }
+    @keyframes analytics-widget-spin {
+      to { transform: rotate(360deg); }
+    }
+  `; }
+    constructor() {
+        super();
+        this.widgetId = '';
+        this.apiUrl = '';
+        this.title = '';
+        this.dataParams = {};
+        this.dashboard = null;
+        this.lazy = false;
+        this.prefetchMargin = '200px';
+        this._chartType = '';
+        this._definition = null;
+        this._loading = false;
+        this._error = null;
+    }
+    updated(changed) {
+        if (!this.apiUrl || !this.widgetId || this._loading)
+            return;
+        if (changed.has('widgetId') || changed.has('apiUrl')) {
+            this._chartType = '';
+            this._definition = null;
+            this._loadDefinition();
+        }
+        else if (!this._chartType) {
+            this._loadDefinition();
+        }
+    }
+    async _loadDefinition() {
+        if (!this.apiUrl || !this.widgetId || this._loading)
+            return;
+        this._loading = true;
+        this._error = null;
+        try {
+            const def = await fetchWidgetDefinition(this.apiUrl, this.widgetId);
+            this._chartType = def.chart_type;
+            this._definition = {
+                title: def.title,
+                filters: def.filters,
+                hide_filter: def.hide_filter,
+            };
+        }
+        catch (e) {
+            this._error = e instanceof Error ? e.message : String(e);
+            this._chartType = '';
+            this._definition = null;
+        }
+        finally {
+            this._loading = false;
+        }
+    }
+    get _innerTag() {
+        if (!this._chartType)
+            return '';
+        return CHART_TYPE_TO_TAG[this._chartType] ?? 'analytics-table';
+    }
+    _renderInnerWidget() {
+        const common = {
+            widgetId: this.widgetId,
+            apiUrl: this.apiUrl,
+            title: this.title,
+            dataParams: this.dataParams ?? {},
+            dashboard: this.dashboard,
+            lazy: this.lazy,
+            prefetchMargin: this.prefetchMargin || '200px',
+            initialDefinition: this._definition ?? undefined,
+        };
+        const tag = this._innerTag;
+        switch (tag) {
+            case 'analytics-bar-chart':
+                return html `<analytics-bar-chart
+          widget-id=${common.widgetId}
+          api-url=${common.apiUrl}
+          .title=${common.title}
+          .dataParams=${common.dataParams}
+          .dashboard=${common.dashboard}
+          .initialDefinition=${common.initialDefinition}
+          ?lazy=${common.lazy}
+          prefetch-margin=${common.prefetchMargin}
+        ></analytics-bar-chart>`;
+            case 'analytics-line-chart':
+                return html `<analytics-line-chart
+          widget-id=${common.widgetId}
+          api-url=${common.apiUrl}
+          .title=${common.title}
+          .dataParams=${common.dataParams}
+          .dashboard=${common.dashboard}
+          .initialDefinition=${common.initialDefinition}
+          ?lazy=${common.lazy}
+          prefetch-margin=${common.prefetchMargin}
+        ></analytics-line-chart>`;
+            case 'analytics-pie-chart':
+                return html `<analytics-pie-chart
+          widget-id=${common.widgetId}
+          api-url=${common.apiUrl}
+          .title=${common.title}
+          .dataParams=${common.dataParams}
+          .dashboard=${common.dashboard}
+          .initialDefinition=${common.initialDefinition}
+          ?lazy=${common.lazy}
+          prefetch-margin=${common.prefetchMargin}
+        ></analytics-pie-chart>`;
+            case 'analytics-table':
+                return html `<analytics-table
+          widget-id=${common.widgetId}
+          api-url=${common.apiUrl}
+          .title=${common.title}
+          .dataParams=${common.dataParams}
+          .dashboard=${common.dashboard}
+          .initialDefinition=${common.initialDefinition}
+          ?lazy=${common.lazy}
+          prefetch-margin=${common.prefetchMargin}
+        ></analytics-table>`;
+            default:
+                return nothing;
+        }
+    }
+    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._innerTag) {
+            return nothing;
+        }
+        return html `<div class="widget-inner">${this._renderInnerWidget()}</div>`;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'widget-id' })
+], AnalyticsWidget.prototype, "widgetId", void 0);
+__decorate([
+    property({ type: String, attribute: 'api-url' })
+], AnalyticsWidget.prototype, "apiUrl", void 0);
+__decorate([
+    property({ type: String })
+], AnalyticsWidget.prototype, "title", void 0);
+__decorate([
+    property({ type: Object })
+], AnalyticsWidget.prototype, "dataParams", void 0);
+__decorate([
+    property({ type: Object })
+], AnalyticsWidget.prototype, "dashboard", void 0);
+__decorate([
+    property({ type: Boolean })
+], AnalyticsWidget.prototype, "lazy", void 0);
+__decorate([
+    property({ type: String, attribute: 'prefetch-margin' })
+], AnalyticsWidget.prototype, "prefetchMargin", void 0);
+__decorate([
+    state()
+], AnalyticsWidget.prototype, "_chartType", void 0);
+__decorate([
+    state()
+], AnalyticsWidget.prototype, "_definition", void 0);
+__decorate([
+    state()
+], AnalyticsWidget.prototype, "_loading", void 0);
+__decorate([
+    state()
+], AnalyticsWidget.prototype, "_error", void 0);
+AnalyticsWidget = __decorate([
+    customElement('analytics-widget')
+], AnalyticsWidget);
+export { AnalyticsWidget };

package/widgets/bar-chart.d.ts

@@ -0,0 +1,13 @@
+import type { EChartsOption } from 'echarts/types/dist/option';
+import { BaseChartWidget } from './base-chart.js';
+/**
+ * Bar 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 BarChartWidget extends BaseChartWidget {
+    buildOption(data: Record<string, unknown>[], meta: Record<string, {
+        type?: string;
+    }>, widgetData?: unknown): EChartsOption;
+}
+//# sourceMappingURL=bar-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../../../libs/analytics/src/widgets/bar-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,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;CAsDjB"}

package/widgets/bar-chart.js

@@ -0,0 +1,77 @@
+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,
+    };
+}
+/**
+ * Bar 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 BarChartWidget = class BarChartWidget 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: 'bar',
+                data: Array.isArray(s?.data) ? s.data.map((v) => Number(v) || 0) : [],
+                stack: wd.stack ? 'total' : undefined,
+            }));
+            const multiSeries = series.length > 1;
+            const isHorizontal = wd.chartType === 'BarHorizontal';
+            return {
+                grid: {
+                    left: isHorizontal ? 120 : 48,
+                    right: 24,
+                    top: 24,
+                    bottom: multiSeries ? 80 : 48,
+                },
+                tooltip: { trigger: 'axis' },
+                legend: legendConfig(multiSeries),
+                xAxis: isHorizontal ? { type: 'value' } : { type: 'category', data: categories },
+                yAxis: isHorizontal ? { type: 'category', data: categories } : { 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: 'bar',
+                data: data.map((r) => Number(r[name]) || 0),
+            }))
+            : [{ name: categoryKey, type: 'bar', 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,
+        };
+    }
+};
+BarChartWidget = __decorate([
+    customElement('analytics-bar-chart')
+], BarChartWidget);
+export { BarChartWidget };