xosSmartPie done
diff --git a/views/ngXosLib/README.md b/views/ngXosLib/README.md
index f4b9c8f..b19cd1f 100644
--- a/views/ngXosLib/README.md
+++ b/views/ngXosLib/README.md
@@ -39,6 +39,9 @@
To develop components inside this folder there is a particular command: `npm run dev`, this will watch the helpers file and rebuild them with sourcemaps. For this reason remember to build them when done developing.
+>While developing components in this library you should execute the test. The `npm test` command will run Jasmine test for the whole complete library.
+>If you want to specify a single test file to be execute, you can add it to the command like: `npm test smart-pie`, the tool will now read only the test specified in the `smart-pie.test.js` file.
+
When some changes are applied to this common library it should be rebuilt with: `npm run build`
To generate the relative documentation use: `npm run doc`
diff --git a/views/ngXosLib/karma.conf.js b/views/ngXosLib/karma.conf.js
index 36ddda1..ed2ec3e 100644
--- a/views/ngXosLib/karma.conf.js
+++ b/views/ngXosLib/karma.conf.js
@@ -3,6 +3,12 @@
/* eslint indent: [2,2], quotes: [2, "single"]*/
+// this is to load a different suite of test while developing
+var testFiles = '*';
+if(process.argv[4]){
+ testFiles = process.argv[4];
+}
+
/*eslint-disable*/
var wiredep = require('wiredep');
var path = require('path');
@@ -15,7 +21,7 @@
'node_modules/babel-polyfill/dist/polyfill.js',
'xosHelpers/src/**/*.module.js',
'xosHelpers/src/**/*.js',
- 'xosHelpers/spec/**/*.test.js'
+ `xosHelpers/spec/**/${testFiles}.test.js`
// 'xosHelpers/spec/ui/smart-pie.test.js'
]);
@@ -89,7 +95,7 @@
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [
'PhantomJS',
- 'Chrome'
+ // 'Chrome'
],
diff --git a/views/ngXosLib/package.json b/views/ngXosLib/package.json
index c4f902d..e0fa151 100644
--- a/views/ngXosLib/package.json
+++ b/views/ngXosLib/package.json
@@ -4,7 +4,7 @@
"description": "Angular Version of XosLib, containing Helpers and ngResources",
"main": "index.js",
"scripts": {
- "test": "karma start",
+ "test": "karma start karma.conf.js",
"test:ci": "karma start karma.conf.ci.js",
"apigen": "node apigen/blueprintToNgResource.js",
"swagger": "node xos-swagger-def.js",
diff --git a/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js b/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js
index 7106e35..4c90421 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js
@@ -7,16 +7,37 @@
(function () {
'use strict';
- let mockData;
+ let mockData, compile, rootScope, spy, scope, isolatedScope, element, interval;
+
+ const compileElement = () => {
+
+ if(!scope){
+ scope = rootScope.$new();
+ }
+
+ element = angular.element('<xos-smart-pie config="config"></xos-smart-pie>');
+ compile(element)(scope);
+ scope.$digest();
+ isolatedScope = element.isolateScope().vm;
+ }
describe('The xos.helper module', function(){
describe('The xos-smart-pie component', () => {
- var spy, scope, isolatedScope, element, interval;
beforeEach(module('xos.helpers'));
- beforeEach(function() {
+ beforeEach(function(){
+ module(function($provide){
+ $provide.service('MockResource', function(){
+ return {
+ query: ''
+ }
+ });
+ });
+ });
+
+ beforeEach(inject(function ($compile, $rootScope) {
// set mockData
mockData = [
@@ -40,106 +61,151 @@
}
]
- });
-
- // mock the service
- beforeEach(function(){
- module(function($provide){
- $provide.service('MockResource', function(){
- return {
- query: ''
- }
- });
- });
- })
-
- beforeEach(inject(function ($compile, $rootScope, $q, MockResource) {
- scope = $rootScope.$new();
-
- scope.config = {
- resource: 'MockResource',
- groupBy: 'category',
- classes: 'my-test-class'
- };
-
- spy = MockResource;
-
- spyOn(MockResource, 'query').and.callFake(function() {
- var deferred = $q.defer();
- deferred.resolve(mockData);
- return {$promise: deferred.promise};
- });
-
- element = angular.element('<xos-smart-pie config="config"></xos-smart-pie>');
- $compile(element)(scope);
- scope.$digest();
- isolatedScope = element.isolateScope().vm;
+ compile = $compile;
+ rootScope = $rootScope;
}));
- it('should attach provided classes', () => {
- expect($(element).find('canvas')).toHaveClass('my-test-class');
- });
-
- it('should group elements', () => {
- let groupedData = [2, 1];
- expect(spy.query).toHaveBeenCalled();
- expect(isolatedScope.data).toEqual(groupedData);
- });
-
- describe('when a labelFormatter function is provided', () => {
- beforeEach(inject(function ($compile, $rootScope){
+ it('should throw an error if no resource and no data are passed in the config', inject(($compile, $rootScope) => {
+ function errorFunctionWrapper(){
+ // setup the parent scope
scope = $rootScope.$new();
+ scope.config = {};
+ compileElement();
+ }
+ expect(errorFunctionWrapper).toThrow(new Error('[xosSmartPie] Please provide a resource or an array of data in the configuration'));
+ }));
+
+ describe('when data are passed in the configuration', () => {
+ beforeEach(inject(function ($compile, $rootScope) {
+ scope = $rootScope.$new();
+
scope.config = {
- resource: 'MockResource',
+ data: mockData,
groupBy: 'category',
- classes: 'label-formatter-test',
- labelFormatter: (labels) => {
+ classes: 'my-test-class'
+ };
+
+ compileElement();
+ }));
+
+
+ it('should attach provided classes', () => {
+ expect($(element).find('canvas')).toHaveClass('my-test-class');
+ });
+
+ it('should group elements', () => {
+ let groupedData = [2, 1];
+ expect(isolatedScope.data).toEqual(groupedData);
+ });
+
+ describe('when a labelFormatter function is provided', () => {
+ beforeEach(() => {
+ scope.config.labelFormatter = (labels) => {
return labels.map(l => l === '1' ? 'First' : 'Second');
- }
- };
- element = angular.element('<xos-smart-pie config="config"></xos-smart-pie>');
- $compile(element)(scope);
- scope.$digest();
- isolatedScope = element.isolateScope().vm;
- }));
+ };
+ compileElement();
+ });
+ it('should format labels', () => {
+ expect(isolatedScope.labels).toEqual(['First', 'Second'])
+ });
+ });
- it('should format labels', () => {
- expect(isolatedScope.labels).toEqual(['First', 'Second'])
+ describe('when provided data changes', () => {
+ beforeEach(() => {
+ scope.config.data.push({
+ id: 2,
+ first_name: 'Danaerys',
+ last_name: 'Targaryen',
+ category: 1
+ });
+ scope.$digest();
+ });
+ it('should calculate again the data', () => {
+ expect(isolatedScope.data).toEqual([3, 1]);
+ });
});
});
- describe('when polling is enabled', () => {
- beforeEach(inject(function ($compile, $rootScope, $interval){
+
+ describe('when a resource is specified in the configuration', () => {
- //mocked $interval (by ngMock)
- interval = $interval;
-
- // cleaning the spy
- spy.query.calls.reset()
-
+ beforeEach(inject(function ($compile, $rootScope, $q, MockResource) {
scope = $rootScope.$new();
+
scope.config = {
resource: 'MockResource',
groupBy: 'category',
- classes: 'label-formatter-test',
- poll: 2
+ classes: 'my-test-class'
};
- element = angular.element('<xos-smart-pie config="config"></xos-smart-pie>');
- $compile(element)(scope);
- scope.$digest();
- isolatedScope = element.isolateScope().vm;
+
+ spy = MockResource;
+
+ spyOn(MockResource, 'query').and.callFake(function() {
+ var deferred = $q.defer();
+ deferred.resolve(mockData);
+ return {$promise: deferred.promise};
+ });
+
+ compileElement();
}));
- it('should call the backend every 2 second', () => {
+
+ it('should call the server and group elements', () => {
+ let groupedData = [2, 1];
expect(spy.query).toHaveBeenCalled();
- expect(spy.query.calls.count()).toEqual(1);
- interval.flush(2000);
- expect(spy.query.calls.count()).toEqual(2);
- interval.flush(2000);
- expect(spy.query.calls.count()).toEqual(3)
+ expect(isolatedScope.data).toEqual(groupedData);
+ });
+
+ describe('when a labelFormatter function is provided', () => {
+ beforeEach(inject(function ($compile, $rootScope){
+ scope = $rootScope.$new();
+ scope.config = {
+ resource: 'MockResource',
+ groupBy: 'category',
+ classes: 'label-formatter-test',
+ labelFormatter: (labels) => {
+ return labels.map(l => l === '1' ? 'First' : 'Second');
+ }
+ };
+ compileElement();
+ }));
+
+ it('should format labels', () => {
+ expect(isolatedScope.labels).toEqual(['First', 'Second'])
+ });
+ });
+
+ describe('when polling is enabled', () => {
+ beforeEach(inject(function ($compile, $rootScope, $interval){
+
+ //mocked $interval (by ngMock)
+ interval = $interval;
+
+ // cleaning the spy
+ spy.query.calls.reset()
+
+ scope = $rootScope.$new();
+ scope.config = {
+ resource: 'MockResource',
+ groupBy: 'category',
+ classes: 'label-formatter-test',
+ poll: 2
+ };
+ compileElement();
+ }));
+
+ it('should call the backend every 2 second', () => {
+ expect(spy.query).toHaveBeenCalled();
+ expect(spy.query.calls.count()).toEqual(1);
+ interval.flush(2000);
+ expect(spy.query.calls.count()).toEqual(2);
+ interval.flush(2000);
+ expect(spy.query.calls.count()).toEqual(3)
+ });
});
});
+
});
});
})();
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/spec/ui/table.test.js b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
index 7279995..a6d85c8 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/table.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
@@ -94,7 +94,6 @@
xdescribe('when a field type is provided', () => {
describe('and is boolean', () => {
beforeEach(() => {
- console.log('iS: ' + isolatedScope);
isolatedScope.config = {
columns: [
{
@@ -118,7 +117,6 @@
it('should render an incon', () => {
let td1 = $(element).find('tbody tr:first-child td')[0];
let td2 = $(element).find('tbody tr:last-child td')[0];
- console.log(td2);
expect($(td1).find('i')).toHaveClass('glyphicon-ok');
expect($(td2).find('i')).toHaveClass('glyphicon-remove');
});
@@ -126,7 +124,6 @@
describe('and is date', () => {
beforeEach(() => {
- console.log('iS: ' + isolatedScope);
isolatedScope.config = {
columns: [
{
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 2290583..6616b50 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,14 +32,97 @@
* ```
* @scope
* @example
- <example module="sampleSmartPie">
+
+ Displaying Local data
+
+ <example module="sampleSmartPieLocal">
+ <file name="index.html">
+ <div ng-controller="SampleCtrlLocal as vm">
+ <xos-smart-pie config="vm.configLocal"></xos-smart-pie>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleSmartPieLocal', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
+ .controller('SampleCtrlLocal', function($timeout){
+
+ this.datas = [
+ {id: 1, first_name: 'Jon', last_name: 'aaa', category: 2},
+ {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 1},
+ {id: 3, first_name: 'Aria', last_name: 'Stark', category: 2}
+ ];
+
+ this.configLocal = {
+ data: [],
+ groupBy: 'category',
+ classes: 'local',
+ labelFormatter: (labels) => {
+ return labels.map(l => l === '1' ? 'North' : 'Dragon');
+ }
+ };
+
+ $timeout(() => {
+ // this need to be triggered in this way just because of ngDoc,
+ // otherwise you can assign data directly in the config
+ this.configLocal.data = this.datas;
+ }, 1)
+ });
+ </file>
+ </example>
+
+ Fetching data from API
+
+ <example module="sampleSmartPieResource">
<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'])
+ angular.module('sampleSmartPieResource', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
+ .controller('SampleCtrl', function(){
+ this.config = {
+ resource: 'SampleResource',
+ groupBy: 'category',
+ classes: 'resource',
+ labelFormatter: (labels) => {
+ return labels.map(l => l === '1' ? 'North' : 'Dragon');
+ }
+ };
+ });
+ </file>
+ <file name="backendPoll.js">
+ angular.module('sampleSmartPieResource')
+ .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>
+
+ Polling data from API
+
+ <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',
@@ -52,7 +135,7 @@
});
</file>
<file name="backend.js">
- angular.module('sampleSmartPie')
+ angular.module('sampleSmartPiePoll')
.run(function($httpBackend, _){
let mock = [
[
@@ -88,44 +171,6 @@
})
</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 {
@@ -142,31 +187,53 @@
`,
bindToController: true,
controllerAs: 'vm',
- controller: function($injector, $timeout, $interval, _){
+ controller: function($injector, $timeout, $interval, $scope, _){
- this.Resource = $injector.get(this.config.resource);
+ if(!this.config.resource && !this.config.data){
+ throw new Error('[xosSmartPie] Please provide a resource or an array of data in the configuration');
+ }
- const getData = () => {
- this.Resource.query().$promise
- .then((res) => {
+ const groupData = (data) => _.groupBy(data, this.config.groupBy);
+ const formatData = (data) => _.reduce(Object.keys(data), (list, group) => list.concat(data[group].length), []);
+ const formatLabels = (data) => angular.isFunction(this.config.labelFormatter) ? this.config.labelFormatter(Object.keys(data)) : Object.keys(data);
- if(!res[0]){
- return;
+ const prepareData = (data) => {
+ // group data
+ let grouped = groupData(data);
+ this.data = formatData(grouped);
+ // create labels
+ this.labels = formatLabels(grouped);
+ }
+
+ if(this.config.resource){
+
+ this.Resource = $injector.get(this.config.resource);
+ const getData = () => {
+ this.Resource.query().$promise
+ .then((res) => {
+
+ if(!res[0]){
+ return;
+ }
+
+ prepareData(res);
+ });
+ }
+
+ getData();
+
+ if(this.config.poll){
+ $interval(() => {getData()}, this.config.poll * 1000)
+ }
+ }
+ else {
+ $scope.$watch(() => this.config.data, (data) => {
+ if(data){
+ prepareData(this.config.data);
}
-
- // 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);
- });
+ }, true);
}
- getData();
-
- if(this.config.poll){
- $interval(() => {getData()}, this.config.poll * 1000)
- }
}
};
});
diff --git a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
index 7ff31fe..7985bc5 100644
--- a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
+++ b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -258,177 +258,6 @@
*
* Visit http://guide.xosproject.org/devguide/addview/ for more information
*
- * Created by teone on 3/24/16.
- */
-
-(function () {
- 'use strict';
-
- angular.module('xos.uiComponents')
- /**
- * @ngdoc directive
- * @name xos.uiComponents.directive:xosSmartPie
- * @restrict E
- * @description The xos-table directive
- * @param {Object} config The configuration for the component,
- * it is composed by the name of an angular [$resource](https://docs.angularjs.org/api/ngResource/service/$resource)
- * and a field name that is used to group the data.
- * ```
- * {
- resource: 'Users',
- groupBy: 'fieldName',
- classes: 'my-custom-class',
- labelFormatter: (labels) => {
- // here you can format your label,
- // you should return an array with the same order
- return labels;
- }
- }
- * ```
- * @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 {
- restrict: 'E',
- scope: {
- config: '='
- },
- template: '\n <canvas\n class="chart chart-pie {{vm.config.classes}}"\n chart-data="vm.data" chart-labels="vm.labels"\n chart-legend="{{vm.config.legend}}">\n </canvas>\n ',
- bindToController: true,
- controllerAs: 'vm',
- controller: ["$injector", "$timeout", "$interval", "_", function controller($injector, $timeout, $interval, _) {
- var _this = this;
-
- this.Resource = $injector.get(this.config.resource);
-
- var getData = function getData() {
- _this.Resource.query().$promise.then(function (res) {
-
- if (!res[0]) {
- return;
- }
-
- // group data
- var grouped = _.groupBy(res, _this.config.groupBy);
- _this.data = _.reduce(Object.keys(grouped), function (data, group) {
- return 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(function () {
- getData();
- }, this.config.poll * 1000);
- }
- }]
- };
- });
-})();
-//# sourceMappingURL=../../../maps/ui_components/smartComponents/smartPie/smartPie.component.js.map
-
-'use strict';
-
-/**
- * © OpenCORD
- *
- * Visit http://guide.xosproject.org/devguide/addview/ for more information
- *
* Created by teone on 4/15/16.
*/
@@ -530,6 +359,247 @@
'use strict';
angular.module('xos.uiComponents')
+ /**
+ * @ngdoc directive
+ * @name xos.uiComponents.directive:xosSmartPie
+ * @restrict E
+ * @description The xos-table directive
+ * @param {Object} config The configuration for the component,
+ * it is composed by the name of an angular [$resource](https://docs.angularjs.org/api/ngResource/service/$resource)
+ * and a field name that is used to group the data.
+ * ```
+ * {
+ resource: 'Users',
+ groupBy: 'fieldName',
+ classes: 'my-custom-class',
+ labelFormatter: (labels) => {
+ // here you can format your label,
+ // you should return an array with the same order
+ return labels;
+ }
+ }
+ * ```
+ * @scope
+ * @example
+
+ Displaying Local data
+ <example module="sampleSmartPieLocal">
+ <file name="index.html">
+ <div ng-controller="SampleCtrlLocal as vm">
+ <xos-smart-pie config="vm.configLocal"></xos-smart-pie>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleSmartPieLocal', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
+ .controller('SampleCtrlLocal', function($timeout){
+
+ this.datas = [
+ {id: 1, first_name: 'Jon', last_name: 'aaa', category: 2},
+ {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 1},
+ {id: 3, first_name: 'Aria', last_name: 'Stark', category: 2}
+ ];
+ this.configLocal = {
+ data: [],
+ groupBy: 'category',
+ classes: 'local',
+ labelFormatter: (labels) => {
+ return labels.map(l => l === '1' ? 'North' : 'Dragon');
+ }
+ };
+
+ $timeout(() => {
+ // this need to be triggered in this way just because of ngDoc,
+ // otherwise you can assign data directly in the config
+ this.configLocal.data = this.datas;
+ }, 1)
+ });
+ </file>
+ </example>
+ Fetching data from API
+ <example module="sampleSmartPieResource">
+ <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('sampleSmartPieResource', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
+ .controller('SampleCtrl', function(){
+ this.config = {
+ resource: 'SampleResource',
+ groupBy: 'category',
+ classes: 'resource',
+ labelFormatter: (labels) => {
+ return labels.map(l => l === '1' ? 'North' : 'Dragon');
+ }
+ };
+ });
+ </file>
+ <file name="backendPoll.js">
+ angular.module('sampleSmartPieResource')
+ .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>
+ Polling data from API
+ <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',
+ poll: 2,
+ labelFormatter: (labels) => {
+ return labels.map(l => l === '1' ? 'Active' : 'Banned');
+ }
+ };
+ });
+ </file>
+ <file name="backend.js">
+ angular.module('sampleSmartPiePoll')
+ .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>
+ */
+ .directive('xosSmartPie', function () {
+ return {
+ restrict: 'E',
+ scope: {
+ config: '='
+ },
+ template: '\n <canvas\n class="chart chart-pie {{vm.config.classes}}"\n chart-data="vm.data" chart-labels="vm.labels"\n chart-legend="{{vm.config.legend}}">\n </canvas>\n ',
+ bindToController: true,
+ controllerAs: 'vm',
+ controller: ["$injector", "$timeout", "$interval", "$scope", "_", function controller($injector, $timeout, $interval, $scope, _) {
+ var _this = this;
+
+ if (!this.config.resource && !this.config.data) {
+ throw new Error('[xosSmartPie] Please provide a resource or an array of data in the configuration');
+ }
+
+ var groupData = function groupData(data) {
+ return _.groupBy(data, _this.config.groupBy);
+ };
+ var formatData = function formatData(data) {
+ return _.reduce(Object.keys(data), function (list, group) {
+ return list.concat(data[group].length);
+ }, []);
+ };
+ var formatLabels = function formatLabels(data) {
+ return angular.isFunction(_this.config.labelFormatter) ? _this.config.labelFormatter(Object.keys(data)) : Object.keys(data);
+ };
+
+ var prepareData = function prepareData(data) {
+ // group data
+ var grouped = groupData(data);
+ _this.data = formatData(grouped);
+ // create labels
+ _this.labels = formatLabels(grouped);
+ };
+
+ if (this.config.resource) {
+ (function () {
+
+ _this.Resource = $injector.get(_this.config.resource);
+ var getData = function getData() {
+ _this.Resource.query().$promise.then(function (res) {
+
+ if (!res[0]) {
+ return;
+ }
+
+ prepareData(res);
+ });
+ };
+
+ getData();
+
+ if (_this.config.poll) {
+ $interval(function () {
+ getData();
+ }, _this.config.poll * 1000);
+ }
+ })();
+ } else {
+ $scope.$watch(function () {
+ return _this.config.data;
+ }, function (data) {
+ if (data) {
+ prepareData(_this.config.data);
+ }
+ }, true);
+ }
+ }]
+ };
+ });
+})();
+//# sourceMappingURL=../../../maps/ui_components/smartComponents/smartPie/smartPie.component.js.map
+
+'use strict';
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/24/16.
+ */
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.uiComponents')
/**
* @ngdoc directive