From 8942f530cc626b05f8d5019fe0f7c9cbd6bb0ebe Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 11 Feb 2022 12:47:43 +0200 Subject: [PATCH 1/8] feat(igxPivot): Add empty template in case there are no rows, columns and values. --- .../src/i18n/BG/grid-resources.ts | 3 ++- .../src/i18n/CS/grid-resources.ts | 3 ++- .../src/i18n/DA/grid-resources.ts | 3 ++- .../src/i18n/DE/grid-resources.ts | 3 ++- .../src/i18n/ES/grid-resources.ts | 3 ++- .../src/i18n/FR/grid-resources.ts | 3 ++- .../src/i18n/HU/grid-resources.ts | 3 ++- .../src/i18n/IT/grid-resources.ts | 3 ++- .../src/i18n/JA/grid-resources.ts | 3 ++- .../src/i18n/KO/grid-resources.ts | 3 ++- .../src/i18n/NB/grid-resources.ts | 3 ++- .../src/i18n/NL/grid-resources.ts | 3 ++- .../src/i18n/PL/grid-resources.ts | 3 ++- .../src/i18n/PT/grid-resources.ts | 3 ++- .../src/i18n/RO/grid-resources.ts | 3 ++- .../src/i18n/SV/grid-resources.ts | 3 ++- .../src/i18n/TR/grid-resources.ts | 3 ++- .../src/i18n/ZH-HANS/grid-resources.ts | 3 ++- .../src/i18n/ZH-HANT/grid-resources.ts | 3 ++- .../src/lib/core/i18n/grid-resources.ts | 4 +++- .../src/lib/grids/grid-base.directive.ts | 2 +- .../pivot-grid/pivot-grid.component.html | 8 +++++++- .../grids/pivot-grid/pivot-grid.component.ts | 20 ++++++++++++++++++- .../lib/grids/pivot-grid/pivot-grid.pipes.ts | 6 ++++++ .../pivot-grid/pivot-header-row.component.ts | 2 +- 25 files changed, 75 insertions(+), 24 deletions(-) diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts index fae51e07748..e578c9dbf69 100644 --- a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsBG_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts index 44ef453dd06..0940db6cadf 100644 --- a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsCS_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts index 8994cd6371d..60065cc1254 100644 --- a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsDA_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts index df9fe3a5223..7ad915f8fb2 100644 --- a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsDE_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts index b307c7210be..f5dda677aee 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsES_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts index 9191c1ced7f..db2fcb7c222 100644 --- a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsFR_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts index ef9e57611a2..28b70c538e9 100644 --- a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts @@ -151,7 +151,8 @@ const GridResourceStringsHU_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts index 66257b55bfd..6e4d0e872be 100644 --- a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsIT_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts index 89835022c16..bd6c885b47a 100644 --- a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsJA_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts index ef5612d3a64..a4feb683d09 100644 --- a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsKO_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts index 94eaf4db937..226681dfaee 100644 --- a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsNB_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts index 08726683408..f317441f5cf 100644 --- a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsNL_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts index 17837c03e31..ce6ef6c01a8 100644 --- a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsPL_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts index 756771dc5c7..7567a7daa56 100644 --- a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsPT_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts index 4628d936430..0f6dd1e9fe3 100644 --- a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsRO_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts index c3269c56772..34f1eea713f 100644 --- a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsSV_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts index c3d5aac6136..431c48b46b5 100644 --- a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsTR_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts index 7adc9eaf29b..f6207477abc 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsZHHANS_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts index 63b6c4bf147..0f276fdbf71 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts @@ -150,7 +150,8 @@ const GridResourceStringsZHHANT_: ExpandRequire = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; /** diff --git a/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts index bb64e6ab182..175bd59546d 100644 --- a/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts +++ b/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts @@ -148,6 +148,7 @@ export interface IGridResourceStrings { igx_grid_pivot_column_drop_chip?: string; igx_grid_pivot_filter_drop_chip?: string; igx_grid_pivot_value_drop_chip?: string; + igx_grid_pivot_empty_message?: string; } export const GridResourceStringsEN: IGridResourceStrings = { @@ -299,5 +300,6 @@ export const GridResourceStringsEN: IGridResourceStrings = { igx_grid_pivot_row_drop_chip: 'Drop here to use as row', igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', - igx_grid_pivot_value_drop_chip: 'Drop here to use as value' + igx_grid_pivot_value_drop_chip: 'Drop here to use as value', + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' }; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index c383dc0d778..841e9a66de4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3551,7 +3551,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements public _zoneBegoneListeners() { this.zone.runOutsideAngular(() => { this.verticalScrollContainer.getScroll().addEventListener('scroll', this.verticalScrollHandler.bind(this)); - this.headerContainer.getScroll().addEventListener('scroll', this.horizontalScrollHandler.bind(this)); + this.headerContainer?.getScroll().addEventListener('scroll', this.horizontalScrollHandler.bind(this)); fromEvent(window, 'resize').pipe(takeUntil(this.destroy$)).subscribe(() => this.resizeNotify.next()); resizeObservable(this.nativeElement).pipe(takeUntil(this.destroy$)).subscribe(() => this.resizeNotify.next()); }); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html index e0b5b858024..68a567b6ab3 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html @@ -143,7 +143,7 @@ -
+
+ + + {{resourceStrings.igx_grid_pivot_empty_message}} + + +
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 537c861f84b..575656cbf63 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -1434,7 +1434,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni const newPath = path.join(separator); let targetHierarchy = currentHierarchy.get(newPath); if (!targetHierarchy) { - currentHierarchy.set(newPath, { value: newPath ,expandable: true, children: new Map(), dimension: this.columnDimensions[0] }); + currentHierarchy.set(newPath, { value: newPath, expandable: true, children: new Map(), dimension: this.columnDimensions[0] }); targetHierarchy = currentHierarchy.get(newPath); } currentHierarchy = targetHierarchy.children; @@ -1575,4 +1575,22 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni public getPropName(dim: IPivotDimension) { return !!dim ?? dim.memberName + this.pivotKeys.rowDimensionSeparator + 'height'; } + + /** + * @hidden @internal + */ + @ViewChild('emptyPivotGridTemplate', { read: TemplateRef, static: true }) + public emptyPivotGridTemplate: TemplateRef; + + /** + * @hidden @internal + */ + public get template(): TemplateRef { + const allEnabledDimensions = this.rowDimensions.concat(this.columnDimensions); + if (allEnabledDimensions.length === 0 && this.values.length === 0) { + // no enabled values and dimensions + return this.emptyPivotGridTemplate; + } + super.template; + } } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts index 46eb2170de3..c57866588dc 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts @@ -38,6 +38,12 @@ export class IgxPivotRowPipe implements PipeTransform { ): any[] { const pivotKeys = config.pivotKeys || DEFAULT_PIVOT_KEYS; const enabledRows = config.rows.filter(x => x.enabled); + const enabledColumns = config.columns.filter(x => x.enabled); + const enabledValues = config.values.filter(x => x.enabled); + if (enabledRows.length === 0 && enabledColumns.length === 0 && enabledValues.length === 0) { + // nothing to group and aggregate by ... + return []; + } const rowStrategy = config.rowStrategy || PivotRowDimensionsStrategy.instance(); const data = cloneArray(collection, true); return rowStrategy.process(data, enabledRows, config.values, pivotKeys); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts index 26828e0db75..3cfba03cc1d 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts @@ -236,7 +236,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem * @internal */ public ngOnChanges(changes: SimpleChanges) { - if (changes.unpinnedColumnCollection && this.unpinnedColumnCollection.length > 0) { + if (changes.unpinnedColumnCollection) { this.populateColumnDimensionsByLevel(); } } From 09e12f74e46212d60740bf5513120bb791f719dd Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 11 Feb 2022 15:06:48 +0200 Subject: [PATCH 2/8] chore(*): Add checks in case any of the configs are null. --- .../src/lib/data-operations/pivot-strategy.ts | 4 ++-- .../pivot-grid/pivot-filtering.service.ts | 5 +++-- .../grids/pivot-grid/pivot-grid.component.ts | 19 +++++++++++-------- .../lib/grids/pivot-grid/pivot-grid.pipes.ts | 16 ++++++++-------- .../src/lib/grids/pivot-grid/pivot-util.ts | 2 +- 5 files changed, 25 insertions(+), 21 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts index 6a09ca8c7e5..27441a4f065 100644 --- a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts @@ -204,7 +204,7 @@ 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 = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); + const allDimensions = (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); const enabledDimensions = allDimensions.filter(x => x && x.enabled); const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName); return PivotUtil.extractValueFromDimension(dim, rec); @@ -227,7 +227,7 @@ export class DefaultPivotSortingStrategy extends DefaultSortingStrategy { grid?: PivotGridType) { const key = fieldName; const config = grid.pivotConfiguration; - const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); + const allDimensions = (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); const enabledDimensions = allDimensions.filter(x => x && x.enabled); this.dimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === key); const reverse = (dir === SortingDirection.Desc ? -1 : 1); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts index 900c7a4e1cf..da2b68cc4af 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts @@ -21,8 +21,9 @@ export class IgxPivotFilteringService extends IgxFilteringService { super.clear_filter(fieldName); const grid = this.grid; const config = (grid as IgxPivotGridComponent).pivotConfiguration; - const allDimensions = PivotUtil.flatten(config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined)); - const dim = allDimensions.find(x => x.memberName === fieldName || x.member === fieldName); + const allDimensions = (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); + const allDimensionsFlat = PivotUtil.flatten(allDimensions); + const dim = allDimensionsFlat.find(x => x.memberName === fieldName); dim.filter = undefined; grid.filteringPipeTrigger++; if (allDimensions.indexOf(dim) !== -1) { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 575656cbf63..8bcaf1db472 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -614,14 +614,19 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree, done: (uniqueValues: any[]) => void) { const config = this.pivotConfiguration; - const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); - const enabledDimensions = allDimensions.filter(x => x && x.enabled); + const enabledDimensions = this.allDimension.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)); } } + /** @hidden @internal */ + public get allDimension() { + const config = this.pivotConfiguration; + return (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); + } + public getDimensionData(dim: IPivotDimension, dimExprTree: IFilteringExpressionsTree, done: (colVals: any[]) => void) { @@ -771,11 +776,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } public get rowDimensions() { - return this.pivotConfiguration.rows.filter(x => x.enabled) || []; + return this.pivotConfiguration.rows?.filter(x => x.enabled) || []; } public get columnDimensions() { - return this.pivotConfiguration.columns.filter(x => x.enabled) || []; + return this.pivotConfiguration.columns?.filter(x => x.enabled) || []; } public get filterDimensions() { @@ -783,7 +788,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } public get values() { - return this.pivotConfiguration.values.filter(x => x.enabled) || []; + return this.pivotConfiguration.values?.filter(x => x.enabled) || []; } public toggleColumn(col: IgxColumnComponent) { @@ -1408,9 +1413,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } protected generateDimensionColumns(): IgxColumnComponent[] { - const config = this.pivotConfiguration; - const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); - const leafFields = PivotUtil.flatten(allDimensions, 0).filter(x => !x.childLevel).map(x => x.memberName); + const leafFields = PivotUtil.flatten(this.allDimension, 0).filter(x => !x.childLevel).map(x => x.memberName); const columns = []; const factory = this.resolver.resolveComponentFactory(IgxColumnComponent); leafFields.forEach((field) => { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts index c57866588dc..2ea3ebd19e7 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts @@ -37,9 +37,9 @@ export class IgxPivotRowPipe implements PipeTransform { __? ): any[] { const pivotKeys = config.pivotKeys || DEFAULT_PIVOT_KEYS; - const enabledRows = config.rows.filter(x => x.enabled); - const enabledColumns = config.columns.filter(x => x.enabled); - const enabledValues = config.values.filter(x => x.enabled); + const enabledRows = config.rows?.filter(x => x.enabled) || []; + const enabledColumns = config.columns?.filter(x => x.enabled) || []; + const enabledValues = config.values?.filter(x => x.enabled) || []; if (enabledRows.length === 0 && enabledColumns.length === 0 && enabledValues.length === 0) { // nothing to group and aggregate by ... return []; @@ -70,7 +70,7 @@ export class IgxPivotRowExpansionPipe implements PipeTransform { __?, ): any[] { const pivotKeys = config.pivotKeys || DEFAULT_PIVOT_KEYS; - const enabledRows = config.rows.filter(x => x.enabled); + const enabledRows = config.rows?.filter(x => x.enabled) || []; const data = collection ? cloneArray(collection, true) : []; let totalLlv = 0; const prevDims = []; @@ -126,7 +126,7 @@ export class IgxPivotCellMergingPipe implements PipeTransform { const data = collection ? cloneArray(collection, true) : []; const res = []; - const enabledRows = config.rows.filter(x => x.enabled); + const enabledRows = config.rows?.filter(x => x.enabled) || []; const prevDims = enabledRows.filter((d, ind) => ind < enabledRows.indexOf(dim)); let groupData = []; @@ -176,8 +176,8 @@ export class IgxPivotColumnPipe implements PipeTransform { __? ): any[] { const pivotKeys = config.pivotKeys || DEFAULT_PIVOT_KEYS; - const enabledColumns = config.columns.filter(x => x.enabled); - const enabledValues = config.values.filter(x => x.enabled); + const enabledColumns = config.columns?.filter(x => x.enabled) || []; + const enabledValues = config.values?.filter(x => x.enabled) || []; const colStrategy = config.columnStrategy || PivotColumnDimensionsStrategy.instance(); const data = cloneArray(collection, true); @@ -257,7 +257,7 @@ export class IgxPivotGridSortingPipe implements PipeTransform { public transform(collection: any[], config: IPivotConfiguration, sorting: IGridSortingStrategy, id: string, pipeTrigger: number, pinned?): any[] { let result: any[]; - const allDimensions = config.rows; + const allDimensions = config.rows || []; const enabledDimensions = allDimensions.filter(x => x && x.enabled); const expressions: ISortingExpression[] = []; PivotUtil.flatten(enabledDimensions).forEach(x => { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts index fd8495996ce..52c7fb54e86 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts @@ -415,7 +415,7 @@ export class PivotUtil { } public static buildExpressionTree(config: IPivotConfiguration) { - const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined); + const allDimensions = (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); const enabledDimensions = allDimensions.filter(x => x && x.enabled); const expressionsTree = new FilteringExpressionsTree(FilteringLogic.And); From ae3887adfe10c31997c1e5e73c63fc3e354ab5a4 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 11 Feb 2022 15:28:49 +0200 Subject: [PATCH 3/8] chore(*): Add test. --- .../grids/pivot-grid/pivot-grid.component.ts | 2 +- .../lib/grids/pivot-grid/pivot-grid.spec.ts | 150 ++++++++++++------ 2 files changed, 104 insertions(+), 48 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 8bcaf1db472..f939251e657 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -134,7 +134,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } public get pivotConfiguration() { - return this._pivotConfiguration; + return this._pivotConfiguration || { rows: null, columns: null, values: null, filters: null }; } @Input() diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 1ef15e7992d..6f34439664b 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -12,7 +12,7 @@ import { PivotDimensionType } from './pivot-grid.interface'; import { IgxPivotHeaderRowComponent } from './pivot-header-row.component'; import { IgxPivotDateDimension, IgxPivotGridModule } from './public_api'; import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component'; -import { IgxPivotDateAggregate } from './pivot-grid-aggregate'; +import { IgxPivotDateAggregate, IgxPivotNumericAggregate } from './pivot-grid-aggregate'; const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down'; const CSS_CLASS_LIST = 'igx-drop-down__list'; const CSS_CLASS_ITEM = 'igx-drop-down__item'; @@ -34,6 +34,62 @@ describe('Basic IgxPivotGrid #pivotGrid', () => { fixture.detectChanges(); })); + fit('should show empty template when there are no dimensions and values', () => { + // whole pivotConfiguration is undefined + const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent; + pivotGrid.pivotConfiguration = undefined; + fixture.detectChanges(); + + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values defined.'); + + // configuration is defined but all collections are empty + pivotGrid.pivotConfiguration = { + columns: [], + rows: [], + values: [] + }; + fixture.detectChanges(); + + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values defined.'); + + + // has dimensions and values, but they are disabled + pivotGrid.pivotConfiguration = { + columns: [ + { + enabled: false, + memberName: 'Country' + } + ], + rows: [ + { + enabled: false, + memberName: 'ProductCategory' + } + ], + values: [ + { + enabled: false, + member: 'UnitsSold', + aggregate: { + aggregator: IgxPivotNumericAggregate.sum, + key: 'SUM', + label: 'Sum', + }, + } + ] + }; + fixture.detectChanges(); + + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values defined.'); + }); + it('should apply formatter and dataType from measures', () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.width = '1500px'; @@ -1538,17 +1594,17 @@ describe('IgxPivotGrid APIs #pivotGrid', () => { expect(pivotGrid.columnDimensions.length).toBe(2); expect(pivotGrid.columns.length).toBe(28); - // from column to filter - pivotGrid.moveDimension(dim, PivotDimensionType.Filter, 0); - fixture.detectChanges(); + // from column to filter + pivotGrid.moveDimension(dim, PivotDimensionType.Filter, 0); + fixture.detectChanges(); - expect(pivotGrid.pivotConfiguration.columns.length).toBe(1); - expect(pivotGrid.pivotConfiguration.filters.length).toBe(1); - expect(pivotGrid.columns.length).toBe(15); + expect(pivotGrid.pivotConfiguration.columns.length).toBe(1); + expect(pivotGrid.pivotConfiguration.filters.length).toBe(1); + expect(pivotGrid.columns.length).toBe(15); - let headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row'); - let chip = headerRow.querySelector('igx-chip[id="All cities"]'); - expect(chip).not.toBeNull(); + let headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row'); + let chip = headerRow.querySelector('igx-chip[id="All cities"]'); + expect(chip).not.toBeNull(); // from filter to row @@ -1563,10 +1619,10 @@ describe('IgxPivotGrid APIs #pivotGrid', () => { rowHeaders = dimensionContents[1].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent)); const first = rowHeaders.map(x => x.componentInstance.column.header)[0]; expect(first).toBe('All Cities'); - }); + }); - it('should allow inserting new value at index.', () => { - const value = { + it('should allow inserting new value at index.', () => { + const value = { member: 'Date', aggregate: { aggregator: IgxPivotDateAggregate.latest, @@ -1580,17 +1636,17 @@ describe('IgxPivotGrid APIs #pivotGrid', () => { expect(pivotGrid.values.length).toBe(3); expect(pivotGrid.values[1].member).toBe('Date'); expect(pivotGrid.columns.length).toBe(20); - }); + }); - it('should allow removing value.', () => { - pivotGrid.removeValue(pivotGrid.values[1]); - fixture.detectChanges(); - expect(pivotGrid.pivotConfiguration.values.length).toBe(1); - expect(pivotGrid.values[0].member).toBe('UnitsSold'); - expect(pivotGrid.columns.length).toBe(5); - }); + it('should allow removing value.', () => { + pivotGrid.removeValue(pivotGrid.values[1]); + fixture.detectChanges(); + expect(pivotGrid.pivotConfiguration.values.length).toBe(1); + expect(pivotGrid.values[0].member).toBe('UnitsSold'); + expect(pivotGrid.columns.length).toBe(5); + }); - it('should allow toggling value.', () => { + it('should allow toggling value.', () => { // toggle off pivotGrid.toggleValue(pivotGrid.pivotConfiguration.values[1]); fixture.detectChanges(); @@ -1606,29 +1662,29 @@ describe('IgxPivotGrid APIs #pivotGrid', () => { expect(pivotGrid.values[0].member).toBe('UnitsSold'); expect(pivotGrid.values[1].member).toBe('AmountOfSale'); expect(pivotGrid.columns.length).toBe(15); - }); - - it('should allow moving value.', () => { - const val = pivotGrid.pivotConfiguration.values[0]; - // move after - pivotGrid.moveValue(val, 1); - fixture.detectChanges(); - - expect(pivotGrid.values[0].member).toBe('AmountOfSale'); - expect(pivotGrid.values[1].member).toBe('UnitsSold'); - - let valueCols = pivotGrid.columns.filter(x => x.level === 1); - expect(valueCols[0].header).toBe('Amount of Sale'); - expect(valueCols[1].header).toBe('UnitsSold'); - - // move before - pivotGrid.moveValue(val, 0); - fixture.detectChanges(); - - expect(pivotGrid.values[0].member).toBe('UnitsSold'); - expect(pivotGrid.values[1].member).toBe('AmountOfSale'); - valueCols = pivotGrid.columns.filter(x => x.level === 1); - expect(valueCols[0].header).toBe('UnitsSold'); - expect(valueCols[1].header).toBe('Amount of Sale'); - }); + }); + + it('should allow moving value.', () => { + const val = pivotGrid.pivotConfiguration.values[0]; + // move after + pivotGrid.moveValue(val, 1); + fixture.detectChanges(); + + expect(pivotGrid.values[0].member).toBe('AmountOfSale'); + expect(pivotGrid.values[1].member).toBe('UnitsSold'); + + let valueCols = pivotGrid.columns.filter(x => x.level === 1); + expect(valueCols[0].header).toBe('Amount of Sale'); + expect(valueCols[1].header).toBe('UnitsSold'); + + // move before + pivotGrid.moveValue(val, 0); + fixture.detectChanges(); + + expect(pivotGrid.values[0].member).toBe('UnitsSold'); + expect(pivotGrid.values[1].member).toBe('AmountOfSale'); + valueCols = pivotGrid.columns.filter(x => x.level === 1); + expect(valueCols[0].header).toBe('UnitsSold'); + expect(valueCols[1].header).toBe('Amount of Sale'); + }); }); \ No newline at end of file From bb006cf688977d6b0086765777badd563d436366 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 11 Feb 2022 15:31:53 +0200 Subject: [PATCH 4/8] chore(*): Remove fit. --- .../src/lib/grids/pivot-grid/pivot-grid.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 6f34439664b..f3d7e5d7533 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -34,7 +34,7 @@ describe('Basic IgxPivotGrid #pivotGrid', () => { fixture.detectChanges(); })); - fit('should show empty template when there are no dimensions and values', () => { + it('should show empty template when there are no dimensions and values', () => { // whole pivotConfiguration is undefined const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent; pivotGrid.pivotConfiguration = undefined; From 6ae6f5c4b356f15eef7e9d17117da0384fae698b Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 15 Feb 2022 10:49:20 +0200 Subject: [PATCH 5/8] chore(*): Update messsage to be more accurate. --- .../igniteui-angular-i18n/src/i18n/BG/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/CS/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/DA/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/DE/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/ES/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/FR/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/HU/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/IT/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/JA/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/KO/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/NB/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/NL/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/PL/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/PT/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/RO/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/SV/grid-resources.ts | 2 +- .../igniteui-angular-i18n/src/i18n/TR/grid-resources.ts | 2 +- .../src/i18n/ZH-HANS/grid-resources.ts | 2 +- .../src/i18n/ZH-HANT/grid-resources.ts | 2 +- .../igniteui-angular/src/lib/core/i18n/grid-resources.ts | 2 +- .../src/lib/grids/pivot-grid/pivot-grid.spec.ts | 6 +++--- 21 files changed, 23 insertions(+), 23 deletions(-) diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts index e578c9dbf69..a443455e39a 100644 --- a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsBG_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts index 0940db6cadf..5277d85ed4d 100644 --- a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsCS_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts index 60065cc1254..af6adda5945 100644 --- a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsDA_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts index 7ad915f8fb2..975a538b659 100644 --- a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsDE_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts index f5dda677aee..32c431be944 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsES_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts index db2fcb7c222..d14a7d4da2e 100644 --- a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsFR_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts index 28b70c538e9..a7c2f2bc413 100644 --- a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts @@ -152,7 +152,7 @@ const GridResourceStringsHU_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts index 6e4d0e872be..ab2af817789 100644 --- a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsIT_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts index bd6c885b47a..692bd0afd97 100644 --- a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsJA_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts index a4feb683d09..8ec504d29d0 100644 --- a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsKO_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts index 226681dfaee..0a49102c68b 100644 --- a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsNB_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts index f317441f5cf..cc3d332f4d2 100644 --- a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsNL_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts index ce6ef6c01a8..3227c59b144 100644 --- a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsPL_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts index 7567a7daa56..ab9bb5818ae 100644 --- a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsPT_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts index 0f6dd1e9fe3..cf5b66ee714 100644 --- a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsRO_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts index 34f1eea713f..3503d0451ea 100644 --- a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsSV_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts index 431c48b46b5..3f495bf810d 100644 --- a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsTR_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts index f6207477abc..01c8034e80b 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsZHHANS_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts index 0f276fdbf71..f02d4021017 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts @@ -151,7 +151,7 @@ const GridResourceStringsZHHANT_: ExpandRequire = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; /** diff --git a/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts index 175bd59546d..849db7150e7 100644 --- a/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts +++ b/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts @@ -301,5 +301,5 @@ export const GridResourceStringsEN: IGridResourceStrings = { igx_grid_pivot_column_drop_chip: 'Drop here to use as column', igx_grid_pivot_filter_drop_chip: 'Drop here to use as filter', igx_grid_pivot_value_drop_chip: 'Drop here to use as value', - igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values defined.' + igx_grid_pivot_empty_message: 'Pivot grid has no dimensions and values.' }; diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index f3d7e5d7533..4027cf3f2cb 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -42,7 +42,7 @@ describe('Basic IgxPivotGrid #pivotGrid', () => { // no rows, just empty message expect(pivotGrid.rowList.length).toBe(0); - expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values defined.'); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); // configuration is defined but all collections are empty pivotGrid.pivotConfiguration = { @@ -54,7 +54,7 @@ describe('Basic IgxPivotGrid #pivotGrid', () => { // no rows, just empty message expect(pivotGrid.rowList.length).toBe(0); - expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values defined.'); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); // has dimensions and values, but they are disabled @@ -87,7 +87,7 @@ describe('Basic IgxPivotGrid #pivotGrid', () => { // no rows, just empty message expect(pivotGrid.rowList.length).toBe(0); - expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values defined.'); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); }); it('should apply formatter and dataType from measures', () => { From ecaa97072f31ff44749f9d0c444df1c31c388d61 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 15 Feb 2022 11:21:46 +0200 Subject: [PATCH 6/8] chore(*): Allow setting a custom empty template. --- .../lib/grids/pivot-grid/pivot-grid.component.ts | 13 ++++++++++++- .../src/lib/grids/pivot-grid/pivot-grid.spec.ts | 11 +++++++++++ .../src/lib/test-utils/pivot-grid-samples.spec.ts | 9 +++++++-- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 80edf209047..39136bd76f9 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -1674,6 +1674,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni * @hidden @internal */ @ViewChild('emptyPivotGridTemplate', { read: TemplateRef, static: true }) + public defaultEmptyPivotGridTemplate: TemplateRef; + + /** + * Gets/Sets a custom template when pivot grid is empty. + * + * @example + * ```html + * + * ``` + */ + @Input() public emptyPivotGridTemplate: TemplateRef; /** @@ -1683,7 +1694,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni const allEnabledDimensions = this.rowDimensions.concat(this.columnDimensions); if (allEnabledDimensions.length === 0 && this.values.length === 0) { // no enabled values and dimensions - return this.emptyPivotGridTemplate; + return this.emptyPivotGridTemplate || this.defaultEmptyPivotGridTemplate; } super.template; } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 4027cf3f2cb..af5d3c8079e 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -90,6 +90,17 @@ describe('Basic IgxPivotGrid #pivotGrid', () => { expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); }); + it('should show allow setting custom empty template.', () => { + const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent; + pivotGrid.emptyPivotGridTemplate = fixture.componentInstance.emptyTemplate; + pivotGrid.pivotConfiguration = undefined; + fixture.detectChanges(); + + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Custom empty template.'); + }); + it('should apply formatter and dataType from measures', () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.width = '1500px'; diff --git a/projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts index d8203fe1951..f2a6e245e63 100644 --- a/projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, TemplateRef, ViewChild } from '@angular/core'; import { IgxPivotNumericAggregate } from '../grids/pivot-grid/pivot-grid-aggregate'; import { IgxPivotGridComponent } from '../grids/pivot-grid/pivot-grid.component'; import { IPivotConfiguration, PivotAggregation } from '../grids/pivot-grid/pivot-grid.interface'; @@ -7,10 +7,15 @@ import { IPivotConfiguration, PivotAggregation } from '../grids/pivot-grid/pivot template: ` - ` + + + Custom empty template. + + ` }) export class IgxPivotGridTestBaseComponent { public defaultExpand = true; + @ViewChild('emptyTemplate', { read: TemplateRef, static: true }) public emptyTemplate: TemplateRef; @ViewChild('grid', { read: IgxPivotGridComponent, static: true }) public pivotGrid: IgxPivotGridComponent; public data; From f77a295f56d6bf5fdd62ee23730e70d5fcb771fb Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 17 Feb 2022 11:31:34 +0200 Subject: [PATCH 7/8] chore(*): Expose allDimensions as part of the public API. Re-use across strategies and services. --- .../src/lib/data-operations/pivot-strategy.ts | 5 ++--- .../src/lib/grids/common/grid.interface.ts | 1 + .../grids/pivot-grid/pivot-filtering.service.ts | 5 ++--- .../lib/grids/pivot-grid/pivot-grid.component.ts | 15 +++++++++++---- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts index 1edd4a5e8d1..050ed0942a2 100644 --- a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts @@ -144,7 +144,7 @@ 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 = (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); + 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); @@ -166,8 +166,7 @@ export class DefaultPivotSortingStrategy extends DefaultSortingStrategy { isTime?: boolean, grid?: PivotGridType) { const key = fieldName; - const config = grid.pivotConfiguration; - const allDimensions = (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); + const allDimensions = grid.allDimensions; const enabledDimensions = allDimensions.filter(x => x && x.enabled); this.dimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === key); const reverse = (dir === SortingDirection.Desc ? -1 : 1); diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index 439b62389f8..f555aa05ac5 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -626,6 +626,7 @@ export interface HierarchicalGridType extends GridType { export interface PivotGridType extends GridType { pivotConfiguration: IPivotConfiguration; + allDimensions: IPivotDimension[], showPivotConfigurationUI: boolean; columnDimensions: IPivotDimension[]; rowDimensions: IPivotDimension[]; diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts index da2b68cc4af..ebbecc0229d 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts @@ -19,9 +19,8 @@ export class IgxPivotFilteringService extends IgxFilteringService { public clear_filter(fieldName: string) { super.clear_filter(fieldName); - const grid = this.grid; - const config = (grid as IgxPivotGridComponent).pivotConfiguration; - const allDimensions = (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); + const grid = this.grid as IgxPivotGridComponent; + const allDimensions = grid.allDimensions; const allDimensionsFlat = PivotUtil.flatten(allDimensions); const dim = allDimensionsFlat.find(x => x.memberName === fieldName); dim.filter = undefined; diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 1bab746582d..c5e769f6611 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -692,15 +692,22 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree, done: (uniqueValues: any[]) => void) { const config = this.pivotConfiguration; - const enabledDimensions = this.allDimension.filter(x => x && x.enabled); + 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)); } } - /** @hidden @internal */ - public get allDimension() { + /** + * Gets the full list of dimensions. + * + * @example + * ```typescript + * const dimensions = this.grid.allDimensions; + * ``` + */ + public get allDimensions() { const config = this.pivotConfiguration; return (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); } @@ -1516,7 +1523,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } protected generateDimensionColumns(): IgxColumnComponent[] { - const leafFields = PivotUtil.flatten(this.allDimension, 0).filter(x => !x.childLevel).map(x => x.memberName); + const leafFields = PivotUtil.flatten(this.allDimensions, 0).filter(x => !x.childLevel).map(x => x.memberName); const columns = []; const factory = this.resolver.resolveComponentFactory(IgxColumnComponent); leafFields.forEach((field) => { From 43b2be49d0689ac355ab7720b1e2385338cf762f Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 17 Feb 2022 11:43:28 +0200 Subject: [PATCH 8/8] chore(*): Fix merge conflicts. --- .../lib/grids/pivot-grid/pivot-grid.spec.ts | 145 +++++++++--------- 1 file changed, 71 insertions(+), 74 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 86ec5f4a7bb..3e875064b45 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -19,6 +19,7 @@ const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down'; const CSS_CLASS_LIST = 'igx-drop-down__list'; const CSS_CLASS_ITEM = 'igx-drop-down__item'; describe('IgxPivotGrid #pivotGrid', () => { + describe('Basic IgxPivotGrid #pivotGrid', () => { let fixture; configureTestSuite((() => { @@ -35,78 +36,73 @@ describe('IgxPivotGrid #pivotGrid', () => { fixture = TestBed.createComponent(IgxPivotGridTestBaseComponent); fixture.detectChanges(); })); + it('should show empty template when there are no dimensions and values', () => { + // whole pivotConfiguration is undefined + const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent; + pivotGrid.pivotConfiguration = undefined; + fixture.detectChanges(); - it('should show empty template when there are no dimensions and values', () => { - // whole pivotConfiguration is undefined - const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent; - pivotGrid.pivotConfiguration = undefined; - fixture.detectChanges(); - - // no rows, just empty message - expect(pivotGrid.rowList.length).toBe(0); - expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); - // configuration is defined but all collections are empty - pivotGrid.pivotConfiguration = { - columns: [], - rows: [], - values: [] - }; - fixture.detectChanges(); + // configuration is defined but all collections are empty + pivotGrid.pivotConfiguration = { + columns: [], + rows: [], + values: [] + }; + fixture.detectChanges(); - // no rows, just empty message - expect(pivotGrid.rowList.length).toBe(0); - expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); - // has dimensions and values, but they are disabled - pivotGrid.pivotConfiguration = { - columns: [ - { - enabled: false, - memberName: 'Country' - } - ], - rows: [ - { - enabled: false, - memberName: 'ProductCategory' - } - ], - values: [ - { - enabled: false, - member: 'UnitsSold', - aggregate: { - aggregator: IgxPivotNumericAggregate.sum, - key: 'SUM', - label: 'Sum', - }, - } - ] - }; - fixture.detectChanges(); + // has dimensions and values, but they are disabled + pivotGrid.pivotConfiguration = { + columns: [ + { + enabled: false, + memberName: 'Country' + } + ], + rows: [ + { + enabled: false, + memberName: 'ProductCategory' + } + ], + values: [ + { + enabled: false, + member: 'UnitsSold', + aggregate: { + aggregator: IgxPivotNumericAggregate.sum, + key: 'SUM', + label: 'Sum', + }, + } + ] + }; + fixture.detectChanges(); - // no rows, just empty message - expect(pivotGrid.rowList.length).toBe(0); - expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); - }); + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Pivot grid has no dimensions and values.'); + }); - it('should show allow setting custom empty template.', () => { - const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent; - pivotGrid.emptyPivotGridTemplate = fixture.componentInstance.emptyTemplate; - pivotGrid.pivotConfiguration = undefined; - fixture.detectChanges(); + it('should show allow setting custom empty template.', () => { + const pivotGrid = fixture.componentInstance.pivotGrid as IgxPivotGridComponent; + pivotGrid.emptyPivotGridTemplate = fixture.componentInstance.emptyTemplate; + pivotGrid.pivotConfiguration = undefined; + fixture.detectChanges(); - // no rows, just empty message - expect(pivotGrid.rowList.length).toBe(0); - expect(pivotGrid.tbody.nativeElement.textContent).toBe('Custom empty template.'); - }); + // no rows, just empty message + expect(pivotGrid.rowList.length).toBe(0); + expect(pivotGrid.tbody.nativeElement.textContent).toBe('Custom empty template.'); + }); - it('should apply formatter and dataType from measures', () => { - const pivotGrid = fixture.componentInstance.pivotGrid; - pivotGrid.width = '1500px'; - fixture.detectChanges(); it('should apply formatter and dataType from measures', () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.width = '1500px'; @@ -419,7 +415,8 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(pivotGrid.rowList.first.cells.length).toEqual(pivotGrid.values.length); expect(pivotGrid.columnDimensions.length).toEqual(0); }); - }); + + describe('IgxPivotGrid Features #pivotGrid', () => { it('should show excel style filtering via dimension chip.', () => { const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; @@ -1191,18 +1188,18 @@ describe('IgxPivotGrid #pivotGrid', () => { expect((rowChip1.nativeElement.nextElementSibling as any).style.visibility).toBe('hidden'); }); - it('should auto-size row dimension via the API.', () => { - const pivotGrid = fixture.componentInstance.pivotGrid; - const rowDimension = pivotGrid.pivotConfiguration.rows[0]; - expect(rowDimension.width).toBeUndefined(); - expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(200); - pivotGrid.autoSizeRowDimension(rowDimension); - fixture.detectChanges(); - expect(rowDimension.width).toBe('186px'); - expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(186); + it('should auto-size row dimension via the API.', () => { + const pivotGrid = fixture.componentInstance.pivotGrid; + const rowDimension = pivotGrid.pivotConfiguration.rows[0]; + expect(rowDimension.width).toBeUndefined(); + expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(200); + pivotGrid.autoSizeRowDimension(rowDimension); + fixture.detectChanges(); + expect(rowDimension.width).toBe('186px'); + expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(186); + }); }); }); -}); describe('IgxPivotGrid complex hierarchy #pivotGrid', () => { let fixture;