diff --git a/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js b/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js
new file mode 100644
index 0000000..a679c66
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/spec/ui/smart-pie.test.js
@@ -0,0 +1,91 @@
+/**
+ * © OpenCORD
+ *
+ * Created by teone on 3/24/16.
+ */
+
+(function () {
+  'use strict';
+
+  let mockData;
+
+  describe('The xos.helper module', function(){
+    describe('The xos-smart-pie component', () => {
+
+      var spy, scope, isolatedScope, element;
+
+      beforeEach(module('xos.helpers'));
+
+      beforeEach(function() {
+
+        // set mockData
+        mockData = [
+          {
+            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
+          }
+        ]
+
+      });
+
+      // 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;
+      }));
+
+      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);
+      });
+
+    });
+  });
+})();
\ No newline at end of file
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();
+      }
+    };
+  });
+})();
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
index 8cbe0af..74226cc 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
@@ -140,7 +140,6 @@
               label: 'delete',
               icon: 'remove',
               cb: (item) => {
-                console.log(item);
                 this.Resource.delete({id: item.id}).$promise
                 .then(() => {
                   _.remove(this.data, (d) => d.id === item.id);
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
index 03d6308..ad3dc49 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
@@ -24,5 +24,6 @@
   **/
 
   angular.module('xos.uiComponents', [
+    'chart.js'
   ])
 })();