Fixing issues with opening the chart for the finjs sample

package.json

@@ -73,9 +73,9 @@
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
     "igniteui-angular": "^20.1.4",
-    "igniteui-angular-charts": "^19.0.1",
-    "igniteui-angular-core": "^19.0.1",
-    "igniteui-angular-extras": "^20.0.0",
+    "igniteui-angular-charts": "^20.1.0",
+    "igniteui-angular-core": "^20.1.0",
+    "igniteui-angular-extras": "^20.0.2",
     "igniteui-angular-i18n": "^20.1.4",
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-live-editing": "^3.2.0",

projects/app-lob/src/app/app.routes.server.ts

@@ -1,28 +1,28 @@
 import { RenderMode, ServerRoute } from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
-    {
-        path: 'grid/grid',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'treegrid-finjs',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'samples/treegrid-finjs',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'grid-finjs-dock-manager/**',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
-    {
-        path: 'samples/grid-finjs-dock-manager/**',
-        renderMode: RenderMode.Client // TODO: Fails with Prerender
-    },
+//    {
+//        path: 'grid/grid',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'treegrid-finjs',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'samples/treegrid-finjs',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'grid-finjs-dock-manager/**',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
+//    {
+//        path: 'samples/grid-finjs-dock-manager/**',
+//        renderMode: RenderMode.Client // TODO: Fails with Prerender
+//    },
     {
         path: '**',
-        renderMode: RenderMode.Prerender
+        renderMode: RenderMode.Client // SSR disabled for all routes
     }
 ];

projects/app-lob/src/app/app.routes.ts

@@ -45,6 +45,11 @@ export const SamplesRoutes: Routes = [
         loadChildren: () => import('./grid-dynamic-chart-data/grid-dynamic-chart-data.routes')
         .then(m => m.GridDynamicChartRoutes),
         path: 'grid-dynamic-chart-data'
+    },
+    {
+        data: ['PivotGridsModule'],
+        loadChildren: () => import('./pivot-grid/pivot-grids.routes').then(m => m.PivotGridsRoutes),
+        path: 'pivot-grid'
     }
 ];
 

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html

@@ -1,7 +1,4 @@
 
-<app-page-header title="Data Analysis Grid">
-    Excel like data analysis showcase application with Ignite UI Angular components and extras
-</app-page-header>
 <div class="grid-chart-contextmenu-wrapper">
     <igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' [data]="data">
         <igx-column field="id" [hidden]="true"></igx-column>

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective,  OPTIONS_TYPE, CHART_TYPE, PageHeaderComponent } from 'igniteui-angular-extras';
+import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective,  OPTIONS_TYPE, CHART_TYPE } from 'igniteui-angular-extras';
 
 import { FinancialData } from '../data/financialData';
 import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular';
@@ -10,7 +10,7 @@ import { DecimalPipe, CurrencyPipe } from '@angular/common';
     selector: 'app-grid-dynamic-chart-data',
     templateUrl: './grid-dynamic-chart-data.component.html',
     styleUrls: ['./grid-dynamic-chart-data.component.scss'],
-    imports: [IgxGridComponent, PageHeaderComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
+    imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
 })
 export class GridDynamicChartDataComponent implements OnInit, AfterViewInit {
 

projects/app-lob/src/app/grid-finjs/grid-finjs.component.html

@@ -74,13 +74,15 @@
         </div>
       </ng-template>
     </igx-column>
-    <igx-column [field]="'Chart'" [width]="'60px'" [hidden]="false" [filterable]="false">
-      <ng-template igxCell let-cell="cell" class="center-text">
-        <button class="button-icon" igxIconButton="flat" tabindex="-1">
-          <igx-icon family="material" (click)="chartColumnAction(cell)">insert_chart_outlined</igx-icon>
-        </button>
-      </ng-template>
-    </igx-column>
+    @if (allowChart) {
+      <igx-column [field]="'Chart'" [width]="'60px'" [filterable]="false">
+        <ng-template igxCell let-cell="cell" class="center-text">
+          <button class="button-icon" igxIconButton="flat" tabindex="-1">
+            <igx-icon family="material" (click)="chartColumnAction(cell)">insert_chart_outlined</igx-icon>
+          </button>
+        </ng-template>
+      </igx-column>
+    }
 
     <igx-column [field]="'change'" [width]="'120px'" dataType="number" [headerClasses]="'headerAlignSyle'"
       [sortable]="true" [cellClasses]="trendsChange" >

projects/app-lob/src/app/grid-finjs/grid-finjs.component.ts

@@ -1,30 +1,32 @@
 /* eslint-disable max-len */
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
 import { CellType, DefaultSortingStrategy, GridSelectionMode, IGridKeydownEventArgs, IgxGridComponent, IgxOverlayOutletDirective, IRowSelectionEventArgs, OverlaySettings, SortingDirection, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective } from 'igniteui-angular';
 import { BehaviorSubject } from 'rxjs';
 import { Contract, REGIONS, Stock } from '../data/financialData';
-import { SignalRService } from '../services/signal-r.service';
-import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive';
+import { SignalRService } from '../services/signal-r.service';
+import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive';
 import { FormsModule } from '@angular/forms';
 
-@Component({
-    selector: 'app-finjs-grid',
-    templateUrl: './grid-finjs.component.html',
-    styleUrls: ['./grid-finjs.component.scss'],
-    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
+@Component({
+    selector: 'app-finjs-grid',
+    templateUrl: './grid-finjs.component.html',
+    styleUrls: ['./grid-finjs.component.scss'],
+    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
 })
-export class GridFinJSComponent implements OnInit {
-    private el = inject(ElementRef);
-    private document = inject<Document>(DOCUMENT);
-    dataService = inject(SignalRService);
+export class GridFinJSComponent implements OnInit {
+    private el = inject(ElementRef);
+    private document = inject<Document>(DOCUMENT);
+    dataService = inject(SignalRService);
 
     @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
     @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet: IgxOverlayOutletDirective;
     @Output() public selectedDataChanged = new EventEmitter<Stock[]>();
     @Output() public keyDown = new EventEmitter();
     @Output() public chartColumnKeyDown = new EventEmitter<Stock>();
 
+    @Input() public allowChart = false;
+
     public contracts = Contract;
     public regions = REGIONS;
     public selectionMode: GridSelectionMode = 'multiple';

projects/app-lob/src/app/grid-finjs/main.component.html

@@ -6,6 +6,7 @@
         (playAction)="onPlayAction($event)">
     </app-finjs-controllers>
     <app-finjs-grid #finGrid
+        [allowChart]="true"
         (selectedDataChanged)="setChartData($event)"
         (keyDown)="dialog.open()"
         (chartColumnKeyDown)="openSingleRowChart($event)">

projects/app-lob/src/app/grid-finjs/main.component.ts

@@ -1,16 +1,15 @@
 import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
 import { IgxDialogComponent, IgxOverlayOutletDirective, OverlaySettings, IgxDialogTitleDirective, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective } from 'igniteui-angular';
-import { IgxCategoryChartComponent, IgxCategoryChartCoreModule } from 'igniteui-angular-charts';
+import { IgxCategoryChartComponent, IgxCategoryChartModule } from 'igniteui-angular-charts';
 import { Stock } from '../data/financialData';
 import { ControllerComponent } from './controllers.component';
 import { GridFinJSComponent } from './grid-finjs.component';
 
-@Component({
-    selector: 'app-finjs-main',
-    styleUrls: ['./main.component.scss'],
-    templateUrl: './main.component.html',
-    imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartCoreModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
+@Component({
+    selector: 'app-finjs-main',
+    styleUrls: ['./main.component.scss'],
+    templateUrl: './main.component.html',
+    imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
 })
 export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
     @ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
@@ -99,7 +98,7 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
     public setChartData(args: Stock[]): void {
         this.chartData = [];
         args.forEach(rowKey => {
-            const row: Stock = this.finGrid.grid.getRowByKey(rowKey).data;
+            const row: Stock = this.finGrid.grid.getRowByKey(rowKey.id).data;
             this.chartData.push(row);
             this.chart.notifyInsertItem(this.chartData, this.chartData.length - 1, row);
         });

projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts

@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Component, ViewChild } from '@angular/core';
 import { IgxColumnComponent, IgxGridComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective } from 'igniteui-angular';
-import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartCoreModule } from 'igniteui-angular-charts';
+import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';
 import { employeesData } from '../../data/employeesData';
 import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive';
 
 @Component({
     selector: 'app-grid-master-detail',
     styleUrls: ['./grid-master-detail.component.scss'],
     templateUrl: 'grid-master-detail.component.html',
-    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartCoreModule]
+    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule]
 })
 
 export class GridMasterDetailSampleComponent {

projects/app-lob/src/app/index/index.component.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild, DOCUMEN
 import { NavigationStart, Route, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { IgxNavigationDrawerComponent, IgxLayoutDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxRippleDirective, IgxIconButtonDirective, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxInputDirective, IgxSuffixDirective, IgxFlexDirective, IgxNavbarComponent } from 'igniteui-angular';
 import { filter } from 'rxjs/operators';
-import { pivotGridsRoutesData } from '../../../../../src/app/pivot-grid/pivot-grid-routes-data';
+import { pivotGridsRoutesData } from '../pivot-grid/pivot-grid-routes-data';
 import { gridDynamicChartRoutesData } from '../grid-dynamic-chart-data/grid-dynamic-chart-data-routes-data';
 import { finJsDockManagerGridRoutes } from '../grid-finjs-dock-manager/grid-finjs-dock-manager-routes-data';
 import { gridfinjsRoutesData} from '../grid-finjs/grid-finjs-routes-data';

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

@@ -0,0 +1,12 @@
+// tslint:disable:object-literal-sort-keys
+export const pivotGridsRoutesData = {
+    'pivot-grid-basic': { displayName: 'Basic Pivot Grid', parentName: 'Pivot Grid' },
+    'pivot-grid-datasource': { displayName: 'Pivot Grid With Datasource Component', parentName: 'Pivot Grid' },
+    'pivot-grid-noop': { displayName: 'Noop Pivot Grid', parentName: 'Pivot Grid' },
+    '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-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' }
+};