diff --git a/.editorconfig b/.editorconfig
index e89330a..b585a76 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -4,7 +4,7 @@ root = true
[*]
charset = utf-8
indent_style = space
-indent_size = 2
+indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5226d57..6d7fc73 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,19 @@
-
-
- Welcome to {{ title }}!
-
-
+
+ ETF Demo
+
+
+
+
+
+
-
Here are some links to help you start:
-
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
deleted file mode 100644
index 63c268b..0000000
--- a/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [
- AppComponent
- ],
- }).compileComponents();
- }));
-
- it('should create the app', () => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app).toBeTruthy();
- });
-
- it(`should have as title 'ETFDemo'`, () => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app.title).toEqual('ETFDemo');
- });
-
- it('should render title in a h1 tag', () => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.debugElement.nativeElement;
- expect(compiled.querySelector('h1').textContent).toContain('Welcome to ETFDemo!');
- });
-});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 29b9f55..6ea220f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,52 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
+ selector: 'app-root',
+ templateUrl: './app.component.html'
})
export class AppComponent {
- title = 'ETFDemo';
+ chartResults; // This is where the chart reads the data from
+ chartHeight = '100%';
+
+ // 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;
+ get data() { return this._data; }
+ set data(data) {
+ this._data = data;
+ this.chartHeight = `${Object.keys(data).length * 100}px`;
+ this.chartResults = Object.keys(data).map(key => ({name: key, series: data[key].map((val, i) => ({name: i, value: val}))}));
+ }
+
+ constructor() { }
+
+ upload(fileList: FileList) {
+ // Because we enabled uploading multiple files at once we need to process each one individually
+ const files: File[] = Array.from(fileList);
+ files.forEach(file => {
+ // Process CSV
+ const reader = new FileReader();
+ reader.onload = (e: ProgressEvent) => {
+ // Split the file into lines
+ const lines = ((
e.target).result as string).split('\n');
+
+ // Use regex to grab the holding name and its % market value
+ this.data = lines.map(text => {
+ const parse = /^(.+),.+?(\d+\.\d+)%/gm.exec(text);
+ if(parse) return parse.slice(1);
+ }).reduce((acc, line) => {
+ // The regex will turn lines that don't match into null values so lets filter those out here
+ if(!line) return acc;
+
+ // Add the parsed data into our data set
+ if(!acc[line[0]]) acc[line[0]] = [];
+ acc[line[0]].push(Number(line[1]));
+
+ return acc;
+ }, this.data || {});
+ };
+ reader.readAsText(file);
+ });
+ }
+
+ format(text) { return `${text} %`}
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f657163..517c7dd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,16 +1,24 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {AppComponent} from './app.component';
+import {MatButtonModule, MatIconModule, MatToolbarModule} from '@angular/material';
+import {NgxChartsModule} from '@swimlane/ngx-charts';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule
- ],
- providers: [],
- bootstrap: [AppComponent]
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserAnimationsModule,
+ BrowserModule,
+ MatButtonModule,
+ MatIconModule,
+ MatToolbarModule,
+ NgxChartsModule,
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
})
-export class AppModule { }
+export class AppModule {
+}
diff --git a/src/index.html b/src/index.html
index f7d49ee..3573ba0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,14 +1,15 @@
-
- ETFDemo
-
+
+ ETFDemo
+
-
-
+
+
+
-
+
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..57d28e4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,11 @@
-/* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css?family=Archivo|Material+Icons');
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+html, body {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ width: 100%;
+
+ font-family: 'Archivo', sans-serif;
+}