Add correct column generation based on column dimensions.

Author: MKirova

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,5 +201,31 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         };
     }
 
+    public get pivotRowWidths() {
+        const rowDimCount = this.pivotConfiguration.rows.length;
+        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>();
+        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;
+    }
 
+    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

@@ -5,7 +5,7 @@
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
 
         <ng-container *ngIf="!row">
-            <div #pivotContainer class="igx-grid__tr-action" [style.min-width] = "grid.pivotRowWidths" 
+            <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-row.component.html

@@ -5,7 +5,7 @@
             [hasMRL]="grid.hasColumnLayouts"
             [density]="grid.displayDensity"
             [activeDescendant]="grid.activeDescendant"
-            [width]="pivotRowWidths"
+            [width]="grid.pivotRowWidths"
             [unpinnedColumnCollection]="rowDimension"
             (scroll)="grid.preventHeaderScroll($event)"
             [row]="this"

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

@@ -13,6 +13,8 @@ import { IgxRowDirective } from '../row.directive';
 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',
@@ -43,14 +45,6 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         return this.index;
     }
 
-    public get pivotRowWidths() {
-        let width = 0;
-        this.rowDimension.forEach(col => {
-            width += col.calcWidth;
-        });
-        return width;
-    }
-
     public ngOnInit() {
         // generate rowDimension
         const rowDimConfig = this.grid.pivotConfiguration.rows;
@@ -70,6 +64,8 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
         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

@@ -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 }
+    ];
 }