Merge pull request #10599 from IgniteUI/mkirova/update-samples

Update samples with additional combo from which you can add/remove ex…

Author: dkamburov

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

@@ -34,7 +34,7 @@ import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
 import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { OverlaySettings } from '../../services/overlay/utilities';
 import { IPinningConfig } from '../grid.common';
-import { IPivotConfiguration, IPivotDimension, IPivotValue } from '../pivot-grid/pivot-grid.interface';
+import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotValue, IValuesChange } from '../pivot-grid/pivot-grid.interface';
 
 
 export const IGX_GRID_BASE = new InjectionToken<GridType>('IgxGridBaseToken');
@@ -628,6 +628,8 @@ export interface PivotGridType extends GridType {
     setupColumns(): void;
     toggleRow(rowID: any): void;
     resolveDataTypes(field: any): GridColumnDataType;
+    dimensionsChange: EventEmitter<IDimensionsChange>;
+    valuesChange: EventEmitter<IValuesChange>;
 }
 export interface GridSVGIcon {
     name: string;

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

@@ -33,7 +33,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
 import { GridServiceType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { IPivotConfiguration, IPivotDimension, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
+import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, 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';
@@ -86,6 +86,34 @@ const MINIMUM_COLUMN_WIDTH = 200;
 export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit,
     GridType, AfterViewInit {
 
+    /**
+     * Emitted when the dimension collection is changed via the grid chip area.
+     *
+     * @remarks
+     * Returns the new dimension collection and its type: 
+     * @example
+     * ```html
+     * <igx-pivot-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
+     *              (dimensionsChange)="dimensionsChange($event)"></igx-grid>
+     * ```
+     */
+    @Output()
+    public dimensionsChange = new EventEmitter<IDimensionsChange>();
+
+    /**
+     * Emitted when the values collection is changed via the grid chip area.
+     *
+     * @remarks
+     * Returns the new dimension
+     * @example
+     * ```html
+     * <igx-pivot-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
+     *              (valuesChange)="valuesChange($event)"></igx-grid>
+     * ```
+    */
+    @Output()
+    public valuesChange = new EventEmitter<IValuesChange>();
+
     /** @hidden @internal */
     @ViewChild(IgxPivotHeaderRowComponent, { static: true })
     public theadRow: IgxPivotHeaderRowComponent;
@@ -266,7 +294,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     public columnGroupStates = new Map<string, boolean>();
     public dimensionDataColumns;
-    public pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'};
+    public pivotKeys: IPivotKeys = { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' };
     public isPivot = true;
 
     /**
@@ -442,29 +470,29 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         @Inject(LOCALE_ID) localeId: string,
         protected platform: PlatformUtil,
         @Optional() @Inject(IgxGridTransaction) protected _diTransactions?: TransactionService<Transaction, State>) {
-            super(
-                selectionService,
-                colResizingService,
-                gridAPI,
-                transactionFactory,
-                elementRef,
-                zone,
-                document,
-                cdr,
-                resolver,
-                differs,
-                viewRef,
-                appRef,
-                moduleRef,
-                factoryResolver,
-                injector,
-                navigation,
-                filteringService,
-                overlayService,
-                summaryService,
-                _displayDensityOptions,
-                localeId,
-                platform);
+        super(
+            selectionService,
+            colResizingService,
+            gridAPI,
+            transactionFactory,
+            elementRef,
+            zone,
+            document,
+            cdr,
+            resolver,
+            differs,
+            viewRef,
+            appRef,
+            moduleRef,
+            factoryResolver,
+            injector,
+            navigation,
+            filteringService,
+            overlayService,
+            summaryService,
+            _displayDensityOptions,
+            localeId,
+            platform);
     }
 
     /**
@@ -494,6 +522,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         });
     }
 
+    /**
+     * Notifies for dimension change.
+     */
+    public notifyDimensionChange(regenerateColumns = false) {
+        if (regenerateColumns) {
+            this.setupColumns();
+        }
+        this.pipeTrigger++;
+        this.cdr.detectChanges();
+    }
+
     public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree,
         done: (uniqueValues: any[]) => void) {
         const config = this.pivotConfiguration;
@@ -508,24 +547,24 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     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 = DataUtil.filter(data, state, this);
-            const allValuesHierarchy = PivotUtil.getFieldsHierarchy(
-                filtered,
-                [dim],
-                PivotDimensionType.Column,
-                {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
-                );
-            const flatData = Array.from(allValuesHierarchy.values());
-            columnValues = flatData.map(record => this.extractValue(record['value']));
-            done(columnValues);
-            return;
+        let columnValues = [];
+        const data = this.gridAPI.get_data();
+        const state = {
+            expressionsTree: dimExprTree,
+            strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(),
+            advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree
+        };
+        const filtered = DataUtil.filter(data, state, this);
+        const allValuesHierarchy = PivotUtil.getFieldsHierarchy(
+            filtered,
+            [dim],
+            PivotDimensionType.Column,
+            { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
+        );
+        const flatData = Array.from(allValuesHierarchy.values());
+        columnValues = flatData.map(record => this.extractValue(record['value']));
+        done(columnValues);
+        return;
     }
 
     /** @hidden */
@@ -926,12 +965,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
      * @hidden
      */
-     protected autogenerateColumns() {
-         let columns = [];
-         const data = this.gridAPI.get_data();
-         this.dimensionDataColumns = this.generateDimensionColumns();
-         let fieldsMap;
-         if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
+    protected autogenerateColumns() {
+        let columns = [];
+        const data = this.gridAPI.get_data();
+        this.dimensionDataColumns = this.generateDimensionColumns();
+        let fieldsMap;
+        if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
             const fields = this.generateDataFields(data);
             const rowFields = PivotUtil.flatten(this.pivotConfiguration.rows).map(x => x.memberName);
             const keyFields = Object.values(this.pivotKeys);
@@ -940,10 +979,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             fieldsMap = this.generateFromData(filteredFields);
         } else {
             fieldsMap = PivotUtil.getFieldsHierarchy(
-            data,
-            this.columnDimensions,
-            PivotDimensionType.Column,
-            {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
+                data,
+                this.columnDimensions,
+                PivotDimensionType.Column,
+                { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
             );
         }
         columns = this.generateColumnHierarchy(fieldsMap, data);
@@ -1035,7 +1074,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
                     columns = columns.concat(measureChildren);
                 }
 
-            } else if(shouldGenerate) {
+            } else if (shouldGenerate) {
                 const ref = factoryColumnGroup.create(this.viewRef.injector);
                 ref.instance.parent = parent;
                 ref.instance.field = key;

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

@@ -3,6 +3,14 @@ import { FilteringExpressionsTree } from '../../data-operations/filtering-expres
 import { SortingDirection } from '../../data-operations/sorting-strategy';
 import { ColumnType } from '../common/grid.interface';
 
+export interface IDimensionsChange {
+    dimensions: IPivotDimension[],
+    dimensionCollectionType: PivotDimensionType
+}
+
+export interface IValuesChange {
+    values: IPivotValue[]
+}
 
 export interface IPivotDimensionStrategy {
     process(collection: any,

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

@@ -84,6 +84,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         row.enabled = false;
         this.grid.pipeTrigger++;
         this.grid.filteringService.clearFilter(row.memberName);
+        this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.rows, dimensionCollectionType: PivotDimensionType.Row});
     }
 
     public columnRemoved(event: IBaseChipEventArgs) {
@@ -92,20 +93,23 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         this.grid.setupColumns();
         this.grid.filteringService.clearFilter(col.memberName);
         this.grid.pipeTrigger++;
+        this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.columns, dimensionCollectionType: PivotDimensionType.Row});
     }
 
     public valueRemoved(event: IBaseChipEventArgs) {
         const value = this.grid.pivotConfiguration.values.find(x => x.member === event.owner.id);
         value.enabled = false;
         this.grid.setupColumns();
         this.grid.pipeTrigger++;
+        this.grid.valuesChange.emit({values: this.grid.pivotConfiguration.values});
     }
 
     public filterRemoved(event: IBaseChipEventArgs) {
         const filter = this.grid.pivotConfiguration.filters.find(x => x.memberName === event.owner.id);
         filter.enabled = false;
         this.grid.filteringService.clearFilter(filter.memberName);
         this.grid.pipeTrigger++;
+        this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.filters, dimensionCollectionType: PivotDimensionType.Filter});
     }
 
     public onFilteringIconPointerDown(event) {
@@ -243,6 +247,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
             currentDim.splice(dragChipIndex, 1);
             currentDim.splice(dragChipIndex > chipIndex ? chipIndex : chipIndex - 1, 0, newDim);
             this.grid.setupColumns();
+            this.grid.valuesChange.emit({values: this.grid.pivotConfiguration.values});
         }
     }
 
@@ -299,6 +304,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
             this.grid.setupColumns();
         }
         this.grid.pipeTrigger++;
+        this.grid.dimensionsChange.emit({dimensions: currentDim, dimensionCollectionType: dimension});
     }
 
     protected getDimensionsByType(dimension: PivotDimensionType) {

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

@@ -1,6 +1,9 @@
-<igx-pivot-grid
-    #grid1
-    [data]="origData"
-    [pivotConfiguration]="pivotConfigHierarchy">
-</igx-pivot-grid>
-
+<div class="sample-column">
+    <span>Dimensions:</span>
+    <igx-combo #combo class="combo" [itemsMaxHeight]="250" (selectionChanging)="handleChange($event)"
+        [data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
+        placeholder="Dimension(s)" searchPlaceholder="Search...">
+    </igx-combo>
+    <igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)='dimensionChange($event)'>
+    </igx-pivot-grid>
+</div>

src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.scss

@@ -21,6 +21,6 @@
     }
 
     .sample-column {
-        max-width: 900px;
+        max-width: 1200px;
     }
 }