From 55f6139815bb3d4c7b8f7f85dda3beba23adc228 Mon Sep 17 00:00:00 2001 From: IMinchev64 Date: Fri, 28 Feb 2025 13:14:43 +0200 Subject: [PATCH] fix(pivot-grid): do not apply currency data type on values with count aggregator --- .../pivot-data-selector.component.ts | 33 +++++++++++++++- .../pivot-grid/pivot-grid-state.service.ts | 22 +++++++++++ .../grids/pivot-grid/pivot-grid.component.ts | 39 ++++++++++++++++++- .../pivot-grid/pivot-header-row.component.ts | 32 +++++++++++++++ 4 files changed, 123 insertions(+), 3 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-state.service.ts diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts index 64ebfce8054..3f358d1cc65 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts @@ -47,6 +47,8 @@ import { IgxIconComponent } from "../../icon/icon.component"; import { IgxInputGroupComponent } from "../../input-group/input-group.component"; import { fadeIn, fadeOut } from 'igniteui-angular/animations'; import { Size } from '../common/enums'; +import { GridColumnDataType } from '../../data-operations/data-util'; +import { IgxPivotGridStateService } from './pivot-grid-state.service'; interface IDataSelectorPanel { name: string; @@ -250,7 +252,7 @@ export class IgxPivotDataSelectorComponent { return this._grid?.pivotConfiguration.values || []; } - constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) { } + constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef, private pivotStateService: IgxPivotGridStateService) { } /** * @hidden @internal @@ -517,8 +519,37 @@ export class IgxPivotDataSelectorComponent { * @internal */ public onAggregationChange(event: ISelectionEventArgs) { + const valueMember = this.value.member; + const columns = this.grid.columns; + if (!this.isSelected(event.newSelection.value)) { this.value.aggregate = event.newSelection.value; + + const isCountAggregator = this.value.aggregate.key.toLowerCase() === 'count'; + const isSingleValue = this.grid.values.length === 1; + + columns.forEach(column => { + const isRelevantColumn = column.field?.includes(valueMember); + const isCurrencyColumn = column.dataType === GridColumnDataType.Currency; + + if (isSingleValue) { + if (isCountAggregator && isCurrencyColumn) { + column.dataType = GridColumnDataType.Number; + this.pivotStateService.addCurrencyColumn(valueMember); + } else if (this.pivotStateService.isCurrencyColumn(valueMember)) { + column.dataType = GridColumnDataType.Currency; + } + } else if (isRelevantColumn) { + if (isCountAggregator && isCurrencyColumn) { + column.dataType = GridColumnDataType.Number; + this.pivotStateService.addCurrencyColumn(valueMember); + } else if (this.pivotStateService.isCurrencyColumn(valueMember)) { + column.dataType = GridColumnDataType.Currency; + this.pivotStateService.removeCurrencyColumn(valueMember); + } + } + }); + this.grid.pipeTrigger++; this.grid.cdr.markForCheck(); } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-state.service.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-state.service.ts new file mode 100644 index 00000000000..4d7cab22059 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-state.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class IgxPivotGridStateService { + public currencyColumnSet: Set = new Set(); + + constructor() {} + + public addCurrencyColumn(columnName: string): void { + this.currencyColumnSet.add(columnName); + } + + public removeCurrencyColumn(columnName: string): void { + this.currencyColumnSet.delete(columnName); + } + + public isCurrencyColumn(columnName: string): boolean { + return this.currencyColumnSet.has(columnName); + } +} 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 042519ef0c8..a453ef2acc7 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 @@ -71,7 +71,7 @@ import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resi import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api'; import { cloneArray, PlatformUtil, resizeObservable } from '../../core/utils'; import { IgxPivotFilteringService } from './pivot-filtering.service'; -import { DataUtil } from '../../data-operations/data-util'; +import { DataUtil, GridColumnDataType } from '../../data-operations/data-util'; import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; import { IgxGridTransaction } from '../common/types'; import { GridBaseAPIService } from '../api.service'; @@ -102,6 +102,7 @@ import { IgxTextHighlightService } from '../../directives/text-highlight/text-hi import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotDateDimension } from './pivot-grid-dimensions'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; +import { IgxPivotGridStateService } from './pivot-grid-state.service'; let NEXT_ID = 0; const MINIMUM_COLUMN_WIDTH = 200; @@ -1028,6 +1029,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni summaryService: IgxGridSummaryService, @Inject(LOCALE_ID) localeId: string, platform: PlatformUtil, + private pivotStateService: IgxPivotGridStateService, @Optional() @Inject(IgxGridTransaction) _diTransactions?: TransactionService ) { super( @@ -2280,11 +2282,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni if (fields.size === 0) { this.values.forEach((value) => { const ref = createComponent(IgxColumnComponent, { environmentInjector: this.envInjector, elementInjector: this.injector }); + let columnDataType = value.dataType || this.resolveDataTypes(data.length ? data[0][value.member] : null); + + if (value.aggregate?.key?.toLowerCase() === 'count' && columnDataType === GridColumnDataType.Currency) { + this.pivotStateService.addCurrencyColumn(value.member); + columnDataType = GridColumnDataType.Number; + } + ref.instance.header = value.displayName; ref.instance.field = value.member; ref.instance.parent = parent; ref.instance.sortable = true; - ref.instance.dataType = value.dataType || this.resolveDataTypes(data.length ? data[0][value.member] : null); + ref.instance.dataType = columnDataType; ref.instance.formatter = value.formatter; columns.push(ref.instance); }); @@ -2298,9 +2307,35 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } if (shouldGenerate && (value.children == null || value.children.length === 0 || value.children.size === 0)) { const col = this.createColumnForDimension(value, data, parent, this.hasMultipleValues); + + this.values.forEach((aggregatorValue) => { + if (col.dataType === GridColumnDataType.Currency && aggregatorValue.aggregate?.key?.toLowerCase() === 'count') { + col.dataType = GridColumnDataType.Number; + this.pivotStateService.addCurrencyColumn(aggregatorValue.member); + } else if (this.pivotStateService.isCurrencyColumn(aggregatorValue.member) && aggregatorValue.aggregate?.key?.toLowerCase() !== 'count') { + col.dataType = GridColumnDataType.Currency; + this.pivotStateService.removeCurrencyColumn(aggregatorValue.member); + } + }) + columns.push(col); if (this.hasMultipleValues) { const measureChildren = this.getMeasureChildren(data, col, false, value.dimension.width); + + measureChildren.forEach((child) => { + this.values.forEach((aggregatorValue) => { + if (child.field.includes(aggregatorValue.member)) { + if (child.dataType === GridColumnDataType.Currency && aggregatorValue.aggregate?.key?.toLowerCase() === 'count') { + child.dataType = GridColumnDataType.Number; + this.pivotStateService.addCurrencyColumn(aggregatorValue.member); + } else if (this.pivotStateService.isCurrencyColumn(aggregatorValue.member) && aggregatorValue.aggregate?.key?.toLowerCase() !== 'count') { + child.dataType = GridColumnDataType.Currency; + this.pivotStateService.removeCurrencyColumn(aggregatorValue.member); + } + } + }) + }) + col.children.reset(measureChildren); columns = columns.concat(measureChildren); } 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 8ef6713927b..48b3726553c 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 @@ -38,6 +38,8 @@ import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component'; +import { GridColumnDataType } from '../../data-operations/data-util'; +import { IgxPivotGridStateService } from './pivot-grid-state.service'; /** * @@ -139,6 +141,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem ref: ElementRef, cdr: ChangeDetectorRef, protected renderer: Renderer2, + private pivotStateService: IgxPivotGridStateService ) { super(ref, cdr); } @@ -408,8 +411,37 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem * @internal */ public onAggregationChange(event: ISelectionEventArgs) { + const valueMember = this.value.member; + const columns = this.grid.columns; + if (!this.isSelected(event.newSelection.value)) { this.value.aggregate = event.newSelection.value; + + const isCountAggregator = this.value.aggregate.key.toLowerCase() === 'count'; + const isSingleValue = this.grid.values.length === 1; + + columns.forEach(column => { + const isRelevantColumn = column.field?.includes(valueMember); + const isCurrencyColumn = column.dataType === GridColumnDataType.Currency; + + if (isSingleValue) { + if (isCountAggregator && isCurrencyColumn) { + column.dataType = GridColumnDataType.Number; + this.pivotStateService.addCurrencyColumn(valueMember); + } else if (this.pivotStateService.isCurrencyColumn(valueMember)) { + column.dataType = GridColumnDataType.Currency; + } + } else if (isRelevantColumn) { + if (isCountAggregator && isCurrencyColumn) { + column.dataType = GridColumnDataType.Number; + this.pivotStateService.addCurrencyColumn(valueMember); + } else if (this.pivotStateService.isCurrencyColumn(valueMember)) { + column.dataType = GridColumnDataType.Currency; + this.pivotStateService.removeCurrencyColumn(valueMember); + } + } + }); + this.grid.pipeTrigger++; } }