topo via plotly

angular-cli-build.js

@@ -10,6 +10,7 @@ module.exports = function(defaults) {
       'chart.js/Chart.js',
       'ng2-charts/bundles/ng2-charts.js',
       'chroma-js/chroma.js',
+      'plotly.js/dist/plotly.js',
       'systemjs/dist/system-polyfills.js',
       'systemjs/dist/system.src.js',
       'zone.js/dist/*.js',

package.json

@@ -31,6 +31,7 @@
     "ng2-charts": "^1.0.3",
     "nodemon": "^1.9.1",
     "openbci-sdk": "^0.3.4",
+    "plotly.js": "^1.10.2",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "smoothie": "^1.27.0",

src/app/dashboard.component.ts

@@ -15,7 +15,7 @@ import { Routes, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/ro
 })
 
 @Routes([
-  { path: '/', component: TimeSeriesComponent },
+  { path: '/', component: TopoComponent },
   { path: '/time-series', component: TimeSeriesComponent },
   { path: '/frequency/line', component: FrequencyComponent },
   { path: '/frequency/radar', component: FrequencyComponent },

src/app/frequency-band/frequency-band.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import * as io from 'socket.io-client';
 import { ChartService } from '../shared';
 import { CHART_DIRECTIVES } from '../shared/ng2-charts';
@@ -16,10 +16,7 @@ import { Constants } from '../shared/constants';
 export class FrequencyBandComponent implements OnInit {
 
   socket: any;
-  constructor(private view: ElementRef, 
-              private chartService: ChartService, 
-              private constants: Constants) {
-    this.view = view;
+  constructor(private chartService: ChartService, private constants: Constants) {
     this.socket = io(constants.socket.url);
   }
   

src/app/frequency/frequency.component.ts

@@ -17,11 +17,9 @@ import { Constants } from '../shared/constants';
 export class FrequencyComponent implements OnInit {
 
   socket: any;
-  constructor(private view: ElementRef, 
-              private chartService: ChartService,
+  constructor(private chartService: ChartService,
               private segment: RouteSegment,
               private constants: Constants) {
-    this.view = view;
     this.socket = io(constants.socket.url);
     this.type = segment.getParam('type') || 'Line';
   }

src/app/time-series/time-series.component.ts

@@ -18,7 +18,6 @@ export class TimeSeriesComponent implements OnInit {
   constructor(private view: ElementRef, 
               private chartService: ChartService, 
               private constants: Constants) {
-    this.view = view;
     this.socket = io(constants.socket.url);
     this.chartService = chartService;
   }

src/app/topo/topo.component.html

@@ -1,22 +1,6 @@
-<section [ngClass]="{ loading: !grid }">
+<section [ngClass]="{ loading: !data }">
     <h2>Topo</h2>
-    <section class="topoplot-wrapper">
-
-      <article class="topoplot-c1 top left"></article>
-      <article class="topoplot-c2 top right"></article>
-      <article class="topoplot-c3 middle left"></article>
-      <article class="topoplot-c4 middle right"></article>
-      <article class="topoplot-c5 third left"></article>
-      <article class="topoplot-c6 third right"></article>
-      <article class="topoplot-c7 bottom left"></article>
-      <article class="topoplot-c8 bottom right"></article>
-
-      <aside class="topoplot-grid">
-        <div *ngFor="let pixel of grid, let i = index" 
-              [ngStyle]="getColor(i, pixel, grid)" 
-              [ngClass]="getClass(i)">
-        </div>
-      </aside>
-
+    <section class="topoplot">
+      <div id="topo"></div>
     </section>
 </section>

src/app/topo/topo.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import * as io from 'socket.io-client';
 import { Constants } from '../shared/constants';
 
-declare var chroma;
+declare var chroma: any;
+declare var Plotly: any;
 
 @Component({
   moduleId: module.id,
@@ -13,35 +14,91 @@ declare var chroma;
 })
 
 export class TopoComponent implements OnInit {
-
+  
   socket: any;
-  constructor(private constants: Constants) {
+  plotElement: any;
+  
+  constructor(private view: ElementRef, private constants: Constants) {
     this.socket = io(constants.socket.url);
   }
   
-  private grid:Array<any> = [];
+  private data: any = {
+    x: [],
+    y: [],
+    name: 'density',
+    ncontours: 40,
+    colorscale: [
+      [0,"rgb(0, 0, 0)"],
+      [0.3,"rgb(230,  0,  0)"],
+      [0.6,"rgb(255,210,  0)"],
+      [1,"rgb(255,255,255)"]
+    ],
+    reversescale: true,
+    showscale: false,
+    type: 'histogram2dcontour'
+  };
+    
+  private layout: any = {
+    autosize: true,
+    width: 600,
+    height: 450,
+    bargap: 0,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
+    margin: { l: 0, r: 0, b: 0, t: 0 }
+  };
   
-  ngOnInit() {    
+  private options: any = {
+    staticPlot: true
+  };
+  
+  ngOnInit(): void {
+    this.plotElement = this.view.nativeElement.querySelector('#topo');
+    Plotly.newPlot(this.plotElement.id, [this.data], this.layout, this.options);
+
     this.socket.on(this.constants.socket.events.topo, (data) => {
-      this.grid = data.data;
+      console.log(data.data);
+      this.data.x = this.getRandomData().x; //data.data;
+      this.data.y = this.getRandomData().y; //data.data;
+      Plotly.redraw(this.plotElement);
+      Plotly.Plots.resize(this.plotElement);
     });
   }
   
-  ngOnDestroy () {
+  ngOnDestroy (): void {
     this.socket.removeListener(this.constants.socket.events.topo);
-  } 
+  }
   
-  getClass (index) {
-    return 'topoplot-u' + index;
-  }
+  getRandomData (): any {
+    function normal() {
+        var x = 0, y = 0, rds, c;
+        do {
+          x = Math.random() * 2 - 1;
+          y = Math.random() * 2 - 1;
+          rds = x * x + y * y;
+        } while (rds == 0 || rds > 1);
+        c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
+        return x * c; // throw away extra sample y * c
+    }
 
-  getColor (index, pixel, grid) {
-      var min = Math.min.apply(Math, grid);
-      var max = Math.max.apply(Math, grid);
-      var f = chroma.scale('Spectral').domain([min, max]);
-      return { 
-        'background-color': f(pixel) 
-      }
-  }
+    var N = 2000,
+        a = -1,
+        b = Math.random();
 
+    var step = (b - a) / (N - 1);
+    var t = new Array(N), x = new Array(N), y = new Array(N);
+
+    for(var i = 0; i < N; i++){
+      t[i] = a + step * i;
+      x[i] = (Math.pow(t[i], 3)) + (0.3 * normal() );
+      y[i] = (Math.pow(t[i], 6)) + (0.3 * normal() );
+    }
+    
+    return {
+      x: x,
+      y: y
+    };
+    
+  }
+  
 }

src/index.html

@@ -35,6 +35,7 @@
 
   <script src="vendor/chart.js/Chart.js"></script>
   <script src="vendor/chroma-js/chroma.js"></script>
+  <script src="vendor/plotly.js/dist/plotly.js"></script>
   <script src="vendor/es6-shim/es6-shim.js"></script>
   <script src="vendor/reflect-metadata/Reflect.js"></script>
   <script src="vendor/systemjs/dist/system.src.js"></script>

src/system-config.ts

@@ -6,7 +6,8 @@ const map: any = {
   'smoothie': 'vendor/smoothie/smoothie.js',
   'ng2-charts': 'vendor/ng2-charts/bundles/ng2-charts.js',
   'socket.io-client': 'vendor/socket.io-client/socket.io.js',
-  'chroma-js': 'vendor/chroma-js/chroma.js'
+  'chroma-js': 'vendor/chroma-js/chroma.js',
+  'plotly': 'vendor/plotly.js/dist/plotly.js'
 };  
 
 /** User packages configuration. */