chore(*): update finjs sample as samples browser logic

hanastasov · hanastasov · commit 6a4d682cf122 · 2021-03-26T11:34:12.000+02:00
diff --git a/src/app/grid-finjs/controllers.component.html b/src/app/grid-finjs/controllers.component.html
@@ -2,7 +2,7 @@
     <div class="controls-holder">
         <div class="switches">
             <div class="control-item">
-                <igx-switch [checked]="false" [(ngModel)]="theme" (change)="onChange('theme', $event)">Dark</igx-switch>
+                <igx-switch [checked]="false" (change)="onChange('theme', $event)">Dark</igx-switch>
             </div>
             <div class="control-item">
                 <igx-switch [checked]="true" (change)="onChange('grouped', $event)" color="blue" cssClass="finjs-sample-switch">
diff --git a/src/app/grid-finjs/controllers.component.ts b/src/app/grid-finjs/controllers.component.ts
@@ -18,7 +18,7 @@ export class ControllerComponent implements OnInit, OnDestroy {
     @Output() public volumeChanged = new EventEmitter<any>();
     @Output() public playAction = new EventEmitter<any>();
 
-    public theme = false;
+    public darkTheme = true;
     public volume = 1000;
     public frequency = 500;
     public controls = [
diff --git a/src/app/grid-finjs/grid-finjs.component.html b/src/app/grid-finjs/grid-finjs.component.html
@@ -4,6 +4,7 @@
     displayDensity='compact'
     hiddenColumnsText="Hidden"
     primaryKey='ID'
+    [(groupingExpressions)]="groupingExpressions"
     [autoGenerate]='false'
     [data]="data"
     [hideGroupedColumns]="true"
diff --git a/src/app/grid-finjs/grid-finjs.component.ts b/src/app/grid-finjs/grid-finjs.component.ts
@@ -1,127 +1,56 @@
 import {
     Component,
-    EventEmitter,
-    OnDestroy,
-    OnInit,
-    Output,
+    Input,
     ViewChild } from '@angular/core';
 import {
     DefaultSortingStrategy,
     IgxGridComponent,
     SortingDirection
 } from 'igniteui-angular';
 import { Contract, REGIONS } from '../shared/financialData';
-import { LocalService } from '../shared/local.service';
+
+const GROUPING_EXPRESSIONS = [{
+    dir: SortingDirection.Desc,
+    fieldName: 'Category',
+    ignoreCase: false,
+    strategy: DefaultSortingStrategy.instance()
+},
+{
+    dir: SortingDirection.Desc,
+    fieldName: 'Type',
+    ignoreCase: false,
+    strategy: DefaultSortingStrategy.instance()
+},
+{
+    dir: SortingDirection.Desc,
+    fieldName: 'Contract',
+    ignoreCase: false,
+    strategy: DefaultSortingStrategy.instance()
+}
+];
 
 @Component({
     selector: 'app-finjs-grid',
     styleUrls: ['./grid-finjs.component.scss'],
     templateUrl: './grid-finjs.component.html'
 })
-export class GridFinJSComponent implements OnInit, OnDestroy {
+export class GridFinJSComponent {
     @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
 
-    @Output() public selectedDataChanged = new EventEmitter<any>();
-    @Output() public keyDown = new EventEmitter<any>();
-    @Output() public chartColumnKeyDown = new EventEmitter<any>();
+    @Input()
+    public data: any;
 
-    public data = [];
     public selectionMode = 'multiple';
     public contracts = Contract;
     public regions = REGIONS;
     public columnFormat = { digitsInfo: '1.3-3'};
     public showToolbar = true;
-    public volume = 1000;
-    public frequency = 500;
-    private subscription$;
-
-    constructor(public finService: LocalService) {
-        this.finService.getFinancialData(this.volume);
-        this.subscription$ = this.finService.records.subscribe(x => {
-            this.data = x;
-        });
-    }
-
-    public ngOnInit() {
-        this.grid.groupingExpressions = [{
-            dir: SortingDirection.Desc,
-            fieldName: 'Category',
-            ignoreCase: false,
-            strategy: DefaultSortingStrategy.instance()
-        },
-        {
-            dir: SortingDirection.Desc,
-            fieldName: 'Type',
-            ignoreCase: false,
-            strategy: DefaultSortingStrategy.instance()
-        },
-        {
-            dir: SortingDirection.Desc,
-            fieldName: 'Settlement',
-            ignoreCase: false,
-            strategy: DefaultSortingStrategy.instance()
-        }
-        ];
-    }
+    public groupingExpressions = GROUPING_EXPRESSIONS;
 
-    public ngOnDestroy() {
-        if (this.subscription$) {
-            this.subscription$.unsubscribe();
-        }
-    }
-
-    /** Event Handlers */
-
-    public onChange() {
-        if (this.grid.groupingExpressions.length > 0) {
-            this.grid.groupingExpressions = [];
-        } else {
-            this.grid.groupingExpressions = [{
-                dir: SortingDirection.Desc,
-                fieldName: 'Category',
-                ignoreCase: false,
-                strategy: DefaultSortingStrategy.instance()
-            },
-            {
-                dir: SortingDirection.Desc,
-                fieldName: 'Type',
-                ignoreCase: false,
-                strategy: DefaultSortingStrategy.instance()
-            },
-            {
-                dir: SortingDirection.Desc,
-                fieldName: 'Contract',
-                ignoreCase: false,
-                strategy: DefaultSortingStrategy.instance()
-            }
-            ];
-        }
-    }
+    constructor() { }
 
-    public toggleGrouping() {
-        if (this.grid.groupingExpressions.length > 0) {
-            this.grid.groupingExpressions = [];
-        } else {
-            this.grid.groupingExpressions = [{
-                dir: SortingDirection.Desc,
-                fieldName: 'Category',
-                ignoreCase: false,
-                strategy: DefaultSortingStrategy.instance()
-            },
-            {
-                dir: SortingDirection.Desc,
-                fieldName: 'Type',
-                ignoreCase: false,
-                strategy: DefaultSortingStrategy.instance()
-            },
-            {
-                dir: SortingDirection.Desc,
-                fieldName: 'Contract',
-                ignoreCase: false,
-                strategy: DefaultSortingStrategy.instance()
-            }
-            ];
-        }
+    public toggleGrouping(newValue: boolean) {
+        this.groupingExpressions = newValue ? GROUPING_EXPRESSIONS : [];
     }
 
     /** Grid CellStyles and CellClasses */
@@ -132,7 +61,6 @@ export class GridFinJSComponent implements OnInit, OnDestroy {
     private strongPositive = (rowData: any): boolean => rowData['Change(%)'] >= 1;
     private strongNegative = (rowData: any): boolean => rowData['Change(%)'] <= -1;
 
-    /* eslint-disable @typescript-eslint/member-ordering */
     public trends = {
         changeNeg: this.changeNegative,
         changePos: this.changePositive,
@@ -148,9 +76,4 @@ export class GridFinJSComponent implements OnInit, OnDestroy {
         strongNegative2: this.strongNegative,
         strongPositive2: this.strongPositive
     };
-    /* eslint-enable @typescript-eslint/member-ordering */
-
-    public get grouped(): boolean {
-        return this.grid.groupingExpressions.length > 0;
-    }
 }
diff --git a/src/app/grid-finjs/main.component.html b/src/app/grid-finjs/main.component.html
@@ -1,9 +1,9 @@
-<div class="grid__wrapper" [class.fin-dark-theme]="theme">
+<div class="grid__wrapper" [class.fin-dark-theme]="darkTheme">
     <app-finjs-controllers #controllers
         (switchChanged)="onSwitchChanged($event)"
         (volumeChanged)="onVolumeChanged($event)"
         (playAction)="onPlayAction($event)">
     </app-finjs-controllers>
-    <app-finjs-grid #grid>
+    <app-finjs-grid #grid [data]="data$ | async">
     </app-finjs-grid>
 </div>
diff --git a/src/app/grid-finjs/main.component.ts b/src/app/grid-finjs/main.component.ts
@@ -1,37 +1,40 @@
-import { AfterViewInit, Component, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
-import { FinancialData } from '../shared/financialData';
+import { Component, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+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'
 })
-export class MainComponent implements AfterViewInit, OnDestroy {
+export class MainComponent implements OnDestroy {
     @ViewChild('grid', { static: true }) public finGrid: GridFinJSComponent;
     @ViewChild('controllers', { static: true }) public controller: ControllerComponent;
 
     @Output() public switch = new EventEmitter<any>();
     @Output() public recordsVolume = new EventEmitter<any>();
     @Output() public frequencyTimer = new EventEmitter<any>();
     @Output() public player = new EventEmitter<any>();
-    public theme = false;
+
     public volume = 1000;
     public frequency = 500;
-
-    private subscription$;
+    public darkTheme = true;
+    public data$: any;
+    private destroy$ = new Subject<any>();
     private _timer;
 
-    constructor() { }
-
-    public ngAfterViewInit() {
-        // this.subscription$ = this.localService.records.subscribe(x => {
-        //     this.finGrid.data = x;
-        // });
+    constructor(public finService: LocalService) {
+        this.finService.getFinancialData(this.volume);
+        this.data$ = this.finService.records.pipe(takeUntil(this.destroy$));
     }
 
     public ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
         this.stopFeed();
     }
 
@@ -42,11 +45,7 @@ export class MainComponent implements AfterViewInit, OnDestroy {
                 break;
             }
             case 'grouped': {
-                this.finGrid.toggleGrouping();
-                break;
-            }
-            case 'theme': {
-                this.changeTheme(event.value);
+                this.finGrid.toggleGrouping(event.value);
                 break;
             }
             default:
@@ -58,19 +57,19 @@ export class MainComponent implements AfterViewInit, OnDestroy {
 
     public onVolumeChanged(volume: any) {
         this.finGrid.grid.deselectAllRows();
-        this.finGrid.finService.getFinancialData(volume);
+        this.finService.getFinancialData(volume);
     }
 
     public onPlayAction(event: any) {
         switch (event.action) {
             case 'playAll': {
                 const currData = this.finGrid.grid.filteredSortedData ?? this.finGrid.data;
-                this._timer = setInterval(() => this.finGrid.finService.updateAllPriceValues(currData), this.controller.frequency);
+                this._timer = setInterval(() => this.finService.updateAllPriceValues(currData), this.controller.frequency);
                 break;
             }
             case 'playRandom': {
                 const currData = this.finGrid.data;
-                this._timer = setInterval(() => this.finGrid.finService.updateRandomPriceValues(currData), this.controller.frequency);
+                this._timer = setInterval(() => this.finService.updateRandomPriceValues(currData), this.controller.frequency);
                 break;
             }
             case 'stop': {
@@ -84,33 +83,9 @@ export class MainComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    /**
-     * the below code is needed when accessing the sample through the navigation
-     * it will style all the space below the sample component element, but not the navigation menu
-     */
-    public changeTheme(dark: true) {
-        const parentEl = this.parentComponentEl();
-        if (dark && parentEl.classList.contains('main')) {
-            parentEl.classList.add('fin-dark-theme');
-        } else {
-            parentEl.classList.remove('fin-dark-theme');
-        }
-    }
-
     public stopFeed() {
         if (this._timer) {
             clearInterval(this._timer);
         }
-        if (this.subscription$) {
-            this.subscription$.unsubscribe();
-        }
-    }
-
-    /**
-     * returns the main div container of the Index Component,
-     * if path is /samples/sample-url, or the appRoot, if path is /sample-url
-     */
-    private parentComponentEl() {
-        return this.elRef.nativeElement.parentElement.parentElement;
     }
 }
