ztimson/etf-demo
ztimson/etf-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Update the graph when you add/remove files

Browse Source
This commit is contained in:
Zakary Timson 2018-11-30 08:44:58 -05:00
parent 58b6b9d105
commit a01b059476
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.component.html
View File

@ -29,7 +29,7 @@
<mat-form-field class="w-50" appearance="fill"> <mat-form-field class="w-50" appearance="fill">
<mat-label>Add Holding</mat-label> <mat-label>Add Holding</mat-label>
<mat-chip-list #chipList> <mat-chip-list #chipList>
<mat-chip *ngFor="let holding of graphHoldings; let i = index" [removable]="true" (removed)="graphHoldings.splice(i, 1); updateGraph()"> <mat-chip *ngFor="let holding of graphHoldings; let i = index" [removable]="true" (removed)="graphHoldings.splice(i, 1); updateGraph();">
{{holding}} {{holding}}
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
@ -39,7 +39,7 @@
[matChipInputFor]="chipList" [matChipInputFor]="chipList"
(keyup)="search($event.target.value)"> (keyup)="search($event.target.value)">
</mat-chip-list> </mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="updateGraph($event.option.value); holdingInput.blur()"> <mat-autocomplete #auto="matAutocomplete" (optionSelected)="updateGraph($event.option.value); holdingInput.blur();">
<mat-option *ngFor="let holding of autoCompleteList | async" [value]="holding"> <mat-option *ngFor="let holding of autoCompleteList | async" [value]="holding">
{{holding}} {{holding}}
</mat-option> </mat-option>

7
src/app/app.component.ts
View File

@ -38,7 +38,10 @@ export class AppComponent {
// Store the keys for easy referencing // Store the keys for easy referencing
this.fileNames = Object.keys(this.data); this.fileNames = Object.keys(this.data);
this.holdings = Object.keys(this.mergedData).sort(); this.holdings = Object.keys(this.mergedData).sort();
// Update the GUI
this.autoCompleteList.next(this.holdings); this.autoCompleteList.next(this.holdings);
this.updateGraph();
} }
constructor(private ngZone: NgZone) { constructor(private ngZone: NgZone) {
@ -50,6 +53,7 @@ export class AppComponent {
// 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.updateGraph();
} }
search(text?: string) { search(text?: string) {
@ -88,7 +92,8 @@ export class AppComponent {
}; };
reader.readAsText(file); reader.readAsText(file);
}); });
this.fileUploader.nativeElement.value = "";
this.fileUploader.nativeElement.value = ""; // Clear the file input
} }
updateGraph(holding?: string) { updateGraph(holding?: string) {