Merge pull request #10503 from IgniteUI/mkirova/small-ui-changes

dkamburov · web-flow · commit ca10fbed56d3 · 2021-11-26T15:34:38.000+02:00
Add indentation based on level and set correct collapsed state icon as per the design
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -628,6 +628,7 @@ export interface PivotGridType extends GridType {
     setupColumns(): void;
     toggleRow(rowID: any): void;
     resolveDataTypes(field: any): GridColumnDataType;
+    resolveRowDimensionWidth(dim: IPivotDimension): number;
     dimensionsChange: EventEmitter<IDimensionsChange>;
     valuesChange: EventEmitter<IValuesChange>;
 }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -47,7 +47,8 @@
             </ng-template>
         </ng-template>
         <ng-template #record_template let-rowIndex="index" let-rowData>
-            <igx-pivot-row [gridID]="id" [index]="rowIndex" [data]="rowData" [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+            <igx-pivot-row [pivotRowWidths]='pivotRowWidths' [gridID]="id" [index]="rowIndex" [data]="rowData" 
+            [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
             [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-pivot-row>
         </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -661,8 +661,19 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     public get pivotRowWidths() {
-        const rowDimCount = this.rowDimensions.length;
-        return MINIMUM_COLUMN_WIDTH * rowDimCount || MINIMUM_COLUMN_WIDTH;
+        return this.rowDimensions.reduce((accumulator, dim) => accumulator + this.resolveRowDimensionWidth(dim), 0);
+    }
+
+    public resolveRowDimensionWidth(dim: IPivotDimension): number {
+        if(!dim.width) {
+            return MINIMUM_COLUMN_WIDTH;
+        }
+        const isPercent = dim.width && dim.width.indexOf('%') !== -1;
+        if (isPercent) {
+            return parseFloat(dim.width) / 100 * this.calcWidth;
+        } else {
+            return parseInt(dim.width, 10);
+        }
     }
 
     public get rowDimensions() {
@@ -1063,13 +1074,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                 ref.instance.field = key;
                 ref.instance.parent = parent;
+                ref.instance.width = value.dimension.width || MINIMUM_COLUMN_WIDTH + 'px';
                 ref.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
                 ref.instance.formatter = this.pivotConfiguration.values[0]?.formatter;
                 ref.instance.sortable = true;
                 ref.changeDetectorRef.detectChanges();
                 columns.push(ref.instance);
                 if (this.hasMultipleValues) {
-                    const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, false);
+                    const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, false, value.dimension.width);
                     ref.instance.children.reset(measureChildren);
                     columns = columns.concat(measureChildren);
                 }
@@ -1088,6 +1100,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                     refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
                     refSibling.instance.field = key;
                     refSibling.instance.parent = parent;
+                    ref.instance.width = value.dimension.width || MINIMUM_COLUMN_WIDTH + 'px';
                     ref.instance.sortable = true;
                     refSibling.instance.hidden = true;
                     refSibling.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
@@ -1099,7 +1112,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 ref.changeDetectorRef.detectChanges();
                 columns.push(ref.instance);
                 if (this.hasMultipleValues) {
-                    const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, true);
+                    const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, true, value.dimension.width);
                     const nestedChildren = filteredChildren.concat(measureChildren);
                     const allChildren = children.concat(measureChildren);
                     ref.instance.children.reset(nestedChildren);
@@ -1114,13 +1127,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return columns;
     }
 
-    protected getMeasureChildren(colFactory, data, parent, hidden) {
+    protected getMeasureChildren(colFactory, data, parent, hidden, parentWidth) {
         const cols = [];
+        const count = this.values.length;
+        const width = parentWidth ? parseInt(parentWidth, 10) / count : MINIMUM_COLUMN_WIDTH;
+        const isPercent = parentWidth && parentWidth.indexOf('%') !== -1;
         this.values.forEach(val => {
             const ref = colFactory.create(this.viewRef.injector);
             ref.instance.header = val.displayName || val.member;
             ref.instance.field = parent.field + '-' + val.member;
             ref.instance.parent = parent;
+            ref.instance.width = isPercent ? width + '%' : width + 'px';
             ref.instance.hidden = hidden;
             ref.instance.sortable = true;
             ref.instance.dataType = val.dataType || this.resolveDataTypes(data[0][val.member]);
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts
@@ -66,6 +66,8 @@ export interface IPivotDimension {
     filter?: FilteringExpressionsTree | null;
     sortDirection?: SortingDirection;
     dataType?: GridColumnDataType;
+    // The width of the dimension cells to be rendered.Can be pixel or %.
+    width? : string;
 }
 
 export interface IPivotValue {
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts
@@ -28,8 +28,10 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
     }));
 
     it('should apply formatter and dataType from measures', () => {
-        fixture.detectChanges();
         const pivotGrid = fixture.componentInstance.pivotGrid;
+        pivotGrid.width = '1500px';
+        fixture.detectChanges();
+
         const actualFormatterValue = pivotGrid.rowList.first.cells.first.title;
         expect(actualFormatterValue).toEqual('774$');
         const actualDataTypeValue = pivotGrid.rowList.first.cells.last.title;
@@ -330,8 +332,9 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
         });
 
         it('should allow changing default aggregation via value chip drop-down.', () => {
-            fixture.detectChanges();
             const pivotGrid = fixture.componentInstance.pivotGrid;
+            pivotGrid.width = '1500px';
+            fixture.detectChanges();
             const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
             const valueChip = headerRow.querySelector('igx-chip[id="UnitsSold"]');
             let content = valueChip.querySelector('.igx-chip__content');
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html
@@ -98,15 +98,18 @@
 
 
     <ng-template #headerTemplate let-column>
-        <div class="igx-grid__tr--header">
-            <igx-icon [attr.draggable]="false" (click)="grid.toggleRow(getRowDimensionKey(column))">
-                      {{ getExpandState(column) ? 'expand_more' : 'expand_less'}}</igx-icon>
+        <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'>
+            <igx-icon [attr.draggable]="false"
+                      (click)="grid.toggleRow(getRowDimensionKey(column))">
+                      {{ getExpandState(column) ? 'expand_more' : 'chevron_right'}}</igx-icon>
             {{column.header}}
         </div>
     </ng-template>
 
-    <ng-template #headerTemplateGray let-column>
-        <div class="igx-grid__tr--header">
+    <ng-template #headerDefaultTemplate let-column>
+      
+        <div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'>
+            <igx-icon style='flex-shrink: 0;' [attr.draggable]="false"></igx-icon>
             {{column.header}}
         </div>
     </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.ts
@@ -10,7 +10,8 @@ import {
     SimpleChanges,
     TemplateRef,
     ViewChild,
-    ViewContainerRef
+    ViewContainerRef,
+    Input
 } from '@angular/core';
 import { IgxRowDirective } from '../row.directive';
 import { IgxGridSelectionService } from '../selection/selection.service';
@@ -29,6 +30,9 @@ const MINIMUM_COLUMN_WIDTH = 200;
 })
 export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
 
+    @Input()
+    public pivotRowWidths: number;
+
     /**
      * @hidden @internal
      */
@@ -38,8 +42,8 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
     /**
      * @hidden @internal
      */
-     @ViewChild('headerTemplateGray', { read: TemplateRef, static: true })
-     public headerTemplateGray: TemplateRef<any>;
+    @ViewChild('headerDefaultTemplate', { read: TemplateRef, static: true })
+    public headerTemplateDefault: TemplateRef<any>;
 
     public rowDimensionData: IPivotDimensionData[] = [];
 
@@ -79,19 +83,31 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
         return this.grid.gridAPI.get_row_expansion_state(this.getRowDimensionKey(col));
     }
 
+    public getLevel(col: IgxColumnComponent) {
+        return this.data[col.field + '_level'];
+    }
+
 
     /**
      * @hidden
      * @internal
      */
     public ngOnChanges(changes: SimpleChanges) {
-        if (changes.data) {
+        const rowDimConfig = this.grid.rowDimensions;
+        if (changes.data || rowDimConfig.length !== this.rowDimensionData.length) {
             // generate new rowDimension on row data change
             this.rowDimensionData = [];
-            const rowDimConfig = this.grid.rowDimensions;
             this.viewRef.clear();
             this.extractFromDimensions(rowDimConfig, 0);
         }
+        if (changes.pivotRowWidths && this.rowDimensionData) {
+            for (const dim of rowDimConfig) {
+                const dimData = PivotUtil.getDimensionLevel(dim, this.data,
+                      { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'});
+                const data = this.rowDimensionData.find(x => x.dimension.memberName === dimData.dimension.memberName);
+                data.column.width = this.grid.resolveRowDimensionWidth(dim) + 'px';
+            }
+        }
     }
 
     public getCellClass(col: any) {
@@ -114,7 +130,7 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
                   { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'});
             dimIndex += dimData.level;
             currentLvl += dimData.level;
-            const column = this.extractFromDimension(dimData.dimension, dimIndex, currentLvl);
+            const column = this.extractFromDimension(dimData.dimension, dimIndex, currentLvl, dim);
             this.rowDimensionData.push({
                 column,
                 dimension: dimData.dimension,
@@ -124,23 +140,24 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
         }
     }
 
-    protected extractFromDimension(dim: IPivotDimension, index: number = 0, lvl = 0) {
+    protected extractFromDimension(dim: IPivotDimension, index: number = 0, lvl = 0, rootDim: IPivotDimension) {
         const field = dim.memberName;
         const header = this.data[field];
-        const col = this._createColComponent(field, header, index, dim, lvl);
+        const col = this._createColComponent(field, header, index, dim, lvl, rootDim);
         return col;
     }
 
-    protected _createColComponent(field: string, header: string, index: number = 0, dim: IPivotDimension, lvl = 0) {
+    protected _createColComponent(field: string, header: string, index: number = 0,
+         dim: IPivotDimension, lvl = 0, rootDim: IPivotDimension) {
         const ref = this.viewRef.createComponent(IgxColumnComponent);
         ref.instance.field = field;
         ref.instance.header = header;
-        ref.instance.width = MINIMUM_COLUMN_WIDTH + 'px';
+        ref.instance.width = this.grid.resolveRowDimensionWidth(rootDim) + 'px';
         (ref as any).instance._vIndex = this.grid.columns.length + index + this.index * this.grid.pivotConfiguration.rows.length;
         if (dim.childLevel && lvl >= PivotUtil.getTotalLvl(this.data)) {
             ref.instance.headerTemplate = this.headerTemplate;
-        } else if (lvl < PivotUtil.getTotalLvl(this.data)) {
-            ref.instance.headerTemplate = this.headerTemplateGray;
+        } else {
+            ref.instance.headerTemplate = this.headerTemplateDefault;
         }
         return ref.instance;
     }
diff --git a/src/app/pivot-grid/pivot-grid.sample.ts b/src/app/pivot-grid/pivot-grid.sample.ts
@@ -79,7 +79,7 @@ export class PivotGridSampleComponent {
             enabled: true,
             childLevel: {
                 enabled: true,
-                memberName: 'Seller'
+                memberName: 'SellerName'
             }
         },
     ];

Original file line number	Diff line number	Diff line change
`@@ -628,6 +628,7 @@ export interface PivotGridType extends GridType {`
`628`	`628`	`setupColumns(): void;`
`629`	`629`	`toggleRow(rowID: any): void;`
`630`	`630`	`resolveDataTypes(field: any): GridColumnDataType;`
	`631`	`+ resolveRowDimensionWidth(dim: IPivotDimension): number;`
`631`	`632`	`dimensionsChange: EventEmitter<IDimensionsChange>;`
`632`	`633`	`valuesChange: EventEmitter<IValuesChange>;`
`633`	`634`	`}`
Original file line number	Diff line number	Diff line change
`@@ -66,6 +66,8 @@ export interface IPivotDimension {`
`66`	`66`	`filter?: FilteringExpressionsTree \| null;`
`67`	`67`	`sortDirection?: SortingDirection;`
`68`	`68`	`dataType?: GridColumnDataType;`
	`69`	`+ // The width of the dimension cells to be rendered.Can be pixel or %.`
	`70`	`+ width? : string;`
`69`	`71`	`}`
`70`	`72`
`71`	`73`	`export interface IPivotValue {`
Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@ export class PivotGridSampleComponent {`
`79`	`79`	`enabled: true,`
`80`	`80`	`childLevel: {`
`81`	`81`	`enabled: true,`
`82`		`- memberName: 'Seller'`
	`82`	`+ memberName: 'SellerName'`
`83`	`83`	`}`
`84`	`84`	`},`
`85`	`85`	`];`