Matteo Scandolo | cc57140 | 2016-05-03 15:13:59 -0700 | [diff] [blame] | 1 | /** |
| 2 | * © OpenCORD |
| 3 | * |
| 4 | * Visit http://guide.xosproject.org/devguide/addview/ for more information |
| 5 | * |
| 6 | * Created by teone on 3/24/16. |
| 7 | */ |
| 8 | |
| 9 | (function () { |
| 10 | 'use strict'; |
| 11 | |
| 12 | angular.module('xos.uiComponents') |
| 13 | /** |
| 14 | * @ngdoc directive |
| 15 | * @name xos.uiComponents.directive:xosSmartPie |
| 16 | * @restrict E |
| 17 | * @description The xos-table directive |
| 18 | * @param {Object} config The configuration for the component, |
| 19 | * it is composed by the name of an angular [$resource](https://docs.angularjs.org/api/ngResource/service/$resource) |
| 20 | * and a field name that is used to group the data. |
| 21 | * ``` |
| 22 | * { |
| 23 | resource: 'Users', |
| 24 | groupBy: 'fieldName', |
| 25 | classes: 'my-custom-class', |
Matteo Scandolo | 02d4034 | 2016-05-03 15:45:28 -0700 | [diff] [blame^] | 26 | labelFormatter: (labels) => { |
| 27 | // here you can format your label, |
| 28 | // you should return an array with the same order |
| 29 | return labels; |
| 30 | } |
Matteo Scandolo | cc57140 | 2016-05-03 15:13:59 -0700 | [diff] [blame] | 31 | } |
| 32 | * ``` |
| 33 | * @scope |
| 34 | * @example |
| 35 | */ |
| 36 | .directive('xosSmartPie', function(){ |
| 37 | return { |
| 38 | restrict: 'E', |
| 39 | scope: { |
| 40 | config: '=' |
| 41 | }, |
| 42 | template: ` |
| 43 | <canvas |
| 44 | class="chart chart-pie {{vm.config.classes}}" |
| 45 | chart-data="vm.data" chart-labels="vm.labels"> |
| 46 | </canvas> |
| 47 | `, |
| 48 | bindToController: true, |
| 49 | controllerAs: 'vm', |
| 50 | controller: function($injector, _){ |
Matteo Scandolo | 02d4034 | 2016-05-03 15:45:28 -0700 | [diff] [blame^] | 51 | |
Matteo Scandolo | cc57140 | 2016-05-03 15:13:59 -0700 | [diff] [blame] | 52 | this.Resource = $injector.get(this.config.resource); |
| 53 | |
| 54 | const getData = () => { |
| 55 | this.Resource.query().$promise |
| 56 | .then((res) => { |
| 57 | |
| 58 | if(!res[0]){ |
| 59 | return; |
| 60 | } |
| 61 | |
| 62 | // group data |
| 63 | let grouped = _.groupBy(res, this.config.groupBy); |
| 64 | this.data = _.reduce(Object.keys(grouped), (data, group) => data.concat(grouped[group].length), []); |
| 65 | |
| 66 | // create labels |
Matteo Scandolo | 02d4034 | 2016-05-03 15:45:28 -0700 | [diff] [blame^] | 67 | this.labels = angular.isFunction(this.config.labelFormatter) ? this.config.labelFormatter(Object.keys(grouped)) : Object.keys(grouped); |
Matteo Scandolo | cc57140 | 2016-05-03 15:13:59 -0700 | [diff] [blame] | 68 | }); |
| 69 | } |
| 70 | |
| 71 | getData(); |
| 72 | } |
| 73 | }; |
| 74 | }); |
| 75 | })(); |