Add new percentage filter

Includes a new Angular filter which will help us formatting percentage
values correctly without bloating our controllers with multiplications
by 100.

Change-Id: I8683102c5258a64bfc27938f1f7e061a939f6bd4

app/js/filters/_index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var angular = require('angular');
+var bulk = require('bulk-require');
+
+module.exports = angular.module('app.filters', []);
+
+bulk(__dirname, ['./**/!(*_index|*.spec).js']);

app/js/filters/percentage.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var filtersModule = require('./_index.js');
+
+function percentage($filter) {
+  return function(input, decimals) {
+    return $filter('number')(input * 100, decimals || 2) + '%';
+  };
+}
+
+filtersModule.filter('percentage', percentage);

app/js/main.js

@@ -10,6 +10,7 @@ require('./templates');
 require('./controllers/_index');
 require('./services/_index');
 require('./directives/_index');
+require('./filters/_index');
 
 var requires = [
   'ui.router',
@@ -18,7 +19,8 @@ var requires = [
   'templates',
   'app.controllers',
   'app.services',
-  'app.directives'
+  'app.directives',
+  'app.filters'
 ];
 
 // mount on window for testing

test/unit/filters/percentage_spec.js

@@ -0,0 +1,21 @@
+describe('Percentage Filter', function() {
+
+  var percentageFilter;
+
+  beforeEach(function() {
+    module('app');
+    module('app.filters');
+  });
+
+  beforeEach(inject(function(_percentageFilter_) {
+    percentageFilter = _percentageFilter_;
+  }));
+
+  it('should format a percentage correctly', function() {
+    expect(percentageFilter(0.987654321)).toBe('98.77%');
+  });
+
+  it('should format a percentage using the specified decimal precision', function() {
+    expect(percentageFilter(0.987654321, 3)).toBe('98.765%');
+  });
+});