daixtrose · daixtrose · Aug 19, 2016 · Aug 19, 2016 · Aug 19, 2016
diff --git a/app/app.module.ts b/app/app.module.ts
@@ -0,0 +1,10 @@
+import { NgModule }       from '@angular/core';
+import { BrowserModule  } from '@angular/platform-browser';
+import { MyApp }   from './app';
+
+@NgModule({
+    declarations: [MyApp],
+    imports:      [BrowserModule],
+    bootstrap:    [MyApp],
+})
+export class AppModule {}
diff --git a/app/app.ts b/app/app.ts
@@ -58,3 +58,8 @@ export class MyApp {
 
 enableProdMode();
 ionicBootstrap(MyApp, [DataService])
+
+// import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+// import { AppModule }              from './app/app.module';
+
+// platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/app/components/gauge/gauge.html b/app/components/gauge/gauge.html
@@ -1,2 +1,3 @@
-<div></div>
-<p>Value = {{ currentValue | json }}<p> 
+<div class="gauge"></div>
+<p>Value = {{ currentValue | json }}<p>
+<p># of received values in last second: {{ numberOfReceivedValues }}</p> 
diff --git a/app/components/gauge/gauge.scss b/app/components/gauge/gauge.scss
@@ -0,0 +1,3 @@
+.gauge {
+    -webkit-transform: translate3d(0px,0px,0px);
+}
diff --git a/app/components/gauge/gauge.ts b/app/components/gauge/gauge.ts
@@ -2,7 +2,7 @@ import { Component, Input, ElementRef, NgZone,
   OnInit, OnDestroy, OnChanges, SimpleChanges,
   ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
-import {Observable, Subscription, Subject } from 'rxjs/Rx';
+import {Observable, Subscription, Subject, Scheduler } from 'rxjs/Rx';
 import 'rxjs/add/operator/sample';
 
 import { DataService } from '../../providers/data-service/data-service';
@@ -29,12 +29,18 @@ export class Gauge implements OnInit, OnDestroy, OnChanges {
   private chartUpdateTask: any;
   private currentValue: number = 0.0;
   private subscription: Subscription;
+  private sampleCounterSubscription: Subscription; 
+  private redrawTriggerSubject: Subject<Object>;
+  private animating: boolean = false;
+  private numberOfReceivedValues: number;   
+
 
   constructor(
     private element: ElementRef,
     private dataService: DataService,
     private ngZone: NgZone,
     private changeDetectorRef: ChangeDetectorRef) {
+      changeDetectorRef.detach();
   }
 
   public ngOnInit(): void {
@@ -47,21 +53,32 @@ export class Gauge implements OnInit, OnDestroy, OnChanges {
     //////////////////////////////////////////////////////////////////////////////////////////
 
     let observableValue = this.dataService.someNumbersFromZeroToOne
-      .sample(Observable.interval(250)) // reduce frequency
+      .sample(Observable.interval(100)) // reduce frequency
       .map((value, index) => value * (this.max - this.min) + this.min)
       ;
 
-
-    this.subscription = observableValue.subscribe(value => {
-      this.ngZone.runOutsideAngular(() => {
-        this.currentValue = parseFloat(value.toFixed(2));
-        //console.log("-----> refreshing gauge with:", this.currentValue);
-
-        // ---> This refresh is immediate  
+    this.subscription = observableValue
+      .observeOn(Scheduler.queue)
+      .subscribe(value => {
+        this.currentValue = value; 
         this.justGage.refresh(this.currentValue);
         this.changeDetectorRef.markForCheck();
+
+        // this.ngZone.runOutsideAngular(() => {
+        //   this.justGage.refresh(this.currentValue);
+        // });
       });
-    });
+
+    let sampleTime = 1000;  
+
+    this.sampleCounterSubscription = this.dataService.someNumbersFromZeroToOne
+      .observeOn(Scheduler.queue)
+      .bufferTime(sampleTime)
+      .subscribe(values => {
+          this.numberOfReceivedValues = values.length; 
+          this.changeDetectorRef.markForCheck();
+        });  
+
   }
 
   public ngOnDestroy(): void {
@@ -89,11 +106,8 @@ export class Gauge implements OnInit, OnDestroy, OnChanges {
 
   private clearSubscription(): void {
     console.log("-----> clearing subscription");
-
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-      this.subscription = null;
-    }
+    this.sampleCounterSubscription.unsubscribe();
+    this.subscription.unsubscribe();
   }
 
   private getColorTable(): string[] {
@@ -131,10 +145,10 @@ export class Gauge implements OnInit, OnDestroy, OnChanges {
       shadowSize: 5,
       shadowVerticalOffset: 3,
       levelColors: this.getColorTable(),
-      startAnimationTime: 250, // 700
+      startAnimationTime: 0, // see https://github.com/toorshia/justgage/issues/237
       // type of initial animation (linear, >, <,  <>, bounce)
       startAnimationType: '>',
-      refreshAnimationTime: 700, // 700
+      refreshAnimationTime: 0, // see https://github.com/toorshia/justgage/issues/237
       refreshAnimationType: '>',
       donutStartAngle: 90,
       valueMinFontSize: 10,

diff --git a/app/components/yt-chart/yt-chart.html b/app/components/yt-chart/yt-chart.html
@@ -1,2 +1,3 @@
 <canvas class="yt-chart"></canvas>
+<div>Number of received values in last interval: {{ numberOfReceivedValues }}</div>
 <!-- Value = <pre>{{ values | async | json }}</pre> --> 
diff --git a/app/components/yt-chart/yt-chart.scss b/app/components/yt-chart/yt-chart.scss
@@ -1,11 +1,9 @@
 .yt-chart {
     display: block; 
-    width: auto; 
-    height: 50%
-
-
-
-    }
+    width: 100%; 
+    height: 100%;
+    min-height: 400px;
+}
 
 
 // canvas {

diff --git a/app/components/yt-chart/yt-chart.ts b/app/components/yt-chart/yt-chart.ts
@@ -1,6 +1,7 @@
-import { Component, Input, OnDestroy, OnChanges, OnInit, ElementRef, 
+import { Component, Input, OnDestroy, OnChanges, OnInit, ElementRef,
   ChangeDetectionStrategy, ChangeDetectorRef, NgZone } from '@angular/core';
 import * as Rx from 'rxjs';
+import 'rxjs/add/operator/bufferTime';
 
 // -----------------------------------------------------------------------------
 export class XyPoint {
@@ -38,55 +39,71 @@ export class YtChart implements OnDestroy, OnChanges, OnInit {
   private ctx: any;
   private chart: any = null;
   private chartUpdateTask: any;
-  private valuesSubscription: Rx.Subscription; 
+  private valuesSubscription: Rx.Subscription;
+  private updateSubscription: Rx.Subscription;
+  private sampleCounterSubscription: Rx.Subscription;
+  private numberOfReceivedValues: number;
 
-  public constructor(private element: ElementRef, private zone: NgZone
-    /*, private changeDetectorRef: ChangeDetectorRef */) {
+  public constructor(private element: ElementRef, private zone: NgZone,
+    private changeDetectorRef: ChangeDetectorRef) {
 
-    // changeDetectorRef.detach();
-    // setInterval(() => {
-    //     this.changeDetectorRef.detectChanges();
-    // }, 250);
+      // This AFAICS has absolutely no effect 
+      //changeDetectorRef.detach();
   }
 
   public ngOnInit(): void {
-    console.log("-----> this.element: ", typeof(this.element), " == ", JSON.stringify(this.element));
-    console.log("-----> this.element.nativeElement.childNodes[0]: ", typeof(this.element.nativeElement.childNodes[0]));
+    // console.log("-----> this.element: ", typeof (this.element), " == ", JSON.stringify(this.element));
+    // console.log("-----> this.element.nativeElement.childNodes[0]: ", typeof (this.element.nativeElement.childNodes[0]));
     // console.log("-----> this.element.nativeElement.childNodes[0]: ", typeof(this.element.nativeElement.childNodes[0]))
     // console.log("-----> this.element.nativeElement.childNodes[0]: ", typeof(this.element.nativeElement.childNodes[0]))
-
 
     this.ctx = this.element.nativeElement.childNodes[0].getContext("2d");
     this.chart = new Chart(this.ctx, this.getDefaultOptions());
+
 
     for (let i = 0; i < this.maxNumberofSamples; i++) {
       this.addValueToChartData(new XyPoint(i, 0));
     }
 
     // subscribe to store all values that come in
-    this.valuesSubscription = this.values.subscribe(xyPoint => {
-      this.addValueToChartData(xyPoint);
-    });
+    this.valuesSubscription = this.values
+      .observeOn(Rx.Scheduler.queue)
+      .subscribe(xyPoint => {
+        this.addValueToChartData(xyPoint);
+
+      });
+
+    let sampleTime = 1000;
 
     // run an update task at a lower frequency
-    this.chartUpdateTask = setInterval(() => {
-      this.zone.runOutsideAngular(() => {
-          this.chart.update(50, true);
+    this.updateSubscription = Rx.Observable.interval(sampleTime, Rx.Scheduler.async)
+      .observeOn(Rx.Scheduler.queue)
+      .subscribe(_ => {
+        //this.zone.runOutsideAngular(() => {
+            this.chart.update(0, false);
+        //});
       });
-    }, 250);
+
+    this.sampleCounterSubscription = this.values
+      .observeOn(Rx.Scheduler.queue)
+      .bufferTime(sampleTime)
+      .subscribe(values => {
+          this.numberOfReceivedValues = values.length; 
+          this.changeDetectorRef.markForCheck();
+        });
   }
 
   public ngOnChanges(): void {
-    
+
   }
 
-  addValueToChartData(dataPoint: XyPoint) : void {
+  addValueToChartData(dataPoint: XyPoint): void {
+    //console.log("----> YT receiving value");
     if (!dataPoint) {
       return;
     }
 
-    if (!this.chart)
-    {
+    if (!this.chart) {
       return;
     }
 
@@ -112,22 +129,27 @@ export class YtChart implements OnDestroy, OnChanges, OnInit {
       }
     }
 
+    //this.animate();
     //this.chart.update(50, true);
   }
 
   public ngOnDestroy(): void {
     // terminate the update task
     clearInterval(this.chartUpdateTask);
 
+    // unsubscribe from plot update 
+    this.updateSubscription.unsubscribe(); 
+
     // unsubscribe from data stream
     this.valuesSubscription.unsubscribe();
-
+    this.sampleCounterSubscription.unsubscribe();
+
     if (this.chart) {
       this.chart.destroy();
       this.chart = void 0;
     }
   }
-  
+
 
   private createDatasets(): any[] {
     let datasets = [];
@@ -156,7 +178,7 @@ export class YtChart implements OnDestroy, OnChanges, OnInit {
   private getDefaultOptions() {
     return {
       type: 'line',
-      lineTension: 0, 
+      lineTension: 0,
       data: {
         datasets: this.createDatasets()
       },
@@ -173,6 +195,9 @@ export class YtChart implements OnDestroy, OnChanges, OnInit {
         tooltips: {
           enabled: false
         },
+        animation: {
+          duration: 0
+        },
         scales: {
           xAxes: [{
             id: "x-axis-id",

diff --git a/app/pages/general-info-page/general-info-page.html b/app/pages/general-info-page/general-info-page.html
@@ -12,33 +12,68 @@
   <ion-grid>
     <ion-row>
       <ion-col width-75>
+        <ion-row>
+          <ion-item>
+            <ion-label>Show Y-T Plot</ion-label>
+            <ion-checkbox [(ngModel)]="showYtPlot"></ion-checkbox>
+          </ion-item>
         <ion-item>
-          <ion-label>Show Y-T Plot</ion-label>
-          <ion-checkbox [(ngModel)]="showYtPlot"></ion-checkbox>
-        </ion-item>
-        <ion-item>
-          <ion-label>Show Gauges</ion-label>
-          <ion-checkbox [(ngModel)]="showGauges"></ion-checkbox>
-        </ion-item>
-        <yt-chart *ngIf="showYtPlot" class="yt-chart" title="" labelXAxis="Time" labelYAxis="Val" [values]="someNumbers" [minY]="0" [maxY]="10" fill='false'
-            maxNumberofSamples='200' color='#FF0000' bgColor='#FFAA00'></yt-chart>        
-
-        <div *ngIf="showYtPlot && showGauges">
-          <h2>See how the active gauges slow down the update of the y-t plot and vice versa?</h2>
-        </div>
-        <div *ngIf="showYtPlot && !showGauges">
-          <h2>Select "Show Gauges" to see the performance impact on the update rate of the y-t plot</h2>
-        </div>    
+            <!-- There is a bug in Ionic or Angular RC5 which hinders us to use ion-input
+            <ion-label floating>Data Source Update Interval [ms]</ion-label> -->
+            <label>Data Source Update Interval [ms]</label>
+            <p>
+              <!-- <input [(ngModel)]="updateInterval" type="number" value="10"> -->
+              <input #updateIntervalInput [value]="10" (input)="onChangeUpdateInterval( updateIntervalInput.value )" 
+                type="number">
+              </p>
+          </ion-item>
+        </ion-row>
+        <ion-row>
+          <ion-item>
+            <ion-label>Show Gauge 1</ion-label>
+            <ion-checkbox [(ngModel)]="showGauge1"></ion-checkbox>
+          </ion-item>
+          <ion-item>
+            <ion-label>Show Gauge 2</ion-label>
+            <ion-checkbox [(ngModel)]="showGauge2"></ion-checkbox>
+          </ion-item>
+          <ion-item>
+            <ion-label>Show Gauge 3</ion-label>
+            <ion-checkbox [(ngModel)]="showGauge3"></ion-checkbox>
+          </ion-item>
+        </ion-row>
+        <ion-row>
+
+        </ion-row>
+        <!--<ion-row>
+          <div>
+            <p> XXXX {{updateInterval}} </p>
+          </div>
+        </ion-row>-->
+        <ion-row>
+          <yt-chart *ngIf='showYtPlot' class="yt-chart" title="" labelXAxis="Time" labelYAxis="Val" [values]="someNumbers" [minY]="0"
+            [maxY]="10" fill='false' maxNumberofSamples='200' color='#FF0000' bgColor='#FFAA00'></yt-chart>
+        </ion-row>
+        <ion-row>
+
+          <div *ngIf="showYtPlot && (showGauge1 || showGauge2 || showGauge3)">
+            <h2>See how the active gauges slow down the update of the y-t plot and vice versa?</h2>
+          </div>
+
+          <div *ngIf="showYtPlot && !showGauge1 && !showGauge2 && !showGauge3">
+            <h2>Select "Show Gauges" to see the performance impact on the update rate of the y-t plot</h2>
+          </div>
+        </ion-row>
       </ion-col>
       <ion-col width-25>
-        <div *ngIf="showGauges">
-          <ion-row>
+        <div>
+          <ion-row *ngIf="showGauge1">
             <gauge title="A" min="0" max="400" [colors]='["#da1f3d", "#da1f3d"]'></gauge>
           </ion-row>
-          <ion-row>
+          <ion-row *ngIf="showGauge2">
             <gauge title="B" min="0" max="600" [colors]='["#da1f3d", "#da1f3d"]'></gauge>
           </ion-row>
-          <ion-row>
+          <ion-row *ngIf="showGauge3">
             <gauge title="C" min="0" max="50" [colors]='["#30666D", "#30666D"]'></gauge>
           </ion-row>
         </div>