@@ -25,11 +25,21 @@ import {
2525 FilteringLogic ,
2626 IPivotValue ,
2727 THEME_TOKEN ,
28- ThemeToken
28+ ThemeToken ,
29+ IgxDropDownItemNavigationDirective ,
30+ IgxTooltipDirective ,
31+ IgxTooltipTargetDirective
2932} from 'igniteui-angular' ;
3033import FLAGS from './data/flags.json'
3134import SALES_DATA from './data/SalesData.json' ;
3235
36+ enum PivotViews {
37+ BrandsSeparate = 'brandsOr' ,
38+ BrandsCombined = 'jeansAnd' ,
39+ Stores = 'stores'
40+ }
41+
42+ // Custom aggregator to calculate profit value
3343export class IgxSaleProfitAggregate {
3444 public static totalProfit = ( _ , data : any [ ] | undefined ) =>
3545 data ?. reduce ( ( accumulator , value ) => accumulator + ( value . Sale - value . Cost ) , 0 ) || 0 ;
@@ -71,7 +81,8 @@ export class IgxSaleProfitAggregate {
7181@Component ( {
7282 standalone : true ,
7383 selector : 'app-sales-grid' ,
74- imports : [ CommonModule , IgxPivotGridComponent , IgxPivotDataSelectorComponent , IgxButtonDirective , IgxIconComponent , IgxToggleActionDirective , IgxDropDownComponent , IgxDropDownItemComponent , IgxCellHeaderTemplateDirective ] ,
84+ imports : [ CommonModule , IgxPivotGridComponent , IgxPivotDataSelectorComponent , IgxButtonDirective , IgxIconComponent , IgxTooltipDirective , IgxTooltipTargetDirective ,
85+ IgxToggleActionDirective , IgxDropDownComponent , IgxDropDownItemComponent , IgxCellHeaderTemplateDirective , IgxDropDownItemNavigationDirective ] ,
7586 templateUrl : './sales-grid.component.html' ,
7687 providers : [
7788 {
@@ -93,8 +104,9 @@ export class SalesGridComponent {
93104 public currencyPipe = new CurrencyPipe ( 'en-US' ) ;
94105 public brandFilter = new FilteringExpressionsTree ( FilteringLogic . Or , 'Brand' ) ;
95106 public bulgariaCountryFilter = new FilteringExpressionsTree ( FilteringLogic . And ) ;
96-
97107 public fileName = 'SalesGridApp' ;
108+
109+ // #region Various configurations for the grid that can be toggled
98110 public saleValue : IPivotValue = {
99111 enabled : true ,
100112 member : 'Sale' ,
@@ -211,6 +223,44 @@ export class SalesGridComponent {
211223 this . profitValue
212224 ]
213225 } ;
226+ public pivotConfigBrandsCombined : IPivotConfiguration = {
227+ columns : [
228+ {
229+ enabled : true ,
230+ memberName : 'Country' ,
231+ displayName : 'Country'
232+ } ,
233+ {
234+ enabled : false ,
235+ memberName : 'Store' ,
236+ displayName : 'Store'
237+ } ,
238+ ] ,
239+ rows : [
240+ new IgxPivotDateDimension ( {
241+ memberName : 'Date' ,
242+ displayName : 'All Periods' ,
243+ enabled : true
244+ } ,
245+ {
246+ fullDate : true ,
247+ quarters : true ,
248+ months : false ,
249+ } )
250+ ] ,
251+ values : [
252+ this . saleValue ,
253+ this . profitValue
254+ ] ,
255+ filters : [
256+ {
257+ enabled : true ,
258+ memberName : 'Brand' ,
259+ displayName : 'Brand' ,
260+ filter : this . brandFilter
261+ } ,
262+ ]
263+ } ;
214264 public pivotConfigStores : IPivotConfiguration = {
215265 columns : [
216266 new IgxPivotDateDimension ( {
@@ -251,6 +301,15 @@ export class SalesGridComponent {
251301 }
252302 ]
253303 } ;
304+ // #endregion
305+
306+ public PivotViews = PivotViews ;
307+ public selectedConfig = PivotViews . BrandsSeparate ;
308+ public availableConfigs = new Map < PivotViews , { title : string , config : IPivotConfiguration } > ( [
309+ [ PivotViews . BrandsSeparate , { title : 'Brands: HM and HM Home' , config : this . pivotConfigBrands } ] ,
310+ [ PivotViews . BrandsCombined , { title : 'Brands: HM + HM Home' , config : this . pivotConfigBrandsCombined } ] ,
311+ [ PivotViews . Stores , { title : 'Stores: Bulgaria' , config : this . pivotConfigStores } ]
312+ ] ) ;
254313
255314 public flagsData = FLAGS ;
256315 public data : any = SALES_DATA ;
@@ -280,12 +339,8 @@ export class SalesGridComponent {
280339 }
281340
282341 public onViewSelection ( event : ISelectionEventArgs ) {
283- const newId = event . newSelection . id ;
284- if ( newId === 'brands' ) {
285- this . pivotGrid . pivotConfiguration = this . pivotConfigBrands ;
286- } else if ( newId === 'stores' ) {
287- this . pivotGrid . pivotConfiguration = this . pivotConfigStores ;
288- }
342+ this . selectedConfig = < PivotViews > event . newSelection . id ;
343+ this . pivotGrid . pivotConfiguration = this . availableConfigs . get ( this . selectedConfig ) ?. config || this . pivotConfigBrands ;
289344 }
290345
291346 public onExportSelection ( event : ISelectionEventArgs ) {
0 commit comments