Skip to content

Commit 5f220a8

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Add events: dimensionsChange, valuesChange. Update combo selection on change.
1 parent 8a73021 commit 5f220a8

File tree

8 files changed

+117
-59
lines changed

8 files changed

+117
-59
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
3434
import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
3535
import { OverlaySettings } from '../../services/overlay/utilities';
3636
import { IPinningConfig } from '../grid.common';
37-
import { IPivotConfiguration, IPivotDimension, IPivotValue } from '../pivot-grid/pivot-grid.interface';
37+
import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotValue, IValuesChange } from '../pivot-grid/pivot-grid.interface';
3838

3939

4040
export const IGX_GRID_BASE = new InjectionToken<GridType>('IgxGridBaseToken');
@@ -628,6 +628,8 @@ export interface PivotGridType extends GridType {
628628
setupColumns(): void;
629629
toggleRow(rowID: any): void;
630630
resolveDataTypes(field: any): GridColumnDataType;
631+
dimensionsChange: EventEmitter<IDimensionsChange>;
632+
valuesChange: EventEmitter<IValuesChange>;
631633
}
632634
export interface GridSVGIcon {
633635
name: string;

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

Lines changed: 82 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
3333
import { GridServiceType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface';
3434
import { IgxGridCRUDService } from '../common/crud.service';
3535
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
36-
import { IPivotConfiguration, IPivotDimension, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
36+
import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
3737
import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
3838
import { IgxColumnGroupComponent } from '../columns/column-group.component';
3939
import { IgxColumnComponent } from '../columns/column.component';
@@ -86,6 +86,34 @@ const MINIMUM_COLUMN_WIDTH = 200;
8686
export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit,
8787
GridType, AfterViewInit {
8888

89+
/**
90+
* Emitted when the dimension collection is changed via the grid chip area.
91+
*
92+
* @remarks
93+
* Returns the new dimension collection and its type:
94+
* @example
95+
* ```html
96+
* <igx-pivot-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
97+
* (dimensionsChange)="dimensionsChange($event)"></igx-grid>
98+
* ```
99+
*/
100+
@Output()
101+
public dimensionsChange = new EventEmitter<IDimensionsChange>();
102+
103+
/**
104+
* Emitted when the values collection is changed via the grid chip area.
105+
*
106+
* @remarks
107+
* Returns the new dimension
108+
* @example
109+
* ```html
110+
* <igx-pivot-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
111+
* (valuesChange)="valuesChange($event)"></igx-grid>
112+
* ```
113+
*/
114+
@Output()
115+
public valuesChange = new EventEmitter<IValuesChange>();
116+
89117
/** @hidden @internal */
90118
@ViewChild(IgxPivotHeaderRowComponent, { static: true })
91119
public theadRow: IgxPivotHeaderRowComponent;
@@ -266,7 +294,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
266294

267295
public columnGroupStates = new Map<string, boolean>();
268296
public dimensionDataColumns;
269-
public pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'};
297+
public pivotKeys: IPivotKeys = { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' };
270298
public isPivot = true;
271299

272300
/**
@@ -429,29 +457,29 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
429457
@Inject(LOCALE_ID) localeId: string,
430458
protected platform: PlatformUtil,
431459
@Optional() @Inject(IgxGridTransaction) protected _diTransactions?: TransactionService<Transaction, State>) {
432-
super(
433-
selectionService,
434-
colResizingService,
435-
gridAPI,
436-
transactionFactory,
437-
elementRef,
438-
zone,
439-
document,
440-
cdr,
441-
resolver,
442-
differs,
443-
viewRef,
444-
appRef,
445-
moduleRef,
446-
factoryResolver,
447-
injector,
448-
navigation,
449-
filteringService,
450-
overlayService,
451-
summaryService,
452-
_displayDensityOptions,
453-
localeId,
454-
platform);
460+
super(
461+
selectionService,
462+
colResizingService,
463+
gridAPI,
464+
transactionFactory,
465+
elementRef,
466+
zone,
467+
document,
468+
cdr,
469+
resolver,
470+
differs,
471+
viewRef,
472+
appRef,
473+
moduleRef,
474+
factoryResolver,
475+
injector,
476+
navigation,
477+
filteringService,
478+
overlayService,
479+
summaryService,
480+
_displayDensityOptions,
481+
localeId,
482+
platform);
455483
}
456484

457485
/**
@@ -504,24 +532,24 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
504532
public getDimensionData(dim: IPivotDimension,
505533
dimExprTree: IFilteringExpressionsTree,
506534
done: (colVals: any[]) => void) {
507-
let columnValues = [];
508-
const data = this.gridAPI.get_data();
509-
const state = {
510-
expressionsTree: dimExprTree,
511-
strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(),
512-
advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree
513-
};
514-
const filtered = DataUtil.filter(data, state, this);
515-
const allValuesHierarchy = PivotUtil.getFieldsHierarchy(
516-
filtered,
517-
[dim],
518-
PivotDimensionType.Column,
519-
{aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
520-
);
521-
const flatData = Array.from(allValuesHierarchy.values());
522-
columnValues = flatData.map(record => this.extractValue(record['value']));
523-
done(columnValues);
524-
return;
535+
let columnValues = [];
536+
const data = this.gridAPI.get_data();
537+
const state = {
538+
expressionsTree: dimExprTree,
539+
strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(),
540+
advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree
541+
};
542+
const filtered = DataUtil.filter(data, state, this);
543+
const allValuesHierarchy = PivotUtil.getFieldsHierarchy(
544+
filtered,
545+
[dim],
546+
PivotDimensionType.Column,
547+
{ aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
548+
);
549+
const flatData = Array.from(allValuesHierarchy.values());
550+
columnValues = flatData.map(record => this.extractValue(record['value']));
551+
done(columnValues);
552+
return;
525553
}
526554

527555
/** @hidden */
@@ -922,12 +950,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
922950
/**
923951
* @hidden
924952
*/
925-
protected autogenerateColumns() {
926-
let columns = [];
927-
const data = this.gridAPI.get_data();
928-
this.dimensionDataColumns = this.generateDimensionColumns();
929-
let fieldsMap;
930-
if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
953+
protected autogenerateColumns() {
954+
let columns = [];
955+
const data = this.gridAPI.get_data();
956+
this.dimensionDataColumns = this.generateDimensionColumns();
957+
let fieldsMap;
958+
if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
931959
const fields = this.generateDataFields(data);
932960
const rowFields = PivotUtil.flatten(this.pivotConfiguration.rows).map(x => x.memberName);
933961
const keyFields = Object.values(this.pivotKeys);
@@ -936,10 +964,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
936964
fieldsMap = this.generateFromData(filteredFields);
937965
} else {
938966
fieldsMap = PivotUtil.getFieldsHierarchy(
939-
data,
940-
this.columnDimensions,
941-
PivotDimensionType.Column,
942-
{aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
967+
data,
968+
this.columnDimensions,
969+
PivotDimensionType.Column,
970+
{ aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
943971
);
944972
}
945973
columns = this.generateColumnHierarchy(fieldsMap, data);
@@ -1031,7 +1059,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
10311059
columns = columns.concat(measureChildren);
10321060
}
10331061

1034-
} else if(shouldGenerate) {
1062+
} else if (shouldGenerate) {
10351063
const ref = factoryColumnGroup.create(this.viewRef.injector);
10361064
ref.instance.parent = parent;
10371065
ref.instance.field = key;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ import { FilteringExpressionsTree } from '../../data-operations/filtering-expres
33
import { SortingDirection } from '../../data-operations/sorting-strategy';
44
import { ColumnType } from '../common/grid.interface';
55

6+
export interface IDimensionsChange {
7+
dimensions: IPivotDimension[],
8+
dimensionCollectionType: PivotDimensionType
9+
}
10+
11+
export interface IValuesChange {
12+
values: IPivotValue[]
13+
}
614

715
export interface IPivotDimensionStrategy {
816
process(collection: any,

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
8484
row.enabled = false;
8585
this.grid.pipeTrigger++;
8686
this.grid.filteringService.clearFilter(row.memberName);
87+
this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.rows, dimensionCollectionType: PivotDimensionType.Row});
8788
}
8889

8990
public columnRemoved(event: IBaseChipEventArgs) {
@@ -92,20 +93,23 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
9293
this.grid.setupColumns();
9394
this.grid.filteringService.clearFilter(col.memberName);
9495
this.grid.pipeTrigger++;
96+
this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.columns, dimensionCollectionType: PivotDimensionType.Row});
9597
}
9698

9799
public valueRemoved(event: IBaseChipEventArgs) {
98100
const value = this.grid.pivotConfiguration.values.find(x => x.member === event.owner.id);
99101
value.enabled = false;
100102
this.grid.setupColumns();
101103
this.grid.pipeTrigger++;
104+
this.grid.valuesChange.emit({values: this.grid.pivotConfiguration.values});
102105
}
103106

104107
public filterRemoved(event: IBaseChipEventArgs) {
105108
const filter = this.grid.pivotConfiguration.filters.find(x => x.memberName === event.owner.id);
106109
filter.enabled = false;
107110
this.grid.filteringService.clearFilter(filter.memberName);
108111
this.grid.pipeTrigger++;
112+
this.grid.dimensionsChange.emit({dimensions: this.grid.pivotConfiguration.filters, dimensionCollectionType: PivotDimensionType.Filter});
109113
}
110114

111115
public onFilteringIconPointerDown(event) {
@@ -243,6 +247,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
243247
currentDim.splice(dragChipIndex, 1);
244248
currentDim.splice(dragChipIndex > chipIndex ? chipIndex : chipIndex - 1, 0, newDim);
245249
this.grid.setupColumns();
250+
this.grid.valuesChange.emit({values: this.grid.pivotConfiguration.values});
246251
}
247252
}
248253

@@ -299,6 +304,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
299304
this.grid.setupColumns();
300305
}
301306
this.grid.pipeTrigger++;
307+
this.grid.dimensionsChange.emit({dimensions: currentDim, dimensionCollectionType: dimension});
302308
}
303309

304310
protected getDimensionsByType(dimension: PivotDimensionType) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
[data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
55
placeholder="Dimension(s)" searchPlaceholder="Search...">
66
</igx-combo>
7-
<igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
7+
<igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy" (dimensionsChange)='dimensionChange($event)'>
88
</igx-pivot-grid>
99
</div>

‎src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ViewChild } from '@angular/core';
2-
import { IgxPivotGridComponent, IgxPivotNumericAggregate, IPivotConfiguration, IPivotDimension } from 'igniteui-angular';
2+
import { IDimensionsChange, IgxPivotGridComponent, IgxPivotNumericAggregate, IPivotConfiguration, IPivotDimension } from 'igniteui-angular';
33
import { DATA } from '../shared/pivot-data';
44

55
@Component({
@@ -100,4 +100,10 @@ export class PivotGridHierarchySampleComponent {
100100
};
101101

102102
public origData = DATA;
103+
104+
public dimensionChange(event: IDimensionsChange) {
105+
const allDims = this.pivotConfigHierarchy.rows.concat(this.pivotConfigHierarchy.columns).concat(this.pivotConfigHierarchy.filters);
106+
const allEnabled = allDims.filter(x => x && x.enabled);
107+
this.selected = allEnabled;
108+
}
103109
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
[data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
55
placeholder="Dimension(s)" searchPlaceholder="Search...">
66
</igx-combo>
7-
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [pivotConfiguration]="pivotConfigHierarchy">
7+
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [pivotConfiguration]="pivotConfigHierarchy"
8+
(dimensionsChange)='dimensionChange($event)'>
89
</igx-pivot-grid>
910
</div>

‎src/app/pivot-grid/pivot-grid.sample.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import {
66
IPivotConfiguration,
77
PivotAggregation,
88
IgxPivotDateDimension,
9-
IPivotDimension
9+
IPivotDimension,
10+
IDimensionsChange
1011
} from 'igniteui-angular';
1112
import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
1213

@@ -186,4 +187,10 @@ export class PivotGridSampleComponent {
186187
}
187188
this.grid1.notifyDimensionChange(isColumnChange);
188189
}
190+
191+
public dimensionChange(event: IDimensionsChange) {
192+
const allDims = this.pivotConfigHierarchy.rows.concat(this.pivotConfigHierarchy.columns).concat(this.pivotConfigHierarchy.filters);
193+
const allEnabled = allDims.filter(x => x && x.enabled);
194+
this.selected = allEnabled;
195+
}
189196
}

0 commit comments

Comments
 (0)