Added poll capabilities to xosSmartPie
diff --git a/views/ngXosLib/gulp/ngXosHelpers.js b/views/ngXosLib/gulp/ngXosHelpers.js
index 435e239..f29a646 100644
--- a/views/ngXosLib/gulp/ngXosHelpers.js
+++ b/views/ngXosLib/gulp/ngXosHelpers.js
@@ -65,16 +65,13 @@
});
gulp.task('makeDocs', ['cleanDocs'], function(){
+
var ngOptions = {
- scripts: [
- 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js',
- 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js',
- 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-cookies.min.js',
- 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-resource.js',
+ scripts: [].concat([
'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-mocks.js',
- 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js',
+ `./${options.ngXosVendor}ngXosVendor.js`,
`./${options.ngXosVendor}ngXosHelpers.js`,
- ],
+ ]),
styles: [
`./${options.ngXosStyles}xosNgLib.css`,
'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css',
diff --git a/views/ngXosLib/gulp/ngXosVendor.js b/views/ngXosLib/gulp/ngXosVendor.js
index 7508fe4..c11ef9e 100644
--- a/views/ngXosLib/gulp/ngXosVendor.js
+++ b/views/ngXosLib/gulp/ngXosVendor.js
@@ -1,6 +1,6 @@
var gulp = require('gulp');
var uglify = require('gulp-uglify');
-var concat = require("gulp-concat");
+var concat = require('gulp-concat');
var wiredep = require('wiredep');
module.exports = function(options){
@@ -8,7 +8,7 @@
var bowerDeps = wiredep().js;
return gulp.src(bowerDeps)
.pipe(concat('ngXosVendor.js'))
- // .pipe(uglify())
+ .pipe(uglify())
.pipe(gulp.dest(options.ngXosVendor));
});
};
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js b/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js
index 029f8d4..8dce4f9 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js
@@ -108,6 +108,27 @@
});
});
+ describe('when polling is enabled', () => {
+ beforeEach(inject(function ($compile, $rootScope){
+ scope = $rootScope.$new();
+ scope.config = {
+ resource: 'MockResource',
+ groupBy: 'category',
+ classes: 'label-formatter-test',
+ poll: 2
+ };
+ element = angular.element('<xos-smart-pie config="config"></xos-smart-pie>');
+ $compile(element)(scope);
+ scope.$digest();
+ isolatedScope = element.isolateScope().vm;
+ }));
+
+ it('should call the backend every 2 second', () => {
+ expect(spy.query).toHaveBeenCalled();
+ // $interval
+ });
+ });
+
});
});
})();
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartPie/smartPie.component.js b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartPie/smartPie.component.js
index e9a27f1..2290583 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartPie/smartPie.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartPie/smartPie.component.js
@@ -32,6 +32,100 @@
* ```
* @scope
* @example
+ <example module="sampleSmartPie">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl as vm">
+ <xos-smart-pie config="vm.config"></xos-smart-pie>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleSmartPie', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
+ .controller('SampleCtrl', function(){
+ this.config = {
+ resource: 'SampleResource',
+ groupBy: 'category',
+ poll: 2,
+ labelFormatter: (labels) => {
+ return labels.map(l => l === '1' ? 'Active' : 'Banned');
+ }
+ };
+ });
+ </file>
+ <file name="backend.js">
+ angular.module('sampleSmartPie')
+ .run(function($httpBackend, _){
+ let mock = [
+ [
+ {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
+ {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
+ {id: 3, first_name: 'Aria', last_name: 'Stark', category: 1},
+ {id: 3, first_name: 'Tyrion', last_name: 'Lannister', category: 1}
+ ],
+
+ [
+ {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
+ {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
+ {id: 3, first_name: 'Aria', last_name: 'Stark', category: 2},
+ {id: 3, first_name: 'Tyrion', last_name: 'Lannister', category: 2}
+ ],
+
+ [
+ {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
+ {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
+ {id: 3, first_name: 'Aria', last_name: 'Stark', category: 1},
+ {id: 3, first_name: 'Tyrion', last_name: 'Lannister', category: 2}
+ ]
+ ];
+ $httpBackend.whenGET('/test').respond(function(method, url, data, headers, params) {
+ return [200, mock[Math.round(Math.random() * 3)]];
+ });
+ })
+ .factory('_', function($window){
+ return $window._;
+ })
+ .service('SampleResource', function($resource){
+ return $resource('/test/:id', {id: '@id'});
+ })
+ </file>
+ </example>
+
+ <example module="sampleSmartPiePoll">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl as vm">
+ <xos-smart-pie config="vm.config"></xos-smart-pie>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleSmartPiePoll', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
+ .controller('SampleCtrl', function(){
+ this.config = {
+ resource: 'SampleResource',
+ groupBy: 'category',
+ labelFormatter: (labels) => {
+ return labels.map(l => l === '1' ? 'North' : 'Dragon');
+ }
+ };
+ });
+ </file>
+ <file name="backendPoll.js">
+ angular.module('sampleSmartPiePoll')
+ .run(function($httpBackend, _){
+ let datas = [
+ {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
+ {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
+ {id: 3, first_name: 'Aria', last_name: 'Stark', category: 1}
+ ];
+
+ $httpBackend.whenGET('/test').respond(200, datas)
+ })
+ .factory('_', function($window){
+ return $window._;
+ })
+ .service('SampleResource', function($resource){
+ return $resource('/test/:id', {id: '@id'});
+ })
+ </file>
+ </example>
*/
.directive('xosSmartPie', function(){
return {
@@ -42,12 +136,13 @@
template: `
<canvas
class="chart chart-pie {{vm.config.classes}}"
- chart-data="vm.data" chart-labels="vm.labels">
+ chart-data="vm.data" chart-labels="vm.labels"
+ chart-legend="{{vm.config.legend}}">
</canvas>
`,
bindToController: true,
controllerAs: 'vm',
- controller: function($injector, _){
+ controller: function($injector, $timeout, $interval, _){
this.Resource = $injector.get(this.config.resource);
@@ -62,13 +157,16 @@
// group data
let grouped = _.groupBy(res, this.config.groupBy);
this.data = _.reduce(Object.keys(grouped), (data, group) => data.concat(grouped[group].length), []);
-
// create labels
this.labels = angular.isFunction(this.config.labelFormatter) ? this.config.labelFormatter(Object.keys(grouped)) : Object.keys(grouped);
});
}
getData();
+
+ if(this.config.poll){
+ $interval(() => {getData()}, this.config.poll * 1000)
+ }
}
};
});