feat(extras): auto-hide chart y-axis when no series data

Co-authored-by: ivanvpetrov <110455887+ivanvpetrov@users.noreply.github.com>
Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/0938b32f-510b-4e57-aa3b-bc186cb5b085

Author: Copilot

projects/igniteui-angular-extras/README.md

@@ -48,6 +48,15 @@ export class AppModule { }
 </igx-grid>
 ```
 
+When integrating charts with dynamic filtering scenarios, you can enable automatic Y-axis hiding when there is no numeric data for the charted series:
+
+```html
+<igx-grid #grid1 igxChartIntegration [autoHideYAxisWhenNoData]="true"
+    igxConditionalFormatting igxContextMenu
+    [autoGenerate]="true" [paging]="true" [data]="localData" >
+</igx-grid>
+```
+
 ### After Version 19.x
 
 Since version 19.x, Ignite UI for Angular Extras has adopted standalone components and directives, removing the need to add `IgxExtrasModule` to your `app.module.ts`. You can now directly import the required components and directives as standalone elements.

projects/igniteui-angular-extras/src/lib/directives/chart-integration/chart-integration.directive.spec.ts

@@ -200,9 +200,6 @@ describe('IgxChartIntegrationDirective', () => {
 
     describe('disableCharts and chartData interaction', () => {
         it('should not include disabled chart types in emitted chartsForCreation', () => {
-            let emittedArgs: IDeterminedChartTypesArgs;
-            directive.chartTypesDetermined.subscribe((args) => emittedArgs = args);
-
             directive.disableCharts([CHART_TYPE.Pie]);
 
             // chartsAvailability is updated but chartsForCreation only populated when chartData is set
@@ -291,6 +288,48 @@ describe('IgxChartIntegrationDirective', () => {
             expect(result).toBeUndefined();
             expect(emittedChart).toBeUndefined(); // chart is undefined, but event still emits
         });
+
+        it('should auto-hide y-axis and skip series creation when autoHideYAxisWhenNoData is enabled and no numeric values exist', () => {
+            directive.autoHideYAxisWhenNoData = true;
+            directive.chartData = [{ name: 'A', value: Number.NaN }, { name: 'B', value: undefined as any }];
+
+            const axisAddArgs: any[] = [];
+            const seriesAddSpy = jasmine.createSpy('seriesAdd');
+            const mockChart = {
+                series: { count: 0, clear: () => {}, add: seriesAddSpy },
+                axes: {
+                    count: 0,
+                    clear: () => {},
+                    add: (axis) => axisAddArgs.push(axis)
+                }
+            } as any;
+
+            directive.chartFactory(CHART_TYPE.ColumnGrouped, undefined, mockChart);
+
+            expect(seriesAddSpy).not.toHaveBeenCalled();
+            expect(axisAddArgs[1].labelExtent).toBe(0);
+        });
+
+        it('should keep y-axis visible when autoHideYAxisWhenNoData is enabled and at least one numeric value exists', () => {
+            directive.autoHideYAxisWhenNoData = true;
+            directive.chartData = [{ name: 'A', value: Number.NaN }, { name: 'B', value: 10 }];
+
+            const axisAddArgs: any[] = [];
+            const seriesAddSpy = jasmine.createSpy('seriesAdd');
+            const mockChart = {
+                series: { count: 0, clear: () => {}, add: seriesAddSpy },
+                axes: {
+                    count: 0,
+                    clear: () => {},
+                    add: (axis) => axisAddArgs.push(axis)
+                }
+            } as any;
+
+            directive.chartFactory(CHART_TYPE.ColumnGrouped, undefined, mockChart);
+
+            expect(seriesAddSpy).toHaveBeenCalledTimes(1);
+            expect(axisAddArgs[1].labelExtent).toBeNaN();
+        });
     });
 
     describe('_labelMemberPath fallback', () => {

projects/igniteui-angular-extras/src/lib/directives/chart-integration/chart-integration.directive.ts

@@ -89,6 +89,9 @@ export class IgxChartIntegrationDirective {
     @Input()
     public defaultLabelMemberPath: string = undefined;
 
+    @Input()
+    public autoHideYAxisWhenNoData = false;
+
     @Input()
     public set scatterChartYAxisValueMemberPath(path: string) {
         this._scatterChartYAxisValueMemberPath = path;
@@ -282,14 +285,17 @@ export class IgxChartIntegrationDirective {
         const customComponentOptions: IChartComponentOptions = this.customChartComponentOptions.get(type) || {};
         const customChartOptions = customComponentOptions.chartOptions || {};
         const customSeriesModel = customComponentOptions.seriesModel || {};
+        const valueMemberPathsWithData = this._valueMemberPaths.filter(memberPath => this.hasSeriesData(memberPath));
+        const valueMemberPathsForSeries = this.autoHideYAxisWhenNoData ? valueMemberPathsWithData : this._valueMemberPaths;
         chartComponentOptions.chartOptions = { ...this.dataChartOptions, ...customChartOptions };
         if (type.indexOf('Scatter') !== -1) {
             this.addScatterChartDataOptions(type, chartComponentOptions);
         } else {
             chartComponentOptions.seriesModel = { ...this.dataChartSeriesOptionsModel, ...customSeriesModel };
-            this.setAxisLabelOption(type, chartComponentOptions);
+            const hideYAxis = this.autoHideYAxisWhenNoData && valueMemberPathsWithData.length === 0;
+            this.setAxisLabelOption(type, chartComponentOptions, hideYAxis);
             const options: IOptions[] = [];
-            this._valueMemberPaths.forEach(valueMemberPath => {
+            valueMemberPathsForSeries.forEach(valueMemberPath => {
                 const dataOptions = {
                     title: valueMemberPath,
                     valueMemberPath
@@ -346,13 +352,17 @@ export class IgxChartIntegrationDirective {
         return dataRecord;
     }
 
-    private setAxisLabelOption(type: CHART_TYPE, options: IChartComponentOptions) {
+    private hasSeriesData(memberPath: string): boolean {
+        return this._chartData.some(record => Number.isFinite(record[memberPath]));
+    }
+
+    private setAxisLabelOption(type: CHART_TYPE, options: IChartComponentOptions, hideYAxis = false) {
         const customOptions = this.customChartComponentOptions.get(type) || {};
         if (type.indexOf('Bar') !== -1) {
             options.yAxisOptions = Object.assign({
                 label: this._labelMemberPath,
                 labelTextColor: null,
-                labelExtent: NaN,
+                labelExtent: hideYAxis ? 0 : NaN,
             }, customOptions.yAxisOptions);
             options.xAxisOptions = Object.assign({
                 labelTextColor: null,
@@ -366,7 +376,7 @@ export class IgxChartIntegrationDirective {
             }, customOptions.xAxisOptions);
             options.yAxisOptions = Object.assign({
                 labelTextColor: null,
-                labelExtent: NaN,
+                labelExtent: hideYAxis ? 0 : NaN,
             }, customOptions.yAxisOptions);
         }
     }