Merge pull request #10150 from IgniteUI/mkirova/pivot-grid-levels

ChronosSF · web-flow · commit baae86597449 · 2021-09-29T16:57:03.000+03:00
Add handling for levels and expand/collapse indicators.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -184,6 +184,10 @@
         @extend %igx-grid__tr--inner !optional;
     }
 
+    @include e(tr, $m: header) {
+        @extend %igx-grid__tr--header !optional;
+    }
+
     @include e(tr, $m: group) {
         @extend %grid-row--group !optional;
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -1217,6 +1217,11 @@
         background: inherit;
     }
 
+    %igx-grid__tr--header {
+        display: flex; 
+        align-items: center;
+    }
+
     %igx-grid__tr--add-animate {
         @include animation(scale-in-ver-center .2s $ease-in-out-quad);
     }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -2859,6 +2859,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public summaryPipeTrigger = 0;
 
     public EMPTY_DATA = [];
+
+    public isPivot = false;
+
     /**
      * @hidden
      */
@@ -2950,6 +2953,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     protected _userOutletDirective: IgxOverlayOutletDirective;
     protected _transactions: TransactionService<Transaction, State>;
     protected _batchEditing = false;
+    protected _autoGeneratedCols = [];
 
     /** @hidden @internal */
     public get paginator() {
@@ -3022,7 +3026,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _unpinnedWidth = NaN;
     private _visibleColumns = [];
     private _columnGroups = false;
-    private _autoGeneratedCols = [];
 
     private _columnWidth: string;
 
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts
@@ -117,7 +117,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
 
     @HostBinding('style.height.rem')
     public get height() {
-        if (!this.grid.hasColumnGroups) {
+        if (!this.grid.hasColumnGroups || this.grid.isPivot) {
             return null;
         }
 
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
@@ -110,3 +110,13 @@
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
 <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
 <div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+
+<ng-template #headerTemplate let-column>
+    <div class="igx-grid__tr--header">
+        <igx-icon [attr.draggable]="false"
+                  (click)="toggleColumn(column)"
+                  style='cursor: pointer;'>
+                  {{columnGroupStates.get(column) ? 'expand_more' : 'expand_less'}}</igx-icon>
+        {{column.header}}
+    </div>
+</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
@@ -19,9 +19,11 @@ import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IPivotConfiguration, IPivotDimension } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
+import { IgxColumnGroupComponent } from '../columns/column-group.component';
+import { IgxColumnComponent } from '../columns/column.component';
 
 let NEXT_ID = 0;
-const MINIMUM_COLUMN_WIDTH = 136;
+const MINIMUM_COLUMN_WIDTH = 200;
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     preserveWhitespaces: false,
@@ -43,6 +45,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     GridType {
 
 
+
     /** @hidden @internal */
     @ViewChild(IgxPivotHeaderRowComponent, { static: true })
     public theadRow: IgxPivotHeaderRowComponent;
@@ -70,6 +73,15 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      @ViewChild('record_template', { read: TemplateRef, static: true })
      public recordTemplate: TemplateRef<any>;
 
+    /**
+     * @hidden @internal
+     */
+    @ViewChild('headerTemplate', { read: TemplateRef, static: true })
+    public headerTemplate: TemplateRef<any>;
+
+
+    public columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
+    public isPivot = true;
     private _data;
     private _filteredData;
     private p_id = `igx-pivot-grid-${NEXT_ID++}`;
@@ -206,25 +218,85 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return MINIMUM_COLUMN_WIDTH * rowDimCount;
     }
 
-    // TODO: should work on original data, before pipes.
-    // That should be data, but for this poc since we have no pipes use a different prop.
-    protected generateDataFields(data: any[]): string[] {
-        let fields = new Map<string, string>();
+   public toggleColumn(col: IgxColumnComponent) {
+       const state = this.columnGroupStates.get(col);
+       this.columnGroupStates.set(col, !state);
+   }
+
+    /**
+     * @hidden
+     */
+     protected autogenerateColumns() {
+        const data = this.gridAPI.get_data();
+        const fieldsMap = this.getFieldsHierarchy(data);
+        const columns = this.generateColumnHierarchy(fieldsMap, data);
+        this._autoGeneratedCols = columns;
+
+        this.columnList.reset(columns);
+        if (data && data.length > 0) {
+            this.shouldGenerate = false;
+        }
+    }
+
+    protected generateColumnHierarchy(fields:  Map<string, any>, data, parent = null): IgxColumnComponent[] {
+        const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
+        const factoryColumnGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
+        let columns = [];
+        fields.forEach((value, key) => {
+            if (value.children == null || value.children.size === 0) {
+                const ref = factoryColumn.create(this.viewRef.injector);
+                ref.instance.header = key;
+                ref.instance.field = key;
+                ref.instance.dataType = this.resolveDataTypes(data[0][key]);
+                ref.instance.parent = parent;
+                ref.changeDetectorRef.detectChanges();
+                columns.push(ref.instance);
+            } else {
+                const ref = factoryColumnGroup.create(this.viewRef.injector);
+                ref.instance.header = key;
+                ref.instance.headerTemplate = this.headerTemplate;
+                const children = this.generateColumnHierarchy(value.children, data, ref.instance);
+                ref.changeDetectorRef.detectChanges();
+                ref.instance.children.reset(children);
+                columns.push(ref.instance);
+                columns = columns.concat(children);
+            }
+        });
+        return columns;
+    }
+
+    protected getFieldsHierarchy(data){
+        const hierarchy = new Map<string, any>();
         for (const rec of this.originalData) {
             const vals = this.extractValuesFromDimension(this.pivotConfiguration.columns, rec);
             for (const val of vals) {
-                fields = fields.set(val, val);
+                if (hierarchy.get(val.value) != null && val.children) {
+                    for (const child of val.children) {
+                        hierarchy.get(val.value).children.set(child.value, child);
+                    }
+                } else {
+                    hierarchy.set(val.value, val);
+                    hierarchy.get(val.value).children = new Map<string, any>();
+                    for (const child of val.children) {
+                        hierarchy.get(val.value).children.set(child.value, child);
+                    }
+                }
             }
         }
-        const keys = Array.from(fields.keys());
-        return keys;
+        return hierarchy;
     }
 
     private extractValuesFromDimension(dims: IPivotDimension[], recData: any){
         const vals = [];
+        let i = 0;
         for (const col of dims) {
             const value = typeof col.member === 'string' ? recData[col.member] : col.member.call(this, recData);
-            vals.push(value);
+            vals.push({ value });
+            if (col.childLevels != null && col.childLevels.length > 0) {
+                const childValues = this.extractValuesFromDimension(col.childLevels, recData);
+                vals[i].children = childValues;
+            }
+            i++;
         }
         return vals;
     }
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
@@ -94,4 +94,15 @@
             [cellSelectionMode]="grid.cellSelection"
             [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
         </igx-grid-cell>
+    </ng-template>
+
+
+    <ng-template #headerTemplate let-column>
+        <div class="igx-grid__tr--header igx-grid__row-indentation--level-{{ level }}">
+            <igx-icon *ngIf="hasChild" [attr.draggable]="false"
+                      (click)="grid.toggleRow(rowID)"
+                      style='cursor: pointer;'>
+                      {{grid.expansionStates.get(rowID) ? 'expand_more' : 'expand_less'}}</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
@@ -6,15 +6,18 @@ import {
     ElementRef,
     forwardRef,
     OnInit,
+    TemplateRef,
+    ViewChild,
     ViewContainerRef
 } from '@angular/core';
 import { IgxPivotGridComponent } from './pivot-grid.component';
 import { IgxRowDirective } from '../row.directive';
 import { GridBaseAPIService, IgxColumnComponent } from '../hierarchical-grid/public_api';
 import { IgxGridSelectionService } from '../selection/selection.service';
+import { IPivotDimension } from './pivot-grid.interface';
 
 
-const MINIMUM_COLUMN_WIDTH = 136;
+const MINIMUM_COLUMN_WIDTH = 200;
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-pivot-row',
@@ -23,8 +26,15 @@ const MINIMUM_COLUMN_WIDTH = 136;
 })
 export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent> implements OnInit {
 
+    /**
+     * @hidden @internal
+     */
+     @ViewChild('headerTemplate', { read: TemplateRef, static: true })
+     public headerTemplate: TemplateRef<any>;
 
     public rowDimension: IgxColumnComponent[] = [];
+    public level = 0;
+    public hasChild = false;
 
     constructor(
         public gridAPI: GridBaseAPIService<IgxPivotGridComponent>,
@@ -36,7 +46,6 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
     ){
         super(gridAPI, selectionService, element, cdr);
     }
-
     /**
      * @hidden
      * @internal
@@ -48,24 +57,41 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
     public ngOnInit() {
         // generate rowDimension
         const rowDimConfig = this.grid.pivotConfiguration.rows;
-        let field = null;
+        this.level = this.rowData['level'] || 0;
+        this.hasChild = this.rowData['records'] != null && this.rowData['records'].length > 0;
+        this.extractFromDimensions(rowDimConfig, 0);
+    }
+
+    protected extractFromDimensions(rowDimConfig: IPivotDimension[], level: number){
         for (const dim of rowDimConfig) {
-            if (typeof dim.member === 'string') {
-                field = this.rowData[dim.member];
-            } else if (typeof dim.member === 'function'){
-                field = dim.member.call(this, this.rowData);
+            if  (level === this.level) {
+                this.rowDimension.push(this.extractFromDimension(dim));
+            } else {
+                level++;
+                this.extractFromDimensions(dim.childLevels, level);
             }
-            const col = this._createColComponent(field);
-            this.rowDimension.push(col);
         }
     }
 
+    protected extractFromDimension(dim: IPivotDimension) {
+        let field = null;
+        if (typeof dim.member === 'string') {
+            field = this.rowData[dim.member];
+        } else if (typeof dim.member === 'function'){
+            field = dim.member.call(this, this.rowData);
+        }
+        const col = this._createColComponent(field);
+        return col;
+    }
+
     protected _createColComponent(field: string) {
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const ref = this.viewRef.createComponent(factoryColumn, null, this.viewRef.injector);
         ref.instance.field = field;
+        ref.instance.header = field;
         ref.instance.width = MINIMUM_COLUMN_WIDTH + 'px';
         (ref as any).instance._vIndex = this.grid.columns.length + this.index;
+        ref.instance.headerTemplate = this.headerTemplate;
         return ref.instance;
     }
 }
diff --git a/src/app/pivot-grid/pivot-grid.sample.html b/src/app/pivot-grid/pivot-grid.sample.html
@@ -1,4 +1,4 @@
 <div class="sample-column">
-    <igx-pivot-grid #grid1 [data]="data" [originalData]="origData" [pivotConfiguration]="pivotConfig">
+    <igx-pivot-grid #grid1 [data]="dataHierarchical" [originalData]="origData" [pivotConfiguration]="pivotConfigHierarchy">
     </igx-pivot-grid>
 </div>
diff --git a/src/app/pivot-grid/pivot-grid.sample.ts b/src/app/pivot-grid/pivot-grid.sample.ts
@@ -33,6 +33,37 @@ export class PivotGridSampleComponent {
         filters: null
     };
 
+    public pivotConfigHierarchy: IPivotConfiguration = {
+        columns: [{
+            member: () => 'All',
+            enabled: true,
+            childLevels: [{
+                member: 'Country',
+                enabled: true,
+                childLevels:[]
+            }]
+        }],
+        rows: [{
+            member: () => 'All',
+            enabled: true,
+            childLevels:[
+                {
+                    member: (data) => data.ProductCategory,
+                    enabled: true,
+                    childLevels:[]
+                }
+            ]
+        }],
+        values: [
+            {
+                member: 'UnitsSold',
+                aggregate: IgxNumberSummaryOperand.sum,
+                enabled: true
+            }
+        ],
+        filters: null
+    };
+
     public origData = [
         { ProductCategory: 'Clothing', UnitPrice: 12.81, SellerName: 'Stanley', Country: 'Bulgaria', Date: '01/01/2021', UnitsSold: 282 },
         { ProductCategory: 'Clothing', UnitPrice: 49.57, SellerName: 'Elisa', Country: 'USA', Date: '01/05/2019', UnitsSold: 296 },
@@ -52,10 +83,15 @@ export class PivotGridSampleComponent {
     ];
 
     public dataHierarchical =  [
-        { ProductCategory: 'All', Bulgaria: 774, USA: 829, Uruguay: 524 },
-        { ProductCategory: 'Clothing', Bulgaria: 774, USA: 296, Uruguay: 456 },
-        { ProductCategory: 'Bikes', Uruguay: 68 },
-        { ProductCategory: 'Accessories', USA: 293 },
-        { ProductCategory: 'Components', USA: 240 }
+        { ProductCategory: 'All', All: 1000, Bulgaria: 774, USA: 829, Uruguay: 524, level: 0, records: [
+            { ProductCategory: 'Clothing', Bulgaria: 774, USA: 296, Uruguay: 456, level: 1  },
+            { ProductCategory: 'Bikes', Uruguay: 68, level: 1  },
+            { ProductCategory: 'Accessories', USA: 293, level: 1  },
+            { ProductCategory: 'Components', USA: 240, level: 1  }
+        ] },
+        { ProductCategory: 'Clothing', All: 1000, Bulgaria: 774, USA: 296, Uruguay: 456, level: 1  },
+        { ProductCategory: 'Bikes', All: 1000, Uruguay: 68, level: 1  },
+        { ProductCategory: 'Accessories', All: 1000, USA: 293, level: 1  },
+        { ProductCategory: 'Components', All: 1000, USA: 240, level: 1  }
     ];
 }

Original file line number	Diff line number	Diff line change
`@@ -184,6 +184,10 @@`
`184`	`184`	`@extend %igx-grid__tr--inner !optional;`
`185`	`185`	`}`
`186`	`186`
	`187`	`+ @include e(tr, $m: header) {`
	`188`	`+ @extend %igx-grid__tr--header !optional;`
	`189`	`+ }`
	`190`	`+`
`187`	`191`	`@include e(tr, $m: group) {`
`188`	`192`	`@extend %grid-row--group !optional;`
`189`	`193`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1217,6 +1217,11 @@`
`1217`	`1217`	`background: inherit;`
`1218`	`1218`	`}`
`1219`	`1219`
	`1220`	`+ %igx-grid__tr--header {`
	`1221`	`+ display: flex;`
	`1222`	`+ align-items: center;`
	`1223`	`+ }`
	`1224`	`+`
`1220`	`1225`	`%igx-grid__tr--add-animate {`
`1221`	`1226`	`@include animation(scale-in-ver-center .2s $ease-in-out-quad);`
`1222`	`1227`	`}`
Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {`
`117`	`117`
`118`	`118`	`@HostBinding('style.height.rem')`
`119`	`119`	`public get height() {`
`120`		`- if (!this.grid.hasColumnGroups) {`
	`120`	`+ if (!this.grid.hasColumnGroups \|\| this.grid.isPivot) {`
`121`	`121`	`return null;`
`122`	`122`	`}`
`123`	`123`