From fb1dfcfdd891806fc762d2ed2300933d07359aa3 Mon Sep 17 00:00:00 2001
From: Heiko Kernbach <heiko@arangodb.com>
Date: Wed, 22 May 2013 13:46:24 +0200
Subject: [PATCH] css + closeable groups

---
 html/admin/css/dashboardView.css     | 12 +++++++++++-
 html/admin/js/lib/nv.d3.js           |  3 ++-
 html/admin/js/views/dashboardView.js | 29 ++++++++++++++++++++++------
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/html/admin/css/dashboardView.css b/html/admin/css/dashboardView.css
index bc248223c3..6adc6846d6 100644
--- a/html/admin/css/dashboardView.css
+++ b/html/admin/css/dashboardView.css
@@ -21,16 +21,26 @@
   margin-top: 6px;
 }
 
+.group-close, .group-open {
+  float:right;
+  margin-top: 17px !important;
+  margin-right: 7px !important;
+}
+
 .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-hide, .db-info:hover {
+.db-zoom:hover, .db-minimize:hover, .db-hide, .db-info:hover, .group-close:hover, .group-open:hover {
   cursor:pointer;
 }
 
+.groupHidden li {
+  display:none;
+}
+
 .statGroups {
   margin-left: 0px;
   float:left;
diff --git a/html/admin/js/lib/nv.d3.js b/html/admin/js/lib/nv.d3.js
index 8653e427f7..64065ad344 100644
--- a/html/admin/js/lib/nv.d3.js
+++ b/html/admin/js/lib/nv.d3.js
@@ -479,8 +479,9 @@ nv.models.axis = function() {
               .attr('transform', function(d,i,j) { return 'rotate(' + rotateLabels + ' 0,0)' })
               .attr('text-anchor', rotateLabels%360 > 0 ? 'start' : 'end');
           }
-          axisLabel.enter().append('text').attr('class', 'nv-axislabel')
+          axisLabel.enter().append('text').attr('class', 'nv-axislabel nv-x-axislabel')
             .attr('text-anchor', 'middle')
+            .attr('class', 'heikotestclass')
             .attr('y', xLabelMargin);
           var w = (scale.range().length==2) ? scale.range()[1] : (scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]));
           axisLabel
diff --git a/html/admin/js/views/dashboardView.js b/html/admin/js/views/dashboardView.js
index 7775995a65..69d6d7504f 100644
--- a/html/admin/js/views/dashboardView.js
+++ b/html/admin/js/views/dashboardView.js
@@ -3,7 +3,7 @@ var dashboardView = Backbone.View.extend({
   updateInterval: 1000, // 1 second, constant
   updateFrequency: 5, // the actual update rate (5 s)
   updateCounter: 0,
-  arraySize: 99, // how many values will we keep per figure?
+  arraySize: 20, // how many values will we keep per figure?
   seriesData: {},
   charts: {},
   units: [],
@@ -47,10 +47,12 @@ var dashboardView = Backbone.View.extend({
 
   events: {
     "click .dashboard-dropdown li" : "checkEnabled",
-    "click .interval-dropdown li" : "checkInterval",
-    "click .db-zoom" : "renderDetailChart",
-    "click .db-minimize" : "checkDetailChart",
-    "click .db-hide" : "hideChart"
+    "click .interval-dropdown li"  : "checkInterval",
+    "click .db-zoom"               : "renderDetailChart",
+    "click .db-minimize"           : "checkDetailChart",
+    "click .db-hide"               : "hideChart",
+    "click .group-close"           : "hideGroup",
+    "click .group-open"            : "showGroup"
   },
 
   template: new EJS({url: 'js/templates/dashboardView.ejs'}),
@@ -72,9 +74,10 @@ var dashboardView = Backbone.View.extend({
 
     var counter = 1;
     $.each(this.options.description.models[0].attributes.groups, function () {
-      console.log(self.options.description.models[0].attributes.groups.length);
+      console.log(this);
       $('.thumbnails').append(
         '<ul class="statGroups" id="' + this.group + '">' +
+        '<i class="group-close icon-minus icon-white"></i>' +
         '<h4 class="statsHeader">' + this.name + '</h4>' +
         '</ul>');
       $('#menuGroups').append('<li class="nav-header">' + this.name + '</li>');
@@ -214,6 +217,20 @@ var dashboardView = Backbone.View.extend({
     }
   },
 
+  hideGroup: function (a) {
+    var group = $(a.target).parent();
+    $(a.target).removeClass('icon-minus group-close');
+    $(a.target).addClass('icon-plus group-open');
+    $(group).addClass("groupHidden");
+  },
+
+  showGroup: function (a) {
+    var group = $(a.target).parent();
+    $(a.target).removeClass('icon-plus group-open');
+    $(a.target).addClass('icon-minus group-close');
+    $(group).removeClass("groupHidden");
+  },
+
   hideChart: function (a) {
     var figure = $(a.target).attr("value");
     $('#'+figure+'Checkbox').prop('checked', false);