initial example

package.json

@@ -21,7 +21,9 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "@swimlane/ngx-charts": "^7.4.0",
     "core-js": "^2.4.1",
+    "d3": "^5.1.0",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

src/app/app.component.css

+.plot1, .plot2, .plot3 {
+    height: 50vh;
+}
\ No newline at end of file

src/app/app.component.html

 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
   <h1>
-    Welcome to {{ title }}!
+    {{ title }}!
   </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<div class="plot1">
+  <h2>static data</h2>
+  <app-plot-example></app-plot-example>
+</div>
+<div class="plot2">
+  <h2>dynamically loaded from python</h2>
+  <app-plot-example-dynamic></app-plot-example-dynamic>
+</div>
+<div class="plot3">
+  <h2>dynamically loaded from python with configurable options</h2>
+  <app-plot-example-options></app-plot-example-options>
+</div>

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  title = 'Plotting Tests';
 }

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 
+import { LineChartModule } from '@swimlane/ngx-charts';
 
 import { AppComponent } from './app.component';
+import { PlotExampleComponent } from './plot-example/plot-example.component';
+import { PlotExampleDynamicComponent } from './plot-example-dynamic/plot-example-dynamic.component';
+import { PlotDataService} from './plot-data.service';
+import { PlotExampleOptionsComponent } from './plot-example-options/plot-example-options.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    PlotExampleComponent,
+    PlotExampleDynamicComponent,
+    PlotExampleOptionsComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    FormsModule,
+    LineChartModule
   ],
-  providers: [],
+  providers: [PlotDataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/plot-data.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { PlotDataService } from './plot-data.service';
+
+describe('PlotDataServiceService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PlotDataService]
+    });
+  });
+
+  it('should be created', inject([PlotDataService], (service: PlotDataService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/plot-data.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../environments/environment';
+import { PlotData2D } from './plot-data';
+
+@Injectable()
+export class PlotDataService {
+
+  private apiUrl = environment.apiUrl;
+
+  constructor(private http: HttpClient) { }
+
+  // get 2D PlotData from python api
+  get2D(plot: string, options) {
+    return this.http.post<PlotData2D>(this.apiUrl + 'plot/' + plot, options);
+  }
+}

src/app/plot-data.ts

+// generic plot data class
+export class PlotData {
+    constructor(
+        public type: string
+    ) { }
+}
+
+// 2D data to generate a plot
+export class PlotData2D extends PlotData {
+    constructor(
+        public x: number[],
+        public y: number[]
+    ) {
+        super('2D');
+    }
+
+    // convert x, y arrays into the data structure format used by ngx-charts
+    public static toNGxChart(data: PlotData2D, name: string) {
+        const plotData = {'name': name, 'series': [] };
+        for (let i = 0; i < data.x.length; i++) {
+            plotData.series.push({'name': data.x[i], 'value': data.y[i]});
+        }
+        console.log(plotData);
+        return plotData;
+    }
+}

src/app/plot-example-dynamic/plot-example-dynamic.component.html

+<ngx-charts-line-chart *ngIf="plotData.length != 0" [results]="plotData" [xAxis]="true" [yAxis]="true" [legend]="true"></ngx-charts-line-chart>

src/app/plot-example-dynamic/plot-example-dynamic.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlotExampleDynamicComponent } from './plot-example-dynamic.component';
+
+describe('PlotExampleDynamicComponent', () => {
+  let component: PlotExampleDynamicComponent;
+  let fixture: ComponentFixture<PlotExampleDynamicComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlotExampleDynamicComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlotExampleDynamicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/plot-example-dynamic/plot-example-dynamic.component.ts

+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { PlotDataService } from '../plot-data.service';
+import { PlotData2D } from '../plot-data';
+
+@Component({
+  selector: 'app-plot-example-dynamic',
+  templateUrl: './plot-example-dynamic.component.html',
+  styleUrls: ['./plot-example-dynamic.component.css']
+})
+export class PlotExampleDynamicComponent implements OnInit, AfterViewInit {
+
+  public plotData = [ ];
+
+  constructor( private plotDataService: PlotDataService) { }
+
+  ngOnInit() {}
+
+  ngAfterViewInit() {
+    // load plot data from python
+    this.plotDataService.get2D('test1', {}).subscribe( data =>  {
+      this.plotData[0] = PlotData2D.toNGxChart(data, 'test');
+      console.log(this.plotData);
+    });
+  }
+
+}

src/app/plot-example-options/plot-example-options.component.css

+div {
+    height: 50vh;
+}
\ No newline at end of file

src/app/plot-example-options/plot-example-options.component.html

+<div>
+  <span>k=</span><input type="number" name="k" [(ngModel)]="options.k" (change)="updatePlot()"/>
+  <ngx-charts-line-chart *ngIf="plotData.length != 0" [results]="plotData" [xAxis]="true" [yAxis]="true" [legend]="true" [animations]="false"></ngx-charts-line-chart>
+</div>

src/app/plot-example-options/plot-example-options.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlotExampleOptionsComponent } from './plot-example-options.component';
+
+describe('PlotExampleOptionsComponent', () => {
+  let component: PlotExampleOptionsComponent;
+  let fixture: ComponentFixture<PlotExampleOptionsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlotExampleOptionsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlotExampleOptionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/plot-example-options/plot-example-options.component.ts

+import { Component, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { PlotDataService } from '../plot-data.service';
+import { PlotData2D } from '../plot-data';
+
+@Component({
+  selector: 'app-plot-example-options',
+  templateUrl: './plot-example-options.component.html',
+  styleUrls: ['./plot-example-options.component.css']
+})
+export class PlotExampleOptionsComponent implements OnInit, AfterViewInit {
+
+  public plotData = [ ];
+  public options = {'k': 2};
+
+  constructor(
+    private plotDataService: PlotDataService,
+    private cdRef: ChangeDetectorRef
+  ) { }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit() {
+    this.updatePlot();
+  }
+
+  updatePlot() {
+    // load plot data from python
+    this.plotDataService.get2D('test2', this.options).subscribe( data =>  {
+      this.plotData[0] = PlotData2D.toNGxChart(data, 'sin(' + this.options.k + 'x)');
+      // notify change detector that the plot should be redrawn
+      this.plotData = [ ...this.plotData ];
+    });
+  }
+
+}

src/app/plot-example/plot-example.component.html

+<ngx-charts-line-chart [results]="plotData" [xAxis]="true" [yAxis]="true" [legend]="true"></ngx-charts-line-chart>
\ No newline at end of file

src/app/plot-example/plot-example.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlotExampleComponent } from './plot-example.component';
+
+describe('PlotExampleComponent', () => {
+  let component: PlotExampleComponent;
+  let fixture: ComponentFixture<PlotExampleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlotExampleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlotExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/plot-example/plot-example.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-plot-example',
+  templateUrl: './plot-example.component.html',
+  styleUrls: ['./plot-example.component.css']
+})
+export class PlotExampleComponent implements OnInit {
+
+  public plotData = [ ];
+
+  constructor() { }
+
+  ngOnInit() {
+    // generate data for a sin plot
+    this.plotData.push( {'name': 'sin', 'series': [] } );
+    for (let i = 0; i <= 100; i++) {
+      const x = 4 * Math.PI * i / 100;
+      this.plotData[0].series.push( { 'name': x, 'value': Math.sin(x) } );
+    }
+    // generate data for a cos plot
+    this.plotData.push( {'name': 'cos', 'series': [] } );
+    for (let i = 0; i <= 100; i++) {
+      const x = 4 * Math.PI * i / 100;
+      this.plotData[1].series.push( { 'name': x, 'value': Math.cos(x) } );
+    }
+    console.log(this.plotData);
+  }
+
+}

src/environments/environment.prod.ts

 export const environment = {
-  production: true
+  production: true,
+  apiUrl: 'http://localhost:5000/'
 };

src/environments/environment.ts

@@ -4,5 +4,6 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  apiUrl: 'http://localhost:5000/'
 };