xosSmartPie done
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)
- }
}
};
});