feat(igxPivotGrid): Allow setting width:auto so that row dimension is… (#14146)

Author: MayaKirova

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -1269,6 +1269,7 @@ export interface PivotGridType extends GridType {
     /** Move value from its currently at specified index or at the end.
      * If the parameter is not set, it will add it to the end of the collection. */
     moveValue(value: IPivotValue, index?: number);
+    rowDimensionWidth(dim: IPivotDimension): string;
     rowDimensionWidthToPixels(dim: IPivotDimension): number;
     /** Emits an event when the dimensions in the pivot grid change. */
     dimensionsChange: EventEmitter<IDimensionsChange>;

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -29,6 +29,7 @@ import {
 } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet, NgIf, NgClass, NgStyle, NgFor } from '@angular/common';
 
+import { first} from 'rxjs/operators';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSelectionService } from '../selection/selection.service';
@@ -1156,6 +1157,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             this.rowDimensionWidthToPixels(this.emptyRowDimension);
     }
 
+    /**
+     * @hidden @internal
+     */
+    public rowDimensionWidth(dim, ignoreBeforeInit = false ): string {
+        const isAuto = dim.width && dim.width.indexOf('auto') !== -1;
+        if (isAuto) {
+            return dim.autoWidth ? dim.autoWidth + 'px' : 'fit-content';
+        } else {
+            return this.rowDimensionWidthToPixels(dim, ignoreBeforeInit) + 'px';
+        }
+    }
+
     /**
      * @hidden @internal
      */
@@ -1168,8 +1181,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             return MINIMUM_COLUMN_WIDTH;
         }
         const isPercent = dim.width && dim.width.indexOf('%') !== -1;
+        const isAuto = dim.width && dim.width.indexOf('auto') !== -1;
         if (isPercent) {
             return parseFloat(dim.width) / 100 * this.calcWidth;
+        } else if (isAuto) {
+            return dim.autoWidth;
         } else {
             return parseInt(dim.width, 10);
         }
@@ -2035,6 +2051,41 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return columns;
     }
 
+    protected override calculateGridSizes(recalcFeatureWidth = true) {
+        super.calculateGridSizes(recalcFeatureWidth);
+        if (this.hasDimensionsToAutosize) {
+            this.cdr.detectChanges();
+            this.zone.onStable.pipe(first()).subscribe(() => {
+                this.autoSizeDimensionsInView();
+            });
+        }
+    }
+
+    protected autoSizeDimensionsInView() {
+        if (!this.hasDimensionsToAutosize) return;
+        for (const dim of this.rowDimensions) {
+            if (dim.width === 'auto') {
+                const contentWidths = [];
+                const relatedDims = PivotUtil.flatten([dim]).map(x => x.memberName);
+                const content = this.rowDimensionContentCollection.filter(x => relatedDims.indexOf(x.dimension.memberName) !== -1);
+                const headers = content.map(x => x.headerGroups.toArray()).flat().map(x => x.header && x.header.refInstance);
+                headers.forEach((header) => contentWidths.push(header?.nativeElement?.offsetWidth || 0));
+                const max = Math.max(...contentWidths);
+                if (max === 0) {
+                    // cells not in DOM yet...
+                    continue;
+                }
+                const maxSize = Math.ceil(Math.max(...contentWidths));
+                dim.autoWidth = maxSize;
+            }
+        }
+    }
+
+        /** @hidden @internal */
+        public get hasDimensionsToAutosize() {
+            return this.rowDimensions.some(x => x.width === 'auto' && !x.autoWidth);
+        }
+
     protected generateFromData(fields: string[]) {
         const separator = this.pivotKeys.columnDimensionSeparator;
         const dataArr = fields.map(x => x.split(separator)).sort(x => x.length);
@@ -2158,13 +2209,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         const count = this.values.length;
         const childWidth = parseInt(parentWidth, 10) / count;
         const isPercent = parentWidth && parentWidth.indexOf('%') !== -1;
+        const isAuto = parentWidth && parentWidth.indexOf('auto') !== -1;
         this.values.forEach(val => {
             const ref = createComponent(IgxColumnComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
             ref.instance.header = val.displayName || val.member;
             ref.instance.field = parent.field + this.pivotKeys.columnDimensionSeparator + val.member;
             ref.instance.parent = parent;
             if (parentWidth) {
-                ref.instance.width = isPercent ? childWidth + '%' : childWidth + 'px';
+                ref.instance.width = isAuto ? 'auto' : isPercent ? childWidth + '%' : childWidth + 'px';
             }
             ref.instance.hidden = hidden;
             ref.instance.sortable = true;

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts

@@ -124,10 +124,12 @@ export interface IPivotDimension {
      * The dataType of the related data field.
      */
     dataType?: GridColumnDataType;
-    /** The width of the dimension cells to be rendered.Can be pixel or %. */
+    /** The width of the dimension cells to be rendered.Can be pixel, % or "auto". */
     width?: string;
     /** Level of the dimension. */
     level?: number;
+    /** hidden */
+    autoWidth?: number;
 }
 /**
 * Configuration of a pivot value aggregation.

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts

@@ -1932,6 +1932,50 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 expect(rowDimension.width).toBe('158px');
                 expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(158);
             });
+
+            it('should auto-size row dimension when width is set to auto.', () => {
+                const pivotGrid = fixture.componentInstance.pivotGrid;
+                let rowDimension = pivotGrid.pivotConfiguration.rows[0];
+                expect(rowDimension.width).toBeUndefined();
+                expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(200);
+                fixture.componentInstance.pivotConfigHierarchy = {
+                    columns: [{
+                        memberName: 'Country',
+                        enabled: true
+                    },
+                    ],
+                    rows: [{
+                        memberName: 'All',
+                        memberFunction: () => 'All',
+                        enabled: true,
+                        width: "auto",
+                        childLevel: {
+                            memberName: 'ProductCategory',
+                            memberFunction: (data) => data.ProductCategory,
+                            enabled: true
+                        }
+                    }],
+                    values: [
+                        {
+                            member: 'UnitPrice',
+                            aggregate: {
+                                aggregator: IgxPivotNumericAggregate.sum,
+                                key: 'SUM',
+                                label: 'Sum',
+                            },
+                            enabled: true,
+                            dataType: 'currency'
+                        }
+                    ],
+                    filters: []
+                };
+
+                fixture.detectChanges();
+                rowDimension = pivotGrid.pivotConfiguration.rows[0];
+                expect(rowDimension.autoWidth).toBe(158);
+                expect(rowDimension.width).toBe('auto');
+                expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(158);
+            });
         });
     });
 

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html

@@ -3,8 +3,9 @@
     <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="width">
             <igx-pivot-row-dimension-header-group [ngClass]="rowDimensionColumn.headerGroupClasses"
                 [ngStyle]="rowDimensionColumn.headerGroupStyles | igxHeaderGroupStyle:rowDimensionColumn:grid.pipeTrigger" [column]="rowDimensionColumn"
-                [style.min-width]="grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
-                [style.flex-basis]="grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
+                [style.min-width]="grid.rowDimensionWidth(rootDimension)"
+                [style.width]="grid.rowDimensionWidth(rootDimension)"
+                [style.flex-basis]="grid.rowDimensionWidth(rootDimension)"
                 [rowIndex]="rowIndex"
                 [parent]='this'>
             </igx-pivot-row-dimension-header-group>

src/app/pivot-grid/pivot-grid.sample.html

@@ -63,7 +63,7 @@
         <igx-pivot-grid
             #grid1
             [data]="origData"
-            [width]="'100%'"
+            [width]="'800px'"
             [height]="'100%'"
             [displayDensity]="density"
             [superCompactMode]="gridDensity === 'superCompact'"

src/app/pivot-grid/pivot-grid.sample.ts

@@ -129,14 +129,15 @@ export class PivotGridSampleComponent {
                 memberName: 'City',
                 displayName: 'City',
                 enabled: true,
-                width: '100px'
+                width: 'auto'
             },
         ],
         rows: [
             {
                 memberName: 'SellerName',
                 displayName: 'Seller Name',
                 enabled: true,
+                width: "auto"
                 //filter: this.filterExpTree
             }
         ],