fix(finjs): making main chart sample work by upgrading charts

Author: ChronosSF

package-lock.json

@@ -73,8 +73,8 @@
     "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-charts": "^20.1.0",
+    "igniteui-angular-core": "^20.1.0",
     "igniteui-angular-extras": "^20.0.0",
     "igniteui-angular-i18n": "^20.1.4",
     "igniteui-dockmanager": "^1.17.0",

package.json

@@ -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.server.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);
         });