Update Sales Grid button design and add another view

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 = {

projects/sales-grid/src/app/sales-grid/sales-grid.component.html

@@ -2,19 +2,20 @@
     <div class="pivotToolbar igx-grid__tr-pivot">
         <span class="igx-grid-toolbar__title">Sales Dashboard</span>
         <div>
-            <button igxButton="outlined" style="margin-right: 10px;" [igxToggleAction]="viewDropdown">
+            <button igxButton="contained" style="margin-right: 10px;" [igxToggleAction]="viewDropdown" [igxDropDownItemNavigation]="viewDropdown" [igxTooltipTarget]="configTooltipRef">
                 <igx-icon [name]="'visibility'" [family]="'material'"></igx-icon>
-                Change View
+                {{availableConfigs.get(selectedConfig)?.title}}
                 <igx-icon [name]="'arrow_drop_down'" [family]="'default'"></igx-icon>
             </button>
-            <button igxButton="outlined" [igxToggleAction]="exportDropdown">
+            <button igxButton="outlined" [igxToggleAction]="exportDropdown" [igxDropDownItemNavigation]="exportDropdown">
                 <igx-icon [name]="'file_download'" [family]="'internal_indigo'"></igx-icon>
                 Export
                 <igx-icon [name]="'arrow_drop_down'" [family]="'default'"></igx-icon>
             </button>
             <igx-drop-down #viewDropdown (selectionChanging)="onViewSelection($event)">
-                <igx-drop-down-item [id]="'brands'"><span>Brands: HM and HM Home</span></igx-drop-down-item>
-                <igx-drop-down-item [id]="'stores'"><span>Stores: Bulgaria</span></igx-drop-down-item>
+              @for (configInfo of availableConfigs; track configInfo[0]) {
+                <igx-drop-down-item [id]="configInfo[0]" [selected]="selectedConfig === configInfo[0]"><span>{{availableConfigs.get(configInfo[0])?.title}}</span></igx-drop-down-item>
+              }
             </igx-drop-down>
             <igx-drop-down #exportDropdown (selectionChanging)="onExportSelection($event)">
                 <igx-drop-down-item [id]="'excel'"><span>Export to Excel</span></igx-drop-down-item>
@@ -42,3 +43,7 @@
         </ng-template>
     </div>
 </div>
+
+<div #configTooltipRef="tooltip" igxTooltip>
+  Change pivot configuration.
+</div>

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 selectedConfig = PivotViews.BrandsSeparate;
+  public availableConfigs = new Map<PivotViews, { title: string, config: IPivotConfiguration}>([
+    [ 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;
@@ -280,12 +339,8 @@ export class SalesGridComponent {
   }
 
   public onViewSelection(event: ISelectionEventArgs) {
-    const newId = event.newSelection.id;
-    if (newId === 'brands') {
-      this.pivotGrid.pivotConfiguration = this.pivotConfigBrands;
-    } else if (newId === 'stores') {
-      this.pivotGrid.pivotConfiguration = this.pivotConfigStores;
-    }
+    this.selectedConfig = <PivotViews>event.newSelection.id;
+    this.pivotGrid.pivotConfiguration = this.availableConfigs.get(this.selectedConfig)?.config || this.pivotConfigBrands;
   }
 
   public onExportSelection(event: ISelectionEventArgs) {