@acorex/modules 20.2.4-next.2 → 20.2.4-next.3

package/fesm2022/acorex-modules-report-management.mjs

@@ -3,26 +3,27 @@ import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPLockS
 import { AXPDomainModule, provideEntity } from '@acorex/platform/domain';
 import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, NgModule, computed, viewChild, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, input } from '@angular/core';
+import { InjectionToken, inject, Injectable, NgModule, computed, effect, signal, ChangeDetectionStrategy, Component, viewChild, ViewEncapsulation, input } from '@angular/core';
 import { ROUTES, ActivatedRoute, Router } from '@angular/router';
 import { AXPQueryService, AXPCommandService } from '@acorex/platform/runtime';
 import { AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER, getSystemActions, applySystemActionDefault } from '@acorex/platform/core';
 import * as i1 from '@acorex/platform/workflow';
 import { AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
 import { AXDataSource } from '@acorex/cdk/common';
-import * as i1$3 from '@acorex/core/translation';
+import * as i1$1 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXMDataSourceService } from '@acorex/modules/data-management';
 import * as i2 from '@acorex/platform/layout/builder';
 import { AXPWidgetsCatalog, AXPPageStatus, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
 import { AXMEntityCrudServiceImpl } from '@acorex/platform/layout/entity';
 import { AXPopupService } from '@acorex/components/popup';
-import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
-import { AXLocaleService } from '@acorex/core/locale';
 import * as i2$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i5 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXPDynamicFormComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutFooterComponent } from '@acorex/platform/layout/components';
@@ -30,13 +31,14 @@ import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase }
 import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
 import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@acorex/components/data-table';
-import { AXDataTableModule } from '@acorex/components/data-table';
-import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
+import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
+import { AXLocaleService } from '@acorex/core/locale';
+import { AXBarChartComponent } from '@acorex/charts/bar-chart';
 import { AXChartLegendComponent } from '@acorex/charts/chart-legend';
-import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import * as i5 from '@acorex/components/dropdown';
-import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
+import { AXLineChartComponent } from '@acorex/charts/line-chart';
+import * as i1$3 from '@acorex/components/data-table';
+import { AXDataTableModule } from '@acorex/components/data-table';
 
 const config = {
     i18n: 'report-management',
@@ -302,22 +304,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
-function AXPBarChartReportMapper(data, options) {
-    return data.map((item) => {
-        return {
-            id: item.id,
-            label: item[options.xField],
-            value: Array.isArray(options.yFields) ? item[options.yFields[0]] : item[options.yFields]
-        };
-    });
-}
 function AXPieChartReportMapper(data) {
     return Object.entries(data).map(([key, value]) => ({
         id: key,
         label: key,
-        value: value
+        value: value,
     }));
 }
+function AXBarChartReportMapper(data) {
+    return Object.entries(data).map(([key, value]) => ({
+        id: key,
+        label: key,
+        value: value,
+    }));
+}
+function AXLineChartReportMapper(data) {
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+        return [];
+    }
+    const dataPoints = entries.map(([key, value]) => ({
+        x: key,
+        y: value,
+    }));
+    return [
+        {
+            id: 'series-1',
+            label: 'Data Series',
+            tooltipLabel: 'Countries Info',
+            lineColor: '#d81159',
+            fillColor: '#d8115920',
+            data: dataPoints,
+        },
+    ];
+}
 
 class AXMReportDefinitionProvider {
     constructor() {
@@ -1224,7 +1244,7 @@ class AXMReportCreateRootWorkflowAction extends AXPWorkflowAction {
     }
     async execute(context) {
         //  const refId = context.getVariable<string>('options.refId');
-        const comp = await import('./acorex-modules-report-management-report-create-root.component-DAOMkt_F.mjs').then(m => m.AXPReportCreateRootComponent);
+        const comp = await import('./acorex-modules-report-management-report-create-root.component-L-7aG8op.mjs').then(m => m.AXPReportCreateRootComponent);
         this.popupService.open(comp, await this.translationService.translateAsync('report.create.title', { scope: 'report-management' }));
     }
 }
@@ -1498,8 +1518,12 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
     const executeReport = async () => {
         const report = store.reportDefinition();
         const layout = store.currentLayout();
-        if (!report || !layout)
+        if (!report || !layout) {
+            patchState(store, {
+                error: 'Report or layout not found',
+            });
             return;
+        }
         patchState(store, {
             status: AXPPageStatus.Submitting,
             error: null
@@ -1684,6 +1708,116 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
     }
 })));
 
+class AXPReportChartViewComponent {
+    constructor() {
+        //#region ----   Dependencies   ----
+        this.vm = inject(AXPReportViewerViewModel);
+        this.AXPPageStatus = AXPPageStatus;
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Current chart layout configuration
+         */
+        this.chartLayout = computed(() => {
+            const layout = this.vm.currentLayout();
+            return layout?.layout.type === 'chart' ? layout.layout : null;
+        }, ...(ngDevMode ? [{ debugName: "chartLayout" }] : []));
+        /**
+         * Chart configuration options
+         */
+        this.chartOptions = computed(() => {
+            const chartLayout = this.chartLayout();
+            return chartLayout?.options || null;
+        }, ...(ngDevMode ? [{ debugName: "chartOptions" }] : []));
+        /**
+         * Chart type for rendering
+         */
+        this.chartType = computed(() => {
+            const options = this.chartOptions();
+            return options?.chartType || 'bar';
+        }, ...(ngDevMode ? [{ debugName: "chartType" }] : []));
+        /**
+         * Data mapping configuration
+         */
+        this.dataMapping = computed(() => {
+            const options = this.chartOptions();
+            return options?.dataMapping || null;
+        }, ...(ngDevMode ? [{ debugName: "dataMapping" }] : []));
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Effect to fetch chart data when conditions are met
+         */
+        this.#fetchData = effect(() => {
+            if (this.vm.allowFetchData() && this.chartOptions()) {
+                this.vm.fetchData().then((data) => {
+                    const raw = ((data?.data).data ?? {});
+                    switch (this.chartType()) {
+                        case 'bar': {
+                            const v = AXBarChartReportMapper(raw);
+                            this.barChartData.set(v);
+                            break;
+                        }
+                        case 'doughnut': {
+                            const v = AXPieChartReportMapper(raw);
+                            this.donutChartData.set(v);
+                            break;
+                        }
+                        case 'line':
+                        default: {
+                            const v = AXLineChartReportMapper(raw);
+                            this.lineChartData.set(v);
+                            break;
+                        }
+                    }
+                });
+            }
+        }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : []));
+        this.legendOptions = signal({
+            mode: 'vertical',
+        }, ...(ngDevMode ? [{ debugName: "legendOptions" }] : []));
+        this.barChartData = signal([], ...(ngDevMode ? [{ debugName: "barChartData" }] : []));
+        this.barChartOptions = signal({}, ...(ngDevMode ? [{ debugName: "barChartOptions" }] : []));
+        this.donutChartData = signal([], ...(ngDevMode ? [{ debugName: "donutChartData" }] : []));
+        this.donutChartOptions = signal({
+            totalLabel: 'Total',
+            showTooltip: true,
+        }, ...(ngDevMode ? [{ debugName: "donutChartOptions" }] : []));
+        this.lineChartData = signal([], ...(ngDevMode ? [{ debugName: "lineChartData" }] : []));
+        this.lineChartOptions = signal({}, ...(ngDevMode ? [{ debugName: "lineChartOptions" }] : []));
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to fetch chart data when conditions are met
+     */
+    #fetchData;
+    //#endregion
+    //#region ----   Helper Methods   ----
+    /**
+     * Check if chart is ready to render
+     */
+    isChartReady() {
+        return !!(this.chartOptions() && this.dataMapping());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPReportChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPReportChartViewComponent, isStandalone: true, selector: "axp-report-chart-view", host: { classAttribute: "axp-report-chart-view ax-w-full ax-h-full ax-flex ax-flex-col" }, ngImport: i0, template: "<ng-container *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n      <div class=\"ax-spinner ax-spin ax-w-10 ax-h-10\"></div>\n      <div class=\"__loading-text ax-text-sm ax-opacity-70\">\n        {{ t('@report-management:features.report-viewer.loading.chart') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <div class=\"__error ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n      <div class=\"__error-icon ax-text-5xl ax-text-danger\">\n        <i class=\"fa-light fa-exclamation-triangle\"></i>\n      </div>\n      <div class=\"__error-content ax-max-w-lg ax-text-center\">\n        <h4 class=\"__error-title ax-text-xl ax-font-semibold ax-mb-3\">\n          {{ t('@report-management:features.report-viewer.error.title') | async }}\n        </h4>\n        <p class=\"__error-description ax-opacity-70 ax-leading-relaxed\">\n          {{ vm.error() || (t('@report-management:features.report-viewer.error.generic') | async) }}\n        </p>\n      </div>\n    </div>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <section\n      class=\"__chart-container ax-overflow-auto md:ax-overflow-hidden ax-rounded-2xl ax-border ax-h-full ax-flex ax-flex-col\"\n    >\n      @if (chartLayout()?.header) {\n        <header\n          class=\"__chart-header ax-p-4 md:ax-p-6 ax-border-b ax-flex ax-flex-col sm:ax-flex-row ax-gap-2 sm:ax-items-center sm:ax-justify-between\"\n        >\n          <h3 class=\"__chart-title ax-text-base md:ax-text-lg ax-font-semibold ax-truncate\">\n            {{ chartLayout()?.header?.title }}\n          </h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date ax-text-xs md:ax-text-sm ax-opacity-70 ax-font-medium ax-flex-shrink-0\">\n              {{ 'common.date.today' | translate | async }}\n            </div>\n          }\n        </header>\n      }\n\n      <div class=\"__chart-body ax-flex-1 ax-p-3 md:ax-p-6\">\n        <div\n          class=\"__chart-wrapper ax-h-full ax-items-center ax-flex ax-flex-col ax-gap-4 lg:ax-gap-6\"\n          [class]=\"\n            legendOptions().mode === 'horizontal'\n              ? 'ax-flex-col ax-gap-4'\n              : 'ax-flex-col lg:ax-flex-row ax-gap-4 lg:ax-gap-6'\n          \"\n        >\n          @switch (chartType()) {\n            @case ('bar') {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-bar-chart #barChart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n              </div>\n              <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"barChart\"></ax-chart-legend>\n              </div>\n            }\n            @case ('doughnut') {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-donut-chart #donutChart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"donutChart\"></ax-chart-legend>\n              </div>\n            }\n            @default {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-line-chart #lineChart [data]=\"lineChartData()\" [options]=\"lineChartOptions()\"></ax-line-chart>\n              </div>\n              <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"lineChart\"></ax-chart-legend>\n              </div>\n            }\n          }\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <footer class=\"__chart-footer ax-p-4 md:ax-p-6 ax-border-t\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </footer>\n      }\n    </section>\n  } @else {\n    <!-- No Configuration State -->\n    <div class=\"__no-config ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n      <div class=\"__no-config-icon ax-w-16 ax-h-16 ax-rounded-full ax-flex ax-items-center ax-justify-center\">\n        <i class=\"fa-light fa-chart-line ax-text-2xl ax-opacity-60\"></i>\n      </div>\n      <div class=\"__no-config-content ax-max-w-lg ax-text-center\">\n        <h4 class=\"__no-config-title ax-text-xl ax-font-semibold ax-mb-3\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.title') | async }}\n        </h4>\n        <p class=\"__no-config-description ax-opacity-70 ax-leading-relaxed\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.description') | async }}\n        </p>\n      </div>\n    </div>\n  }\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }, { kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }, { kind: "component", type: AXLineChartComponent, selector: "ax-line-chart", inputs: ["data", "options"], outputs: ["pointClick"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPReportChartViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-chart-view', imports: [
+                        CommonModule,
+                        AXTranslationModule,
+                        AXPLayoutBuilderModule,
+                        AXBarChartComponent,
+                        AXDonutChartComponent,
+                        AXLineChartComponent,
+                        AXChartLegendComponent,
+                    ], host: {
+                        class: 'axp-report-chart-view ax-w-full ax-h-full ax-flex ax-flex-col',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n      <div class=\"ax-spinner ax-spin ax-w-10 ax-h-10\"></div>\n      <div class=\"__loading-text ax-text-sm ax-opacity-70\">\n        {{ t('@report-management:features.report-viewer.loading.chart') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <div class=\"__error ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n      <div class=\"__error-icon ax-text-5xl ax-text-danger\">\n        <i class=\"fa-light fa-exclamation-triangle\"></i>\n      </div>\n      <div class=\"__error-content ax-max-w-lg ax-text-center\">\n        <h4 class=\"__error-title ax-text-xl ax-font-semibold ax-mb-3\">\n          {{ t('@report-management:features.report-viewer.error.title') | async }}\n        </h4>\n        <p class=\"__error-description ax-opacity-70 ax-leading-relaxed\">\n          {{ vm.error() || (t('@report-management:features.report-viewer.error.generic') | async) }}\n        </p>\n      </div>\n    </div>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <section\n      class=\"__chart-container ax-overflow-auto md:ax-overflow-hidden ax-rounded-2xl ax-border ax-h-full ax-flex ax-flex-col\"\n    >\n      @if (chartLayout()?.header) {\n        <header\n          class=\"__chart-header ax-p-4 md:ax-p-6 ax-border-b ax-flex ax-flex-col sm:ax-flex-row ax-gap-2 sm:ax-items-center sm:ax-justify-between\"\n        >\n          <h3 class=\"__chart-title ax-text-base md:ax-text-lg ax-font-semibold ax-truncate\">\n            {{ chartLayout()?.header?.title }}\n          </h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date ax-text-xs md:ax-text-sm ax-opacity-70 ax-font-medium ax-flex-shrink-0\">\n              {{ 'common.date.today' | translate | async }}\n            </div>\n          }\n        </header>\n      }\n\n      <div class=\"__chart-body ax-flex-1 ax-p-3 md:ax-p-6\">\n        <div\n          class=\"__chart-wrapper ax-h-full ax-items-center ax-flex ax-flex-col ax-gap-4 lg:ax-gap-6\"\n          [class]=\"\n            legendOptions().mode === 'horizontal'\n              ? 'ax-flex-col ax-gap-4'\n              : 'ax-flex-col lg:ax-flex-row ax-gap-4 lg:ax-gap-6'\n          \"\n        >\n          @switch (chartType()) {\n            @case ('bar') {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-bar-chart #barChart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n              </div>\n              <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"barChart\"></ax-chart-legend>\n              </div>\n            }\n            @case ('doughnut') {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-donut-chart #donutChart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"donutChart\"></ax-chart-legend>\n              </div>\n            }\n            @default {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-line-chart #lineChart [data]=\"lineChartData()\" [options]=\"lineChartOptions()\"></ax-line-chart>\n              </div>\n              <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"lineChart\"></ax-chart-legend>\n              </div>\n            }\n          }\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <footer class=\"__chart-footer ax-p-4 md:ax-p-6 ax-border-t\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </footer>\n      }\n    </section>\n  } @else {\n    <!-- No Configuration State -->\n    <div class=\"__no-config ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n      <div class=\"__no-config-icon ax-w-16 ax-h-16 ax-rounded-full ax-flex ax-items-center ax-justify-center\">\n        <i class=\"fa-light fa-chart-line ax-text-2xl ax-opacity-60\"></i>\n      </div>\n      <div class=\"__no-config-content ax-max-w-lg ax-text-center\">\n        <h4 class=\"__no-config-title ax-text-xl ax-font-semibold ax-mb-3\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.title') | async }}\n        </h4>\n        <p class=\"__no-config-description ax-opacity-70 ax-leading-relaxed\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.description') | async }}\n        </p>\n      </div>\n    </div>\n  }\n</ng-container>\n" }]
+        }] });
+
 class AXPReportTableViewComponent {
     constructor() {
         //#region ----   Dependencies   ----
@@ -1788,7 +1922,7 @@ class AXPReportTableViewComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPReportTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPReportTableViewComponent, isStandalone: true, selector: "axp-report-table-view", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-data-table\n  #grid\n  [dataSource]=\"dataSource\"\n  [paging]=\"true\"\n  (onRowDbClick)=\"handleDbRowClick($event)\"\n  class=\"ax-flex-1\"\n>\n  <!-- Dynamic columns based on configuration -->\n  <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n  @if (vm.canSelectRows()) {\n    <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n  }\n  @for (column of columns(); track column.field) {\n    @if (column.visible) {\n      <axp-widget-column-renderer\n        [customWidth]=\"column.width + 'px'\"\n        [caption]=\"(column.title | translate | async)!\"\n        [node]=\"column.widget!\"\n      ></axp-widget-column-renderer>\n    }\n  }\n  @if (hasPrimaryRowAction()) {\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'100px'\"\n      [items]=\"primaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-command-column>\n  }\n  @if (hasSecondaryRowAction()) {\n    <ax-dropdown-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      [items]=\"secondaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-dropdown-command-column>\n  }\n</ax-data-table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$1.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPReportTableViewComponent, isStandalone: true, selector: "axp-report-table-view", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-data-table\n  #grid\n  [dataSource]=\"dataSource\"\n  [paging]=\"true\"\n  (onRowDbClick)=\"handleDbRowClick($event)\"\n  class=\"ax-flex-1\"\n>\n  <!-- Dynamic columns based on configuration -->\n  <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n  @if (vm.canSelectRows()) {\n    <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n  }\n  @for (column of columns(); track column.field) {\n    @if (column.visible) {\n      <axp-widget-column-renderer\n        [customWidth]=\"column.width + 'px'\"\n        [caption]=\"(column.title | translate | async)!\"\n        [node]=\"column.widget!\"\n      ></axp-widget-column-renderer>\n    }\n  }\n  @if (hasPrimaryRowAction()) {\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'100px'\"\n      [items]=\"primaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-command-column>\n  }\n  @if (hasSecondaryRowAction()) {\n    <ax-dropdown-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      [items]=\"secondaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-dropdown-command-column>\n  }\n</ax-data-table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$3.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$3.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$3.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$3.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$3.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPReportTableViewComponent, decorators: [{
             type: Component,
@@ -1802,127 +1936,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-data-table\n  #grid\n  [dataSource]=\"dataSource\"\n  [paging]=\"true\"\n  (onRowDbClick)=\"handleDbRowClick($event)\"\n  class=\"ax-flex-1\"\n>\n  <!-- Dynamic columns based on configuration -->\n  <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n  @if (vm.canSelectRows()) {\n    <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n  }\n  @for (column of columns(); track column.field) {\n    @if (column.visible) {\n      <axp-widget-column-renderer\n        [customWidth]=\"column.width + 'px'\"\n        [caption]=\"(column.title | translate | async)!\"\n        [node]=\"column.widget!\"\n      ></axp-widget-column-renderer>\n    }\n  }\n  @if (hasPrimaryRowAction()) {\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'100px'\"\n      [items]=\"primaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-command-column>\n  }\n  @if (hasSecondaryRowAction()) {\n    <ax-dropdown-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      [items]=\"secondaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-dropdown-command-column>\n  }\n</ax-data-table>\n" }]
         }] });
 
-class AXPReportChartViewComponent {
-    constructor() {
-        //#region ----   Dependencies   ----
-        this.vm = inject(AXPReportViewerViewModel);
-        this.AXPPageStatus = AXPPageStatus;
-        //#endregion
-        //#region ----   Computed Properties   ----
-        /**
-         * Current chart layout configuration
-         */
-        this.chartLayout = computed(() => {
-            const layout = this.vm.currentLayout();
-            return layout?.layout.type === 'chart'
-                ? layout.layout
-                : null;
-        }, ...(ngDevMode ? [{ debugName: "chartLayout" }] : []));
-        /**
-         * Chart configuration options
-         */
-        this.chartOptions = computed(() => {
-            const chartLayout = this.chartLayout();
-            return chartLayout?.options || null;
-        }, ...(ngDevMode ? [{ debugName: "chartOptions" }] : []));
-        /**
-         * Chart type for rendering
-         */
-        this.chartType = computed(() => {
-            const options = this.chartOptions();
-            return options?.chartType || 'bar';
-        }, ...(ngDevMode ? [{ debugName: "chartType" }] : []));
-        /**
-         * Data mapping configuration
-         */
-        this.dataMapping = computed(() => {
-            const options = this.chartOptions();
-            return options?.dataMapping || null;
-        }, ...(ngDevMode ? [{ debugName: "dataMapping" }] : []));
-        //#endregion
-        //#region ----   Effects   ----
-        /**
-         * Effect to handle data fetching when chart configuration changes
-         */
-        this.#fetchData = effect(() => {
-            if (this.vm.allowFetchData() && this.chartOptions()) {
-                // TODO: Implement chart data fetching
-                console.log('Chart data fetch triggered', {
-                    chartType: this.chartType(),
-                    dataMapping: this.dataMapping()
-                });
-                this.vm.fetchData().then((data) => {
-                    const donutChartData = AXPieChartReportMapper((data?.data).data ?? {});
-                    this.donutChartData.set(donutChartData);
-                    console.log('donutChartData', donutChartData);
-                });
-            }
-        }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : []));
-        this.donutChartData = signal([], ...(ngDevMode ? [{ debugName: "donutChartData" }] : []));
-        this.donutChartOptions = signal({
-            totalLabel: 'Total',
-            showTooltip: true
-        }, ...(ngDevMode ? [{ debugName: "donutChartOptions" }] : []));
-        this.legendOptions = signal({
-            mode: 'horizontal',
-        }, ...(ngDevMode ? [{ debugName: "legendOptions" }] : []));
-    }
-    //#endregion
-    //#region ----   Effects   ----
-    /**
-     * Effect to handle data fetching when chart configuration changes
-     */
-    #fetchData;
-    //#endregion
-    //#region ----   Event Handlers   ----
-    /**
-     * Handle chart click events
-     */
-    handleChartClick(event) {
-        // TODO: Implement chart click handling
-        console.log('Chart clicked:', event);
-    }
-    /**
-     * Handle chart data point selection
-     */
-    handleDataPointSelect(event) {
-        // TODO: Implement data point selection
-        console.log('Data point selected:', event);
-    }
-    //#endregion
-    //#region ----   Helper Methods   ----
-    /**
-     * Check if chart is ready to render
-     */
-    isChartReady() {
-        return !!(this.chartOptions() && this.dataMapping());
-    }
-    /**
- * Get chart configuration for rendering
- */
-    getChartConfig() {
-        // TODO: Transform AXPReportChartOptions to chart library format
-        return {
-            type: this.chartType(),
-            options: this.chartOptions(),
-            dataMapping: this.dataMapping()
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPReportChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPReportChartViewComponent, isStandalone: true, selector: "axp-report-chart-view", ngImport: i0, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading\">\n      <div\n        class=\"ax-spinner ax-spin ax-border-4 ax-border-gray-200 ax-border-t-primary ax-rounded-full ax-w-12 ax-h-12\"\n      ></div>\n      <div class=\"__loading-text\">\n        {{ t('@report-management:features.report-viewer.loading.chart') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <div class=\"__error\">\n      <div class=\"__error-icon\">\n        <i class=\"fa-light fa-exclamation-triangle\"></i>\n      </div>\n      <div class=\"__error-content\">\n        <h4 class=\"__error-title\">\n          {{ t('@report-management:features.report-viewer.error.title') | async }}\n        </h4>\n        <p class=\"__error-description\">\n          {{ vm.error() || t('@report-management:features.report-viewer.error.generic') | async }}\n        </p>\n      </div>\n    </div>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <div class=\"__chart-container\">\n      @if (chartLayout()?.header) {\n        <div class=\"__chart-header\">\n          <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date\">{{ 'common.date.today' | translate | async }}</div>\n          }\n        </div>\n      }\n\n      <div class=\"__chart-body\">\n        <!-- Chart component will be rendered here -->\n        <div class=\"__chart-placeholder\">\n          <div class=\"__placeholder-content\">\n            <div\n              class=\"ax-flex ax-flex-wrap ax-items-center ax-justify-center ax-gap-10\"\n              [class]=\"legendOptions().mode === 'horizontal' ? 'ax-flex-col' : 'ax-flex-row'\"\n            >\n              <!-- Chart Area -->\n              <div class=\"ax-flex-0 ax-size-96\">\n                <ax-donut-chart #chart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              <!-- Legend Area -->\n              @if (donutChartData().length > 0) {\n                <div>\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <div class=\"__chart-footer\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- No Configuration State -->\n    <div class=\"__no-config\">\n      <div class=\"__no-config-icon\">\n        <i class=\"fa-light fa-chart-line\"></i>\n      </div>\n      <div class=\"__no-config-content\">\n        <h4 class=\"__no-config-title\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.title') | async }}\n        </h4>\n        <p class=\"__no-config-description\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.description') | async }}\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-chart-view .__loading .__loading-text{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body{flex:1 1 0%;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:3.75rem;line-height:1;color:rgba(var(--ax-sys-color-primary-500),.2)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:28rem}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__error .__error-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content{max-width:28rem}.axp-report-chart-view .__error .__error-content .__error-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content .__error-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__no-config .__no-config-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config .__no-config-content{max-width:28rem}.axp-report-chart-view .__no-config .__no-config-content .__no-config-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__no-config .__no-config-content .__no-config-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPReportChartViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'axp-report-chart-view', standalone: true, imports: [
-                        CommonModule,
-                        AXDecoratorModule,
-                        AXTranslationModule,
-                        AXPLayoutBuilderModule,
-                        AXDonutChartComponent,
-                        AXChartLegendComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading\">\n      <div\n        class=\"ax-spinner ax-spin ax-border-4 ax-border-gray-200 ax-border-t-primary ax-rounded-full ax-w-12 ax-h-12\"\n      ></div>\n      <div class=\"__loading-text\">\n        {{ t('@report-management:features.report-viewer.loading.chart') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <div class=\"__error\">\n      <div class=\"__error-icon\">\n        <i class=\"fa-light fa-exclamation-triangle\"></i>\n      </div>\n      <div class=\"__error-content\">\n        <h4 class=\"__error-title\">\n          {{ t('@report-management:features.report-viewer.error.title') | async }}\n        </h4>\n        <p class=\"__error-description\">\n          {{ vm.error() || t('@report-management:features.report-viewer.error.generic') | async }}\n        </p>\n      </div>\n    </div>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <div class=\"__chart-container\">\n      @if (chartLayout()?.header) {\n        <div class=\"__chart-header\">\n          <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date\">{{ 'common.date.today' | translate | async }}</div>\n          }\n        </div>\n      }\n\n      <div class=\"__chart-body\">\n        <!-- Chart component will be rendered here -->\n        <div class=\"__chart-placeholder\">\n          <div class=\"__placeholder-content\">\n            <div\n              class=\"ax-flex ax-flex-wrap ax-items-center ax-justify-center ax-gap-10\"\n              [class]=\"legendOptions().mode === 'horizontal' ? 'ax-flex-col' : 'ax-flex-row'\"\n            >\n              <!-- Chart Area -->\n              <div class=\"ax-flex-0 ax-size-96\">\n                <ax-donut-chart #chart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              <!-- Legend Area -->\n              @if (donutChartData().length > 0) {\n                <div>\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <div class=\"__chart-footer\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- No Configuration State -->\n    <div class=\"__no-config\">\n      <div class=\"__no-config-icon\">\n        <i class=\"fa-light fa-chart-line\"></i>\n      </div>\n      <div class=\"__no-config-content\">\n        <h4 class=\"__no-config-title\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.title') | async }}\n        </h4>\n        <p class=\"__no-config-description\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.description') | async }}\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-chart-view .__loading .__loading-text{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body{flex:1 1 0%;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:3.75rem;line-height:1;color:rgba(var(--ax-sys-color-primary-500),.2)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:28rem}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__error .__error-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content{max-width:28rem}.axp-report-chart-view .__error .__error-content .__error-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content .__error-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__no-config .__no-config-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config .__no-config-content{max-width:28rem}.axp-report-chart-view .__no-config .__no-config-content .__no-config-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__no-config .__no-config-content .__no-config-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}\n"] }]
-        }] });
-
 class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
     constructor() {
         super(...arguments);
@@ -1930,7 +1943,6 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
         this.layoutService = inject(AXPLayoutThemeService);
         this.route = inject(ActivatedRoute);
         this.router = inject(Router);
-        this.reportDefinitionService = inject(AXPReportDefinitionService);
         this.unsubscriber = inject(AXUnsubscriber);
         //#endregion
         //#region ----   Inputs   ----
@@ -1952,16 +1964,16 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
             positions: {
                 default: { colSpan: 12 },
                 md: { colSpan: 6 },
-                lg: { colSpan: 12 }
-            }
+                lg: { colSpan: 12 },
+            },
         });
         this.compactLayout = () => ({
             positions: {
                 default: { colSpan: 12 },
                 sm: { colSpan: 6 },
                 md: { colSpan: 4 },
-                lg: { colSpan: 3 }
-            }
+                lg: { colSpan: 3 },
+            },
         });
     }
     //#endregion
@@ -1970,14 +1982,15 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
         await super.ngOnInit();
         // Subscribe to route parameter changes for dynamic report loading
         this.unsubscriber.takeUntilDestroy(this.route.paramMap).subscribe(async (params) => {
-            const reportId = params.get('reportId') ||
-                this.route.snapshot.queryParamMap.get('reportId') ||
-                this.reportId();
+            const reportId = params.get('reportId') || this.route.snapshot.queryParamMap.get('reportId') || this.reportId();
             if (reportId) {
                 await this.loadReportAndRefresh(reportId);
             }
         });
     }
+    /**
+     * Effect to handle data fetching when chart configuration changes
+     */
     //#endregion
     //#region ----   Helper Methods   ----
     async loadReportAndRefresh(reportId) {
@@ -2035,7 +2048,7 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
                 command: {
                     name: 'navigate-to-reports',
                 },
-            }
+            },
         ];
         // Add categories path
         const categoriesPath = this.vm.categoriesPath();
@@ -2049,7 +2062,7 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
                     command: {
                         name: 'navigate-to-category',
                         options: {
-                            path: [...urlParts]
+                            path: [...urlParts],
                         },
                     },
                 });
@@ -2173,9 +2186,9 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: AXPReportViewerPageComponent,
             },
-        ], viewQueries: [{ propertyName: "filtersForm", first: true, predicate: ["filtersForm"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n  <axp-layout-start-side>\n    <axp-layout-header>\n      <axp-layout-title>\n        {{ t('@report-management:features.report-viewer.filters.title') | async }}\n      </axp-layout-title>\n    </axp-layout-header>\n    <axp-layout-content>\n      <div class=\"__filters-container\">\n        <axp-dynamic-form #filtersForm [formDefinition]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\"\n          [layoutConfig]=\"defaultLayout()\" [layoutStyle]=\"'compact'\" (contextChange)=\"handleFiltersChange($event)\"\n          (contextInitiated)=\"handleFiltersInitiated($event)\">\n        </axp-dynamic-form>\n      </div>\n    </axp-layout-content>\n    <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n      <ax-button [class.ax-sm]=\"layoutService.isSmall()\" class=\"ax-w-full\"\n        [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts()) {\n      <ax-button [text]=\"vm.currentLayout()?.title\">\n        <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n        <ax-dropdown-panel>\n          @for (layout of vm.availableLayouts(); track layout.id) {\n          <ax-button-item-list>\n            <ax-button-item [text]=\"layout.title\" [selected]=\"vm.currentLayout()?.id === layout.id\"\n              (onClick)=\"vm.switchLayout(layout.id)\">\n              <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n            </ax-button-item>\n          </ax-button-item-list>\n          }\n        </ax-dropdown-panel>\n      </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (!vm.reportDefinition()) {\n    <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Report Display Area -->\n<ng-template #reportDisplay>\n  @if (vm.isTableLayout()) {\n  <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n  <axp-report-chart-view> </axp-report-chart-view>\n  }\n</ng-template>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: 
-                // 
-                AXPDynamicFormComponent, selector: "axp-dynamic-form", inputs: ["formDefinition", "context", "layoutStyle", "layoutConfig"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPReportTableViewComponent, selector: "axp-report-table-view" }, { kind: "component", type: AXPReportChartViewComponent, selector: "axp-report-chart-view" }, { kind: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer, axp-layout-page-footer" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "filtersForm", first: true, predicate: ["filtersForm"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>\n          {{ t('@report-management:features.report-viewer.filters.title') | async }}\n        </axp-layout-title>\n      </axp-layout-header>\n      <axp-layout-content>\n        <div class=\"__filters-container\">\n          <axp-dynamic-form\n            #filtersForm\n            [formDefinition]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [layoutConfig]=\"defaultLayout()\"\n            [layoutStyle]=\"'compact'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-dynamic-form>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          class=\"ax-w-full\"\n          [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"execute({ name: 'execute-report' })\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-play\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </axp-layout-footer>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts()) {\n        <ax-button [text]=\"vm.currentLayout()?.title\">\n          <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n          <ax-dropdown-panel>\n            @for (layout of vm.availableLayouts(); track layout.id) {\n              <ax-button-item-list>\n                <ax-button-item\n                  [text]=\"layout.title\"\n                  [selected]=\"vm.currentLayout()?.id === layout.id\"\n                  (onClick)=\"vm.switchLayout(layout.id)\"\n                >\n                  <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            }\n          </ax-dropdown-panel>\n        </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (!vm.reportDefinition()) {\n      <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Report Display Area -->\n<ng-template #reportDisplay>\n  @if (vm.isTableLayout()) {\n    <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n    <axp-report-chart-view> </axp-report-chart-view>\n  }\n</ng-template>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-actions\">\n        <ax-button\n          look=\"outline\"\n          color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: 
+                //
+                AXPDynamicFormComponent, selector: "axp-dynamic-form", inputs: ["formDefinition", "context", "layoutStyle", "layoutConfig"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPReportTableViewComponent, selector: "axp-report-table-view" }, { kind: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer, axp-layout-page-footer" }, { kind: "component", type: AXPReportChartViewComponent, selector: "axp-report-chart-view" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPReportViewerPageComponent, decorators: [{
             type: Component,
@@ -2187,15 +2200,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         AXTranslationModule,
                         AXDropdownButtonModule,
                         AXDropdownModule,
-                        // 
+                        //
                         AXPDynamicFormComponent,
                         AXPPageLayoutComponent,
                         AXPThemeLayoutStartSideComponent,
                         AXPThemeLayoutHeaderComponent,
                         AXPThemeLayoutBlockComponent,
                         AXPReportTableViewComponent,
+                        AXPThemeLayoutFooterComponent,
                         AXPReportChartViewComponent,
-                        AXPThemeLayoutFooterComponent
                     ], providers: [
                         AXUnsubscriber,
                         AXPReportViewerViewModel,
@@ -2203,7 +2216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                             provide: AXPPageLayoutBase,
                             useExisting: AXPReportViewerPageComponent,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-report-viewer-page' }, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n  <axp-layout-start-side>\n    <axp-layout-header>\n      <axp-layout-title>\n        {{ t('@report-management:features.report-viewer.filters.title') | async }}\n      </axp-layout-title>\n    </axp-layout-header>\n    <axp-layout-content>\n      <div class=\"__filters-container\">\n        <axp-dynamic-form #filtersForm [formDefinition]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\"\n          [layoutConfig]=\"defaultLayout()\" [layoutStyle]=\"'compact'\" (contextChange)=\"handleFiltersChange($event)\"\n          (contextInitiated)=\"handleFiltersInitiated($event)\">\n        </axp-dynamic-form>\n      </div>\n    </axp-layout-content>\n    <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n      <ax-button [class.ax-sm]=\"layoutService.isSmall()\" class=\"ax-w-full\"\n        [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts()) {\n      <ax-button [text]=\"vm.currentLayout()?.title\">\n        <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n        <ax-dropdown-panel>\n          @for (layout of vm.availableLayouts(); track layout.id) {\n          <ax-button-item-list>\n            <ax-button-item [text]=\"layout.title\" [selected]=\"vm.currentLayout()?.id === layout.id\"\n              (onClick)=\"vm.switchLayout(layout.id)\">\n              <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n            </ax-button-item>\n          </ax-button-item-list>\n          }\n        </ax-dropdown-panel>\n      </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (!vm.reportDefinition()) {\n    <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Report Display Area -->\n<ng-template #reportDisplay>\n  @if (vm.isTableLayout()) {\n  <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n  <axp-report-chart-view> </axp-report-chart-view>\n  }\n</ng-template>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-report-viewer-page' }, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>\n          {{ t('@report-management:features.report-viewer.filters.title') | async }}\n        </axp-layout-title>\n      </axp-layout-header>\n      <axp-layout-content>\n        <div class=\"__filters-container\">\n          <axp-dynamic-form\n            #filtersForm\n            [formDefinition]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [layoutConfig]=\"defaultLayout()\"\n            [layoutStyle]=\"'compact'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-dynamic-form>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          class=\"ax-w-full\"\n          [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"execute({ name: 'execute-report' })\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-play\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </axp-layout-footer>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts()) {\n        <ax-button [text]=\"vm.currentLayout()?.title\">\n          <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n          <ax-dropdown-panel>\n            @for (layout of vm.availableLayouts(); track layout.id) {\n              <ax-button-item-list>\n                <ax-button-item\n                  [text]=\"layout.title\"\n                  [selected]=\"vm.currentLayout()?.id === layout.id\"\n                  (onClick)=\"vm.switchLayout(layout.id)\"\n                >\n                  <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            }\n          </ax-dropdown-panel>\n        </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (!vm.reportDefinition()) {\n      <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Report Display Area -->\n<ng-template #reportDisplay>\n  @if (vm.isTableLayout()) {\n    <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n    <axp-report-chart-view> </axp-report-chart-view>\n  }\n</ng-template>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-actions\">\n        <ax-button\n          look=\"outline\"\n          color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"] }]
         }] });
 
 var reportViewerPage_component = /*#__PURE__*/Object.freeze({
@@ -2211,9 +2224,125 @@ var reportViewerPage_component = /*#__PURE__*/Object.freeze({
     AXPReportViewerPageComponent: AXPReportViewerPageComponent
 });
 
+class AXPReportBarChartViewComponent {
+    constructor() {
+        //#region ----   Dependencies   ----
+        this.vm = inject(AXPReportViewerViewModel);
+        this.AXPPageStatus = AXPPageStatus;
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Current chart layout configuration
+         */
+        this.chartLayout = computed(() => {
+            const layout = this.vm.currentLayout();
+            return layout?.layout.type === 'chart' ? layout.layout : null;
+        }, ...(ngDevMode ? [{ debugName: "chartLayout" }] : []));
+        /**
+         * Chart configuration options
+         */
+        this.chartOptions = computed(() => {
+            const chartLayout = this.chartLayout();
+            return chartLayout?.options || null;
+        }, ...(ngDevMode ? [{ debugName: "chartOptions" }] : []));
+        /**
+         * Chart type for rendering
+         */
+        this.chartType = computed(() => {
+            const options = this.chartOptions();
+            return options?.chartType || 'bar';
+        }, ...(ngDevMode ? [{ debugName: "chartType" }] : []));
+        /**
+         * Data mapping configuration
+         */
+        this.dataMapping = computed(() => {
+            const options = this.chartOptions();
+            return options?.dataMapping || null;
+        }, ...(ngDevMode ? [{ debugName: "dataMapping" }] : []));
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Effect to handle data fetching when chart configuration changes
+         */
+        this.#fetchData = effect(() => {
+            if (this.vm.allowFetchData() && this.chartOptions()) {
+                // TODO: Implement chart data fetching
+                console.log('Chart data fetch triggered', {
+                    chartType: this.chartType(),
+                    dataMapping: this.dataMapping(),
+                });
+                this.vm.fetchData().then((data) => {
+                    const barChartData = AXBarChartReportMapper((data?.data).data ?? {});
+                    this.barChartData.set(barChartData);
+                    console.log('barChartData', barChartData);
+                });
+            }
+        }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : []));
+        this.barChartData = signal([], ...(ngDevMode ? [{ debugName: "barChartData" }] : []));
+        this.barChartOptions = signal({}, ...(ngDevMode ? [{ debugName: "barChartOptions" }] : []));
+        this.legendOptions = signal({
+            mode: 'horizontal',
+        }, ...(ngDevMode ? [{ debugName: "legendOptions" }] : []));
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to handle data fetching when chart configuration changes
+     */
+    #fetchData;
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle chart click events
+     */
+    handleChartClick(event) {
+        // TODO: Implement chart click handling
+        console.log('Chart clicked:', event);
+    }
+    /**
+     * Handle chart data point selection
+     */
+    handleDataPointSelect(event) {
+        // TODO: Implement data point selection
+        console.log('Data point selected:', event);
+    }
+    //#endregion
+    //#region ----   Helper Methods   ----
+    /**
+     * Check if chart is ready to render
+     */
+    isChartReady() {
+        return !!(this.chartOptions() && this.dataMapping());
+    }
+    /**
+     * Get chart configuration for rendering
+     */
+    getChartConfig() {
+        // TODO: Transform AXPReportChartOptions to chart library format
+        return {
+            type: this.chartType(),
+            options: this.chartOptions(),
+            dataMapping: this.dataMapping(),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPReportBarChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPReportBarChartViewComponent, isStandalone: true, selector: "axp-report-bar-chart-view", ngImport: i0, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading\">\n      <div\n        class=\"ax-spinner ax-spin ax-border-4 ax-border-gray-200 ax-border-t-primary ax-rounded-full ax-w-12 ax-h-12\"\n      ></div>\n      <div class=\"__loading-text\">\n        {{ t('@report-management:features.report-viewer.loading.chart') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <div class=\"__error\">\n      <div class=\"__error-icon\">\n        <i class=\"fa-light fa-exclamation-triangle\"></i>\n      </div>\n      <div class=\"__error-content\">\n        <h4 class=\"__error-title\">\n          {{ t('@report-management:features.report-viewer.error.title') | async }}\n        </h4>\n        <p class=\"__error-description\">\n          {{ vm.error() || t('@report-management:features.report-viewer.error.generic') | async }}\n        </p>\n      </div>\n    </div>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <div class=\"__chart-container\">\n      @if (chartLayout()?.header) {\n        <div class=\"__chart-header\">\n          <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date\">{{ 'common.date.today' | translate | async }}</div>\n          }\n        </div>\n      }\n\n      <div class=\"__chart-body\">\n        <!-- Chart component will be rendered here -->\n        <div class=\"__chart-placeholder\">\n          <div class=\"__placeholder-content\">\n            <div\n              class=\"ax-flex ax-flex-wrap ax-items-center ax-justify-center ax-gap-10\"\n              [class]=\"legendOptions().mode === 'horizontal' ? 'ax-flex-col' : 'ax-flex-row'\"\n            >\n              <!-- Chart Area -->\n              <div class=\"ax-flex-0 ax-size-96\">\n                <ax-bar-chart #chart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n              </div>\n              <!-- Legend Area -->\n              @if (barChartData().length > 0) {\n                <div>\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <div class=\"__chart-footer\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- No Configuration State -->\n    <div class=\"__no-config\">\n      <div class=\"__no-config-icon\">\n        <i class=\"fa-light fa-chart-line\"></i>\n      </div>\n      <div class=\"__no-config-content\">\n        <h4 class=\"__no-config-title\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.title') | async }}\n        </h4>\n        <p class=\"__no-config-description\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.description') | async }}\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-chart-view .__loading .__loading-text{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body{flex:1 1 0%;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:3.75rem;line-height:1;color:rgba(var(--ax-sys-color-primary-500),.2)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:28rem}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__error .__error-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content{max-width:28rem}.axp-report-chart-view .__error .__error-content .__error-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content .__error-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__no-config .__no-config-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config .__no-config-content{max-width:28rem}.axp-report-chart-view .__no-config .__no-config-content .__no-config-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__no-config .__no-config-content .__no-config-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPReportBarChartViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-bar-chart-view', standalone: true, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPLayoutBuilderModule,
+                        AXBarChartComponent,
+                        AXChartLegendComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading\">\n      <div\n        class=\"ax-spinner ax-spin ax-border-4 ax-border-gray-200 ax-border-t-primary ax-rounded-full ax-w-12 ax-h-12\"\n      ></div>\n      <div class=\"__loading-text\">\n        {{ t('@report-management:features.report-viewer.loading.chart') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <div class=\"__error\">\n      <div class=\"__error-icon\">\n        <i class=\"fa-light fa-exclamation-triangle\"></i>\n      </div>\n      <div class=\"__error-content\">\n        <h4 class=\"__error-title\">\n          {{ t('@report-management:features.report-viewer.error.title') | async }}\n        </h4>\n        <p class=\"__error-description\">\n          {{ vm.error() || t('@report-management:features.report-viewer.error.generic') | async }}\n        </p>\n      </div>\n    </div>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <div class=\"__chart-container\">\n      @if (chartLayout()?.header) {\n        <div class=\"__chart-header\">\n          <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date\">{{ 'common.date.today' | translate | async }}</div>\n          }\n        </div>\n      }\n\n      <div class=\"__chart-body\">\n        <!-- Chart component will be rendered here -->\n        <div class=\"__chart-placeholder\">\n          <div class=\"__placeholder-content\">\n            <div\n              class=\"ax-flex ax-flex-wrap ax-items-center ax-justify-center ax-gap-10\"\n              [class]=\"legendOptions().mode === 'horizontal' ? 'ax-flex-col' : 'ax-flex-row'\"\n            >\n              <!-- Chart Area -->\n              <div class=\"ax-flex-0 ax-size-96\">\n                <ax-bar-chart #chart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n              </div>\n              <!-- Legend Area -->\n              @if (barChartData().length > 0) {\n                <div>\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <div class=\"__chart-footer\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- No Configuration State -->\n    <div class=\"__no-config\">\n      <div class=\"__no-config-icon\">\n        <i class=\"fa-light fa-chart-line\"></i>\n      </div>\n      <div class=\"__no-config-content\">\n        <h4 class=\"__no-config-title\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.title') | async }}\n        </h4>\n        <p class=\"__no-config-description\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.description') | async }}\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-chart-view .__loading .__loading-text{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body{flex:1 1 0%;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:3.75rem;line-height:1;color:rgba(var(--ax-sys-color-primary-500),.2)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:28rem}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__error .__error-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content{max-width:28rem}.axp-report-chart-view .__error .__error-content .__error-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content .__error-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__no-config .__no-config-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config .__no-config-content{max-width:28rem}.axp-report-chart-view .__no-config .__no-config-content .__no-config-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__no-config .__no-config-content .__no-config-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}\n"] }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXMReportManagementModule, AXPBarChartReportMapper, AXPReportChartViewComponent, AXPReportDefinitionService, AXPReportTableViewComponent, AXPReportViewerPageComponent, AXPReportViewerViewModel, AXP_REPORT_CATEGORY_PROVIDER, AXP_REPORT_DEFINITION_PROVIDER, AXPieChartReportMapper, RootConfig };
+export { AXBarChartReportMapper, AXLineChartReportMapper, AXMReportManagementModule, AXPReportBarChartViewComponent, AXPReportDefinitionService, AXPReportTableViewComponent, AXPReportViewerPageComponent, AXPReportViewerViewModel, AXP_REPORT_CATEGORY_PROVIDER, AXP_REPORT_DEFINITION_PROVIDER, AXPieChartReportMapper, RootConfig };
 //# sourceMappingURL=acorex-modules-report-management.mjs.map