Merge pull request #8679 from IgniteUI/fix-finjs-dev-demo-11x

FinJS dev demo enhacements 11x

Author: zdrawku

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

@@ -2,14 +2,14 @@
     <div class="controls-holder">
         <div class="switches">
             <div class="control-item">
-                <igx-switch [checked]="true" [(ngModel)]="theme" (change)="onChange('theme', $event)">Dark</igx-switch>
+                <igx-switch [checked]="false" [(ngModel)]="theme" (change)="onChange('theme', $event)">Dark</igx-switch>
             </div>
             <div class="control-item">
-                <igx-switch [checked]="grouped" (change)="onChange('grouped', $event)" color="blue" cssClass="finjs-sample-switch">
+                <igx-switch [checked]="true" (change)="onChange('grouped', $event)" color="blue" cssClass="finjs-sample-switch">
                     Grouped</igx-switch>
             </div>
             <div class="control-item">
-                <igx-switch (change)="onChange('toolbar', $event)" color="blue" cssClass="finjs-sample-switch">Toolbar</igx-switch>
+                <igx-switch [checked]="true" (change)="onChange('toolbar', $event)" color="blue" cssClass="finjs-sample-switch">Toolbar</igx-switch>
             </div>
             <div class="finjs-slider control-item">
                 <label for="slider">Records: {{volume}}</label>

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

@@ -10,21 +10,18 @@ import { debounce } from 'rxjs/operators';
     templateUrl: './controllers.component.html'
 })
 export class ControllerComponent implements OnInit, OnDestroy {
-    @ViewChild('buttonGroup1', { static: true }) public buttonGroup1: IgxButtonGroupComponent;
-    @ViewChild('buttonGroup2', { static: true }) public buttonGroup2: IgxButtonGroupComponent;
+    @ViewChild('buttonGroup1', { static: true }) public playButtons: IgxButtonGroupComponent;
     @ViewChild('slider1', { static: true }) public volumeSlider: IgxSliderComponent;
     @ViewChild('slider2', { static: true }) public intervalSlider: IgxSliderComponent;
 
     @Output() public switchChanged = new EventEmitter<any>();
     @Output() public volumeChanged = new EventEmitter<any>();
-    @Output() public frequencyChanged = new EventEmitter<any>();
     @Output() public playAction = new EventEmitter<any>();
 
     public selectionMode = 'multiple';
     public theme = false;
     public volume = 1000;
     public frequency = 500;
-    public grouped = true;
     public controls = [
         {
             disabled: false,
@@ -59,21 +56,17 @@ export class ControllerComponent implements OnInit, OnDestroy {
         switch (event.index) {
             case 0: {
                 this.disableOtherButtons(event.index, true);
-                this.playAction.emit({ action: 'playRandom'} );
+                this.playAction.emit({ action: 'playRandom'});
                 break;
             }
             case 1: {
                 this.disableOtherButtons(event.index, true);
-                this.playAction.emit({ action: 'playAll'} );
+                this.playAction.emit({ action: 'playAll'});
                 break;
             }
             case 2: {
                 this.disableOtherButtons(event.index, false);
-                this.playAction.emit({ action: 'stop'} );
-                break;
-            }
-            case 3: {
-                this.disableOtherButtons(event.index, true);
+                this.playAction.emit({ action: 'stop'});
                 break;
             }
             default:
@@ -94,10 +87,10 @@ export class ControllerComponent implements OnInit, OnDestroy {
         this.volumeSlider.disabled = disableButtons;
         this.intervalSlider.disabled = disableButtons;
         this.selectedButton = ind;
-        this.buttonGroup1.buttons.forEach((button, index) => {
+        this.playButtons.buttons.forEach((button, index) => {
             if (index === 2) { button.disabled = !disableButtons; } else {
-                this.buttonGroup1.buttons[0].disabled = disableButtons;
-                this.buttonGroup1.buttons[1].disabled = disableButtons;
+                this.playButtons.buttons[0].disabled = disableButtons;
+                this.playButtons.buttons[1].disabled = disableButtons;
             }
         });
     }

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

@@ -69,7 +69,7 @@
     <igx-column [field]="'High(Y)'" [width]="'110px'" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
     <igx-column [field]="'Low(Y)'" [width]="'110px'" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
     <igx-column [field]="'Start(Y)'" [width]="'110px'" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
-    <!-- <igx-column [field]="'IndGrou'" [width]="'100px'" [filterable]='false'></igx-column>
+    <igx-column [field]="'IndGrou'" [width]="'100px'" [filterable]='false'></igx-column>
     <igx-column [field]="'IndSect'" [width]="'120px'" [filterable]='false' [resizable]='true'></igx-column>
     <igx-column [field]="'IndSubg'" [width]="'100px'" [filterable]='false'></igx-column>
     <igx-column [field]="'SecType'" [width]="'90px'" [filterable]='false'></igx-column>
@@ -143,5 +143,5 @@
     <igx-column [field]="'sector'" [width]="'80px'" [filterable]='false'></igx-column>
     <igx-column [field]="'CUSIP'" [width]="'100px'" [filterable]='false'></igx-column>
     <igx-column [field]="'Ticker'" [width]="'60px'" [filterable]='false'></igx-column>
-    <igx-column [field]="'Cpn'" [width]="'80px'" [filterable]='false'></igx-column> -->
+    <igx-column [field]="'Cpn'" [width]="'80px'" [filterable]='false'></igx-column>
 </igx-grid>

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

@@ -1,22 +1,25 @@
 import {
     AfterViewInit,
-    ChangeDetectorRef,
     Component,
+    EventEmitter,
+    OnDestroy,
     OnInit,
+    Output,
     ViewChild } from '@angular/core';
 import {
     DefaultSortingStrategy,
     IgxGridComponent,
     SortingDirection
 } from 'igniteui-angular';
 import { Contract, REGIONS } from '../shared/financialData';
+import { LocalService } from '../shared/local.service';
 
 @Component({
     selector: 'app-finjs-grid',
     styleUrls: ['./grid-finjs.component.scss'],
     templateUrl: './grid-finjs.component.html'
 })
-export class GridFinJSComponent implements OnInit, AfterViewInit {
+export class GridFinJSComponent implements OnInit, AfterViewInit, OnDestroy {
     @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
 
     public data = [];
@@ -25,8 +28,20 @@ export class GridFinJSComponent implements OnInit, AfterViewInit {
     public contracts = Contract;
     public regions = REGIONS;
     public showToolbar = true;
+    public volume = 1000;
+    public frequency = 500;
+    private subscription$;
 
-    constructor(public cdr: ChangeDetectorRef) { }
+    @Output() public selectedDataChanged = new EventEmitter<any>();
+    @Output() public keyDown = new EventEmitter<any>();
+    @Output() public chartColumnKeyDown = new EventEmitter<any>();
+
+    constructor(public finService: LocalService) {
+        this.finService.getFinancialData(this.volume);
+        this.subscription$ = this.finService.records.subscribe(x => {
+            this.data = x;
+        });
+    }
 
     public ngOnInit() {
         this.grid.groupingExpressions = [{
@@ -122,14 +137,6 @@ export class GridFinJSComponent implements OnInit, AfterViewInit {
         return '$' + value.toFixed(3);
     }
 
-    public formatYAxisLabel(item: any): string {
-        return item + 'test test';
-    }
-
-    public toggleToolbar(event: any) {
-        this.grid.showToolbar = !this.grid.showToolbar;
-    }
-
     /** Grid CellStyles and CellClasses */
     private negative = (rowData: any): boolean => {
         return rowData['Change(%)'] < 0;
@@ -172,4 +179,9 @@ export class GridFinJSComponent implements OnInit, AfterViewInit {
         return this.grid.groupingExpressions.length > 0;
     }
 
+    public ngOnDestroy() {
+        if (this.subscription$) {
+            this.subscription$.unsubscribe();
+        }
+    }
 }

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

@@ -2,7 +2,6 @@
     <app-finjs-controllers #controllers
         (switchChanged)="onSwitchChanged($event)"
         (volumeChanged)="onVolumeChanged($event)"
-        (frequencyChanged)="onFrequencyChanged($event)"
         (playAction)="onPlayAction($event)">
     </app-finjs-controllers>
     <app-finjs-grid #grid>

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

@@ -1,11 +1,9 @@
 import { AfterViewInit, Component, ElementRef, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
 import { FinancialData } from '../shared/financialData';
-import { LocalService } from '../shared/local.service';
 import { ControllerComponent } from './controllers.component';
 import { GridFinJSComponent } from './grid-finjs.component';
 
 @Component({
-    providers: [LocalService],
     selector: 'app-finjs-main',
     styleUrls: ['./main.component.scss'],
     templateUrl: './main.component.html'
@@ -19,47 +17,19 @@ export class MainComponent implements AfterViewInit, OnDestroy {
     @Output() public frequencyTimer = new EventEmitter<any>();
     @Output() public player = new EventEmitter<any>();
 
-    public data = [];
     private subscription$;
-
-    constructor(private localService: LocalService, private elRef: ElementRef) {
-        this.localService.getFinancialData(1000);
-    }
-
-    public selectionMode = 'multiple';
     public theme = false;
     public volume = 1000;
     public frequency = 500;
-    public controls = [
-        {
-            disabled: false,
-            icon: 'update',
-            label: 'LIVE PRICES',
-            selected: false
-        },
-        {
-            disabled: false,
-            icon: 'update',
-            label: 'LIVE ALL PRICES',
-            selected: false
-        },
-        {
-            disabled: true,
-            icon: 'stop',
-            label: 'Stop',
-            selected: false
-        }
-    ];
-
-    private subscription;
-    private selectedButton;
     private _timer;
 
+    constructor(private elRef: ElementRef) {
+    }
+
     public ngAfterViewInit() {
-        this.subscription$ = this.localService.records.subscribe(x => {
-            this.finGrid.data = x;
-            this.finGrid.cdr.detectChanges();
-        });
+        // this.subscription$ = this.localService.records.subscribe(x => {
+        //     this.finGrid.data = x;
+        // });
     }
     public onSwitchChanged(event: any) {
         switch (event.action) {
@@ -82,43 +52,18 @@ export class MainComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    public onVolumeChanged(event: any) {
-        this.localService.getFinancialData(this.volume);
-    }
-
-    public onFrequencyChanged(event: any) {
-        switch (event.switch) {
-            case 'theme': {
-                this.changeTheme(event.checked);
-                break;
-            }
-            case 'grouped': {
-                this.disableOtherButtons(event.index, true);
-                const currData = this.finGrid.data;
-                this._timer = setInterval(() => this.tickerAllPrices(currData), this.frequency);
-                break;
-            }
-            case 'showToolbar': {
-                this.stopFeed();
-                break;
-            }
-            default:
-                {
-                    break;
-                }
-        }
+    public onVolumeChanged(volume: any) {
+        this.finGrid.finService.getFinancialData(volume);
     }
 
     public onPlayAction(event: any) {
         switch (event.action) {
             case 'playAll': {
-                this.disableOtherButtons(event.index, true);
                 const currData = this.finGrid.data;
                 this._timer = setInterval(() => this.tickerAllPrices(currData), this.controller.frequency);
                 break;
             }
             case 'playRandom': {
-                this.disableOtherButtons(event.index, true);
                 const currData = this.finGrid.data;
                 this._timer = setInterval(() => this.ticker(currData), this.controller.frequency);
                 break;
@@ -151,8 +96,8 @@ export class MainComponent implements AfterViewInit, OnDestroy {
         if (this._timer) {
             clearInterval(this._timer);
         }
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+        if (this.subscription$) {
+            this.subscription$.unsubscribe();
         }
     }
 
@@ -164,21 +109,6 @@ export class MainComponent implements AfterViewInit, OnDestroy {
         this.finGrid.data = FinancialData.updateAllPrices(data);
     }
 
-    private disableOtherButtons(ind: number, disableButtons: boolean) {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-        this.controller.volumeSlider.disabled = disableButtons;
-        this.controller.intervalSlider.disabled = disableButtons;
-        this.selectedButton = ind;
-        this.controller.buttonGroup1.buttons.forEach((button, index) => {
-            if (index === 2) { button.disabled = !disableButtons; } else {
-                this.controller.buttonGroup1.buttons[0].disabled = disableButtons;
-                this.controller.buttonGroup1.buttons[1].disabled = disableButtons;
-            }
-        });
-    }
-
     /**
      * returns the main div container of the Index Component,
      * if path is /samples/sample-url, or the appRoot, if path is /sample-url
@@ -187,12 +117,7 @@ export class MainComponent implements AfterViewInit, OnDestroy {
         return this.elRef.nativeElement.parentElement.parentElement;
     }
 
-    get buttonSelected(): number {
-        return this.selectedButton || this.selectedButton === 0 ? this.selectedButton : -1;
-    }
-
     public ngOnDestroy() {
         this.stopFeed();
-        this.subscription$.unsubscribe();
     }
 }

src/app/shared/financialData.ts

@@ -893,11 +893,11 @@ export class FinancialData {
 
     /** Updates values in every record */
     public static updateAllPrices(data: any[]): any[] {
-      const newData = [];
+        const newData = [];
         for (const dataRow of data) {
             newData.push(this.randomizeObjectData(dataRow));
         }
-        return newData;
+        return Array.from(data);
     }
 
     /** Updates values in random records */
@@ -959,7 +959,6 @@ export class FinancialData {
         dataObj.Change = res.Price - dataObj.Price;
         dataObj.Price = res.Price;
         dataObj[changeP] = res.ChangePercent;
-        return {...dataObj};
     }
 
     private static generateNewPrice(oldPrice): any {