Skip to content

Commit 39684f2

Browse files
hanastasovhanastasov
committed
chore(*): FinJS demo enhacements
1 parent 83f7761 commit 39684f2

File tree

7 files changed

+46
-117
lines changed

7 files changed

+46
-117
lines changed

‎src/app/grid-finjs/controllers.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<div class="controls-holder">
33
<div class="switches">
44
<div class="control-item">
5-
<igx-switch [checked]="true" [(ngModel)]="theme" (change)="onChange('theme', $event)">Dark</igx-switch>
5+
<igx-switch [checked]="false" [(ngModel)]="theme" (change)="onChange('theme', $event)">Dark</igx-switch>
66
</div>
77
<div class="control-item">
8-
<igx-switch [checked]="grouped" (change)="onChange('grouped', $event)" color="blue" cssClass="finjs-sample-switch">
8+
<igx-switch [checked]="true" (change)="onChange('grouped', $event)" color="blue" cssClass="finjs-sample-switch">
99
Grouped</igx-switch>
1010
</div>
1111
<div class="control-item">
12-
<igx-switch (change)="onChange('toolbar', $event)" color="blue" cssClass="finjs-sample-switch">Toolbar</igx-switch>
12+
<igx-switch [checked]="true" (change)="onChange('toolbar', $event)" color="blue" cssClass="finjs-sample-switch">Toolbar</igx-switch>
1313
</div>
1414
<div class="finjs-slider control-item">
1515
<label for="slider">Records: {{volume}}</label>

‎src/app/grid-finjs/controllers.component.ts‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,18 @@ import { debounce } from 'rxjs/operators';
1010
templateUrl: './controllers.component.html'
1111
})
1212
export class ControllerComponent implements OnInit, OnDestroy {
13-
@ViewChild('buttonGroup1', { static: true }) public buttonGroup1: IgxButtonGroupComponent;
14-
@ViewChild('buttonGroup2', { static: true }) public buttonGroup2: IgxButtonGroupComponent;
13+
@ViewChild('buttonGroup1', { static: true }) public playButtons: IgxButtonGroupComponent;
1514
@ViewChild('slider1', { static: true }) public volumeSlider: IgxSliderComponent;
1615
@ViewChild('slider2', { static: true }) public intervalSlider: IgxSliderComponent;
1716

1817
@Output() public switchChanged = new EventEmitter<any>();
1918
@Output() public volumeChanged = new EventEmitter<any>();
20-
@Output() public frequencyChanged = new EventEmitter<any>();
2119
@Output() public playAction = new EventEmitter<any>();
2220

2321
public selectionMode = 'multiple';
2422
public theme = false;
2523
public volume = 1000;
2624
public frequency = 500;
27-
public grouped = true;
2825
public controls = [
2926
{
3027
disabled: false,
@@ -59,21 +56,17 @@ export class ControllerComponent implements OnInit, OnDestroy {
5956
switch (event.index) {
6057
case 0: {
6158
this.disableOtherButtons(event.index, true);
62-
this.playAction.emit({ action: 'playRandom'} );
59+
this.playAction.emit({ action: 'playRandom'});
6360
break;
6461
}
6562
case 1: {
6663
this.disableOtherButtons(event.index, true);
67-
this.playAction.emit({ action: 'playAll'} );
64+
this.playAction.emit({ action: 'playAll'});
6865
break;
6966
}
7067
case 2: {
7168
this.disableOtherButtons(event.index, false);
72-
this.playAction.emit({ action: 'stop'} );
73-
break;
74-
}
75-
case 3: {
76-
this.disableOtherButtons(event.index, true);
69+
this.playAction.emit({ action: 'stop'});
7770
break;
7871
}
7972
default:
@@ -94,10 +87,10 @@ export class ControllerComponent implements OnInit, OnDestroy {
9487
this.volumeSlider.disabled = disableButtons;
9588
this.intervalSlider.disabled = disableButtons;
9689
this.selectedButton = ind;
97-
this.buttonGroup1.buttons.forEach((button, index) => {
90+
this.playButtons.buttons.forEach((button, index) => {
9891
if (index === 2) { button.disabled = !disableButtons; } else {
99-
this.buttonGroup1.buttons[0].disabled = disableButtons;
100-
this.buttonGroup1.buttons[1].disabled = disableButtons;
92+
this.playButtons.buttons[0].disabled = disableButtons;
93+
this.playButtons.buttons[1].disabled = disableButtons;
10194
}
10295
});
10396
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
<igx-column [field]="'High(Y)'" [width]="'110px'" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
7070
<igx-column [field]="'Low(Y)'" [width]="'110px'" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
7171
<igx-column [field]="'Start(Y)'" [width]="'110px'" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
72-
<!-- <igx-column [field]="'IndGrou'" [width]="'100px'" [filterable]='false'></igx-column>
72+
<igx-column [field]="'IndGrou'" [width]="'100px'" [filterable]='false'></igx-column>
7373
<igx-column [field]="'IndSect'" [width]="'120px'" [filterable]='false' [resizable]='true'></igx-column>
7474
<igx-column [field]="'IndSubg'" [width]="'100px'" [filterable]='false'></igx-column>
7575
<igx-column [field]="'SecType'" [width]="'90px'" [filterable]='false'></igx-column>
@@ -143,5 +143,5 @@
143143
<igx-column [field]="'sector'" [width]="'80px'" [filterable]='false'></igx-column>
144144
<igx-column [field]="'CUSIP'" [width]="'100px'" [filterable]='false'></igx-column>
145145
<igx-column [field]="'Ticker'" [width]="'60px'" [filterable]='false'></igx-column>
146-
<igx-column [field]="'Cpn'" [width]="'80px'" [filterable]='false'></igx-column> -->
146+
<igx-column [field]="'Cpn'" [width]="'80px'" [filterable]='false'></igx-column>
147147
</igx-grid>

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

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
import {
22
AfterViewInit,
3-
ChangeDetectorRef,
43
Component,
4+
EventEmitter,
5+
OnDestroy,
56
OnInit,
7+
Output,
68
ViewChild } from '@angular/core';
79
import {
810
DefaultSortingStrategy,
911
IgxGridComponent,
1012
SortingDirection
1113
} from 'igniteui-angular';
1214
import { Contract, REGIONS } from '../shared/financialData';
15+
import { LocalService } from '../shared/local.service';
1316

1417
@Component({
1518
selector: 'app-finjs-grid',
1619
styleUrls: ['./grid-finjs.component.scss'],
1720
templateUrl: './grid-finjs.component.html'
1821
})
19-
export class GridFinJSComponent implements OnInit, AfterViewInit {
22+
export class GridFinJSComponent implements OnInit, AfterViewInit, OnDestroy {
2023
@ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
2124

2225
public data = [];
@@ -25,8 +28,20 @@ export class GridFinJSComponent implements OnInit, AfterViewInit {
2528
public contracts = Contract;
2629
public regions = REGIONS;
2730
public showToolbar = true;
31+
public volume = 1000;
32+
public frequency = 500;
33+
private subscription$;
2834

29-
constructor(public cdr: ChangeDetectorRef) { }
35+
@Output() public selectedDataChanged = new EventEmitter<any>();
36+
@Output() public keyDown = new EventEmitter<any>();
37+
@Output() public chartColumnKeyDown = new EventEmitter<any>();
38+
39+
constructor(public finService: LocalService) {
40+
this.finService.getFinancialData(this.volume);
41+
this.subscription$ = this.finService.records.subscribe(x => {
42+
this.data = x;
43+
});
44+
}
3045

3146
public ngOnInit() {
3247
this.grid.groupingExpressions = [{
@@ -122,14 +137,6 @@ export class GridFinJSComponent implements OnInit, AfterViewInit {
122137
return '$' + value.toFixed(3);
123138
}
124139

125-
public formatYAxisLabel(item: any): string {
126-
return item + 'test test';
127-
}
128-
129-
public toggleToolbar(event: any) {
130-
this.grid.showToolbar = !this.grid.showToolbar;
131-
}
132-
133140
/** Grid CellStyles and CellClasses */
134141
private negative = (rowData: any): boolean => {
135142
return rowData['Change(%)'] < 0;
@@ -172,4 +179,9 @@ export class GridFinJSComponent implements OnInit, AfterViewInit {
172179
return this.grid.groupingExpressions.length > 0;
173180
}
174181

182+
public ngOnDestroy() {
183+
if (this.subscription$) {
184+
this.subscription$.unsubscribe();
185+
}
186+
}
175187
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<app-finjs-controllers #controllers
33
(switchChanged)="onSwitchChanged($event)"
44
(volumeChanged)="onVolumeChanged($event)"
5-
(frequencyChanged)="onFrequencyChanged($event)"
65
(playAction)="onPlayAction($event)">
76
</app-finjs-controllers>
87
<app-finjs-grid #grid>

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

Lines changed: 10 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
22
import { FinancialData } from '../shared/financialData';
3-
import { LocalService } from '../shared/local.service';
43
import { ControllerComponent } from './controllers.component';
54
import { GridFinJSComponent } from './grid-finjs.component';
65

76
@Component({
8-
providers: [LocalService],
97
selector: 'app-finjs-main',
108
styleUrls: ['./main.component.scss'],
119
templateUrl: './main.component.html'
@@ -19,47 +17,19 @@ export class MainComponent implements AfterViewInit, OnDestroy {
1917
@Output() public frequencyTimer = new EventEmitter<any>();
2018
@Output() public player = new EventEmitter<any>();
2119

22-
public data = [];
2320
private subscription$;
24-
25-
constructor(private localService: LocalService, private elRef: ElementRef) {
26-
this.localService.getFinancialData(1000);
27-
}
28-
29-
public selectionMode = 'multiple';
3021
public theme = false;
3122
public volume = 1000;
3223
public frequency = 500;
33-
public controls = [
34-
{
35-
disabled: false,
36-
icon: 'update',
37-
label: 'LIVE PRICES',
38-
selected: false
39-
},
40-
{
41-
disabled: false,
42-
icon: 'update',
43-
label: 'LIVE ALL PRICES',
44-
selected: false
45-
},
46-
{
47-
disabled: true,
48-
icon: 'stop',
49-
label: 'Stop',
50-
selected: false
51-
}
52-
];
53-
54-
private subscription;
55-
private selectedButton;
5624
private _timer;
5725

26+
constructor(private elRef: ElementRef) {
27+
}
28+
5829
public ngAfterViewInit() {
59-
this.subscription$ = this.localService.records.subscribe(x => {
60-
this.finGrid.data = x;
61-
this.finGrid.cdr.detectChanges();
62-
});
30+
// this.subscription$ = this.localService.records.subscribe(x => {
31+
// this.finGrid.data = x;
32+
// });
6333
}
6434
public onSwitchChanged(event: any) {
6535
switch (event.action) {
@@ -82,43 +52,18 @@ export class MainComponent implements AfterViewInit, OnDestroy {
8252
}
8353
}
8454

85-
public onVolumeChanged(event: any) {
86-
this.localService.getFinancialData(this.volume);
87-
}
88-
89-
public onFrequencyChanged(event: any) {
90-
switch (event.switch) {
91-
case 'theme': {
92-
this.changeTheme(event.checked);
93-
break;
94-
}
95-
case 'grouped': {
96-
this.disableOtherButtons(event.index, true);
97-
const currData = this.finGrid.data;
98-
this._timer = setInterval(() => this.tickerAllPrices(currData), this.frequency);
99-
break;
100-
}
101-
case 'showToolbar': {
102-
this.stopFeed();
103-
break;
104-
}
105-
default:
106-
{
107-
break;
108-
}
109-
}
55+
public onVolumeChanged(volume: any) {
56+
this.finGrid.finService.getFinancialData(volume);
11057
}
11158

11259
public onPlayAction(event: any) {
11360
switch (event.action) {
11461
case 'playAll': {
115-
this.disableOtherButtons(event.index, true);
11662
const currData = this.finGrid.data;
11763
this._timer = setInterval(() => this.tickerAllPrices(currData), this.controller.frequency);
11864
break;
11965
}
12066
case 'playRandom': {
121-
this.disableOtherButtons(event.index, true);
12267
const currData = this.finGrid.data;
12368
this._timer = setInterval(() => this.ticker(currData), this.controller.frequency);
12469
break;
@@ -151,8 +96,8 @@ export class MainComponent implements AfterViewInit, OnDestroy {
15196
if (this._timer) {
15297
clearInterval(this._timer);
15398
}
154-
if (this.subscription) {
155-
this.subscription.unsubscribe();
99+
if (this.subscription$) {
100+
this.subscription$.unsubscribe();
156101
}
157102
}
158103

@@ -164,21 +109,6 @@ export class MainComponent implements AfterViewInit, OnDestroy {
164109
this.finGrid.data = FinancialData.updateAllPrices(data);
165110
}
166111

167-
private disableOtherButtons(ind: number, disableButtons: boolean) {
168-
if (this.subscription) {
169-
this.subscription.unsubscribe();
170-
}
171-
this.controller.volumeSlider.disabled = disableButtons;
172-
this.controller.intervalSlider.disabled = disableButtons;
173-
this.selectedButton = ind;
174-
this.controller.buttonGroup1.buttons.forEach((button, index) => {
175-
if (index === 2) { button.disabled = !disableButtons; } else {
176-
this.controller.buttonGroup1.buttons[0].disabled = disableButtons;
177-
this.controller.buttonGroup1.buttons[1].disabled = disableButtons;
178-
}
179-
});
180-
}
181-
182112
/**
183113
* returns the main div container of the Index Component,
184114
* if path is /samples/sample-url, or the appRoot, if path is /sample-url
@@ -187,12 +117,7 @@ export class MainComponent implements AfterViewInit, OnDestroy {
187117
return this.elRef.nativeElement.parentElement.parentElement;
188118
}
189119

190-
get buttonSelected(): number {
191-
return this.selectedButton || this.selectedButton === 0 ? this.selectedButton : -1;
192-
}
193-
194120
public ngOnDestroy() {
195121
this.stopFeed();
196-
this.subscription$.unsubscribe();
197122
}
198123
}

‎src/app/shared/financialData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -893,7 +893,7 @@ export class FinancialData {
893893

894894
/** Updates values in every record */
895895
public static updateAllPrices(data: any[]): any[] {
896-
const newData = [];
896+
const newData = [];
897897
for (const dataRow of data) {
898898
newData.push(this.randomizeObjectData(dataRow));
899899
}

0 commit comments

Comments
 (0)