diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1427703..aea2e4d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,8 @@
- ETF Demo
+ ETF Demo
+ {{timer}} microseconds to upload
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 377e78b..232e2ac 100644
--- a/src/app/app.component.ts
+++ b/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) => {
diff --git a/src/app/timer.ts b/src/app/timer.ts
new file mode 100644
index 0000000..704db19
--- /dev/null
+++ b/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;
+ };
+}
diff --git a/src/styles.scss b/src/styles.scss
index 57d28e4..1e8588b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -9,3 +9,8 @@ html, body {
font-family: 'Archivo', sans-serif;
}
+
+// Bootstrap overrides
+.text-muted {
+ color: #bbbbbb !important;
+}