Started xosSmartPie component
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
new file mode 100644
index 0000000..0468644
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartPie/smartPie.component.js
@@ -0,0 +1,69 @@
+/**
+ * © 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
+ * @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',
+ }
+ * ```
+ * @scope
+ * @example
+ */
+ .directive('xosSmartPie', function(){
+ return {
+ restrict: 'E',
+ scope: {
+ config: '='
+ },
+ template: `
+ <canvas
+ class="chart chart-pie {{vm.config.classes}}"
+ chart-data="vm.data" chart-labels="vm.labels">
+ </canvas>
+ `,
+ bindToController: true,
+ controllerAs: 'vm',
+ controller: function($injector, _){
+ this.Resource = $injector.get(this.config.resource);
+
+ const getData = () => {
+ this.Resource.query().$promise
+ .then((res) => {
+
+ if(!res[0]){
+ return;
+ }
+
+ // 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 = Object.keys(grouped);
+ });
+ }
+
+ getData();
+ }
+ };
+ });
+})();