Skip to content

Commit 3ab3287

Browse files
ChronosSFChronosSF
authored
Merge pull request #10915 from IgniteUI/mkirova/more-pivot-apis
Add more APIs to manipulate dimensions/values more easily.
2 parents 140d2b8 + cf55c2f commit 3ab3287

File tree

6 files changed

+672
-194
lines changed

6 files changed

+672
-194
lines changed

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

Lines changed: 6 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 { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange } from '../pivot-grid/pivot-grid.interface';
37+
import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, IValuesChange, PivotDimensionType } from '../pivot-grid/pivot-grid.interface';
3838
import { IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
3939

4040
export const IGX_GRID_BASE = new InjectionToken<GridType>('IgxGridBaseToken');
@@ -637,6 +637,11 @@ export interface PivotGridType extends GridType {
637637
toggleRow(rowID: any): void;
638638
resolveDataTypes(field: any): GridColumnDataType;
639639
resolveRowDimensionWidth(dim: IPivotDimension): number;
640+
moveDimension(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index? : number);
641+
getDimensionsByType(dimension: PivotDimensionType);
642+
toggleDimension(dimension: IPivotDimension);
643+
toggleValue(value: IPivotValue);
644+
moveValue(value: IPivotValue, index?: number);
640645
dimensionsChange: EventEmitter<IDimensionsChange>;
641646
valuesChange: EventEmitter<IValuesChange>;
642647
pivotKeys: IPivotKeys;

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

Lines changed: 216 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
3131
import { ColumnType, GridType, IGX_GRID_BASE, RowType } from '../common/grid.interface';
3232
import { IgxGridCRUDService } from '../common/crud.service';
3333
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
34-
import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IPivotConfiguration, IPivotDimension, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
34+
import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotValue, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
3535
import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
3636
import { IgxColumnGroupComponent } from '../columns/column-group.component';
3737
import { IgxColumnComponent } from '../columns/column.component';
@@ -128,7 +128,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
128128
* <igx-pivot-grid [pivotConfiguration]="config"></igx-pivot-grid>
129129
* ```
130130
*/
131-
public set pivotConfiguration(value :IPivotConfiguration) {
131+
public set pivotConfiguration(value: IPivotConfiguration) {
132132
this._pivotConfiguration = value;
133133
this.notifyChanges(true);
134134
}
@@ -774,7 +774,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
774774
}
775775

776776
public get values() {
777-
return this.pivotConfiguration.values.filter(x => x.enabled);
777+
return this.pivotConfiguration.values.filter(x => x.enabled) || [];
778778
}
779779

780780
public toggleColumn(col: IgxColumnComponent) {
@@ -1049,12 +1049,224 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
10491049
}
10501050
}
10511051

1052+
/**
1053+
* Inserts dimension in target collection by type at specified index or at the collection's end.
1054+
*
1055+
* @example
1056+
* ```typescript
1057+
* this.grid.insertDimensionAt(dimension, PivotDimensionType.Row, 1);
1058+
* ```
1059+
* @param dimension The dimension that will be added.
1060+
* @param targetCollectionType The target collection type to add to. Can be Row, Column or Filter.
1061+
* @param index The index in the collection at which to add.
1062+
* This parameter is optional. If not set it will add it to the end of the collection.
1063+
*/
1064+
public insertDimensionAt(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number) {
1065+
const targetCollection = this.getDimensionsByType(targetCollectionType);
1066+
if (index !== undefined) {
1067+
targetCollection.splice(index, 0, dimension);
1068+
} else {
1069+
targetCollection.push(dimension);
1070+
}
1071+
if (targetCollectionType === PivotDimensionType.Column) {
1072+
this.setupColumns();
1073+
}
1074+
this.pipeTrigger++;
1075+
this.dimensionsChange.emit({ dimensions: targetCollection, dimensionCollectionType: targetCollectionType });
1076+
if (targetCollectionType === PivotDimensionType.Filter) {
1077+
this.reflow();
1078+
}
1079+
}
1080+
1081+
/**
1082+
* Move dimension from its currently collection to the specified target collection by type at specified index or at the collection's end.
1083+
*
1084+
* @example
1085+
* ```typescript
1086+
* this.grid.moveDimension(dimension, PivotDimensionType.Row, 1);
1087+
* ```
1088+
* @param dimension The dimension that will be moved.
1089+
* @param targetCollectionType The target collection type to move it to. Can be Row, Column or Filter.
1090+
* @param index The index in the collection at which to add.
1091+
* This parameter is optional. If not set it will add it to the end of the collection.
1092+
*/
1093+
public moveDimension(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index?: number) {
1094+
const prevCollectionType = this.getDimensionType(dimension);
1095+
if (prevCollectionType === null) return;
1096+
// remove from old collection
1097+
this.removeDimension(dimension);
1098+
// add to target
1099+
this.insertDimensionAt(dimension, targetCollectionType, index);
1100+
}
1101+
1102+
/**
1103+
* Removes dimension from its currently collection.
1104+
* @remarks
1105+
* This is different than toggleDimension that enabled/disables the dimension.
1106+
* This completely removes the specified dimension from the collection.
1107+
* @example
1108+
* ```typescript
1109+
* this.grid.removeDimension(dimension);
1110+
* ```
1111+
* @param dimension The dimension to be removed.
1112+
*/
1113+
public removeDimension(dimension: IPivotDimension) {
1114+
const prevCollectionType = this.getDimensionType(dimension);
1115+
if (prevCollectionType === null) return;
1116+
const prevCollection = this.getDimensionsByType(prevCollectionType);
1117+
const currentIndex = prevCollection.indexOf(dimension);
1118+
prevCollection.splice(currentIndex, 1);
1119+
if (prevCollectionType === PivotDimensionType.Column) {
1120+
this.setupColumns();
1121+
}
1122+
if (prevCollectionType === PivotDimensionType.Filter) {
1123+
this.reflow();
1124+
}
1125+
this.pipeTrigger++;
1126+
this.cdr.detectChanges();
1127+
}
1128+
1129+
/**
1130+
* Toggles the dimension's enabled state on or off.
1131+
* @remarks
1132+
* The dimension remains in its current collection. This just changes its enabled state.
1133+
* @example
1134+
* ```typescript
1135+
* this.grid.toggleDimension(dimension);
1136+
* ```
1137+
* @param dimension The dimension to be toggled.
1138+
*/
1139+
public toggleDimension(dimension: IPivotDimension) {
1140+
const dimType = this.getDimensionType(dimension);
1141+
if (dimType === null) return;
1142+
const collection = this.getDimensionsByType(dimType);
1143+
dimension.enabled = !dimension.enabled;
1144+
if (dimType === PivotDimensionType.Column) {
1145+
this.setupColumns();
1146+
}
1147+
if (!dimension.enabled) {
1148+
this.filteringService.clearFilter(dimension.memberName);
1149+
}
1150+
this.pipeTrigger++;
1151+
this.dimensionsChange.emit({ dimensions: collection, dimensionCollectionType: dimType });
1152+
}
1153+
1154+
/**
1155+
* Inserts value at specified index or at the end.
1156+
*
1157+
* @example
1158+
* ```typescript
1159+
* this.grid.insertValueAt(value, 1);
1160+
* ```
1161+
* @param value The value definition that will be added.
1162+
* @param index The index in the collection at which to add.
1163+
* This parameter is optional. If not set it will add it to the end of the collection.
1164+
*/
1165+
public insertValueAt(value: IPivotValue, index?: number) {
1166+
if (!this.pivotConfiguration.values) {
1167+
this.pivotConfiguration.values = [];
1168+
}
1169+
const values = this.pivotConfiguration.values;
1170+
if (index !== undefined) {
1171+
values.splice(index, 0, value);
1172+
} else {
1173+
values.push(value);
1174+
}
1175+
this.setupColumns();
1176+
this.pipeTrigger++;
1177+
this.cdr.detectChanges();
1178+
this.valuesChange.emit({ values });
1179+
}
1180+
1181+
/**
1182+
* Move value from its currently at specified index or at the end.
1183+
*
1184+
* @example
1185+
* ```typescript
1186+
* this.grid.moveValue(value, 1);
1187+
* ```
1188+
* @param value The value that will be moved.
1189+
* @param index The index in the collection at which to add.
1190+
* This parameter is optional. If not set it will add it to the end of the collection.
1191+
*/
1192+
public moveValue(value: IPivotValue, index?: number) {
1193+
if (this.pivotConfiguration.values.indexOf(value) === -1) return;
1194+
// remove from old index
1195+
this.removeValue(value);
1196+
// add to new
1197+
this.insertValueAt(value, index);
1198+
}
1199+
1200+
/**
1201+
* Removes value from collection.
1202+
* @remarks
1203+
* This is different than toggleValue that enabled/disables the value.
1204+
* This completely removes the specified value from the collection.
1205+
* @example
1206+
* ```typescript
1207+
* this.grid.removeValue(dimension);
1208+
* ```
1209+
* @param value The value to be removed.
1210+
*/
1211+
public removeValue(value: IPivotValue,) {
1212+
const values = this.pivotConfiguration.values;
1213+
const currentIndex = values.indexOf(value);
1214+
if (currentIndex !== -1) {
1215+
values.splice(currentIndex, 1);
1216+
this.setupColumns();
1217+
this.pipeTrigger++;
1218+
this.valuesChange.emit({ values });
1219+
}
1220+
}
1221+
1222+
/**
1223+
* Toggles the value's enabled state on or off.
1224+
* @remarks
1225+
* The value remains in its current collection. This just changes its enabled state.
1226+
* @example
1227+
* ```typescript
1228+
* this.grid.toggleValue(value);
1229+
* ```
1230+
* @param value The value to be toggled.
1231+
*/
1232+
public toggleValue(value: IPivotValue) {
1233+
if (this.pivotConfiguration.values.indexOf(value) === -1) return;
1234+
value.enabled = !value.enabled;
1235+
this.setupColumns();
1236+
this.pipeTrigger++;
1237+
this.valuesChange.emit({ values: this.pivotConfiguration.values });
1238+
}
1239+
1240+
public getDimensionsByType(dimension: PivotDimensionType) {
1241+
switch (dimension) {
1242+
case PivotDimensionType.Row:
1243+
if (!this.pivotConfiguration.rows) {
1244+
this.pivotConfiguration.rows = [];
1245+
}
1246+
return this.pivotConfiguration.rows;
1247+
case PivotDimensionType.Column:
1248+
if (!this.pivotConfiguration.columns) {
1249+
this.pivotConfiguration.columns = [];
1250+
}
1251+
return this.pivotConfiguration.columns;
1252+
case PivotDimensionType.Filter:
1253+
if (!this.pivotConfiguration.filters) {
1254+
this.pivotConfiguration.filters = [];
1255+
}
1256+
return this.pivotConfiguration.filters;
1257+
default:
1258+
return null;
1259+
}
1260+
}
1261+
1262+
10521263
@ViewChildren(IgxPivotRowDimensionContentComponent)
10531264
protected rowDimensionContentCollection: QueryList<IgxPivotRowDimensionContentComponent>;
10541265

10551266
protected getDimensionType(dimension: IPivotDimension): PivotDimensionType {
10561267
return PivotUtil.flatten(this.rowDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Row :
1057-
PivotUtil.flatten(this.columnDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Column : PivotDimensionType.Filter;
1268+
PivotUtil.flatten(this.columnDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Column :
1269+
PivotUtil.flatten(this.filterDimensions).indexOf(dimension) !== -1 ? PivotDimensionType.Filter : null;
10581270
}
10591271

10601272
protected getLargesContentWidth(contents: ElementRef[]): string {

0 commit comments

Comments
 (0)