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', |
| 26 | } |
| 27 | * ``` |
| 28 | * @scope |
| 29 | * @example |
| 30 | */ |
| 31 | .directive('xosSmartPie', function(){ |
| 32 | return { |
| 33 | restrict: 'E', |
| 34 | scope: { |
| 35 | config: '=' |
| 36 | }, |
| 37 | template: ` |
| 38 | <canvas |
| 39 | class="chart chart-pie {{vm.config.classes}}" |
| 40 | chart-data="vm.data" chart-labels="vm.labels"> |
| 41 | </canvas> |
| 42 | `, |
| 43 | bindToController: true, |
| 44 | controllerAs: 'vm', |
| 45 | controller: function($injector, _){ |
| 46 | this.Resource = $injector.get(this.config.resource); |
| 47 | |
| 48 | const getData = () => { |
| 49 | this.Resource.query().$promise |
| 50 | .then((res) => { |
| 51 | |
| 52 | if(!res[0]){ |
| 53 | return; |
| 54 | } |
| 55 | |
| 56 | // group data |
| 57 | let grouped = _.groupBy(res, this.config.groupBy); |
| 58 | this.data = _.reduce(Object.keys(grouped), (data, group) => data.concat(grouped[group].length), []); |
| 59 | |
| 60 | // create labels |
| 61 | this.labels = Object.keys(grouped); |
| 62 | }); |
| 63 | } |
| 64 | |
| 65 | getData(); |
| 66 | } |
| 67 | }; |
| 68 | }); |
| 69 | })(); |