Skip to content

Commit fc34f6f

Browse files
andrefarzatandrefarzat
committed
Adding performance demo page
1 parent 3658a78 commit fc34f6f

File tree

7 files changed

+140
-1
lines changed

7 files changed

+140
-1
lines changed

‎src/app/demo/demo.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ <h5>Angular Plotly</h5>
1717
<li><a [routerLink]="['/timeout-update']">Timeout Update</a></li>
1818
<li><a [routerLink]="['/huge-memory-usage']">Huge Memory Usage</a></li>
1919
<li><a [routerLink]="['/slow-example']">Slow Example</a></li>
20+
<li><a [routerLink]="['/performance']">Performance</a></li>
2021
</ul>
2122
</div>
2223
</div>

‎src/app/demo/demo.module.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { FramesComponent } from './frames/frames.component';
2323
import { TimeoutUpdateComponent } from './timeout-update/timeout-update.component';
2424
import { HugeMemoryUsageComponent } from './huge-memory-usage/huge-memory-usage.component';
2525
import { SlowExampleComponent } from './slow-example/slow-example.component';
26+
import { PerformanceComponent } from './performance/performance.component';
2627

2728

2829
const demoRoutes: Routes = [
@@ -37,6 +38,7 @@ const demoRoutes: Routes = [
3738
{ path: 'timeout-update', component: TimeoutUpdateComponent, data: { title: 'Timeout Update' } },
3839
{ path: 'huge-memory-usage', component: HugeMemoryUsageComponent, data: { title: 'Huge Memory Usage' } },
3940
{ path: 'slow-example', component: SlowExampleComponent, data: { title: 'Slow example' } },
41+
{ path: 'performance', component: PerformanceComponent, data: { title: 'Performance' } },
4042

4143
{ path: '', redirectTo: '/home', pathMatch: 'full' },
4244
];
@@ -68,6 +70,7 @@ PlotlyViaCDNModule.plotlyVersion = '1.49.4';
6870
TimeoutUpdateComponent,
6971
HugeMemoryUsageComponent,
7072
SlowExampleComponent,
73+
PerformanceComponent,
7174
],
7275
exports: [DemoComponent],
7376
})

‎src/app/demo/performance/performance.component.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.grid {
2+
display: grid;
3+
grid-template-columns: repeat(5, 1fr);
4+
grid-auto-rows: 225px;
5+
gap: 4px;
6+
7+
max-width: 1200px;
8+
margin: 0 auto;
9+
}
10+

‎src/app/demo/performance/performance.component.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
<h4>Total time: {{ getTotalTime() }}ms</h4>
3+
4+
<div class="grid">
5+
6+
<div class="item" *ngFor="let data of chartData; let i = index; trackBy: trackByIndex">
7+
<div>Time: {{ getTime(i) }}ms</div>
8+
<plotly-plot [data]="data" [layout]="layout" [style]="style" [config]="config" (ngInited)="onNgInited(i)" (initialized)="onInitialized(i)"></plotly-plot>
9+
</div>
10+
11+
12+
</div>

‎src/app/demo/performance/performance.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { PerformanceComponent } from './performance.component';
4+
5+
describe('PerformanceComponent', () => {
6+
let component: PerformanceComponent;
7+
let fixture: ComponentFixture<PerformanceComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ PerformanceComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(PerformanceComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/demo/performance/performance.component.ts

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'plotly-performance',
5+
templateUrl: './performance.component.html',
6+
styleUrls: ['./performance.component.css']
7+
})
8+
export class PerformanceComponent implements OnInit {
9+
numberOfCharts = 100;
10+
indexNumberOfCharts = this.numberOfCharts - 1;
11+
12+
chartData = [];
13+
layout: any;
14+
style: any;
15+
config: any;
16+
17+
public mainStartTime: number;
18+
public mainEndTime: number;
19+
public startTime: number[] = [];
20+
public endTime: number[] = [];
21+
22+
constructor() { }
23+
24+
ngOnInit(): void {
25+
this.initChartSetup();
26+
this.initChartData();
27+
28+
this.mainStartTime = (new Date()).getTime();
29+
}
30+
31+
trackByIndex(i) {
32+
return i;
33+
}
34+
35+
initChartSetup() {
36+
this.layout = {
37+
xaxis: { title: { text: "X" }, automargin: true },
38+
yaxis: { title: { text: "Y" }, automargin: true },
39+
margin: {
40+
t: 12,
41+
r: 12,
42+
b: 12,
43+
l: 12
44+
}
45+
};
46+
47+
this.style = { position: "relative", width: "100%", height: '200px' };
48+
49+
this.config = { staticPlot: true };
50+
}
51+
52+
initChartData() {
53+
for (let i = 1; i <= this.numberOfCharts; i++) {
54+
const data = [
55+
{ type: "bar", name: `Chart ${i}`, x: [1, 2, 3], y: [100, 300, 200] }
56+
];
57+
this.chartData.push(data);
58+
}
59+
}
60+
61+
onNgInited(i: number) {
62+
this.startTime[i] = (new Date()).getTime();
63+
}
64+
65+
onInitialized(i: number) {
66+
this.endTime[i] = (new Date()).getTime();
67+
68+
if (i === this.indexNumberOfCharts) {
69+
this.mainEndTime = (new Date()).getTime();
70+
}
71+
}
72+
73+
getTime(i: number): number {
74+
if (i in this.endTime) return this.endTime[i] - this.startTime[i];
75+
return 0;
76+
}
77+
78+
getTotalTime(): number {
79+
if (this.mainEndTime) return this.mainEndTime - this.mainStartTime;
80+
return 0;
81+
}
82+
83+
}

‎src/app/shared/plot/plot.component.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
IterableDiffers,
1616
KeyValueDiffer,
1717
KeyValueDiffers,
18+
ChangeDetectionStrategy,
1819
} from '@angular/core';
1920

2021
import { PlotlyService } from '../plotly.service';
@@ -25,6 +26,7 @@ import { Plotly } from '../plotly.interface';
2526
selector: 'plotly-plot',
2627
template: `<div #plot [attr.id]="divId" [className]="getClassName()" [ngStyle]="style"></div>`,
2728
providers: [PlotlyService],
29+
changeDetection: ChangeDetectionStrategy.OnPush
2830
})
2931
export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
3032
protected defaultClassName = 'js-plotly-plot';
@@ -52,6 +54,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
5254
@Input() updateOnDataChange = true;
5355
@Input() updateOnlyWithRevision = false;
5456

57+
@Output() ngInited = new EventEmitter();
5558
@Output() initialized = new EventEmitter<Plotly.Figure>();
5659
@Output() update = new EventEmitter<Plotly.Figure>();
5760
@Output() purge = new EventEmitter<Plotly.Figure>();
@@ -99,7 +102,9 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
99102
) { }
100103

101104
ngOnInit() {
102-
this.createPlot().then(() => {
105+
this.ngInited.emit();
106+
setTimeout(async () => {
107+
await this.createPlot();
103108
const figure = this.createFigure();
104109
this.initialized.emit(figure);
105110
});

0 commit comments

Comments
 (0)