Add levels display and handling for column dimension.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -2831,6 +2831,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public summaryPipeTrigger = 0;
 
     public EMPTY_DATA = [];
+
+    public isPivot = false;
+
     /**
      * @hidden
      */
@@ -2922,6 +2925,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() {
@@ -2994,7 +2998,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _unpinnedWidth = NaN;
     private _visibleColumns = [];
     private _columnGroups = false;
-    private _autoGeneratedCols = [];
 
     private _columnWidth: string;
 

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;
         }
 

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>

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

@@ -19,6 +19,8 @@ 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 = 200;
@@ -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) {
+                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;
     }

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

@@ -35,9 +35,13 @@ export class PivotGridSampleComponent {
 
     public pivotConfigHierarchy: IPivotConfiguration = {
         columns: [{
-            member: 'Country',
+            member: () => 'All',
             enabled: true,
-            childLevels:[]
+            childLevels: [{
+                member: 'Country',
+                enabled: true,
+                childLevels:[]
+            }]
         }],
         rows: [{
             member: () => 'All',
@@ -79,15 +83,15 @@ export class PivotGridSampleComponent {
     ];
 
     public dataHierarchical =  [
-        { ProductCategory: 'All', Bulgaria: 774, USA: 829, Uruguay: 524, level: 0, records: [
+        { 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', 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  }
     ];
 }