Developer view first draft
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 6616b50..c1f08fa 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
@@ -187,7 +187,7 @@
       `,
       bindToController: true,
       controllerAs: 'vm',
-      controller: function($injector, $timeout, $interval, $scope, _){
+      controller: function($injector, $interval, $scope, $timeout, _){
 
         if(!this.config.resource && !this.config.data){
           throw new Error('[xosSmartPie] Please provide a resource or an array of data in the configuration');
@@ -198,11 +198,13 @@
         const formatLabels = (data) => angular.isFunction(this.config.labelFormatter) ? this.config.labelFormatter(Object.keys(data)) : Object.keys(data);
 
         const prepareData = (data) => {
-          // group data
-          let grouped = groupData(data);
-          this.data = formatData(grouped);
-          // create labels
-          this.labels = formatLabels(grouped);
+          // $timeout(() => {
+            // group data
+            let grouped = groupData(data);
+            this.data = formatData(grouped);
+            // create labels
+            this.labels = formatLabels(grouped);
+          // }, 10);
         }
 
         if(this.config.resource){
@@ -234,6 +236,14 @@
           }, true);
         }
 
+        $scope.$on('create', function (event, chart) {
+          console.log(`create: ${chart.id}`);
+        });
+
+        $scope.$on('destroy', function (event, chart) {
+          console.log(`destroy: ${chart.id}`);
+        });
+
       }
     };
   });
diff --git a/views/ngXosViews/developer/gulp/build.js b/views/ngXosViews/developer/gulp/build.js
index b90ff38..f86af0f 100644
--- a/views/ngXosViews/developer/gulp/build.js
+++ b/views/ngXosViews/developer/gulp/build.js
@@ -98,8 +98,8 @@
   gulp.task('copyHtml', function(){
     return gulp.src(options.src + 'index.html')
       // remove dev dependencies from html
-      .pipe(replace(/<!-- bower:css -->(\n.*)*\n<!-- endbower --><!-- endcss -->/, ''))
-      .pipe(replace(/<!-- bower:js -->(\n.*)*\n<!-- endbower --><!-- endjs -->/, ''))
+      .pipe(replace(/<!-- bower:css -->(\n^<link.*)*\n<!-- endbower -->/gmi, ''))
+      .pipe(replace(/<!-- bower:js -->(\n^<script.*)*\n<!-- endbower -->/gmi, ''))
       // injecting minified files
       .pipe(
         inject(
diff --git a/views/ngXosViews/developer/src/js/main.js b/views/ngXosViews/developer/src/js/main.js
index c4ddcd8..5cb919b 100644
--- a/views/ngXosViews/developer/src/js/main.js
+++ b/views/ngXosViews/developer/src/js/main.js
@@ -23,14 +23,17 @@
     bindToController: true,
     controllerAs: 'vm',
     templateUrl: 'templates/developer-dashboard.tpl.html',
-    controller: function($timeout, SlicesPlus, _){
+    controller: function($scope, $timeout, SlicesPlus, Instances, _){
 
       this.instancePerSliceConfig = {
-        resource: 'Instances',
+        data: [],
         groupBy: 'slice',
         legend: true,
+        classes: 'instance per slice',
         labelFormatter: (labels) => {
-          return labels.map(l => _.find(this.slices, {id: parseInt(l)}).name);
+          return labels.map(l => {
+            return _.find(this.slices, {id: parseInt(l)}).name
+          });
         }
       };
 
@@ -38,12 +41,14 @@
         data: [],
         groupBy: 'site',
         legend: true,
+        classes: 'instance per site',
       };
 
       this.networkPerSliceConfig = {
         data: [],
         groupBy: 'name',
         legend: true,
+        classes: 'network per slice',
       };
 
       this.tableConfig = {
@@ -82,13 +87,17 @@
 
       // retrieving user list
       SlicesPlus.query().$promise
-      .then(slices => {
+      .then((slices) => {
+        this.slices = slices;
+        return Instances.query().$promise
+      })
+      .then(instances => {
         
         // formatting data in this way sucks.
         // Provide a way to just pass data to the chart if needed [smartPie].
 
         // retrieving network per slices
-        let networkPerSlice = _.reduce(slices, (list, s) => {
+        let networkPerSlice = _.reduce(this.slices, (list, s) => {
           if( s.networks.length > 1){
             // push s.neworks.length values in array
             for(let i = 0; i < s.networks.length; i++){
@@ -102,7 +111,7 @@
         }, []);
 
         // retrieving instance distribution across sites
-        let instancePerSite = _.reduce(slices, (list, s) => {
+        let instancePerSite = _.reduce(this.slices, (list, s) => {
           _.forEach(Object.keys(s.instance_distribution), k => {
             for(let i = 0; i < s.instance_distribution[k]; i++){
               list.push({site: k, instance: i})
@@ -113,12 +122,10 @@
 
         this.sites = Object.keys(_.groupBy(instancePerSite, 'site'));
 
-        $timeout(() => {
-          this.instancePerSiteConfig.data = instancePerSite;
-          this.networkPerSliceConfig.data = networkPerSlice;
-        }, 0);
+        this.instancePerSliceConfig.data = instances;
+        this.instancePerSiteConfig.data = instancePerSite;
+        this.networkPerSliceConfig.data = networkPerSlice;
 
-        this.slices = slices;
       })
       .catch((e) => {
         throw new Error(e);
diff --git a/views/ngXosViews/developer/src/templates/developer-dashboard.tpl.html b/views/ngXosViews/developer/src/templates/developer-dashboard.tpl.html
index f1688fb..fd82f77 100644
--- a/views/ngXosViews/developer/src/templates/developer-dashboard.tpl.html
+++ b/views/ngXosViews/developer/src/templates/developer-dashboard.tpl.html
@@ -1,13 +1,13 @@
 <div class="row">
-  <div ng-class="{'col-sm-4': vm.sites.length > 1, 'col-sm-6': vm.sites.length <= 1}" class="text-center">
+  <div ng-class="{'col-sm-4': vm.sites.length > 1 || !vm.sites, 'col-sm-6': vm.sites.length <= 1}" class="text-center">
     <h3>Instances per Slice</h3>
-    <xos-smart-pie ng-if="vm.slices" config="vm.instancePerSliceConfig"></xos-smart-pie>
+    <xos-smart-pie ng-if="vm.instancePerSliceConfig.data.length > 0" config="vm.instancePerSliceConfig"></xos-smart-pie>
   </div>
   <div ng-if="vm.sites.length > 1" class="col-sm-4 text-center">
     <h3>Instances per Site</h3>
     <xos-smart-pie ng-if="vm.instancePerSiteConfig.data.length > 0" config="vm.instancePerSiteConfig"></xos-smart-pie>
   </div>
-  <div ng-class="{'col-sm-4': vm.sites.length > 1, 'col-sm-6': vm.sites.length <= 1}" class="text-center">
+  <div ng-class="{'col-sm-4': vm.sites.length > 1 || !vm.sites, 'col-sm-6': vm.sites.length <= 1}" class="text-center">
     <h3>Network per Slice</h3>
     <xos-smart-pie ng-if="vm.networkPerSliceConfig.data.length > 0" config="vm.networkPerSliceConfig"></xos-smart-pie>
   </div>