Merge pull request #10182 from IgniteUI/dkamburov/pivot-pipes

pivot pipes

Author: ChronosSF

projects/igniteui-angular/karma.azure.conf.js

@@ -19,7 +19,7 @@ module.exports = function (config) {
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     parallelOptions: {
-      executors: 2,
+      executors: 3,
       shardStrategy: 'round-robin'
     },
     client: {

projects/igniteui-angular/karma.conf.js

@@ -22,7 +22,7 @@ module.exports = function (config) {
         require('@angular-devkit/build-angular/plugins/karma')
     ],
     parallelOptions: {
-      executors: 2,
+      executors: 3,
       shardStrategy: 'round-robin'
     },
     client: {

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

@@ -31,8 +31,9 @@
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
-        | gridPivotFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
-        | gridPivotRow:pivotConfiguration.rows:pivotConfiguration.values"
+        | pivotGridFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
+        | pivotGridRow:pivotConfiguration.rows:expansionStates:pivotConfiguration.values
+        | pivotGridColumn:pivotConfiguration.columns:pivotConfiguration.values"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
@@ -116,7 +117,7 @@
         <igx-icon [attr.draggable]="false"
                   (click)="toggleColumn(column)"
                   style='cursor: pointer;'>
-                  {{columnGroupStates.get(column) ? 'expand_more' : 'expand_less'}}</igx-icon>
+                  {{columnGroupStates.get(column.field) ? 'expand_more' : 'expand_less'}}</igx-icon>
         {{column.header}}
     </div>
 </ng-template>

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

@@ -21,6 +21,7 @@ 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';
+import { PivotUtil } from './pivot-util';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -80,12 +81,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     public headerTemplate: TemplateRef<any>;
 
 
-    public columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
+    public columnGroupStates = new Map<string, boolean>();
     public isPivot = true;
+    protected _defaultExpandState = true;
     private _data;
     private _filteredData;
     private p_id = `igx-pivot-grid-${NEXT_ID++}`;
-    private _origData = [];
 
     /**
      * @hidden
@@ -150,29 +151,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      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.
      * ```typescript
@@ -219,16 +197,54 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
    public toggleColumn(col: IgxColumnComponent) {
-       const state = this.columnGroupStates.get(col);
-       this.columnGroupStates.set(col, !state);
+       const state = this.columnGroupStates.get(col.field);
+       const newState = !state;
+       this.columnGroupStates.set(col.field, newState);
+       const parentCols = col.parent ? col.parent.children : this.columns.filter(x => x.level === 0);
+       const fieldColumn =  parentCols.filter(x => x.header === col.header && !x.columnGroup)[0];
+       const groupColumn =  parentCols.filter(x => x.header === col.header && x.columnGroup)[0];
+       groupColumn.hidden = newState;
+        this.resolveToggle(groupColumn);
+       fieldColumn.hidden = !newState;
+       if (newState) {
+        fieldColumn.headerTemplate = this.headerTemplate;
+       } else {
+        fieldColumn.headerTemplate = undefined;
+       }
+       this.reflow();
+   }
+
+   protected resolveToggle(groupColumn: IgxColumnComponent) {
+    const hasChildGroup = groupColumn.children.filter(x => x.columnGroup).length > 0;
+        if (!groupColumn.hidden &&  hasChildGroup) {
+            const fieldChildren =  groupColumn.children.filter(x => !x.columnGroup);
+            const groupChildren = groupColumn.children.filter(x => x.columnGroup);
+            groupChildren.forEach(group => {
+                this.resolveToggle(group);
+            });
+            fieldChildren.forEach(fieldChild => {
+                fieldChild.hidden = true;
+            });
+        }
    }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    protected calcGridHeadRow() {
+    }
+
     /**
      * @hidden
      */
      protected autogenerateColumns() {
         const data = this.gridAPI.get_data();
-        const fieldsMap = this.getFieldsHierarchy(data);
+        const fieldsMap = PivotUtil.getFieldsHierarchy(
+            data,
+            this.pivotConfiguration.columns,
+            {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
+            );
         const columns = this.generateColumnHierarchy(fieldsMap, data);
         this._autoGeneratedCols = columns;
 
@@ -243,61 +259,41 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         const factoryColumnGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
         let columns = [];
         fields.forEach((value, key) => {
-            if (value.children == null || value.children.size === 0) {
+            if (value.children == null || value.children.length === 0 || value.children.size === 0) {
                 const ref = factoryColumn.create(this.viewRef.injector);
-                ref.instance.header = key;
+                ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : 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;
+                ref.instance.parent = parent;
+                ref.instance.field = key;
+                ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
+                if (value.expandable) {
+                    ref.instance.headerTemplate = this.headerTemplate;
+                    const refSibling = factoryColumn.create(this.viewRef.injector);
+                    refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
+                    refSibling.instance.field = key;
+                    refSibling.instance.dataType = this.resolveDataTypes(data[0][key]);
+                    refSibling.instance.parent = parent;
+                    refSibling.instance.hidden = true;
+                    columns.push(refSibling.instance);
+                }
                 const children = this.generateColumnHierarchy(value.children, data, ref.instance);
+                const filteredChildren = children.filter(x => x.level === ref.instance.level + 1);
                 ref.changeDetectorRef.detectChanges();
-                ref.instance.children.reset(children);
+
+                ref.instance.children.reset(filteredChildren);
+
                 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) {
-                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);
-                    }
-                }
-            }
-        }
-        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 });
-            if (col.childLevels != null && col.childLevels.length > 0) {
-                const childValues = this.extractValuesFromDimension(col.childLevels, recData);
-                vals[i].children = childValues;
-            }
-            i++;
-        }
-        return vals;
-    }
 }

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

@@ -15,6 +15,8 @@ export interface IPivotDimension {
     member: string | ((data: any) => any);
     // Enables/Disables a particular dimension from pivot structure.
     enabled: boolean;
+    // additional field name when using member as a function
+    fieldName?: string;
 }
 
 export interface IPivotValue {
@@ -24,3 +26,10 @@ export interface IPivotValue {
     // Enables/Disables a particular value from pivot aggregation.
     enabled: boolean;
 }
+
+export interface IPivotKeys {
+    children: string;
+    records: string;
+    aggregations: string;
+    level: string;
+}

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

@@ -22,7 +22,10 @@ import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
     IgxGridModule,
     IgxPivotGridComponent,
     IgxPivotRowComponent,
-    IgxPivotHeaderRowComponent
+    IgxPivotHeaderRowComponent,
+    IgxPivotRowPipe,
+    IgxPivotColumnPipe,
+    IgxPivotGridFilterPipe
   ],
   imports: [
     IgxGridModule,