From 93732921b0a0f09c7bacac4bda3d65a154d8fd20 Mon Sep 17 00:00:00 2001 From: skrustev Date: Tue, 18 Feb 2025 19:19:41 +0200 Subject: [PATCH 1/3] Update Sales Grid configuration button design. --- .../app/sales-grid/sales-grid.component.html | 15 ++-- .../app/sales-grid/sales-grid.component.ts | 74 +++++++++++++++++-- 2 files changed, 79 insertions(+), 10 deletions(-) diff --git a/projects/sales-grid/src/app/sales-grid/sales-grid.component.html b/projects/sales-grid/src/app/sales-grid/sales-grid.component.html index c9bbc67..f23e8b7 100644 --- a/projects/sales-grid/src/app/sales-grid/sales-grid.component.html +++ b/projects/sales-grid/src/app/sales-grid/sales-grid.component.html @@ -2,19 +2,20 @@
Sales Dashboard
- - - Brands: HM and HM Home - Stores: Bulgaria + {{dropdownValues.get(PivotViews.BrandsSeparate)?.title}} + {{dropdownValues.get(PivotViews.BrandsCombined)?.title}} + {{dropdownValues.get(PivotViews.Stores)?.title}} Export to Excel @@ -42,3 +43,7 @@
+ +
+ Change pivot configuration. +
diff --git a/projects/sales-grid/src/app/sales-grid/sales-grid.component.ts b/projects/sales-grid/src/app/sales-grid/sales-grid.component.ts index 9c8f819..307b22e 100644 --- a/projects/sales-grid/src/app/sales-grid/sales-grid.component.ts +++ b/projects/sales-grid/src/app/sales-grid/sales-grid.component.ts @@ -25,11 +25,21 @@ import { FilteringLogic, IPivotValue, THEME_TOKEN, - ThemeToken + ThemeToken, + IgxDropDownItemNavigationDirective, + IgxTooltipDirective, + IgxTooltipTargetDirective } from 'igniteui-angular'; import FLAGS from './data/flags.json' import SALES_DATA from './data/SalesData.json'; +enum PivotViews { + BrandsSeparate = 'brandsOr', + BrandsCombined = 'jeansAnd', + Stores = 'stores' +} + +// Custom aggregator to calculate profit value export class IgxSaleProfitAggregate { public static totalProfit = (_, data: any[] | undefined) => data?.reduce((accumulator, value) => accumulator + (value.Sale - value.Cost), 0) || 0; @@ -71,7 +81,8 @@ export class IgxSaleProfitAggregate { @Component({ standalone: true, selector: 'app-sales-grid', - imports: [CommonModule, IgxPivotGridComponent, IgxPivotDataSelectorComponent, IgxButtonDirective, IgxIconComponent, IgxToggleActionDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxCellHeaderTemplateDirective], + imports: [CommonModule, IgxPivotGridComponent, IgxPivotDataSelectorComponent, IgxButtonDirective, IgxIconComponent, IgxTooltipDirective, IgxTooltipTargetDirective, + IgxToggleActionDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxCellHeaderTemplateDirective, IgxDropDownItemNavigationDirective], templateUrl: './sales-grid.component.html', providers: [ { @@ -93,8 +104,9 @@ export class SalesGridComponent { public currencyPipe = new CurrencyPipe('en-US'); public brandFilter = new FilteringExpressionsTree(FilteringLogic.Or, 'Brand'); public bulgariaCountryFilter = new FilteringExpressionsTree(FilteringLogic.And); - public fileName = 'SalesGridApp'; + + // #region Various configurations for the grid that can be toggled public saleValue: IPivotValue = { enabled: true, member: 'Sale', @@ -211,6 +223,44 @@ export class SalesGridComponent { this.profitValue ] }; + public pivotConfigBrandsCombined: IPivotConfiguration = { + columns: [ + { + enabled: true, + memberName: 'Country', + displayName: 'Country' + }, + { + enabled: false, + memberName: 'Store', + displayName: 'Store' + }, + ], + rows: [ + new IgxPivotDateDimension({ + memberName: 'Date', + displayName: 'All Periods', + enabled: true + }, + { + fullDate: true, + quarters: true, + months: false, + }) + ], + values: [ + this.saleValue, + this.profitValue + ], + filters: [ + { + enabled: true, + memberName: 'Brand', + displayName: 'Brand', + filter: this.brandFilter + }, + ] + }; public pivotConfigStores: IPivotConfiguration = { columns: [ new IgxPivotDateDimension({ @@ -251,6 +301,15 @@ export class SalesGridComponent { } ] }; + // #endregion + + public PivotViews = PivotViews; + public selectedDropdown = PivotViews.BrandsSeparate; + public dropdownValues = new Map([ + [ PivotViews.BrandsSeparate, { title: 'Brands: HM and HM Home', config: this.pivotConfigBrands} ], + [ PivotViews.BrandsCombined, { title: 'Brands: HM + HM Home', config: this.pivotConfigBrandsCombined} ], + [ PivotViews.Stores, { title: 'Stores: Bulgaria', config: this.pivotConfigStores} ] + ]); public flagsData = FLAGS; public data: any = SALES_DATA; @@ -281,9 +340,14 @@ export class SalesGridComponent { public onViewSelection(event: ISelectionEventArgs) { const newId = event.newSelection.id; - if (newId === 'brands') { + if (newId === PivotViews.BrandsSeparate) { + this.selectedDropdown = PivotViews.BrandsSeparate; this.pivotGrid.pivotConfiguration = this.pivotConfigBrands; - } else if (newId === 'stores') { + } else if (newId === PivotViews.BrandsCombined) { + this.selectedDropdown = PivotViews.BrandsCombined; + this.pivotGrid.pivotConfiguration = this.pivotConfigBrandsCombined; + } else if (newId === PivotViews.Stores) { + this.selectedDropdown = PivotViews.Stores; this.pivotGrid.pivotConfiguration = this.pivotConfigStores; } } From 3d598f4895c952e1b3d83e14a4832c4693062423 Mon Sep 17 00:00:00 2001 From: skrustev Date: Tue, 18 Feb 2025 19:19:52 +0200 Subject: [PATCH 2/3] Fix small warning with fleet management grid. --- .../fleet-management-grid/fleet-management-grid.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts index 3827cbe..fd1b68e 100644 --- a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts +++ b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts @@ -101,7 +101,7 @@ export class FleetManagementGridComponent implements OnInit { costPerMeterPeriod: Period.YTD, fuelCostPeriod: Period.YTD } */ - protected periods: { [vehicleId: string]: { costPerTypePeriod: Period, costPerMeterPeriod: Period, fuelCostPeriod: Period } } = {}; + protected periods: { [vehicleId: string]: { costPerTypePeriod: Period, costPerMeterPeriod: Period, fuelCostPeriod: Period } | null } = {}; //driver details for detail overlay protected driverDetails: DriverDetails = { From ade5fd698c02b32f11dfc30c870a4a12dbcc32cf Mon Sep 17 00:00:00 2001 From: skrustev Date: Tue, 18 Feb 2025 19:35:01 +0200 Subject: [PATCH 3/3] A bit of optimization for the Sales Grid and better namings. --- .../app/sales-grid/sales-grid.component.html | 12 ++++++------ .../src/app/sales-grid/sales-grid.component.ts | 17 ++++------------- 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/projects/sales-grid/src/app/sales-grid/sales-grid.component.html b/projects/sales-grid/src/app/sales-grid/sales-grid.component.html index f23e8b7..321e0ee 100644 --- a/projects/sales-grid/src/app/sales-grid/sales-grid.component.html +++ b/projects/sales-grid/src/app/sales-grid/sales-grid.component.html @@ -2,9 +2,9 @@
Sales Dashboard
- - {{dropdownValues.get(PivotViews.BrandsSeparate)?.title}} - {{dropdownValues.get(PivotViews.BrandsCombined)?.title}} - {{dropdownValues.get(PivotViews.Stores)?.title}} + @for (configInfo of availableConfigs; track configInfo[0]) { + {{availableConfigs.get(configInfo[0])?.title}} + } Export to Excel @@ -44,6 +44,6 @@
-
+
Change pivot configuration.
diff --git a/projects/sales-grid/src/app/sales-grid/sales-grid.component.ts b/projects/sales-grid/src/app/sales-grid/sales-grid.component.ts index 307b22e..c2a06ad 100644 --- a/projects/sales-grid/src/app/sales-grid/sales-grid.component.ts +++ b/projects/sales-grid/src/app/sales-grid/sales-grid.component.ts @@ -304,8 +304,8 @@ export class SalesGridComponent { // #endregion public PivotViews = PivotViews; - public selectedDropdown = PivotViews.BrandsSeparate; - public dropdownValues = new Map([ + public selectedConfig = PivotViews.BrandsSeparate; + public availableConfigs = new Map([ [ PivotViews.BrandsSeparate, { title: 'Brands: HM and HM Home', config: this.pivotConfigBrands} ], [ PivotViews.BrandsCombined, { title: 'Brands: HM + HM Home', config: this.pivotConfigBrandsCombined} ], [ PivotViews.Stores, { title: 'Stores: Bulgaria', config: this.pivotConfigStores} ] @@ -339,17 +339,8 @@ export class SalesGridComponent { } public onViewSelection(event: ISelectionEventArgs) { - const newId = event.newSelection.id; - if (newId === PivotViews.BrandsSeparate) { - this.selectedDropdown = PivotViews.BrandsSeparate; - this.pivotGrid.pivotConfiguration = this.pivotConfigBrands; - } else if (newId === PivotViews.BrandsCombined) { - this.selectedDropdown = PivotViews.BrandsCombined; - this.pivotGrid.pivotConfiguration = this.pivotConfigBrandsCombined; - } else if (newId === PivotViews.Stores) { - this.selectedDropdown = PivotViews.Stores; - this.pivotGrid.pivotConfiguration = this.pivotConfigStores; - } + this.selectedConfig = event.newSelection.id; + this.pivotGrid.pivotConfiguration = this.availableConfigs.get(this.selectedConfig)?.config || this.pivotConfigBrands; } public onExportSelection(event: ISelectionEventArgs) {