Adding performance demo page

andrefarzat · andrefarzat · commit fc34f6faf6a7 · 2020-02-22T14:47:36.000-03:00
diff --git a/src/app/demo/demo.component.html b/src/app/demo/demo.component.html
@@ -17,6 +17,7 @@ <h5>Angular Plotly</h5>
                     <li><a [routerLink]="['/timeout-update']">Timeout Update</a></li>
                     <li><a [routerLink]="['/huge-memory-usage']">Huge Memory Usage</a></li>
                     <li><a [routerLink]="['/slow-example']">Slow Example</a></li>
+                    <li><a [routerLink]="['/performance']">Performance</a></li>
                 </ul>
             </div>
         </div>
diff --git a/src/app/demo/demo.module.ts b/src/app/demo/demo.module.ts
@@ -23,6 +23,7 @@ import { FramesComponent } from './frames/frames.component';
 import { TimeoutUpdateComponent } from './timeout-update/timeout-update.component';
 import { HugeMemoryUsageComponent } from './huge-memory-usage/huge-memory-usage.component';
 import { SlowExampleComponent } from './slow-example/slow-example.component';
+import { PerformanceComponent } from './performance/performance.component';
 
 
 const demoRoutes: Routes = [
@@ -37,6 +38,7 @@ const demoRoutes: Routes = [
     { path: 'timeout-update', component: TimeoutUpdateComponent, data: { title: 'Timeout Update' } },
     { path: 'huge-memory-usage', component: HugeMemoryUsageComponent, data: { title: 'Huge Memory Usage' } },
     { path: 'slow-example', component: SlowExampleComponent, data: { title: 'Slow example' } },
+    { path: 'performance', component: PerformanceComponent, data: { title: 'Performance' } },
 
     { path: '', redirectTo: '/home', pathMatch: 'full' },
 ];
@@ -68,6 +70,7 @@ PlotlyViaCDNModule.plotlyVersion = '1.49.4';
         TimeoutUpdateComponent,
         HugeMemoryUsageComponent,
         SlowExampleComponent,
+        PerformanceComponent,
     ],
     exports: [DemoComponent],
 })
diff --git a/src/app/demo/performance/performance.component.css b/src/app/demo/performance/performance.component.css
@@ -0,0 +1,10 @@
+.grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-auto-rows: 225px;
+    gap: 4px;
+    
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  
diff --git a/src/app/demo/performance/performance.component.html b/src/app/demo/performance/performance.component.html
@@ -0,0 +1,12 @@
+
+<h4>Total time: {{ getTotalTime() }}ms</h4>
+
+<div class="grid">
+
+    <div class="item" *ngFor="let data of chartData; let i = index; trackBy: trackByIndex">
+        <div>Time: {{ getTime(i) }}ms</div>
+        <plotly-plot [data]="data" [layout]="layout" [style]="style" [config]="config" (ngInited)="onNgInited(i)" (initialized)="onInitialized(i)"></plotly-plot>
+    </div>
+
+	
+</div>
diff --git a/src/app/demo/performance/performance.component.spec.ts b/src/app/demo/performance/performance.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceComponent } from './performance.component';
+
+describe('PerformanceComponent', () => {
+  let component: PerformanceComponent;
+  let fixture: ComponentFixture<PerformanceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PerformanceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PerformanceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/demo/performance/performance.component.ts b/src/app/demo/performance/performance.component.ts
@@ -0,0 +1,83 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'plotly-performance',
+  templateUrl: './performance.component.html',
+  styleUrls: ['./performance.component.css']
+})
+export class PerformanceComponent implements OnInit {
+  numberOfCharts = 100;
+  indexNumberOfCharts = this.numberOfCharts - 1;
+
+  chartData = [];
+  layout: any;
+  style: any;
+  config: any;
+
+  public mainStartTime: number;
+  public mainEndTime: number;
+  public startTime: number[] = [];
+  public endTime: number[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.initChartSetup();
+    this.initChartData();
+
+    this.mainStartTime = (new Date()).getTime();
+  }
+
+  trackByIndex(i) {
+    return i;
+  }
+
+  initChartSetup() {
+    this.layout = {
+      xaxis: { title: { text: "X" }, automargin: true },
+      yaxis: { title: { text: "Y" }, automargin: true },
+      margin: {
+        t: 12,
+        r: 12,
+        b: 12,
+        l: 12
+      }
+    };
+
+    this.style = { position: "relative", width: "100%", height: '200px' };
+
+    this.config = { staticPlot: true };
+  }
+
+  initChartData() {
+    for (let i = 1; i <= this.numberOfCharts; i++) {
+      const data = [
+        { type: "bar", name: `Chart ${i}`, x: [1, 2, 3], y: [100, 300, 200] }
+      ];
+      this.chartData.push(data);
+    }
+  }
+
+  onNgInited(i: number) {
+    this.startTime[i] = (new Date()).getTime();
+  }
+
+  onInitialized(i: number) {
+    this.endTime[i] = (new Date()).getTime();
+
+    if (i === this.indexNumberOfCharts) {
+      this.mainEndTime = (new Date()).getTime();
+    }
+  }
+
+  getTime(i: number): number {
+    if (i in this.endTime) return this.endTime[i] - this.startTime[i];
+    return 0;
+  }
+
+  getTotalTime(): number {
+    if (this.mainEndTime) return this.mainEndTime - this.mainStartTime;
+    return 0;
+  }
+
+}
diff --git a/src/app/shared/plot/plot.component.ts b/src/app/shared/plot/plot.component.ts
@@ -15,6 +15,7 @@ import {
     IterableDiffers,
     KeyValueDiffer,
     KeyValueDiffers,
+    ChangeDetectionStrategy,
 } from '@angular/core';
 
 import { PlotlyService } from '../plotly.service';
@@ -25,6 +26,7 @@ import { Plotly } from '../plotly.interface';
     selector: 'plotly-plot',
     template: `<div #plot [attr.id]="divId" [className]="getClassName()" [ngStyle]="style"></div>`,
     providers: [PlotlyService],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     protected defaultClassName = 'js-plotly-plot';
@@ -52,6 +54,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     @Input() updateOnDataChange = true;
     @Input() updateOnlyWithRevision = false;
 
+    @Output() ngInited = new EventEmitter();
     @Output() initialized = new EventEmitter<Plotly.Figure>();
     @Output() update = new EventEmitter<Plotly.Figure>();
     @Output() purge = new EventEmitter<Plotly.Figure>();
@@ -99,7 +102,9 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     ) { }
 
     ngOnInit() {
-        this.createPlot().then(() => {
+        this.ngInited.emit();
+        setTimeout(async () => {
+            await this.createPlot();
             const figure = this.createFigure();
             this.initialized.emit(figure);
         });
