Posted 3 December 2017, 3:21 am EST
Hello
We want to use grid as dashboard:
- We init grid with 300 rows.
- Every one second additional row was added.
On i7 core the average CPU consuming time per every refresh (100 secs) is 50ms.
Could you please check our code for correct usage of update grid datasource.
Can we improve performance in our example?
Our code:
html:
<wj-flex-grid [itemsSource]=“data” style=“max-height: 350px” #flex>
<wj-flex-grid-column [header]=“‘Country’” [binding]=“‘country’” [width]=“‘*’”>
<wj-flex-grid-column [header]=“‘Date’” [binding]=“‘date’”>
<wj-flex-grid-column [header]=“‘Revenue’” [binding]=“‘amount’” [format]=“‘n0’”>
<wj-flex-grid-column [header]=“‘Active’” [binding]=“‘active’”>
ts:
@Component({
selector: 'app-wg',
templateUrl: './wgrid.component.html',
styleUrls: ['./wgrid.component.css']
})
export class WGridComponent {
// generate some random data
protected dataSvc: DataSvcService;
dataArray = new wjcCore.ObservableArray();
data: wjcCore.CollectionView;
countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
count = 301;
constructor() {
this.init(300, this.dataArray);
this.data = new wjcCore.CollectionView(this.dataArray);
setInterval(() => {
this.getData(this.count++, this.dataArray);
this.data.refresh();
}, 1000);
}
public init(count: number, data: any[]) {
for (var i = 0; i < count; i++) {
this.getData(i, data);
}
return data;
}
getData(i: number, data: any[]) {
data.unshift({
id: i,
country: this.countries[i % this.countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.trunc(Math.random() * 10000),
active: i % 4 == 0
});
return data;
}
}
Thanks in advance.
Best Regards,
Mark Nebrat
