Added a timer decorator for fun

This commit is contained in:
Zakary Timson 2018-11-29 20:06:03 -05:00
parent a2fb949dce
commit a8ba3fa9fc
4 changed files with 33 additions and 6 deletions

View File

@ -1,7 +1,8 @@
<!--The content below is only a placeholder and can be replaced.--> <!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar> <mat-toolbar>
<img class="mr-3" src="assets/logo.png" height="36px" width="auto"> <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> <span class="mx-auto"><!-- Spacer --></span>
<mat-chip-list class="mr-2"> <mat-chip-list class="mr-2">
<mat-chip *ngFor="let file of fileNames" color="primary" [removable]="true" (removed)="remove($event.chip.value)" [value]="file"> <mat-chip *ngFor="let file of fileNames" color="primary" [removable]="true" (removed)="remove($event.chip.value)" [value]="file">

View File

@ -1,4 +1,5 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {timer} from './timer';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -7,7 +8,7 @@ import {Component} from '@angular/core';
export class AppComponent { export class AppComponent {
chartResults; // This is where the chart reads the data from chartResults; // This is where the chart reads the data from
chartHeight = '100%'; // Dynamic height for chart 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. // 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 = {}; 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}))})); 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(fileName) {
// Remove the file // Remove the file
delete this.data[fileName]; delete this.data[fileName];
this.data = Object.assign({}, this.data); this.data = Object.assign({}, this.data);
this.fileNames.splice(this.fileNames.indexOf(fileName), 1);
} }
@timer
upload(fileList: FileList) { upload(fileList: FileList) {
// Because we enabled uploading multiple fileNames at once we need to process each one individually // Because we enabled uploading multiple fileNames at once we need to process each one individually
const files: File[] = Array.from(fileList); const files: File[] = Array.from(fileList);
files.forEach(file => { files.forEach(file => {
this.fileNames.push(file.name);
// Process CSV // Process CSV
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e: ProgressEvent) => { reader.onload = (e: ProgressEvent) => {

18
src/app/timer.ts Normal file
View File

@ -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;
};
}

View File

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