@acorex/modules 20.6.0-next.23 → 20.6.0-next.25

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

@@ -2189,6 +2189,27 @@ class AXPReportChartViewComponent {
         }, ...(ngDevMode ? [{ debugName: "donutChartOptions" }] : []));
         this.lineChartData = signal([], ...(ngDevMode ? [{ debugName: "lineChartData" }] : []));
         this.lineChartOptions = signal({}, ...(ngDevMode ? [{ debugName: "lineChartOptions" }] : []));
+        /**
+         * Check if bar chart data has items
+         */
+        this.hasBarChartData = computed(() => {
+            const data = this.barChartData();
+            return Array.isArray(data) && data.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasBarChartData" }] : []));
+        /**
+         * Check if donut chart data has items
+         */
+        this.hasDonutChartData = computed(() => {
+            const data = this.donutChartData();
+            return Array.isArray(data) && data.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasDonutChartData" }] : []));
+        /**
+         * Check if line chart data has items
+         */
+        this.hasLineChartData = computed(() => {
+            const data = this.lineChartData();
+            return Array.isArray(data) && data.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasLineChartData" }] : []));
     }
     //#endregion
     //#region ----   Effects   ----
@@ -2205,7 +2226,7 @@ class AXPReportChartViewComponent {
         return !!(this.chartOptions() && this.dataMapping());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPReportChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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:report-viewer.components.chart.messages.loading') | async }}\n    </div>\n  </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n  <!-- Error State -->\n  <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n    [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n    [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n  </axp-state-message>\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    @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      <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        {{ '@general: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 class=\"__chart-wrapper ax-h-full ax-items-center ax-flex ax-flex-col ax-gap-4 lg:ax-gap-6\" [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        @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          <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          <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          <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  <axp-state-message icon=\"fa-light fa-chart-line\"\n    [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n    [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\">\n  </axp-state-message>\n  }\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { 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: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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:report-viewer.components.chart.messages.loading') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message\n      mode=\"error\"\n      icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\"\n    >\n    </axp-state-message>\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              {{ '@general: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              @if (hasBarChartData()) {\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            }\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              @if (hasDonutChartData()) {\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            }\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              @if (hasLineChartData()) {\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          }\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    <axp-state-message\n      icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\"\n    >\n    </axp-state-message>\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: AXPWidgetCoreModule }, { 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: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { 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.3.12", ngImport: i0, type: AXPReportChartViewComponent, decorators: [{
             type: Component,
@@ -2220,7 +2241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXPStateMessageComponent,
                     ], 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:report-viewer.components.chart.messages.loading') | async }}\n    </div>\n  </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n  <!-- Error State -->\n  <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n    [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n    [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n  </axp-state-message>\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    @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      <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        {{ '@general: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 class=\"__chart-wrapper ax-h-full ax-items-center ax-flex ax-flex-col ax-gap-4 lg:ax-gap-6\" [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        @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          <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          <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          <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  <axp-state-message icon=\"fa-light fa-chart-line\"\n    [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n    [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\">\n  </axp-state-message>\n  }\n</ng-container>" }]
+                    }, 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:report-viewer.components.chart.messages.loading') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message\n      mode=\"error\"\n      icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\"\n    >\n    </axp-state-message>\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              {{ '@general: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              @if (hasBarChartData()) {\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            }\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              @if (hasDonutChartData()) {\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            }\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              @if (hasLineChartData()) {\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          }\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    <axp-state-message\n      icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\"\n    >\n    </axp-state-message>\n  }\n</ng-container>\n" }]
         }] });
 
 class AXPReportTableViewComponent {