Merge pull request #10146 from IgniteUI/mkirova/pivot-grid-colGeneration

Add support for members defined via custom function for rows/columns.

Author: ChronosSF

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

@@ -17,10 +17,11 @@ import { GridType } from '../common/grid.interface';
 import { IgxGridNavigationService } from '../grid-navigation.service';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { IPivotConfiguration } from './pivot-grid.interface';
+import { IPivotConfiguration, IPivotDimension } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 
 let NEXT_ID = 0;
+const MINIMUM_COLUMN_WIDTH = 136;
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     preserveWhitespaces: false,
@@ -72,6 +73,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     private _data;
     private _filteredData;
     private p_id = `igx-pivot-grid-${NEXT_ID++}`;
+    private _origData = [];
 
     /**
      * @hidden
@@ -83,6 +85,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         super.ngOnInit();
     }
 
+    /** @hidden */
+    public featureColumnsWidth() {
+        return this.pivotRowWidths;
+    }
+
     /**
      * Gets/Sets the value of the `id` attribute.
      *
@@ -128,9 +135,31 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      * let data = this.grid.data;
      * ```
      */
-    public get data(): any[] | null {
+     public get data(): any[] | null {
         return this._data;
-        }
+    }
+
+    /**
+     * Returns an array of data set to the component.
+     * ```typescript
+     * let processedData = this.grid.processedData;
+     * ```
+     */
+    public get originalData(): any[] | null {
+        return this._origData;
+    }
+
+
+    /**
+     * An @Input property that lets you fill the `IgxPivotGridComponent` with an array of data.
+     * ```html
+     * <igx-pivot-grid [processedData]="Data"></igx-pivot-grid>
+     * ```
+     */
+    @Input()
+    public set originalData(value: any[] | null) {
+        this._origData = value || [];
+    }
 
     /**
      * Sets an array of objects containing the filtered data.
@@ -172,44 +201,31 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         };
     }
 
-    public get pivotRows() {
-        // TODO - resolve member if member is not string.
-        const rowKeys = this.pivotConfiguration.rows.map(x => x.member);
-        const cols = this.columns.filter(x => rowKeys.indexOf(x.field) !== -1);
-        // create copies in order to not pollute the original column.
-        const columns = [];
-        const topLevelCols = cols.filter(c => c.level === 0);
-        topLevelCols.forEach((col) => {
-            const ref = this._createColumn(col);
-            ref.changeDetectorRef.detectChanges();
-            columns.push(ref.instance);
-        });
-        return columns;
-    }
-
     public get pivotRowWidths() {
-        let width = 0;
-        this.pivotRows.forEach(col => {
-            width += col.calcWidth;
-        });
-        return width;
-    }
-
-    public get pivotColumns() {
-        // TODO - resolve member if member is not string.
-        const rowKeys = this.pivotConfiguration.rows.map(x => x.member);
-        return this.columns.filter(x => rowKeys.indexOf(x.field) === -1);
+        const rowDimCount = this.pivotConfiguration.rows.length;
+        return MINIMUM_COLUMN_WIDTH * rowDimCount;
     }
 
-    public get unpinnedColumns(){
-        const rowKeys = this.pivotConfiguration.rows.map(x => x.member);
-        const cols = this._unpinnedColumns.filter(x => rowKeys.indexOf(x.field) === -1);
-        return cols;
+    // 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>();
+        for (const rec of this.originalData) {
+            const vals = this.extractValuesFromDimension(this.pivotConfiguration.columns, rec);
+            for (const val of vals) {
+                fields = fields.set(val, val);
+            }
+        }
+        const keys = Array.from(fields.keys());
+        return keys;
     }
 
-    public get pinnedColumns(){
-        const rowKeys = this.pivotConfiguration.rows.map(x => x.member);
-        const cols = this._pinnedColumns.filter(x => rowKeys.indexOf(x.field) === -1);
-        return cols;
+    private extractValuesFromDimension(dims: IPivotDimension[], recData: any){
+        const vals = [];
+        for (const col of dims) {
+            const value = typeof col.member === 'string' ? recData[col.member] : col.member.call(this, recData);
+            vals.push(value);
+        }
+        return vals;
     }
 }

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

@@ -4,8 +4,8 @@
     <!-- Column headers area -->
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
 
-        <ng-container *ngIf="grid.pivotConfiguration?.rows.length > 0 ">
-            <div #pivotContainer class="igx-grid__tr-action" [style.min-width] = "grid.pivotRowWidths" 
+        <ng-container *ngIf="!row">
+            <div #pivotContainer class="igx-grid__tr-action" [style.min-width.px] = "grid.pivotRowWidths" 
                 (pointerdown)="$event.preventDefault()">
 
             </div>

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

@@ -1,8 +1,10 @@
 import {
     ChangeDetectionStrategy,
-    Component
+    Component,
+    Input
 } from '@angular/core';
 import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
+import { IgxPivotRowComponent } from './pivot-row.component';
 
 export interface IgxGridRowSelectorsTemplateContext {
     $implicit: {
@@ -27,4 +29,6 @@ export interface IgxGridRowSelectorsTemplateContext {
     templateUrl: './pivot-header-row.component.html'
 })
 export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
+    @Input()
+    public row: IgxPivotRowComponent;
 }

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

@@ -1,16 +1,16 @@
     <!-- Row Dimension -->
-    <div #rowDimension>
-            <!-- TODO: Render headers based on hierarchy here -->
-            <igx-grid-header-row class="igx-grid-thead" tabindex="0"
+    <div #rowDimensionContainer>
+            <igx-pivot-header-row class="igx-grid-thead" tabindex="0"
             [grid]="grid"
             [hasMRL]="grid.hasColumnLayouts"
             [density]="grid.displayDensity"
             [activeDescendant]="grid.activeDescendant"
-            [width]="getRowColumnWidth(grid.pivotRows)"
-            [unpinnedColumnCollection]="getRowColumns(rowData, grid.pivotRows)"
+            [width]="grid.pivotRowWidths"
+            [unpinnedColumnCollection]="rowDimension"
             (scroll)="grid.preventHeaderScroll($event)"
+            [row]="this"
         >
-        </igx-grid-header-row>
+        </igx-pivot-header-row>
     </div>
 
 

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

@@ -1,19 +1,41 @@
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
-    forwardRef
+    ComponentFactoryResolver,
+    ElementRef,
+    forwardRef,
+    OnInit,
+    ViewContainerRef
 } from '@angular/core';
 import { IgxPivotGridComponent } from './pivot-grid.component';
 import { IgxRowDirective } from '../row.directive';
-import { IgxColumnComponent } from '../hierarchical-grid/public_api';
+import { GridBaseAPIService, IgxColumnComponent } from '../hierarchical-grid/public_api';
+import { IgxGridSelectionService } from '../selection/selection.service';
 
+
+const MINIMUM_COLUMN_WIDTH = 136;
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-pivot-row',
     templateUrl: './pivot-row.component.html',
     providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }]
 })
-export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent> {
+export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent> implements OnInit {
+
+
+    public rowDimension: IgxColumnComponent[] = [];
+
+    constructor(
+        public gridAPI: GridBaseAPIService<IgxPivotGridComponent>,
+        public selectionService: IgxGridSelectionService,
+        public element: ElementRef<HTMLElement>,
+        public cdr: ChangeDetectorRef,
+        protected resolver: ComponentFactoryResolver,
+        protected viewRef: ViewContainerRef
+    ){
+        super(gridAPI, selectionService, element, cdr);
+    }
 
     /**
      * @hidden
@@ -23,22 +45,28 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         return this.index;
     }
 
-    public getRowColumns(rowData, cols: IgxColumnComponent[]) {
-        cols.forEach(col => {
-            col.header = rowData[col.field];
-            col.field =  rowData[col.field];
-            col.title = rowData[col.field];
-            (col as any)._vIndex = this.grid.columns.length + this.index;
-        });
-        return cols;
+    public ngOnInit() {
+        // generate rowDimension
+        const rowDimConfig = this.grid.pivotConfiguration.rows;
+        let field = null;
+        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);
+            }
+            const col = this._createColComponent(field);
+            this.rowDimension.push(col);
+        }
     }
 
-    public getRowColumnWidth(cols: IgxColumnComponent[]) {
-        let width = 0;
-        cols.forEach(col => {
-            width += col.calcWidth;
-        });
-        return width;
+    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.width = MINIMUM_COLUMN_WIDTH + 'px';
+        (ref as any).instance._vIndex = this.grid.columns.length + this.index;
+        return ref.instance;
     }
 }
 

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

@@ -1,4 +1,4 @@
 <div class="sample-column">
-    <igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfig">
+    <igx-pivot-grid #grid1 [data]="data" [originalData]="origData" [pivotConfiguration]="pivotConfig">
     </igx-pivot-grid>
 </div>

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

@@ -19,7 +19,7 @@ export class PivotGridSampleComponent {
             childLevels:[]
         }],
         rows: [{
-            member: 'ProductCategory',
+            member: (data) => data.ProductCategory,
             enabled: true,
             childLevels:[]
         }],
@@ -50,4 +50,12 @@ export class PivotGridSampleComponent {
         { ProductCategory: 'Accessories', USA: 293 },
         { ProductCategory: 'Components', USA: 240 }
     ];
+
+    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 }
+    ];
 }