Skip to content

Commit 9b1be31

Browse files
zdrawkuzdrawku
authored
Merge pull request #3769 from IgniteUI/sstoychev/fix-finjs-open-chart
Fixing issues with opening the chart for the finjs sample
2 parents 5d14a31 + e450e4a commit 9b1be31

14 files changed

Lines changed: 160 additions & 80 deletions

‎package-lock.json‎

Lines changed: 21 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@
7373
"file-saver": "^2.0.2",
7474
"hammerjs": "^2.0.8",
7575
"igniteui-angular": "^20.1.4",
76-
"igniteui-angular-charts": "^19.0.1",
77-
"igniteui-angular-core": "^19.0.1",
78-
"igniteui-angular-extras": "^20.0.0",
76+
"igniteui-angular-charts": "^20.1.0",
77+
"igniteui-angular-core": "^20.1.0",
78+
"igniteui-angular-extras": "^20.0.2",
7979
"igniteui-angular-i18n": "^20.1.4",
8080
"igniteui-dockmanager": "^1.17.0",
8181
"igniteui-live-editing": "^3.2.0",

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
import { RenderMode, ServerRoute } from '@angular/ssr';
22

33
export const serverRoutes: ServerRoute[] = [
4-
{
5-
path: 'grid/grid',
6-
renderMode: RenderMode.Client // TODO: Fails with Prerender
7-
},
8-
{
9-
path: 'treegrid-finjs',
10-
renderMode: RenderMode.Client // TODO: Fails with Prerender
11-
},
12-
{
13-
path: 'samples/treegrid-finjs',
14-
renderMode: RenderMode.Client // TODO: Fails with Prerender
15-
},
16-
{
17-
path: 'grid-finjs-dock-manager/**',
18-
renderMode: RenderMode.Client // TODO: Fails with Prerender
19-
},
20-
{
21-
path: 'samples/grid-finjs-dock-manager/**',
22-
renderMode: RenderMode.Client // TODO: Fails with Prerender
23-
},
4+
// {
5+
// path: 'grid/grid',
6+
// renderMode: RenderMode.Client // TODO: Fails with Prerender
7+
// },
8+
// {
9+
// path: 'treegrid-finjs',
10+
// renderMode: RenderMode.Client // TODO: Fails with Prerender
11+
// },
12+
// {
13+
// path: 'samples/treegrid-finjs',
14+
// renderMode: RenderMode.Client // TODO: Fails with Prerender
15+
// },
16+
// {
17+
// path: 'grid-finjs-dock-manager/**',
18+
// renderMode: RenderMode.Client // TODO: Fails with Prerender
19+
// },
20+
// {
21+
// path: 'samples/grid-finjs-dock-manager/**',
22+
// renderMode: RenderMode.Client // TODO: Fails with Prerender
23+
// },
2424
{
2525
path: '**',
26-
renderMode: RenderMode.Prerender
26+
renderMode: RenderMode.Client // SSR disabled for all routes
2727
}
2828
];

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ export const SamplesRoutes: Routes = [
4545
loadChildren: () => import('./grid-dynamic-chart-data/grid-dynamic-chart-data.routes')
4646
.then(m => m.GridDynamicChartRoutes),
4747
path: 'grid-dynamic-chart-data'
48+
},
49+
{
50+
data: ['PivotGridsModule'],
51+
loadChildren: () => import('./pivot-grid/pivot-grids.routes').then(m => m.PivotGridsRoutes),
52+
path: 'pivot-grid'
4853
}
4954
];
5055

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11

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

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable max-len */
22
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
3-
import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective, OPTIONS_TYPE, CHART_TYPE, PageHeaderComponent } from 'igniteui-angular-extras';
3+
import { IgxChartIntegrationDirective, IgxContextMenuDirective, IgxConditionalFormattingDirective, OPTIONS_TYPE, CHART_TYPE } from 'igniteui-angular-extras';
44

55
import { FinancialData } from '../data/financialData';
66
import { IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular';
@@ -10,7 +10,7 @@ import { DecimalPipe, CurrencyPipe } from '@angular/common';
1010
selector: 'app-grid-dynamic-chart-data',
1111
templateUrl: './grid-dynamic-chart-data.component.html',
1212
styleUrls: ['./grid-dynamic-chart-data.component.scss'],
13-
imports: [IgxGridComponent, PageHeaderComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
13+
imports: [IgxGridComponent, IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, IgxColumnComponent, IgxCellTemplateDirective, DecimalPipe, CurrencyPipe]
1414
})
1515
export class GridDynamicChartDataComponent implements OnInit, AfterViewInit {
1616

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,15 @@
7474
</div>
7575
</ng-template>
7676
</igx-column>
77-
<igx-column [field]="'Chart'" [width]="'60px'" [hidden]="false" [filterable]="false">
78-
<ng-template igxCell let-cell="cell" class="center-text">
79-
<button class="button-icon" igxIconButton="flat" tabindex="-1">
80-
<igx-icon family="material" (click)="chartColumnAction(cell)">insert_chart_outlined</igx-icon>
81-
</button>
82-
</ng-template>
83-
</igx-column>
77+
@if (allowChart) {
78+
<igx-column [field]="'Chart'" [width]="'60px'" [filterable]="false">
79+
<ng-template igxCell let-cell="cell" class="center-text">
80+
<button class="button-icon" igxIconButton="flat" tabindex="-1">
81+
<igx-icon family="material" (click)="chartColumnAction(cell)">insert_chart_outlined</igx-icon>
82+
</button>
83+
</ng-template>
84+
</igx-column>
85+
}
8486

8587
<igx-column [field]="'change'" [width]="'120px'" dataType="number" [headerClasses]="'headerAlignSyle'"
8688
[sortable]="true" [cellClasses]="trendsChange" >

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
11
/* eslint-disable max-len */
22
import { AsyncPipe, CurrencyPipe } from '@angular/common';
3-
import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
3+
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, DOCUMENT, inject } from '@angular/core';
44
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';
55
import { BehaviorSubject } from 'rxjs';
66
import { Contract, REGIONS, Stock } from '../data/financialData';
7-
import { SignalRService } from '../services/signal-r.service';
8-
import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive';
7+
import { SignalRService } from '../services/signal-r.service';
8+
import { IgxPreventDocumentScrollDirective } from '../../../../../src/app/directives/prevent-scroll.directive';
99
import { FormsModule } from '@angular/forms';
1010

11-
@Component({
12-
selector: 'app-finjs-grid',
13-
templateUrl: './grid-finjs.component.html',
14-
styleUrls: ['./grid-finjs.component.scss'],
15-
imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
11+
@Component({
12+
selector: 'app-finjs-grid',
13+
templateUrl: './grid-finjs.component.html',
14+
styleUrls: ['./grid-finjs.component.scss'],
15+
imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxColumnComponent, IgxCellEditorTemplateDirective, IgxSelectComponent, FormsModule, IgxFocusDirective, IgxSelectItemComponent, IgxCellTemplateDirective, IgxIconComponent, IgxIconButtonDirective, IgxOverlayOutletDirective, AsyncPipe, CurrencyPipe]
1616
})
17-
export class GridFinJSComponent implements OnInit {
18-
private el = inject(ElementRef);
19-
private document = inject<Document>(DOCUMENT);
20-
dataService = inject(SignalRService);
17+
export class GridFinJSComponent implements OnInit {
18+
private el = inject(ElementRef);
19+
private document = inject<Document>(DOCUMENT);
20+
dataService = inject(SignalRService);
2121

2222
@ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
2323
@ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet: IgxOverlayOutletDirective;
2424
@Output() public selectedDataChanged = new EventEmitter<Stock[]>();
2525
@Output() public keyDown = new EventEmitter();
2626
@Output() public chartColumnKeyDown = new EventEmitter<Stock>();
2727

28+
@Input() public allowChart = false;
29+
2830
public contracts = Contract;
2931
public regions = REGIONS;
3032
public selectionMode: GridSelectionMode = 'multiple';

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
(playAction)="onPlayAction($event)">
77
</app-finjs-controllers>
88
<app-finjs-grid #finGrid
9+
[allowChart]="true"
910
(selectedDataChanged)="setChartData($event)"
1011
(keyDown)="dialog.open()"
1112
(chartColumnKeyDown)="openSingleRowChart($event)">

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
2-
import { Router } from '@angular/router';
32
import { IgxDialogComponent, IgxOverlayOutletDirective, OverlaySettings, IgxDialogTitleDirective, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective } from 'igniteui-angular';
4-
import { IgxCategoryChartComponent, IgxCategoryChartCoreModule } from 'igniteui-angular-charts';
3+
import { IgxCategoryChartComponent, IgxCategoryChartModule } from 'igniteui-angular-charts';
54
import { Stock } from '../data/financialData';
65
import { ControllerComponent } from './controllers.component';
76
import { GridFinJSComponent } from './grid-finjs.component';
87

9-
@Component({
10-
selector: 'app-finjs-main',
11-
styleUrls: ['./main.component.scss'],
12-
templateUrl: './main.component.html',
13-
imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartCoreModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
8+
@Component({
9+
selector: 'app-finjs-main',
10+
styleUrls: ['./main.component.scss'],
11+
templateUrl: './main.component.html',
12+
imports: [ControllerComponent, GridFinJSComponent, IgxOverlayOutletDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxCategoryChartModule, IgxDialogActionsDirective, IgxButtonDirective, IgxFocusDirective]
1413
})
1514
export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
1615
@ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
@@ -99,7 +98,7 @@ export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
9998
public setChartData(args: Stock[]): void {
10099
this.chartData = [];
101100
args.forEach(rowKey => {
102-
const row: Stock = this.finGrid.grid.getRowByKey(rowKey).data;
101+
const row: Stock = this.finGrid.grid.getRowByKey(rowKey.id).data;
103102
this.chartData.push(row);
104103
this.chart.notifyInsertItem(this.chartData, this.chartData.length - 1, row);
105104
});

0 commit comments

Comments
 (0)