feat(pivot-grid): add styling sample

Author: adrianptrv

live-editing/configs/PivotGridConfigGenerator.ts

@@ -82,6 +82,12 @@ export class PivotGridConfigGenerator implements IConfigGenerator {
             component: 'PivotGridLayoutComponent'
         }));
 
+        configs.push(new Config({
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/dataToAnalyze.ts'],
+            appConfig: BaseAppConfig,
+            component: 'PivotStylingComponent'
+        }));
+
         return configs;
     }
 }

src/app/pivot-grid/pivot-grid-routes-data.ts

@@ -6,6 +6,7 @@ export const pivotGridsRoutesData = {
     'pivot-grid-export': { displayName: 'Pivot Grid Export', parentName: 'Pivot Grid' },
     'pivot-grid-features': { displayName: 'Pivot Grid With Features', parentName: 'Pivot Grid' },
     'pivot-grid-state-persistence': { displayName: 'Pivot Grid With State Persistence', parentName: 'Pivot Grid' },
+    'pivot-grid-styling': { displayName: 'Pivot Grid Styling', parentName: 'Pivot Grid' },
     'pivot-grid-noop-persistence': { displayName: 'Pivot Noop Grid with State Persistence', parentName: 'Pivot Grid' },
     'pivot-grid-about': { displayName: 'Pivot Grid About', parentName: 'Pivot Grid' },
     'pivot-grid-layout': { displayName: 'Pivot Grid Layout', parentName: 'Pivot Grid' }

src/app/pivot-grid/pivot-grids.routes.ts

@@ -10,6 +10,7 @@ import { pivotGridsRoutesData } from './pivot-grid-routes-data';
 import { PivotGridAboutComponent } from './pivot-state-persistence/about.component';
 import { PivotGridStatePersistenceSampleComponent } from './pivot-state-persistence/pivot-grid-state-persistence-sample.component';
 import { PivotGridLayoutComponent } from './pivot-layout/pivot-layout.component'
+import { PivotStylingComponent } from './pivot-styling/pivot-styling.component';
 // tslint:enable:max-line-length
 
 export const PivotGridsRoutes: Routes = [
@@ -51,11 +52,16 @@ export const PivotGridsRoutes: Routes = [
     {
         component: PivotGridAboutComponent,
         data: pivotGridsRoutesData['pivot-grid-about'],
-        path: 'pivot-state-about'
+        path: 'pivot-grid-about'
     },
     {
         component: PivotGridLayoutComponent,
         data: pivotGridsRoutesData['pivot-grid-features'],
         path: 'pivot-grid-layout'
+    },
+    {
+        component: PivotStylingComponent,
+        data: pivotGridsRoutesData['pivot-grid-styling'],
+        path: 'pivot-grid-styling'
     }
 ];

src/app/pivot-grid/pivot-styling/layout.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  padding: 8px;
+}

src/app/pivot-grid/pivot-styling/pivot-styling.component.html

@@ -0,0 +1,2 @@
+<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy" height="500px">
+</igx-pivot-grid>

src/app/pivot-grid/pivot-styling/pivot-styling.component.scss

@@ -0,0 +1,16 @@
+@use "layout.scss";
+@use "igniteui-angular/theming" as *;
+
+$background: #292826;
+$foreground: #eeece1;
+$accent: #ffcd0f;
+
+$custom-grid: grid-theme(
+  $background: $background,
+  $foreground: $foreground,
+  $accent-color: $accent,
+);
+
+igx-pivot-grid {
+  @include tokens($custom-grid);
+}

src/app/pivot-grid/pivot-styling/pivot-styling.component.ts

@@ -0,0 +1,45 @@
+import { Component, ChangeDetectionStrategy } from "@angular/core";
+import { DATA } from '../../data/pivot-data';
+
+import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core';
+import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid';
+
+@Component({
+    selector: 'app-pivot-styling',
+    styleUrls: ['./pivot-styling.component.scss'],
+    templateUrl: './pivot-styling.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxPivotGridComponent]
+})
+
+export class PivotStylingComponent {
+  public data = DATA;
+  public pivotConfigHierarchy: IPivotConfiguration = {
+    columns: [
+      {
+        memberName: 'Product',
+        memberFunction: (data) => data.Product.Name,
+        enabled: true
+      } 
+    ],
+    rows: [
+      {
+        memberName: 'Seller',
+        memberFunction: (data) => data.Seller.Name,
+        enabled: true
+      }
+    ],
+    values: [
+      {
+        member: 'NumberOfUnits',
+        aggregate: {
+          aggregator: IgxPivotNumericAggregate.sum,
+          key: 'sum',
+          label: 'Sum'
+        },
+        enabled: true
+      }
+    ],
+    filters: null
+  };
+}