ng2-charts fixes

TODO: clean-up, test, optimize and submit as a PR

src/app/filters/filters.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import * as io from 'socket.io-client';
-import { Constants } from '../shared/constants';
+import { Constants } from '../shared';
 
 @Component({
   moduleId: module.id,
@@ -13,6 +13,7 @@ import { Constants } from '../shared/constants';
 export class FiltersComponent {
   
   socket: any;
+  
   constructor(private constants: Constants) {
     this.socket = io(this.constants.socket.url);
   }
@@ -20,7 +21,10 @@ export class FiltersComponent {
   private filters: Array<any> = this.constants.filters;
   
   applyFilter (filter) {
-    this.socket.emit(this.constants.socket.events.filter, filter)
+    this.socket.emit(
+      this.constants.socket.events.filter, 
+      filter
+    );
   } 
 
 }

src/app/frequency-band/frequency-band.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import * as io from 'socket.io-client';
-import { ChartService } from '../shared';
+import { ChartService, Constants } from '../shared';
 import { CHART_DIRECTIVES } from '../shared/ng2-charts';
-import { Constants } from '../shared/constants';
 
 @Component({
   moduleId: module.id,
@@ -13,10 +12,12 @@ import { Constants } from '../shared/constants';
   providers: [ChartService, Constants]
 })
 
-export class FrequencyBandComponent implements OnInit {
+export class FrequencyBandComponent implements OnInit, OnDestroy {
 
   socket: any;
-  constructor(private chartService: ChartService, private constants: Constants) {
+
+  constructor(private chartService: ChartService, 
+              private constants: Constants) {
     this.socket = io(constants.socket.url);
   }
   
@@ -25,9 +26,9 @@ export class FrequencyBandComponent implements OnInit {
   @Input() public color:number;
   
   private data:Array<any> = [{ data: [], label: [] }];
-  private colors:Array<any>;
-  private channels:Array<string> = this.chartService.getChannels();
-  private options:any = this.chartService.getChartJSBarDefaults();
+  private colors = this.chartService.getColorByIndex(this.color);
+  private channels = this.chartService.getChannels();
+  private options = this.chartService.getChartJSBarDefaults();
   
   ngOnInit() {
     this.colors = this.chartService.getColorByIndex(this.color);
@@ -42,7 +43,9 @@ export class FrequencyBandComponent implements OnInit {
   }
   
   ngOnDestroy () {
-    this.socket.removeListener(this.constants.socket.events.fft);
+    this.socket.removeListener(
+      this.constants.socket.events.fft
+    );
   } 
 
 }

src/app/frequency/frequency.component.ts

@@ -1,9 +1,8 @@
 import { Component, ElementRef, OnInit, OnDestroy, Input } from '@angular/core';
 import { RouteSegment, ROUTER_PROVIDERS } from '@angular/router';
 import * as io from 'socket.io-client';
-import { ChartService } from '../shared';
+import { ChartService, Constants } from '../shared';
 import { CHART_DIRECTIVES } from '../shared/ng2-charts';
-import { Constants } from '../shared/constants';
 
 @Component({
   moduleId: module.id,
@@ -17,6 +16,7 @@ import { Constants } from '../shared/constants';
 export class FrequencyComponent implements OnInit {
 
   socket: any;
+  
   constructor(private chartService: ChartService,
               private segment: RouteSegment,
               private constants: Constants) {
@@ -28,7 +28,7 @@ export class FrequencyComponent implements OnInit {
   
   @Input() type:string;
   
-  private data:Array<any> = [{ data: [], label: [] }];
+  private data:Array<any> = Array(8).fill(0).map(() => { return { data: [], label: [] } });
   private labels:Array<any> = [];
   private colors:Array<any> = this.chartService.getColors();
   private channels:Array<string> = this.chartService.getChannels();
@@ -60,7 +60,9 @@ export class FrequencyComponent implements OnInit {
   }
   
   ngOnDestroy () {
-    this.socket.removeListener(this.constants.socket.events.fft);
+    this.socket.removeListener(
+      this.constants.socket.events.fft
+    );
   } 
 
 }

src/app/motion/motion.component.ts

@@ -17,7 +17,9 @@ export class MotionComponent implements OnInit {
   socket: any;
   viewer: any;
   model: any;
-  constructor(private view: ElementRef, private constants: Constants) {
+  
+  constructor(private view: ElementRef, 
+              private constants: Constants) {
     this.socket = io(constants.socket.url);
   }
   

src/app/shared/chart.service.ts

@@ -165,7 +165,7 @@ export class ChartService {
     ]; 
   }
   
-  getColorByIndex (index:number): Array<any> {
+  getColorByIndex (index: number): Array<any> {
     return this.getColors().filter((c, i) => index === i);
   }
 

src/app/shared/index.ts

@@ -1,2 +1,3 @@
 export * from './chart.service';
 export * from './ng2-charts';
+export * from './constants';

src/app/shared/ng2-charts.ts

@@ -56,7 +56,7 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
     this.parent = this.element.nativeElement;
     this.initFlag = true;
     if (this.data || this.datasets) {
-      this.refresh();
+      this.create(this.ctx);
     }
   }
 
@@ -73,7 +73,7 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
     }
   }
 
-  public getChartBuilder(ctx:any/*, data:Array<any>, options:any*/):any {
+  public create(ctx:any):any {
     let datasets:any = void 0;
 
     // in case if datasets is not provided, but data is present
@@ -106,7 +106,7 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
       data or datasets field are required to render char ${this.chartType}`);
     }
 
-    let options:any = Object.assign({}, this.options);
+    const options:any = Object.assign({}, this.options);
     // hock for onHover and onClick events
     options.hover = options.hover || {};
     if (!options.hover.onHover) {
@@ -124,7 +124,7 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
       };
     }
 
-    let opts = {
+    const opts = {
       type: this.chartType,
       data: {
         labels: this.labels,
@@ -137,17 +137,15 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
       throw new Error('ng2-charts configuration issue: Embedding Chart.js lib is mandatory');
     }
 
-    return new Chart(ctx, opts);
+    this.chart = new Chart(ctx, opts);
   }
 
   private refresh():any {
-    if (this.options && this.options.responsive && this.parent.clientHeight === 0) {
-      return setTimeout(() => this.refresh(), 50);
-    }
-
-    // todo: remove this line, it is producing flickering
-    this.ngOnDestroy();
-    this.chart = this.getChartBuilder(this.ctx/*, data, this.options*/);
+    this.chart.data.labels = [...this.labels];
+    this.chart.data.datasets = [...this.chart.data.datasets.map((set, index) => {
+      return Object.assign(set, this.datasets[index]);
+    })];
+    this.chart.update();
   }
 }
 

src/app/time-series/time-series.component.css

@@ -6,7 +6,6 @@
   box-shadow: 0 0 5px rgba(0,0,0,0.3);
   background-color: #333333;
   position: relative;
-  height: 100%;
   width: 1060px;
   overflow: hidden;
 }

src/app/time-series/time-series.component.ts

@@ -1,8 +1,8 @@
-import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
+import { Component, ElementRef } from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
 import { SmoothieChart, TimeSeries } from 'smoothie';
-import { ChartService } from '../shared';
+import { ChartService, Constants } from '../shared';
 import * as io from 'socket.io-client';
-import { Constants } from '../shared/constants';
 
 @Component({
   moduleId: module.id,
@@ -12,7 +12,7 @@ import { Constants } from '../shared/constants';
   providers: [ChartService, Constants]
 })
 
-export class TimeSeriesComponent implements OnInit {
+export class TimeSeriesComponent implements OnInit, OnDestroy {
 
   socket: any;
   constructor(private view: ElementRef, 
@@ -23,13 +23,12 @@ export class TimeSeriesComponent implements OnInit {
   }
   
   private options = this.chartService.getChartSmoothieDefaults();
-  
+  private channels = this.chartService.getChannels();
+  private colors = this.chartService.getColors();
   private timeSeries = new SmoothieChart(this.options);
   private amplitudes = [];
   private timeline = [];
   private lines = Array(8).fill(0).map(() => new TimeSeries());
-  private channels = this.chartService.getChannels();
-  private colors = this.chartService.getColors();
   
   ngOnInit() {
     this.addTimeSeriesLines();
@@ -42,11 +41,15 @@ export class TimeSeriesComponent implements OnInit {
   }
   
   ngOnDestroy () {
-    this.socket.removeListener(this.constants.socket.events.time);
+    this.socket.removeListener(
+      this.constants.socket.events.time
+    );
   } 
   
   ngAfterViewInit () {
-    this.timeSeries.streamTo(this.view.nativeElement.querySelector('canvas'), 40);
+    this.timeSeries.streamTo(
+      this.view.nativeElement.querySelector('#timeSeries')
+    );
   }
   
   addTimeSeriesLines () {

src/app/topo/topo.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import * as io from 'socket.io-client';
-import { Constants } from '../shared/constants';
-import { ChartService } from '../shared';
+import { ChartService, Constants } from '../shared';
 
 declare var chroma: any;
 declare var Plotly: any;
@@ -19,7 +18,9 @@ export class TopoComponent implements OnInit {
   socket: any;
   plotElement: any;
   
-  constructor(private view: ElementRef, private chartService: ChartService, private constants: Constants) {
+  constructor(private view: ElementRef, 
+              private chartService: ChartService, 
+              private constants: Constants) {
     this.socket = io(constants.socket.url);
   }
     
@@ -46,7 +47,9 @@ export class TopoComponent implements OnInit {
   }
   
   ngOnDestroy (): void {
-    this.socket.removeListener(this.constants.socket.events.topo);
+    this.socket.removeListener(
+      this.constants.socket.events.topo
+    );
   }
   
   getGrid (n) {

src/index.html

@@ -13,7 +13,7 @@
       font-family: 'Roboto', sans-serif;
       font-weight: 300;
       color: #ffffff; 
-      background-color: #222222; 
+      background-color: rgba(30, 30, 30, 1); 
       margin: 0; 
     }
   </style>

src/server/constants/index.js

@@ -8,15 +8,15 @@ module.exports = {
         sampleEvent: 'sample'
     },
     signal: {
-        bufferSize: 512,
+        bufferSize: 256,
         sampleRate: 250,
         windowSize: 32 // data has a moving window of 32 samples = 128 milliseconds (250Hz)
     },
     fft: {
-        bins: 512
+        bins: 256
     },
     scale: {
-        global: 1.5,
+        global: 1,
         simulated: 4,
         skipLabels: 4
     },

src/server/providers/signal.provider.js

@@ -40,7 +40,7 @@ module.exports = class Signal {
     }
     
     add (sample) {
-        //console.log('sample', sample);
+        console.log('sample', sample);
         Object.keys(sample.channelData).forEach((channel, i) => {
             this.signals[i].push(sample.channelData[channel]);
         });