Creating a memory-leak example on demo

Author: andrefarzat

src/app/demo/demo.component.html

@@ -11,6 +11,7 @@ <h5>Angular Plotly</h5>
                     <li><a [routerLink]="['/linear-charts']">Linear Charts</a></li>
                     <li><a [routerLink]="['/ajax']">Ajax</a></li>
                     <li><a [routerLink]="['/fancy-plot']">Fancy Plot</a></li>
+                    <li><a [routerLink]="['/memory-leak']">Memory Leak</a></li>
                 </ul>
             </div>
         </div>

src/app/demo/demo.module.ts

@@ -15,6 +15,7 @@ import { BoxPlotComponent } from './box-plots/box-plots.component';
 import { LinearChartsComponent } from './linear-charts/linear-charts.component';
 import { AjaxComponent } from './ajax/ajax.component';
 import { FancyplotComponent } from './fancyplot/fancyplot.component';
+import { MemoryLeakComponent } from './memory-leak/memory-leak.component';
 
 
 const demoRoutes: Routes = [
@@ -23,6 +24,7 @@ const demoRoutes: Routes = [
     { path: 'linear-charts', component: LinearChartsComponent, data: { title: 'Linear Charts' } },
     { path: 'ajax', component: AjaxComponent, data: { title: 'Ajax' } },
     { path: 'fancy-plot', component: FancyplotComponent, data: { title: 'Fancy Plot' } },
+    { path: 'memory-leak', component: MemoryLeakComponent, data: { title: 'Memory leak' } },
 
     { path: '', redirectTo: '/home', pathMatch: 'full' },
 ];
@@ -36,7 +38,7 @@ const demoRoutes: Routes = [
         // PlotlyViaWindowModule,
         RouterModule.forRoot(demoRoutes, { enableTracing: true }),
     ],
-    declarations: [HomeComponent, DemoComponent, BoxPlotComponent, LinearChartsComponent, AjaxComponent, FancyplotComponent],
+    declarations: [HomeComponent, DemoComponent, BoxPlotComponent, LinearChartsComponent, AjaxComponent, FancyplotComponent, MemoryLeakComponent],
     exports: [DemoComponent],
 })
 export class DemoModule { }

src/app/demo/memory-leak/memory-leak.component.css

@@ -0,0 +1,10 @@
+<div>
+    <p>
+        This page was created to target a memory leak issue reported on:
+        <a href="https://github.com/plotly/angular-plotly.js/issues/28" target="_blank">https://github.com/plotly/angular-plotly.js/issues/28</a>
+    </p>
+
+    <plotly-plot [data]="lines" [layout]="layout" [revision]="0" [debug]="debug" [useResizeHandler]="useResizeHandler"></plotly-plot>
+
+    <p>&nbsp;</p>
+</div>

src/app/demo/memory-leak/memory-leak.component.html

@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'plotly-memory-leak',
+    templateUrl: './memory-leak.component.html',
+    styleUrls: ['./memory-leak.component.css']
+})
+export class MemoryLeakComponent implements OnInit {
+    public debug = true;
+    public useResizeHandler = true;
+
+    public num_lines = 4;
+    public timespan = 10;
+    public t_int = 0.01;
+    public update_interval = 0.2;
+
+    public lines = [];
+    public t = 0;
+
+    public data: any[] = [
+        { x: [1, 2, 3, 4], y: [10, 15, 13, 17], type: 'bar', mode: 'markers', name: 'Bar' },
+        { x: [2, 3, 4, 1], y: [16, 5, 11, 9], type: 'scattergl', mode: 'lines', name: 'Lines' },
+        { x: [1, 2, 3, 4], y: [12, 9, 15, 12], type: 'markers', mode: 'lines+markers', name: 'Scatter + Lines' },
+    ];
+
+    public layout: any = {
+        title: 'Adding Names to Line and Scatter Plot',
+        width: 480,
+        height: 400,
+    };
+
+    public ngOnInit() {
+        for (let i = 0; i < this.num_lines; ++i) {
+            this.lines.push({
+                x: [],
+                y: [],
+                type: 'scatter'
+            });
+
+            for (this.t = 0; this.t < this.timespan; this.t += this.t_int) {
+                this.lines[i].x.push(this.t);
+                this.lines[i].y.push(2 * i + Math.random());
+            }
+        }
+
+        setInterval(this.tick.bind(this), this.update_interval * 1000);
+    }
+
+    public tick() {
+        const n = this.update_interval / this.t_int;
+        const update = { x: [], y: [] };
+
+        for (let i = 0; i < this.num_lines; ++i) {
+            this.lines[i].x = this.lines[i].x.slice(n);
+            this.lines[i].y = this.lines[i].y.slice(n);
+        }
+
+        const t_init = this.t;
+        for (let i = 0; i < this.num_lines; ++i) {
+            this.t = t_init;
+            for (let j = 0; j < n; ++j, this.t += this.t_int) {
+                this.lines[i].x.push(this.t);
+                this.lines[i].y.push(2 * i + Math.random());
+            }
+
+            update.x.push(this.lines[i].x);
+            update.y.push(this.lines[i].y);
+        }
+    }
+}