chore: initial chart for dashboard (#5360)

* Adds the initial chart for the payloads inside of the dashboard.

tools/dashboard/package.json

@@ -20,8 +20,10 @@
     "@angular/platform-browser": "^4.2.2",
     "@angular/platform-browser-dynamic": "^4.2.2",
     "@angular/router": "^4.2.2",
+    "@swimlane/ngx-charts": "^5.3.1",
     "angularfire2": "^4.0.0-rc.1",
     "core-js": "^2.4.1",
+    "d3": "^4.9.1",
     "firebase": "^4.1.2",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.12"

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

@@ -0,0 +1,3 @@
+.dashboard-content {
+  margin: 16px;
+}

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

@@ -2,5 +2,6 @@
   <span>Angular Material - Board</span>
 </md-toolbar>
 
-<p>Payload Test Data</p>
-{{ payloads | async | json }}
+<div class="dashboard-content">
+  <payload-chart [data]="payloads | async" *ngIf="payloads | async"></payload-chart>
+</div>

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

@@ -5,6 +5,9 @@ import {NgModule} from '@angular/core';
 import {DashboardApp} from './dashboard-app';
 import {environment} from '../environments/environment';
 import {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: [
@@ -15,13 +18,16 @@ export class DashboardMaterialModule {}
 
 @NgModule({
   declarations: [
-    DashboardApp
+    DashboardApp,
+    PayloadChart
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AngularFireModule.initializeApp(environment.firebase),
     AngularFireDatabaseModule,
-    DashboardMaterialModule
+    DashboardMaterialModule,
+    NgxChartsModule
   ],
   providers: [],
   bootstrap: [DashboardApp]

tools/dashboard/src/app/data-definitions.ts

@@ -2,13 +2,13 @@
 export interface PayloadResult {
   timestamp: number;
   // Material bundles
-  material_umd: string;
-  material_umd_minified_uglify: string;
-  material_fesm_2015: string;
-  material_fesm_2014: string;
+  material_umd: number;
+  material_umd_minified_uglify: number;
+  material_fesm_2015: number;
+  material_fesm_2014: number;
   // CDK bundles
-  cdk_umd: string;
-  cdk_umd_minified_uglify: string;
-  cdk_fesm_2015: string;
-  cdk_fesm_2014: string;
+  cdk_umd: number;
+  cdk_umd_minified_uglify: number;
+  cdk_fesm_2015: number;
+  cdk_fesm_2014: number;
 }

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

@@ -0,0 +1,9 @@
+export interface NgxChartResult {
+  name: string;
+  series: NgxChartItem[];
+}
+
+export interface NgxChartItem {
+  name: Date;
+  value: number|string;
+}

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

@@ -0,0 +1,14 @@
+<ngx-charts-line-chart
+  [scheme]="colorScheme"
+  [results]="chartData"
+  [gradient]="false"
+  [xAxis]="true"
+  [yAxis]="true"
+  [legend]="true"
+  [showXAxisLabel]="true"
+  [showYAxisLabel]="true"
+  [showGridLines]="true"
+  [xAxisLabel]="xAxisLabel"
+  [yAxisLabel]="yAxisLabel"
+  [autoScale]="true">
+</ngx-charts-line-chart>

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

@@ -0,0 +1,67 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {PayloadResult} from '../data-definitions';
+import {NgxChartItem, NgxChartResult} from './ngx-definitions';
+
+@Component({
+  selector: 'payload-chart',
+  templateUrl: './payload-chart.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PayloadChart {
+
+  /** Color scheme for the payload graph. */
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
+  };
+
+  /** X-Axis label of the Chart. */
+  xAxisLabel = 'Date';
+
+  /** Y-Axis label of the Chart. */
+  yAxisLabel = 'Payload Size (kb)';
+
+  /** Chart data that is taken by NGX-Charts. */
+  chartData: NgxChartResult[];
+
+  /** Payload data that will be rendered in the chart. */
+  @Input()
+  set data(value: PayloadResult[]) {
+    this.chartData = this.createChartResults(value);
+  }
+
+  /** Creates a list of ngx-chart results of the Payload results. */
+  private createChartResults(data: PayloadResult[]) {
+    if (!data) {
+      return [];
+    }
+
+    // Data snapshot from Firebase is not ordered by timestamp. Before rendering the graph
+    // manually sort the results by their timestamp.
+    data = data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1);
+
+    const materialChartItems: NgxChartItem[] = [];
+    const cdkChartItems: NgxChartItem[] = [];
+
+    // Walk through every result entry and create a NgxChart item that can be rendered inside of
+    // the linear chart.
+    data.forEach(result => {
+      if (!result.material_fesm_2015 || !result.cdk_fesm_2015) {
+        return;
+      }
+
+      // Convert the timestamp of the payload result into a date because NGX-Charts can group
+      // dates in the x-axis.
+      const date = new Date(result.timestamp);
+
+      materialChartItems.push({ name: date, value: result.material_fesm_2015 });
+      cdkChartItems.push({ name: date, value: result.cdk_fesm_2015 });
+    });
+
+    return [
+      { name: 'Material', series: materialChartItems },
+      { name: 'CDK', series: cdkChartItems }
+    ];
+  }
+
+}
+

tools/dashboard/src/styles.css

@@ -1,4 +1,5 @@
 body, html {
   margin: 0;
   font-family: Roboto, Arial, sans-serif;
+  min-height: 100vh;
 }