Implement excel-style tree view in pivot grid.

projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts

@@ -1,9 +1,10 @@
 
-import { PivotGridType } from '../grids/common/grid.interface';
+import { ColumnType, PivotGridType } from '../grids/common/grid.interface';
 import { DEFAULT_PIVOT_KEYS, IPivotDimension, IPivotDimensionStrategy, IPivotGridRecord, IPivotKeys, IPivotValue, PivotDimensionType } from '../grids/pivot-grid/pivot-grid.interface';
 import { PivotUtil } from '../grids/pivot-grid/pivot-util';
-import { FilteringStrategy } from './filtering-strategy';
+import { FilteringStrategy, IgxFilterItem } from './filtering-strategy';
 import { cloneArray } from '../core/utils';
+import { IFilteringExpressionsTree } from './filtering-expressions-tree';
 
 export class NoopPivotDimensionsStrategy implements IPivotDimensionStrategy {
     private static _instance: NoopPivotDimensionsStrategy = null;
@@ -141,10 +142,53 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy {
 
     protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false,
         grid?: PivotGridType): any {
-        const config = grid.pivotConfiguration;
         const allDimensions = grid.allDimensions;
         const enabledDimensions = allDimensions.filter(x => x && x.enabled);
-        const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName);
-        return PivotUtil.extractValueFromDimension(dim, rec);
+        const dim :IPivotDimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName);
+        const value = dim.childLevel ? this._getDimensionValueHierarchy(dim, rec).map(x => `[` + x +`]`).join('.') : PivotUtil.extractValueFromDimension(dim, rec);
+        return value;
+    }
+
+    public getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]> {
+        const grid = (column.grid as any);
+        const enabledDimensions = grid.allDimensions.filter(x => x && x.enabled);
+        let data = column.grid.gridAPI.filterDataByExpressions(tree);
+        const dim = enabledDimensions.find(x => x.memberName === column.field);
+        const allValuesHierarchy = PivotUtil.getFieldsHierarchy(
+            data,
+            [dim],
+            PivotDimensionType.Column,
+            grid.pivotKeys
+        );
+        const isNoop = grid.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy || grid.pivotConfiguration.rowStrategy instanceof NoopPivotDimensionsStrategy;
+        const items: IgxFilterItem[] = !isNoop ? this._getFilterItems(allValuesHierarchy, grid.pivotKeys) : [{value : ''}];
+        return Promise.resolve(items);
+    }
+
+    private _getFilterItems(hierarchy: Map<string, any>, pivotKeys: IPivotKeys) : IgxFilterItem[] {
+        const items:  IgxFilterItem[] = [];
+        hierarchy.forEach((value) => {
+            const val = value.value;
+            const path = val.split(pivotKeys.columnDimensionSeparator);
+            const hierarchicalValue = path.length > 1 ? path.map(x => `[` + x +`]`).join('.') : val;
+            const text = path[path.length -1];
+            items.push({
+                value: hierarchicalValue,
+                label: text,
+                children: this._getFilterItems(value.children, pivotKeys)
+            });
+        });
+        return items;
+    }
+
+    private _getDimensionValueHierarchy(dim: IPivotDimension, rec: any) : string[] {
+        let path = [];
+        let value = PivotUtil.extractValueFromDimension(dim, rec);
+        path.push(value);
+        if (dim.childLevel) {
+            const childVals = this._getDimensionValueHierarchy(dim.childLevel, rec);
+            path = path.concat(childVals);
+        }
+        return path;
     }
 }

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

@@ -885,7 +885,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     public ngOnInit() {
         // pivot grid always generates columns automatically.
         this.autoGenerate = true;
-        this.uniqueColumnValuesStrategy = this.uniqueColumnValuesStrategy || this.uniqueDimensionValuesStrategy;
         const config = this.pivotConfiguration;
         this.filteringExpressionsTree = PivotUtil.buildExpressionTree(config);
         super.ngOnInit();
@@ -922,15 +921,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         this.cdr.detectChanges();
     }
 
-    public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree,
-        done: (uniqueValues: any[]) => void) {
-        const enabledDimensions = this.allDimensions.filter(x => x && x.enabled);
-        const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === column.field);
-        if (dim) {
-            this.getDimensionData(dim, exprTree, uniqueValues => done(uniqueValues));
-        }
-    }
-
     /**
      * Gets the full list of dimensions.
      *
@@ -944,33 +934,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined);
     }
 
-    /**
-     * @hidden @internal
-     */
-    public getDimensionData(dim: IPivotDimension,
-        dimExprTree: IFilteringExpressionsTree,
-        done: (colVals: any[]) => void) {
-        let columnValues = [];
-        const data = this.gridAPI.get_data();
-        const state = {
-            expressionsTree: dimExprTree,
-            strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(),
-            advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree
-        };
-        const filtered = FilterUtil.filter(data, state, this);
-        const allValuesHierarchy = PivotUtil.getFieldsHierarchy(
-            filtered,
-            [dim],
-            PivotDimensionType.Column,
-            this.pivotKeys
-        );
-        const flatData = Array.from(allValuesHierarchy.values());
-        // Note: Once ESF supports tree view, we should revert this back.
-        columnValues = flatData.map(record => record['value']);
-        done(columnValues);
-        return;
-    }
-
     /** @hidden @internal */
     public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) {
         options.outlet = this.outlet;
@@ -1904,10 +1867,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     }
 
     protected generateDimensionColumns(): IgxColumnComponent[] {
-        const leafFields = PivotUtil.flatten(this.allDimensions, 0).filter(x => !x.childLevel).map(x => x.memberName);
+        const rootFields = this.allDimensions.map(x => x.memberName);
         const columns = [];
         const factory = this.resolver.resolveComponentFactory(IgxColumnComponent);
-        leafFields.forEach((field) => {
+        rootFields.forEach((field) => {
             const ref = factory.create(this.viewRef.injector);
             ref.instance.field = field;
             ref.changeDetectorRef.detectChanges();
@@ -1969,16 +1932,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         }
         currentFields.forEach((value) => {
             let shouldGenerate = true;
-            if (value.dimension && value.dimension.filter) {
-                const state = {
-                    expressionsTree: value.dimension.filter.filteringOperands[0],
-                    strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(),
-                    advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree
-                };
-                const filtered = FilterUtil.filter(cloneArray(value.records), state, this);
-                if (filtered.length === 0) {
-                    shouldGenerate = false;
-                }
+            if (data.length === 0) {
+                shouldGenerate = false;
             }
             if (shouldGenerate && (value.children == null || value.children.length === 0 || value.children.size === 0)) {
                 const col = this.createColumnForDimension(value, data, parent, this.hasMultipleValues);