horizon : add label before chart

better handling of form when loading new metrics

app/modules/dashboard/health/view.jade

@@ -98,7 +98,7 @@
                 span(ng-if = 'cubism.loadingMetrics')
                   | Loading metrics ... 
                   i.fa.fa-circle-o-notch.fa-spin
-                .form-group(ng-if = 'cubism.metrics')
+                .form-group(ng-if = 'cubism.metrics && !cubism.loadingMetrics')
                   ui-select(ng-model = 'cubism.selectedMetric',ng-change='cubism.prepareStat()')
                     ui-select-match(placeholder = 'Choose a metric') {{ $select.selected }}
                     ui-select-choices(repeat = 'metric in cubism.metrics | filter:$select.search | orderBy:["key"]') {{ metric }}
@@ -117,18 +117,24 @@
         //  step='1000*5'
         //  size='168'
         //  )
-        div(ng-repeat="stat in cubism.stats")
+        .grid-sm(ng-repeat="stat in cubism.stats" ng-if="!cubism.loadingMetrics")
+          div(style="flex:1")
+            i(class = 'xo-icon-{{ cubism.chosen[$index].type | lowercase }}')
+            |  
+            span {{ cubism.chosen[$index].name_label }}
           horizon(
             ng-if='$first'
             chart-data='stat'
             show-axis='true'
             axis-orientation='top'
             selected='cubism.selected'
+            style="overflow:hidden;flex:11"
           )
           horizon(
             ng-if='$middle'
             chart-data='stat'
             selected='cubism.selected'
+            style="overflow:hidden;flex:11"
           )
           horizon(
             ng-if='$last && !$first'
@@ -136,4 +142,5 @@
             show-axis='true'
             axis-orientation='bottom'
             selected='cubism.selected'
+            style="overflow:hidden;flex:11"
           )

app/node_modules/xo-horizon/index.js

@@ -5,7 +5,9 @@ import angular from 'angular'
 import d3 from 'd3'
 import find from 'lodash.find'
 import forEach from 'lodash.forEach'
-console.log('loaded')
+
+const $ = window.$
+
 export default angular.module('xoHorizon', [])
 .directive('horizon', function ($parse) {
   return {
@@ -19,8 +21,12 @@ export default angular.module('xoHorizon', [])
   }
   function link (scope, element, attrs) {
     console.log('link')
-    let nbSteps, margin, width, height, color, data
+    let nbSteps, margin, width, height, color, data, $e
 
+    $e = $(element[0])
+    while ($e.width() === 0 && $e.parent()) {
+      $e = $e.parent()
+    }
     nbSteps = attrs.steps || 4
     margin = {
       top: attrs.showAxis && attrs.axisOrientation !== 'bottom' ? 20 : 0,
@@ -28,7 +34,7 @@ export default angular.module('xoHorizon', [])
       bottom: attrs.showAxis && attrs.axisOrientation === 'bottom' ? 20 : 0,
       left: 20
     }
-    width = attrs.width || 960 - margin.left - margin.right
+    width = attrs.width || $e.width() - margin.left - margin.right
     height = attrs.height || 70 - margin.top - margin.bottom + (attrs.showAxis ? 20 : 0)
     color = attrs.color || 'darkgreen'
 
@@ -151,6 +157,7 @@ export default angular.module('xoHorizon', [])
       if (!newVal || !newVal.length) {
         return
       }
+
       data = newVal
       extent = scope.extent || d3
         .extent(newVal, function (d) {