Added a timer decorator for fun

src/app/app.component.html

@@ -1,7 +1,8 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <mat-toolbar>
     <img class="mr-3" src="assets/logo.png" height="36px" width="auto">
-    <span>ETF Demo</span>
+    <span class="mr-3">ETF Demo</span>
+    <small *ngIf="timer" cass="text-muted">{{timer}} microseconds to upload</small>
     <span class="mx-auto"><!-- Spacer --></span>
     <mat-chip-list class="mr-2">
         <mat-chip *ngFor="let file of fileNames" color="primary" [removable]="true" (removed)="remove($event.chip.value)" [value]="file">

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {timer} from './timer';
 
 @Component({
     selector: 'app-root',
@@ -7,7 +8,7 @@ import {Component} from '@angular/core';
 export class AppComponent {
     chartResults; // This is where the chart reads the data from
     chartHeight = '100%'; // Dynamic height for chart
-    fileNames: string[] = [];
+    timer = window['timer']; // Async pipe to display the timed data
 
     // ngx-charts requires a different data structure than the hash map we built so I will use a setter to handle converting it when we go to save the processed data.
     private _data = {};
@@ -29,21 +30,23 @@ export class AppComponent {
         this.chartResults = Object.keys(mergedData).map(key => ({name: key, series: mergedData[key].map((val, i) => ({name: i, value: val}))}));
     }
 
-    constructor() { }
+    get fileNames() { return Object.keys(this.data); }
+
+    constructor() {
+        setInterval(() => this.timer = Math.round(window['timer'] * 10) / 10, 250);
+    }
 
     remove(fileName) {
         // Remove the file
         delete this.data[fileName];
         this.data = Object.assign({}, this.data);
-        this.fileNames.splice(this.fileNames.indexOf(fileName), 1);
     }
 
+    @timer
     upload(fileList: FileList) {
         // Because we enabled uploading multiple fileNames at once we need to process each one individually
         const files: File[] = Array.from(fileList);
         files.forEach(file => {
-            this.fileNames.push(file.name);
-
             // Process CSV
             const reader = new FileReader();
             reader.onload = (e: ProgressEvent) => {

src/app/timer.ts

@@ -0,0 +1,18 @@
+export function timer(target: any, key: string, descriptor: PropertyDescriptor) {
+    // Get the original method so we can call it from within our wrapper
+    const originalMethod = descriptor.value;
+
+    descriptor.value = function () {
+        // Time it
+        const start = window.performance.now();
+        const resp = originalMethod.apply(this, arguments);
+        const end = window.performance.now() - start;
+
+        // Log it
+        window['timer'] = end;
+        console.log(`${end} microseconds`);
+
+        // Return it
+        return resp;
+    };
+}

src/styles.scss

@@ -9,3 +9,8 @@ html, body {
 
     font-family: 'Archivo', sans-serif;
 }
+
+// Bootstrap overrides
+.text-muted {
+    color: #bbbbbb !important;
+}