Skip to content

Performance improvements #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlexanderZhukCoherent merged 2 commits into from
Jan 27, 2016
Merged

Performance improvements #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3dff3cb
Fixed select bug, some encapsulation improvements.
Jan 20, 2016
69a94ef
text & links update
Jan 27, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ Demo Bootstrap: http://angular-data-grid.github.io/demo/bootstrap/

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

Demo 100k: http://angular-data-grid.github.io/demo/100k/

### Features
- Does not have any hard-coded template so you can choose any mark-up you need, from basic `<table>` layout to any `<div>` structure.
- Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes.
Expand Down
26 changes: 26 additions & 0 deletions demo/100k/css/angular-data-grid.bootstrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.table > thead > tr > th {
vertical-align: middle; }

.p-t-8 {
padding-top: 8px; }

.margin-bottom-basic {
margin-bottom: 15px; }

.pagination {
margin: 0; }

.items-per-page {
margin-left: 15px; }

.sortable:after {
font: 14px/1 FontAwesome;
content: "\f0dc"; }

.sortable.sort-ascent:after {
content: '\f0de';
vertical-align: bottom; }

.sortable.sort-descent:after {
content: "\f0dd";
vertical-align: top; }
219 changes: 219 additions & 0 deletions demo/100k/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Angular Data Grid - 100k example</title>
<link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
</head>
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
<nav class="navbar navbar-inverse">
<div class="container">
<a href="#" class="navbar-brand">Angular Data Grid - 100k Example</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="../bootstrap/">Basic demo</a></li>
</ul>
</div>
</nav>
<div class="container">
<div>
<h3>Angular Data Grid 100k Example</h3>
This demonstrates client-side sorting / pagination / filtering performance of the data grid with <strong>100 000 rows</strong> loaded at once.
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)
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
</div>
<hr>
<div class="row">
<div>
<div class="col-md-4">
<div class="form-group">
<label for="orderIdFilter">Search by User ID</label>
<input id="orderIdFilter" type="text" class="form-control order-search-box"
placeholder="Enter User ID"
ng-change="gridActions.filter()"
ng-model="id"
filter-by="id"
filter-type="text">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="dateFromFilter">Date From</label>

<div class="input-group">
<input type="text"
id="dateFromFilter"
class="form-control"
uib-datepicker-popup="dd/MM/yyyy"
placeholder="DD/MM/YYYY"
max-date="dateTo"
close-text="Close"
ng-model="dateFrom"
show-weeks="true"
is-open="dateFromOpened"
ng-click="dateFromOpened = true"
filter-by="date"
filter-type="dateFrom"
ng-blur="gridActions.filter()"
ng-focus="gridActions.filter()"
show-weeks="false"
close-text="Close"/>
<span class="input-group-btn">
<label for="dateFromFilter" class="btn btn-default">
<i class="fa fa-calendar"></i></label>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="dateToInput">Date To</label>

<div class="input-group">
<input type="text"
id="dateToInput"
class="form-control"
uib-datepicker-popup="dd/MM/yyyy"
placeholder="DD/MM/YYYY"
min-date="dateFrom"
close-text="Close"
ng-model="dateTo"
show-weeks="true"
is-open="dateToOpened"
ng-click="dateToOpened = true"
filter-by="date"
filter-type="dateTo"
ng-blur="gridActions.filter()"
ng-focus="gridActions.filter()"
show-weeks="false"
close-text="Close">
<span class="input-group-btn">
<label for="dateToInput" class="btn btn-default">
<i class="fa fa-calendar"></i></label>
</span>
</div>
</div>
<div ng-show="dateTo || dateFrom" class="buttons-right">
<a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
<div class="row">
<div class="col-md-3" ng-cloak>
<span class="items" ng-bind="filtered.length">{{filtered.length}} users total</span>
<div>Time stats</div>
<div>Copy time: {{_time.copy}}</div>
<div>Filter time: {{_time.filters}}</div>
<div>Sort time: {{_time.sort}}</div>
<div>All time: {{_time.all}}</div>
</div>
<div class="col-md-9 text-right">
<form class="form-inline pull-right margin-bottom-basic">
<div class="form-group">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination-sm"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</div>
<div class="form-group items-per-page">
<label for="itemsOnPageSelect1">Items per page:</label>
<select id="itemsOnPageSelect1" class="form-control input-sm"
ng-init="paginationOptions.itemsPerPage = '10'"
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<option>10</option>
<option>25</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th sortable="id" class="sortable">
User Id
</th>

<th sortable='name' class="sortable">
Name
</th>
<th sortable='phone' class="sortable">
Phone
</th>
<th sortable="date" class="sortable">
Date Of Birth
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td width="30%" ng-bind="item.id"></td>
<td ng-bind="item.name"></td>
<td ng-bind="item.phone"></td>
<td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
</tr>
</tbody>
</table>
<form class="form-inline pull-right margin-bottom-basic">
<div class="form-group">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination-sm"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
</div>
<div class="form-group items-per-page">
<label for="itemsOnPageSelect2">Items per page:</label>
<select id="itemsOnPageSelect2" class="form-control input-sm"
ng-init="paginationOptions.itemsPerPage = '10'"
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<option>10</option>
<option>25</option>
<option>50</option>
<option>75</option>
</select>
</div>
</form>
</div>
</div>
</div>
<hr>
<!--<div>-->
<!--<button class="btn btn-info margin-bottom-basic" ng-click="showCode = !showCode">CodePen</button>-->
<!--<div ng-show="showCode">-->
<!--<p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html"-->
<!--data-user="AngularDataGrid" class='codepen'>See the Pen <a-->
<!--href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a-->
<!--href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.-->
<!--</p>-->
<!--<script async src="//assets.codepen.io/assets/embed/ei.js"></script>-->
<!--</div>-->
<!--</div>-->
<!--<hr>-->
</div>
</body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="../../dist/pagination.min.js"></script>
<script src="../../dist/dataGrid.js"></script>
<script src="js/demoApp.js"></script>

</html>
34 changes: 34 additions & 0 deletions demo/100k/js/demoApp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
(function () {
'use strict';

angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
.controller('myAppController', ['$scope', function ($scope) {

$scope.gridOptions = {
data: generateJSON(100000),
urlSync: true
};

}]);

function generateJSON(length) {
var jsonObj = [],
i,
max,
names = ['Ann', 'Ben', 'Patrick', 'Steve', 'Fillip', 'Bob'],
item;
for (i = 0, max = length; i < max; i++) {

item = {};
item.id = i;
item.name = names[Math.round(Math.random() * (names.length - 1))];
item.phone = '+375-29-' + Math.round(Math.random() * 1000000);
item.date = Math.round(Math.random() * 1000000000000);
jsonObj.push(item);

}
return jsonObj;
}
})();


32 changes: 32 additions & 0 deletions demo/100k/scss/angular-data-grid.bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.table > thead > tr > th {
vertical-align: middle;
}
.p-t-8 {
padding-top: 8px;
}
.margin-bottom-basic {
margin-bottom: 15px;
}

.pagination {
margin: 0;
}

.items-per-page {
margin-left: 15px;
}

.sortable {
&:after {
font: 14px/1 FontAwesome;
content: "\f0dc";
}
&.sort-ascent:after {
content: '\f0de';
vertical-align: bottom;
}
&.sort-descent:after {
content: "\f0dd";
vertical-align: top;
}
}
2 changes: 1 addition & 1 deletion demo/bootstrap/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<a href="index.html"><strong>Bootstrap Design</strong></a>
</li>
<li>
<a href="../material/index.html">Material Design</a>
<a href="../material/">Material Design</a>
</li>
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion demo/material/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</md-button>
<md-menu-content>
<md-menu-item>
<a href="../bootstrap/index.html">Bootstrap Design</a>
<a href="../bootstrap/">Bootstrap Design</a>
</md-menu-item>
<md-menu-item>
<a href="index.html"><strong>Material Design</strong></a>
Expand Down
Loading