Skip to content

Commit 9050652

Browse files
AlexanderZhukCoherentAlexanderZhukCoherent
committed
Merge pull request #8 from angular-data-grid/performance-improvements
Performance improvements
2 parents 7406193 + 69a94ef commit 9050652

File tree

10 files changed

+374
-15
lines changed

10 files changed

+374
-15
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ Demo Bootstrap: http://angular-data-grid.github.io/demo/bootstrap/
66

77
Demo Material: http://angular-data-grid.github.io/demo/material/
88

9+
Demo 100k: http://angular-data-grid.github.io/demo/100k/
10+
911
### Features
1012
- Does not have any hard-coded template so you can choose any mark-up you need, from basic `<table>` layout to any `<div>` structure.
1113
- Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes.

‎demo/100k/css/angular-data-grid.bootstrap.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.table > thead > tr > th {
2+
vertical-align: middle; }
3+
4+
.p-t-8 {
5+
padding-top: 8px; }
6+
7+
.margin-bottom-basic {
8+
margin-bottom: 15px; }
9+
10+
.pagination {
11+
margin: 0; }
12+
13+
.items-per-page {
14+
margin-left: 15px; }
15+
16+
.sortable:after {
17+
font: 14px/1 FontAwesome;
18+
content: "\f0dc"; }
19+
20+
.sortable.sort-ascent:after {
21+
content: '\f0de';
22+
vertical-align: bottom; }
23+
24+
.sortable.sort-descent:after {
25+
content: "\f0dd";
26+
vertical-align: top; }

‎demo/100k/index.html‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Angular Data Grid - 100k example</title>
6+
<link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
10+
</head>
11+
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
12+
<nav class="navbar navbar-inverse">
13+
<div class="container">
14+
<a href="#" class="navbar-brand">Angular Data Grid - 100k Example</a>
15+
<ul class="nav navbar-nav navbar-right">
16+
<li><a href="../bootstrap/">Basic demo</a></li>
17+
</ul>
18+
</div>
19+
</nav>
20+
<div class="container">
21+
<div>
22+
<h3>Angular Data Grid 100k Example</h3>
23+
This demonstrates client-side sorting / pagination / filtering performance of the data grid with <strong>100 000 rows</strong> loaded at once.
24+
It's not likely that someone will need to operate so huge data at client side in a real life, but for performance testing purposes it definitely works)
25+
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
26+
</div>
27+
<hr>
28+
<div class="row">
29+
<div>
30+
<div class="col-md-4">
31+
<div class="form-group">
32+
<label for="orderIdFilter">Search by User ID</label>
33+
<input id="orderIdFilter" type="text" class="form-control order-search-box"
34+
placeholder="Enter User ID"
35+
ng-change="gridActions.filter()"
36+
ng-model="id"
37+
filter-by="id"
38+
filter-type="text">
39+
</div>
40+
</div>
41+
<div class="col-md-4">
42+
<div class="form-group">
43+
<label for="dateFromFilter">Date From</label>
44+
45+
<div class="input-group">
46+
<input type="text"
47+
id="dateFromFilter"
48+
class="form-control"
49+
uib-datepicker-popup="dd/MM/yyyy"
50+
placeholder="DD/MM/YYYY"
51+
max-date="dateTo"
52+
close-text="Close"
53+
ng-model="dateFrom"
54+
show-weeks="true"
55+
is-open="dateFromOpened"
56+
ng-click="dateFromOpened = true"
57+
filter-by="date"
58+
filter-type="dateFrom"
59+
ng-blur="gridActions.filter()"
60+
ng-focus="gridActions.filter()"
61+
show-weeks="false"
62+
close-text="Close"/>
63+
<span class="input-group-btn">
64+
<label for="dateFromFilter" class="btn btn-default">
65+
<i class="fa fa-calendar"></i></label>
66+
</span>
67+
</div>
68+
</div>
69+
</div>
70+
<div class="col-md-4">
71+
<div class="form-group">
72+
<label for="dateToInput">Date To</label>
73+
74+
<div class="input-group">
75+
<input type="text"
76+
id="dateToInput"
77+
class="form-control"
78+
uib-datepicker-popup="dd/MM/yyyy"
79+
placeholder="DD/MM/YYYY"
80+
min-date="dateFrom"
81+
close-text="Close"
82+
ng-model="dateTo"
83+
show-weeks="true"
84+
is-open="dateToOpened"
85+
ng-click="dateToOpened = true"
86+
filter-by="date"
87+
filter-type="dateTo"
88+
ng-blur="gridActions.filter()"
89+
ng-focus="gridActions.filter()"
90+
show-weeks="false"
91+
close-text="Close">
92+
<span class="input-group-btn">
93+
<label for="dateToInput" class="btn btn-default">
94+
<i class="fa fa-calendar"></i></label>
95+
</span>
96+
</div>
97+
</div>
98+
<div ng-show="dateTo || dateFrom" class="buttons-right">
99+
<a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
<hr>
105+
<div class="row">
106+
<div class="col-md-12">
107+
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
108+
<div class="row">
109+
<div class="col-md-3" ng-cloak>
110+
<span class="items" ng-bind="filtered.length">{{filtered.length}} users total</span>
111+
<div>Time stats</div>
112+
<div>Copy time: {{_time.copy}}</div>
113+
<div>Filter time: {{_time.filters}}</div>
114+
<div>Sort time: {{_time.sort}}</div>
115+
<div>All time: {{_time.all}}</div>
116+
</div>
117+
<div class="col-md-9 text-right">
118+
<form class="form-inline pull-right margin-bottom-basic">
119+
<div class="form-group">
120+
<grid-pagination max-size="5"
121+
boundary-links="true"
122+
class="pagination-sm"
123+
total-items="paginationOptions.totalItems"
124+
ng-model="paginationOptions.currentPage"
125+
ng-change="reloadGrid()"
126+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
127+
</div>
128+
<div class="form-group items-per-page">
129+
<label for="itemsOnPageSelect1">Items per page:</label>
130+
<select id="itemsOnPageSelect1" class="form-control input-sm"
131+
ng-init="paginationOptions.itemsPerPage = '10'"
132+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
133+
<option>10</option>
134+
<option>25</option>
135+
<option>50</option>
136+
<option>75</option>
137+
</select>
138+
</div>
139+
</form>
140+
</div>
141+
</div>
142+
<table class="table table-bordered table-striped">
143+
<thead>
144+
<tr>
145+
<th sortable="id" class="sortable">
146+
User Id
147+
</th>
148+
149+
<th sortable='name' class="sortable">
150+
Name
151+
</th>
152+
<th sortable='phone' class="sortable">
153+
Phone
154+
</th>
155+
<th sortable="date" class="sortable">
156+
Date Of Birth
157+
</th>
158+
</tr>
159+
</thead>
160+
<tbody>
161+
<tr grid-item>
162+
<td width="30%" ng-bind="item.id"></td>
163+
<td ng-bind="item.name"></td>
164+
<td ng-bind="item.phone"></td>
165+
<td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
166+
</tr>
167+
</tbody>
168+
</table>
169+
<form class="form-inline pull-right margin-bottom-basic">
170+
<div class="form-group">
171+
<grid-pagination max-size="5"
172+
boundary-links="true"
173+
class="pagination-sm"
174+
total-items="paginationOptions.totalItems"
175+
ng-model="paginationOptions.currentPage"
176+
ng-change="reloadGrid()"
177+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
178+
</div>
179+
<div class="form-group items-per-page">
180+
<label for="itemsOnPageSelect2">Items per page:</label>
181+
<select id="itemsOnPageSelect2" class="form-control input-sm"
182+
ng-init="paginationOptions.itemsPerPage = '10'"
183+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
184+
<option>10</option>
185+
<option>25</option>
186+
<option>50</option>
187+
<option>75</option>
188+
</select>
189+
</div>
190+
</form>
191+
</div>
192+
</div>
193+
</div>
194+
<hr>
195+
<!--<div>-->
196+
<!--<button class="btn btn-info margin-bottom-basic" ng-click="showCode = !showCode">CodePen</button>-->
197+
<!--<div ng-show="showCode">-->
198+
<!--<p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html"-->
199+
<!--data-user="AngularDataGrid" class='codepen'>See the Pen <a-->
200+
<!--href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a-->
201+
<!--href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.-->
202+
<!--</p>-->
203+
<!--<script async src="//assets.codepen.io/assets/embed/ei.js"></script>-->
204+
<!--</div>-->
205+
<!--</div>-->
206+
<!--<hr>-->
207+
</div>
208+
</body>
209+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
210+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
211+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
212+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
213+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
214+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
215+
<script src="../../dist/pagination.min.js"></script>
216+
<script src="../../dist/dataGrid.js"></script>
217+
<script src="js/demoApp.js"></script>
218+
219+
</html>

‎demo/100k/js/demoApp.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
(function () {
2+
'use strict';
3+
4+
angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
5+
.controller('myAppController', ['$scope', function ($scope) {
6+
7+
$scope.gridOptions = {
8+
data: generateJSON(100000),
9+
urlSync: true
10+
};
11+
12+
}]);
13+
14+
function generateJSON(length) {
15+
var jsonObj = [],
16+
i,
17+
max,
18+
names = ['Ann', 'Ben', 'Patrick', 'Steve', 'Fillip', 'Bob'],
19+
item;
20+
for (i = 0, max = length; i < max; i++) {
21+
22+
item = {};
23+
item.id = i;
24+
item.name = names[Math.round(Math.random() * (names.length - 1))];
25+
item.phone = '+375-29-' + Math.round(Math.random() * 1000000);
26+
item.date = Math.round(Math.random() * 1000000000000);
27+
jsonObj.push(item);
28+
29+
}
30+
return jsonObj;
31+
}
32+
})();
33+
34+

‎demo/100k/scss/angular-data-grid.bootstrap.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.table > thead > tr > th {
2+
vertical-align: middle;
3+
}
4+
.p-t-8 {
5+
padding-top: 8px;
6+
}
7+
.margin-bottom-basic {
8+
margin-bottom: 15px;
9+
}
10+
11+
.pagination {
12+
margin: 0;
13+
}
14+
15+
.items-per-page {
16+
margin-left: 15px;
17+
}
18+
19+
.sortable {
20+
&:after {
21+
font: 14px/1 FontAwesome;
22+
content: "\f0dc";
23+
}
24+
&.sort-ascent:after {
25+
content: '\f0de';
26+
vertical-align: bottom;
27+
}
28+
&.sort-descent:after {
29+
content: "\f0dd";
30+
vertical-align: top;
31+
}
32+
}

‎demo/bootstrap/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<a href="index.html"><strong>Bootstrap Design</strong></a>
2222
</li>
2323
<li>
24-
<a href="../material/index.html">Material Design</a>
24+
<a href="../material/">Material Design</a>
2525
</li>
2626
</ul>
2727
</div>

‎demo/material/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</md-button>
2525
<md-menu-content>
2626
<md-menu-item>
27-
<a href="../bootstrap/index.html">Bootstrap Design</a>
27+
<a href="../bootstrap/">Bootstrap Design</a>
2828
</md-menu-item>
2929
<md-menu-item>
3030
<a href="index.html"><strong>Material Design</strong></a>

0 commit comments

Comments
 (0)