Closes #70 . Adding HugeMemoryUsageComponent to test

Author: andrefarzat

src/app/demo/demo.component.html

@@ -15,6 +15,7 @@ <h5>Angular Plotly</h5>
                     <li><a [routerLink]="['/memory-leak']">Memory Leak</a></li>
                     <li><a [routerLink]="['/frames']">Frames</a></li>
                     <li><a [routerLink]="['/timeout-update']">Timeout Update</a></li>
+                    <li><a [routerLink]="['/huge-memory-usage']">Huge Memory Usage</a></li>
                 </ul>
             </div>
         </div>

src/app/demo/demo.module.ts

@@ -21,6 +21,7 @@ import { FancyplotComponent } from './fancyplot/fancyplot.component';
 import { MemoryLeakComponent } from './memory-leak/memory-leak.component';
 import { FramesComponent } from './frames/frames.component';
 import { TimeoutUpdateComponent } from './timeout-update/timeout-update.component';
+import { HugeMemoryUsageComponent } from './huge-memory-usage/huge-memory-usage.component';
 
 
 const demoRoutes: Routes = [
@@ -33,6 +34,7 @@ const demoRoutes: Routes = [
     { path: 'memory-leak', component: MemoryLeakComponent, data: { title: 'Memory leak' } },
     { path: 'frames', component: FramesComponent, data: { title: 'Frames' } },
     { path: 'timeout-update', component: TimeoutUpdateComponent, data: { title: 'Timeout Update' } },
+    { path: 'huge-memory-usage', component: HugeMemoryUsageComponent, data: { title: 'Huge Memory Usage' } },
 
     { path: '', redirectTo: '/home', pathMatch: 'full' },
 ];
@@ -61,7 +63,8 @@ PlotlyViaCDNModule.plotlyVersion = '1.5.0';
         FancyplotComponent,
         MemoryLeakComponent,
         FramesComponent,
-        TimeoutUpdateComponent
+        TimeoutUpdateComponent,
+        HugeMemoryUsageComponent,
     ],
     exports: [DemoComponent],
 })

src/app/demo/huge-memory-usage/huge-memory-usage.component.html

@@ -0,0 +1,13 @@
+<div>
+    <p>&nbsp;</p>
+    <button *ngIf="status === 'init'" (click)="loadData()" class="button">Load a 15MiB data</button>
+    <span *ngIf="status === 'loading'" style="font-style: italic">Loading...</span>
+    <span *ngIf="status === 'loaded'">
+        Lodaded! <br />
+        <button (click)="changeRandomData()" class="button">Change Random Data</button>
+    </span>
+    <span *ngIf="status === 'fail'">Something went wrong!</span>
+    <p>&nbsp;</p>
+
+    <plotly-plot [data]="data" [layout]="layout" [revision]="revision" [debug]="debug" [useResizeHandler]="useResizeHandler"></plotly-plot>
+</div>

src/app/demo/huge-memory-usage/huge-memory-usage.component.ts

@@ -0,0 +1,93 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'plotly-huge-memory-usage',
+    templateUrl: './huge-memory-usage.component.html',
+})
+export class HugeMemoryUsageComponent {
+    public debug = true;
+    public useResizeHandler = true;
+    public status = 'init';
+    public revision = 0;
+
+    public data: any[] = [];
+
+    public layout = {
+        autoexpand: 'true',
+        autosie: 'true',
+        uirevision: "true",
+        margin: {
+            autoexpand: true,
+            margin: 5
+        },
+        offset: 100,
+        type: "scattergl",
+        title: "huge Graph",
+        hovermode: "closest",
+        xaxis: {
+            linecolor: "black",
+            linewidth: 2,
+            mirror: true,
+            title: "Time (s)",
+            automargin: true
+        },
+        yaxis: {
+            linecolor: "black",
+            linewidth: 2,
+            mirror: true,
+            automargin: true,
+            type: "log",
+            exponentformat: "power",
+            title: "PSD (g²/Hz)"
+        }
+    };
+
+    public callback(data: any[]) {
+        for (const item of data) {
+            this.data.push({
+                x: item.f,
+                y: item.PSD,
+                name: item.name,
+                hoverlabel: { namelength: 50 },
+                type: "scattergl",
+                mode: "line"
+            });
+        }
+
+        this.status = 'loaded';
+        this.revision += 1;
+    }
+
+    public loadData() {
+        (window as any).callback = this.callback.bind(this);
+
+        const script: HTMLScriptElement = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = 'https://d3xt.com/plotly/angular-plotly-huge-memory-usage.json';
+        script.onerror = () => {
+            this.status = 'failed';
+            console.error(`Error loading from angular-plotly-huge-memory-usage.json`);
+        };
+
+        const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
+        head.appendChild(script);
+        this.status = 'loading';
+    }
+
+    public changeRandomData() {
+        let i = Math.floor((Math.random() * this.data.length) + 1);
+        const item = this.data[i];
+
+        i = Math.floor((Math.random() * 2) + 1);
+        if (i === 1) {
+            const x = item.x;
+            i = Math.floor((Math.random() * x.length) + 1);
+            x[i] = Math.floor((Math.random() * 50) + 1);
+        } else {
+            const y = item.y;
+            i = Math.floor((Math.random() * y.length) + 1);
+            y[i] = Math.floor((Math.random() * 10) + 1);
+
+        }
+    }
+}