chore(dashboard): fix invalid curve for payload chart

tools/dashboard/package.json

@@ -10,34 +10,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.2",
+    "@angular/animations": "^4.2.6",
     "@angular/cdk": "github:angular/cdk-builds",
-    "@angular/common": "^4.2.2",
-    "@angular/compiler": "^4.2.2",
-    "@angular/core": "^4.2.2",
-    "@angular/forms": "^4.2.2",
-    "@angular/http": "^4.2.2",
+    "@angular/common": "^4.2.6",
+    "@angular/compiler": "^4.2.6",
+    "@angular/core": "^4.2.6",
+    "@angular/forms": "^4.2.6",
+    "@angular/http": "^4.2.6",
     "@angular/material": "github:angular/material2-builds",
-    "@angular/platform-browser": "^4.2.2",
-    "@angular/platform-browser-dynamic": "^4.2.2",
-    "@angular/router": "^4.2.2",
-    "@swimlane/ngx-charts": "^5.3.1",
+    "@angular/platform-browser": "^4.2.6",
+    "@angular/platform-browser-dynamic": "^4.2.6",
+    "@angular/router": "^4.2.6",
+    "@swimlane/ngx-charts": "^6.0.0",
     "angularfire2": "^4.0.0-rc.1",
     "core-js": "^2.4.1",
     "d3": "^4.9.1",
-    "firebase": "^4.1.2",
-    "rxjs": "^5.1.0",
+    "firebase": "^4.1.3",
+    "rxjs": "^5.4.2",
     "zone.js": "^0.8.12"
   },
   "devDependencies": {
-    "@angular/cli": "1.1.1",
-    "@angular/compiler-cli": "^4.2.2",
-    "@angular/language-service": "^4.2.2",
+    "@angular/cli": "^1.2.0",
+    "@angular/compiler-cli": "^4.2.6",
+    "@angular/language-service": "^4.2.6",
     "@types/jasmine": "2.5.45",
     "@types/node": "~6.0.60",
     "firebase-tools": "^3.9.1",
     "ts-node": "~3.0.4",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "typescript": "^2.4.1"
   }
 }

tools/dashboard/src/app/dashboard-app.css

@@ -1,3 +1,8 @@
 .dashboard-content {
-  margin: 16px;
+  padding: 16px;
+}
+
+.payload-size-card {
+  width: 100%;
+  max-width: 700px;
 }

tools/dashboard/src/app/dashboard-app.html

@@ -3,5 +3,10 @@
 </md-toolbar>
 
 <div class="dashboard-content">
-  <payload-chart [data]="payloads | async" *ngIf="payloads | async"></payload-chart>
+  <md-card class="payload-size-card">
+    <md-card-title>Payload Size Chart</md-card-title>
+    <md-card-content>
+      <payload-chart [data]="payloads | async"></payload-chart>
+    </md-card-content>
+  </md-card>
 </div>

tools/dashboard/src/app/dashboard-module.ts

@@ -4,14 +4,16 @@ import {AngularFireDatabaseModule} from 'angularfire2/database';
 import {NgModule} from '@angular/core';
 import {DashboardApp} from './dashboard-app';
 import {environment} from '../environments/environment';
-import {MdToolbarModule} from '@angular/material';
+import {MdCardModule, MdProgressSpinnerModule, MdToolbarModule} from '@angular/material';
 import {NgxChartsModule} from '@swimlane/ngx-charts';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {PayloadChart} from './payload-chart/payload-chart';
 
 @NgModule({
   exports: [
-    MdToolbarModule
+    MdCardModule,
+    MdToolbarModule,
+    MdProgressSpinnerModule
   ]
 })
 export class DashboardMaterialModule {}

tools/dashboard/src/app/payload-chart/payload-chart.html

@@ -1,4 +1,5 @@
 <ngx-charts-line-chart
+  *ngIf="chartData.length"
   [scheme]="colorScheme"
   [results]="chartData"
   [gradient]="false"
@@ -12,3 +13,6 @@
   [yAxisLabel]="yAxisLabel"
   [autoScale]="true">
 </ngx-charts-line-chart>
+
+<md-progress-spinner *ngIf="!chartData.length" class="payload-chart-loading" mode="indeterminate">
+</md-progress-spinner>

tools/dashboard/src/app/payload-chart/payload-chart.scss

@@ -0,0 +1,20 @@
+$payload-chart-loading-size: 50px;
+
+:host {
+  display: block;
+  position: relative;
+
+  height: 400px;
+  width: 100%;
+  max-width: 700px;
+}
+
+.payload-chart-loading {
+  position: absolute;
+
+  top: calc(50% - #{$payload-chart-loading-size});
+  left: calc(50% - #{$payload-chart-loading-size});
+
+  height: $payload-chart-loading-size;
+  width: $payload-chart-loading-size;
+}

tools/dashboard/src/app/payload-chart/payload-chart.ts

@@ -5,6 +5,7 @@ import {NgxChartItem, NgxChartResult} from './ngx-definitions';
 @Component({
   selector: 'payload-chart',
   templateUrl: './payload-chart.html',
+  styleUrls: ['./payload-chart.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PayloadChart {
@@ -29,6 +30,26 @@ export class PayloadChart {
     this.chartData = this.createChartResults(value);
   }
 
+  /** Remove duplicate payload results for similar days. */
+  private filterDuplicateDays(data: PayloadResult[]) {
+    const filteredData = new Map<string, PayloadResult>();
+
+    data.forEach(result => {
+      // Parse the timestamp from the payload results as a date.
+      const date = new Date(result.timestamp);
+
+      // Ignore hours, minutes, seconds and milliseconds from the date to allow comparisons
+      // only of the day.
+      date.setHours(0, 0, 0, 0);
+
+      // Store the ISO string of the date in a Map to overwrite the previous payload result for
+      // the same day.
+      filteredData.set(date.toISOString(), result);
+    });
+
+    return Array.from(filteredData.values());
+  }
+
   /** Creates a list of ngx-chart results of the Payload results. */
   private createChartResults(data: PayloadResult[]) {
     if (!data) {
@@ -39,6 +60,11 @@ export class PayloadChart {
     // manually sort the results by their timestamp.
     data = data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1);
 
+    // It can happen that there will be multiple payload results for the same day. This happens
+    // when multiple Pull Requests are merged in the same day. For the charts we only want to
+    // have the last payload result of a day (for performance and value correctness)
+    data = this.filterDuplicateDays(data);
+
     const materialChartItems: NgxChartItem[] = [];
     const cdkChartItems: NgxChartItem[] = [];
 

tools/dashboard/src/theme.scss

@@ -8,3 +8,5 @@ $dashboard-light-theme: mat-light-theme($dashboard-primary, $dashboard-accent);
 
 // Only include the theme of the components that are used.
 @include mat-toolbar-theme($dashboard-light-theme);
+@include mat-progress-spinner-theme($dashboard-light-theme);
+@include mat-card-theme($dashboard-light-theme);