added graph description

html/admin/css/dashboardView.css

@@ -12,13 +12,18 @@
 }
 */
 
-.db-zoom, .db-minimize {
+#dashboardHeader .btn-group {
+  margin-left: 10px;
+  margin-top: 6px;
+}
+
+.db-zoom, .db-minimize, .db-hide, .db-info {
   float: right;
   margin-top: -4px !important;
   margin-right: 4px !important;
 }
 
-.db-zoom:hover, .db-minimize:hover {
+.db-zoom:hover, .db-minimize:hover, .db-hide, .db-info:hover {
   cursor:pointer;
 }
 
@@ -26,10 +31,13 @@
   margin-left: 0px;
   float:left;
   width: 100%;
+  margin-bottom: -15px !important;
 }
 
 .statGroups h4 {
+  padding-top: 5px;
   margin-right: 20px;
+  height: 25px;
   text-align: center;
 }
 
@@ -41,16 +49,15 @@
 
 }
 
-.dashboardH4 {
-
+.dashboardH4 {
 }
 
 .statSingleClient {
   height: 300px;
   width: 888px;
-  margin-top: 5px;
+  margin-top: 0px;
   margin-left: 9px !important;
-  margin-bottom: 0;
+  margin-bottom: 0px !important;
   border: 1px solid black;
   border-radius: 2px 2px 2px 2px;
   background-color: #F4F3F3;
@@ -103,13 +110,11 @@
 }
 
 .statsHeader {
-  margin-left: 8px;
-  width: 901px;
-  border: 1px solid #F4F3F3;
-  background-color: #F4F3F3;
-  border-radius: 2px 2px 2px 2px;
-  background-color: #FFFFFF;
-  box-shadow: 0 0 3px #333333;
+  margin-left: -10px;
+  width: 940px;
+  background-color: #686766;
+  color: white;
+  height: 36px;
 }
 
 #dashboardHeader {

html/admin/js/views/dashboardView.js

@@ -36,6 +36,7 @@ var dashboardView = Backbone.View.extend({
               // need to flush previous values
               self.calculateSeries(true);
               self.renderCharts();
+              arangoHelper.arangoError("Lost connection to Database!");
             }
           });
 
@@ -48,7 +49,8 @@ var dashboardView = Backbone.View.extend({
     "click .dashboard-dropdown li" : "checkEnabled",
     "click .interval-dropdown li" : "checkInterval",
     "click .db-zoom" : "renderDetailChart",
-    "click .db-minimize" : "checkDetailChart"
+    "click .db-minimize" : "checkDetailChart",
+    "click .db-hide" : "hideChart"
   },
 
   template: new EJS({url: 'js/templates/dashboardView.ejs'}),
@@ -57,6 +59,8 @@ var dashboardView = Backbone.View.extend({
     var self = this;
     $(this.el).html(this.template.text);
 
+    console.log(this.options.description.models[0].attributes.groups);
+
     $.each(this.options.description.models[0].attributes.groups, function () {
       $('.thumbnails').append(
         '<ul class="statGroups" id="' + this.group + '">' +
@@ -72,7 +76,7 @@ var dashboardView = Backbone.View.extend({
       self.renderFigure(this);
     });
 
-    $('input[name=every'+self.updateInterval/1000 +']').attr('checked', true);
+    $('#every'+self.updateFrequency+'seconds').prop('checked',true);
 
     if (this.collection.models[0] === undefined) {
       this.collection.fetch({
@@ -147,7 +151,7 @@ var dashboardView = Backbone.View.extend({
 
   checkDetailChart: function (a) {
     if ($(a.target).hasClass('icon-minus') === true) {
-      $('#detailGraph').height(50);
+      $('#detailGraph').height(43);
       $('#detailGraphChart').hide();
       $(a.target).removeClass('icon-minus');
       $(a.target).addClass('icon-plus');
@@ -160,6 +164,12 @@ var dashboardView = Backbone.View.extend({
     }
   },
 
+  hideChart: function (a) {
+    var figure = $(a.target).attr("value");
+    $('#'+figure+'Checkbox').prop('checked', false);
+    $('#'+figure).hide();
+  },
+
   renderDetailChart: function (a) {
     var self = this;
     self.detailGraph = $(a.target).attr("value");
@@ -171,14 +181,15 @@ var dashboardView = Backbone.View.extend({
         $("html, body").animate({ scrollTop: 0 }, "slow");
         $('#detailGraphChart').show();
         $('#detailGraph').height(300);
-        $(a.target).addClass('icon-plus');
-        $(a.target).removeClass('icon-minus');
+        $('#dbHideSwitch').addClass('icon-minus');
+        $('#dbHideSwitch').removeClass('icon-plus');
       }
     });
   },
 
   renderCharts: function () {
     var self = this;
+    $('#every'+self.updateFrequency+'seconds').prop('checked',true);
 
     $.each(self.options.description.models[0].attributes.figures, function () {
       var figure = this;
@@ -309,10 +320,15 @@ var dashboardView = Backbone.View.extend({
   },
 
   renderFigure: function (figure) {
+    console.log(figure);
     $('#' + figure.group).append(
       '<li class="statClient" id="' + figure.identifier + '">' +
       '<div class="boxHeader"><h6 class="dashboardH6">' + figure.name +
-      '</h6><i class="icon-zoom-in icon-white db-zoom" value="'+figure.identifier+'"></i></div>' +
+      '</h6>'+
+      '<i class="icon-remove icon-white db-hide" value="'+figure.identifier+'"></i>' +
+      '<i class="icon-info-sign icon-white db-info" value="'+figure.identifier+'" title="'+figure.description+'"></i>' +
+      '<i class="icon-zoom-in icon-white db-zoom" value="'+figure.identifier+'"></i>' +
+      '</div>' +
       '<div class="statChart" id="' + figure.identifier + 'Chart"><svg class="svgClass"/></div>' +
       '</li>'
     );
@@ -321,6 +337,9 @@ var dashboardView = Backbone.View.extend({
       '<li><a><label class="checkbox">'+
       '<input type="checkbox" id=' + figure.identifier + 'Checkbox checked>' + figure.name + '</label></a></li>'
     );
+    $('.db-info').tooltip({
+      placement: "top"
+    }); 
   }
 
 });