Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitfc34f6f

Browse files
committed
Adding performance demo page
1 parent3658a78 commitfc34f6f

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
constdemoRoutes: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
})
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+
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+
<divclass="grid">
5+
6+
<divclass="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>
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+
letcomponent:PerformanceComponent;
7+
letfixture: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+
});
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+
exportclassPerformanceComponentimplementsOnInit{
9+
numberOfCharts=100;
10+
indexNumberOfCharts=this.numberOfCharts-1;
11+
12+
chartData=[];
13+
layout:any;
14+
style:any;
15+
config:any;
16+
17+
publicmainStartTime:number;
18+
publicmainEndTime:number;
19+
publicstartTime:number[]=[];
20+
publicendTime:number[]=[];
21+
22+
constructor(){}
23+
24+
ngOnInit():void{
25+
this.initChartSetup();
26+
this.initChartData();
27+
28+
this.mainStartTime=(newDate()).getTime();
29+
}
30+
31+
trackByIndex(i){
32+
returni;
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(leti=1;i<=this.numberOfCharts;i++){
54+
constdata=[
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]=(newDate()).getTime();
63+
}
64+
65+
onInitialized(i:number){
66+
this.endTime[i]=(newDate()).getTime();
67+
68+
if(i===this.indexNumberOfCharts){
69+
this.mainEndTime=(newDate()).getTime();
70+
}
71+
}
72+
73+
getTime(i:number):number{
74+
if(iinthis.endTime)returnthis.endTime[i]-this.startTime[i];
75+
return0;
76+
}
77+
78+
getTotalTime():number{
79+
if(this.mainEndTime)returnthis.mainEndTime-this.mainStartTime;
80+
return0;
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
exportclassPlotComponentimplementsOnInit,OnChanges,OnDestroy,DoCheck{
3032
protecteddefaultClassName='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=newEventEmitter();
5558
@Output()initialized=newEventEmitter<Plotly.Figure>();
5659
@Output()update=newEventEmitter<Plotly.Figure>();
5760
@Output()purge=newEventEmitter<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+
awaitthis.createPlot();
103108
constfigure=this.createFigure();
104109
this.initialized.emit(figure);
105110
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp