chore(dashboard): fix invalid curve for payload chart (#5609)

The dashboard payload size chart showed invalid curves for the Material and CDK package size. This happened because there were multiple different values for the same day (multiple PRs merged into master at the same day). Removing the duplicate values and only taking the last result of the day ensures that the curve is always correct and also makes the chart way better in performance.

Author: devversion

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);