feat(pivot-grid): Add pivotConfiguration change event and clone Value strategy. (#12859)

Author: skrustev

CHANGELOG.md

@@ -84,7 +84,11 @@ import { IgxGridModule } from 'igniteui-angular';
 - `IgxGrid`, `IgxHierarchicalGrid`:
     - `totalItemCount` can now also be bound as `Input` in remote virtualization scenarios.
     - `rowExpandedIndicatorTemplate`, `rowCollapsedIndicatorTemplate`, `headerExpandedIndicatorTemplate`, `headerCollapsedIndicatorTemplate` can now also be bound as `Input` to provide templates for the row and header expand/collapse indicators respectively. This is in addition to the existing equivalent template directives to allow reuse.
+- `IgxPivotGrid`
+    - Added `pivotConfigurationChanged` event triggered any time any of `pivotConfiguration` properties is changed via the UI.
 - `ISortingExpression` now accepts an optional generic type parameter for type narrowing of the `fieldName` property to keys of the data item, e.g. `ISortingExpression<MyDataItem>`
+- `Util`
+    - Added new `CachedDataCloneStrategy` that allows for cloning object with circular references .
 
 ## 15.1.0
 

projects/igniteui-angular/src/lib/core/utils.ts

@@ -143,6 +143,46 @@ export const cloneValue = (value: any): any => {
     return value;
 };
 
+/**
+ * Creates deep clone of provided value.
+ * Supports primitive values, dates and objects.
+ * If passed value is array returns shallow copy of the array.
+ * For Objects property values and references are cached and reused.
+ * This allows for circular references to same objects.
+ *
+ * @param value value to clone
+ * @param cache map of cached values already parsed
+ * @returns Deep copy of provided value
+ * @hidden
+ */
+export const cloneValueCached = (value: any, cache: Map<any, any>): any => {
+    if (isDate(value)) {
+        return new Date(value.getTime());
+    }
+    if (Array.isArray(value)) {
+        return [...value];
+    }
+
+    if (value instanceof Map || value instanceof Set) {
+        return value;
+    }
+
+    if (isObject(value)) {
+        if (cache.has(value)) {
+            return cache.get(value);
+        }
+
+        const result = {};
+        cache.set(value, result);
+
+        for (const key of Object.keys(value)) {
+            result[key] = cloneValueCached(value[key], cache);
+        }
+        return result;
+    }
+    return value;
+};
+
 /**
  * Parse provided input to Date.
  *

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

@@ -1,11 +1,30 @@
-import { cloneValue } from "../core/utils";
+import { cloneValue, cloneValueCached } from "../core/utils";
 
 export interface IDataCloneStrategy {
+    /**
+     * Clones provided data
+     * @param data primitive value, date and object to be cloned
+     * @returns deep copy of provided value
+     */
     clone(data: any): any;
 }
 
+/**
+ * Simplified data clone strategy that deep clones primitive values, dates and objects.
+ * Does not support circular references in objects.
+ */
 export class DefaultDataCloneStrategy implements IDataCloneStrategy {
     public clone(data: any): any {
         return cloneValue(data);
     }
 }
+
+/**
+ * Data clone strategy that is uses cache to deep clone primitive values, dates and objects.
+ * It allows using circular references inside object.
+ */
+export class CachedDataCloneStrategy implements IDataCloneStrategy {
+    public clone(data: any): any {
+        return cloneValueCached(data, new Map<any, any>);
+    }
+}

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

@@ -5,6 +5,7 @@ import { PivotUtil } from '../grids/pivot-grid/pivot-util';
 import { FilteringStrategy, IgxFilterItem } from './filtering-strategy';
 import { cloneArray } from '../core/utils';
 import { IFilteringExpressionsTree } from './filtering-expressions-tree';
+import { IDataCloneStrategy } from './data-clone-strategy';
 
 export class NoopPivotDimensionsStrategy implements IPivotDimensionStrategy {
     private static _instance: NoopPivotDimensionsStrategy = null;
@@ -29,8 +30,9 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
     public process(
         collection: any,
         rows: IPivotDimension[],
-        values?: IPivotValue[],
-        pivotKeys: IPivotKeys = DEFAULT_PIVOT_KEYS
+        values: IPivotValue[],
+        cloneStrategy: IDataCloneStrategy,
+        pivotKeys: IPivotKeys = DEFAULT_PIVOT_KEYS,
     ): IPivotGridRecord[] {
         let hierarchies;
         let data: IPivotGridRecord[];
@@ -39,7 +41,7 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
         PivotUtil.assignLevels(currRows);
 
         if (currRows.length === 0) {
-            hierarchies = PivotUtil.getFieldsHierarchy(collection, [{ memberName: '', enabled: true }], PivotDimensionType.Row, pivotKeys);
+            hierarchies = PivotUtil.getFieldsHierarchy(collection, [{ memberName: '', enabled: true }], PivotDimensionType.Row, pivotKeys, cloneStrategy);
             // generate flat data from the hierarchies
             data = PivotUtil.processHierarchy(hierarchies, pivotKeys, 0, true);
             return data;
@@ -48,12 +50,12 @@ export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
         for (const row of currRows) {
             if (!data) {
                 // build hierarchies - groups and subgroups
-                hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys);
+                hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys, cloneStrategy);
                 // generate flat data from the hierarchies
                 data = PivotUtil.processHierarchy(hierarchies, pivotKeys, 0, true);
                 prevRowDims.push(row);
             } else {
-                PivotUtil.processGroups(data, row, pivotKeys);
+                PivotUtil.processGroups(data, row, pivotKeys, cloneStrategy);
             }
         }
         return data;
@@ -71,39 +73,40 @@ export class PivotColumnDimensionsStrategy implements IPivotDimensionStrategy {
         collection: IPivotGridRecord[],
         columns: IPivotDimension[],
         values: IPivotValue[],
+        cloneStrategy: IDataCloneStrategy,
         pivotKeys: IPivotKeys = DEFAULT_PIVOT_KEYS
     ): any[] {
-        const res = this.processHierarchy(collection, columns, values, pivotKeys);
+        const res = this.processHierarchy(collection, columns, values, pivotKeys, cloneStrategy);
         return res;
     }
 
-    private processHierarchy(collection: IPivotGridRecord[], columns: IPivotDimension[], values, pivotKeys) {
+    private processHierarchy(collection: IPivotGridRecord[], columns: IPivotDimension[], values, pivotKeys, cloneStrategy) {
         const result: IPivotGridRecord[] = [];
         collection.forEach(rec => {
             // apply aggregations based on the created groups and generate column fields based on the hierarchies
-            this.groupColumns(rec, columns, values, pivotKeys);
+            this.groupColumns(rec, columns, values, pivotKeys, cloneStrategy);
             result.push(rec);
         });
         return result;
     }
 
-    private groupColumns(rec: IPivotGridRecord, columns, values, pivotKeys) {
+    private groupColumns(rec: IPivotGridRecord, columns, values, pivotKeys, cloneStrategy) {
         const children = rec.children;
         if (children && children.size > 0) {
             children.forEach((childRecs) => {
                 if (childRecs) {
                     childRecs.forEach(child => {
-                        this.groupColumns(child, columns, values, pivotKeys);
+                        this.groupColumns(child, columns, values, pivotKeys, cloneStrategy);
                     })
                 }
             });
         }
-        this.applyAggregates(rec, columns, values, pivotKeys);
+        this.applyAggregates(rec, columns, values, pivotKeys, cloneStrategy);
     }
 
-    private applyAggregates(rec, columns, values, pivotKeys) {
+    private applyAggregates(rec, columns, values, pivotKeys, cloneStrategy) {
         const leafRecords = this.getLeafs(rec.records, pivotKeys);
-        const hierarchy = PivotUtil.getFieldsHierarchy(leafRecords, columns, PivotDimensionType.Column, pivotKeys);
+        const hierarchy = PivotUtil.getFieldsHierarchy(leafRecords, columns, PivotDimensionType.Column, pivotKeys, cloneStrategy);
         PivotUtil.applyAggregations(rec, hierarchy, values, pivotKeys)
     }
 
@@ -121,6 +124,7 @@ export class PivotColumnDimensionsStrategy implements IPivotDimensionStrategy {
 }
 
 export class DimensionValuesFilteringStrategy extends FilteringStrategy {
+
     /**
      * Creates a new instance of FormattedValuesFilteringStrategy.
      *
@@ -149,7 +153,8 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy {
             data,
             [dim],
             PivotDimensionType.Column,
-            grid.pivotKeys
+            grid.pivotKeys,
+            grid.pivotValueCloneStrategy
         );
         const isNoop = grid.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy || grid.pivotConfiguration.rowStrategy instanceof NoopPivotDimensionsStrategy;
         const items: IgxFilterItem[] = !isNoop ? this._getFilterItems(allValuesHierarchy, grid.pivotKeys) : [{value : ''}];

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

@@ -33,8 +33,8 @@ export class IgxPivotFilteringService extends IgxFilteringService {
     protected override filter_internal(fieldName: string, term, conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree,
         ignoreCase: boolean) {
         super.filter_internal(fieldName, term, conditionOrExpressionsTree, ignoreCase);
-        const grid = this.grid;
-        const config = (grid as IgxPivotGridComponent).pivotConfiguration;
+        const grid = this.grid as IgxPivotGridComponent;
+        const config = grid.pivotConfiguration;
         const allDimensions = PivotUtil.flatten(config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined));
         const enabledDimensions = allDimensions.filter(x => x && x.enabled);
         const dim = enabledDimensions.find(x => x.memberName === fieldName || x.member === fieldName);

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

@@ -33,8 +33,8 @@
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger
         | pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger
-        | pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions
-        | pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions
+        | pivotGridRow:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions
+        | pivotGridColumn:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions
         | pivotGridAutoTransform:pivotConfiguration:pipeTrigger
         | pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger
         | pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger"

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

@@ -36,7 +36,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
 import { ColumnType, GridType, IGX_GRID_BASE, RowType } from '../common/grid.interface';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
+import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
 import { IgxColumnComponent } from '../columns/column.component';
@@ -88,6 +88,7 @@ import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive';
 import { IgxGridDragSelectDirective } from '../selection/drag-select.directive';
 import { IgxGridBodyDirective } from '../grid.common';
 import { IgxColumnResizingService } from '../resizing/resizing.service';
+import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -183,6 +184,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     @Output()
     public dimensionsChange = new EventEmitter<IDimensionsChange>();
 
+    /**
+     * Emitted when any of the pivotConfiguration properties is changed via the grid chip area.
+     *
+     * @example
+     * ```html
+     * <igx-pivot-grid #grid [data]="localData" [height]="'305px'"
+     *              (pivotConfigurationChanged)="configurationChanged($event)"></igx-grid>
+     * ```
+     */
+    @Output()
+    public pivotConfigurationChange = new EventEmitter<IPivotConfigurationChangedEventArgs>();
+
 
     /**
      * Emitted when the dimension is initialized.
@@ -373,6 +386,26 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         }
     }
 
+    /**
+     * Gets/Sets the values clone strategy of the pivot grid when assigning them to different dimensions.
+     *
+     * @example
+     * ```html
+     *  <igx-pivot-grid #grid [data]="localData" [pivotValueCloneStrategy]="customCloneStrategy"></igx-pivot-grid>
+     * ```
+     * @hidden @internal
+     */
+    @Input()
+    public get pivotValueCloneStrategy(): IDataCloneStrategy {
+        return this._pivotValueCloneStrategy;
+    }
+
+    public set pivotValueCloneStrategy(strategy: IDataCloneStrategy) {
+        if (strategy) {
+            this._pivotValueCloneStrategy = strategy;
+        }
+    }
+
     /**
      * @hidden @internal
      */
@@ -600,6 +633,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return this._emptyRowDimension;
     }
 
+    protected _pivotValueCloneStrategy: IDataCloneStrategy = new DefaultDataCloneStrategy();
     protected override _defaultExpandState = false;
     protected override _filterStrategy: IFilteringStrategy = new DimensionValuesFilteringStrategy();
     private _data;
@@ -1537,6 +1571,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             this.dimensionDataColumns = this.generateDimensionColumns();
             this.reflow();
         }
+        this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
     }
 
     /**
@@ -1615,6 +1650,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         if (dimType === PivotDimensionType.Filter) {
             this.reflow();
         }
+        this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
     }
 
     /**
@@ -1642,6 +1678,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         this.pipeTrigger++;
         this.cdr.detectChanges();
         this.valuesChange.emit({ values });
+        this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
     }
 
     /**
@@ -1682,6 +1719,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             this.setupColumns();
             this.pipeTrigger++;
             this.valuesChange.emit({ values });
+            this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
         }
     }
 
@@ -1702,6 +1740,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         this.pipeTrigger++;
         this.valuesChange.emit({ values: this.pivotConfiguration.values });
         this.reflow();
+        this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
     }
 
     /**
@@ -1727,6 +1766,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             this.setupColumns();
         }
         this.cdr.detectChanges();
+        this.pivotConfigurationChange.emit({ pivotConfiguration: this.pivotConfiguration });
     }
 
     /**
@@ -1947,7 +1987,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                 sortedData,
                 this.columnDimensions,
                 PivotDimensionType.Column,
-                this.pivotKeys
+                this.pivotKeys,
+                this.pivotValueCloneStrategy
             );
         }
         columns = this.generateColumnHierarchy(fieldsMap, sortedData);