From 1936d9ee598a1426d09373de7999bbea6a6520c8 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sun, 9 Jul 2017 08:19:46 +0200 Subject: [PATCH] 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. --- tools/dashboard/package.json | 33 +++++++++---------- tools/dashboard/src/app/dashboard-app.css | 7 +++- tools/dashboard/src/app/dashboard-app.html | 7 +++- tools/dashboard/src/app/dashboard-module.ts | 6 ++-- .../src/app/payload-chart/payload-chart.html | 4 +++ .../src/app/payload-chart/payload-chart.scss | 20 +++++++++++ .../src/app/payload-chart/payload-chart.ts | 26 +++++++++++++++ tools/dashboard/src/theme.scss | 2 ++ 8 files changed, 84 insertions(+), 21 deletions(-) create mode 100644 tools/dashboard/src/app/payload-chart/payload-chart.scss diff --git a/tools/dashboard/package.json b/tools/dashboard/package.json index 30803e93e20..47c5712e182 100644 --- a/tools/dashboard/package.json +++ b/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" } } diff --git a/tools/dashboard/src/app/dashboard-app.css b/tools/dashboard/src/app/dashboard-app.css index 17b4b6497cb..97e74af3105 100644 --- a/tools/dashboard/src/app/dashboard-app.css +++ b/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; } diff --git a/tools/dashboard/src/app/dashboard-app.html b/tools/dashboard/src/app/dashboard-app.html index 7d15d5f449a..727af508f05 100644 --- a/tools/dashboard/src/app/dashboard-app.html +++ b/tools/dashboard/src/app/dashboard-app.html @@ -3,5 +3,10 @@
- + + Payload Size Chart + + + +
diff --git a/tools/dashboard/src/app/dashboard-module.ts b/tools/dashboard/src/app/dashboard-module.ts index a2992a0643d..84d5f0e8c1e 100644 --- a/tools/dashboard/src/app/dashboard-module.ts +++ b/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 {} diff --git a/tools/dashboard/src/app/payload-chart/payload-chart.html b/tools/dashboard/src/app/payload-chart/payload-chart.html index a2e715b74e2..067e2492f6b 100644 --- a/tools/dashboard/src/app/payload-chart/payload-chart.html +++ b/tools/dashboard/src/app/payload-chart/payload-chart.html @@ -1,4 +1,5 @@ + + + diff --git a/tools/dashboard/src/app/payload-chart/payload-chart.scss b/tools/dashboard/src/app/payload-chart/payload-chart.scss new file mode 100644 index 00000000000..c7f42c0a507 --- /dev/null +++ b/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; +} diff --git a/tools/dashboard/src/app/payload-chart/payload-chart.ts b/tools/dashboard/src/app/payload-chart/payload-chart.ts index 05727d7b913..bb662efbcc1 100644 --- a/tools/dashboard/src/app/payload-chart/payload-chart.ts +++ b/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(); + + 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[] = []; diff --git a/tools/dashboard/src/theme.scss b/tools/dashboard/src/theme.scss index 2e01b0d5832..3d31a884153 100644 --- a/tools/dashboard/src/theme.scss +++ b/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);