You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@chukwa.apache.org by ey...@apache.org on 2016/11/24 22:47:00 UTC

chukwa git commit: CHUKWA-815. Refine add widget, and chart hovering interactions. (Eric Yang)

Repository: chukwa
Updated Branches:
  refs/heads/master e0ff0ea8b -> 384e3a13a


CHUKWA-815. Refine add widget, and chart hovering interactions. (Eric Yang)


Project: http://git-wip-us.apache.org/repos/asf/chukwa/repo
Commit: http://git-wip-us.apache.org/repos/asf/chukwa/commit/384e3a13
Tree: http://git-wip-us.apache.org/repos/asf/chukwa/tree/384e3a13
Diff: http://git-wip-us.apache.org/repos/asf/chukwa/diff/384e3a13

Branch: refs/heads/master
Commit: 384e3a13a82f37b26e9e6e8ff8c8f34d2acabe9e
Parents: e0ff0ea
Author: Eric Yang <ey...@apache.org>
Authored: Thu Nov 24 10:43:23 2016 -0800
Committer: Eric Yang <ey...@apache.org>
Committed: Thu Nov 24 10:43:23 2016 -0800

----------------------------------------------------------------------
 CHANGES.txt                           |  2 ++
 src/main/web/hicc/WEB-INF/vm/chart.vm |  1 +
 src/main/web/hicc/home/index.html     | 11 +++++++++--
 src/main/web/hicc/js/flot.extend.js   | 31 ++++++++----------------------
 4 files changed, 20 insertions(+), 25 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/chukwa/blob/384e3a13/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index 8b3059d..3780ac6 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -7,6 +7,8 @@ Trunk (unreleased changes)
   IMPROVEMENTS
     CHUKWA-814. Update HBase and Solr support for Docker demo. (Eric Yang)
 
+    CHUKWA-815. Refine add widget, and chart hovering interactions. (Eric Yang)
+
   BUGS
 
     CHUKWA-813.  Fix logviewer for sorting log entries. (Eric Yang)

http://git-wip-us.apache.org/repos/asf/chukwa/blob/384e3a13/src/main/web/hicc/WEB-INF/vm/chart.vm
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/WEB-INF/vm/chart.vm b/src/main/web/hicc/WEB-INF/vm/chart.vm
index 67d671c..3cea43c 100644
--- a/src/main/web/hicc/WEB-INF/vm/chart.vm
+++ b/src/main/web/hicc/WEB-INF/vm/chart.vm
@@ -73,6 +73,7 @@ var _options={
       #if ( $chart.getYMax()!=0 )
         max: $chart.getYMax(),
       #end
+      labelWidth: 60,
       tickFormatter: function(val, axis) {
         #if ( $chart.getYUnitType().equals('bytes') )
           #parse("unit-bytes-binary.vm")

http://git-wip-us.apache.org/repos/asf/chukwa/blob/384e3a13/src/main/web/hicc/home/index.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/index.html b/src/main/web/hicc/home/index.html
index 412a3ba..fa9f8bb 100755
--- a/src/main/web/hicc/home/index.html
+++ b/src/main/web/hicc/home/index.html
@@ -175,7 +175,7 @@ function load() {
       grid_data = data.grid;
 
       var options = {
-        cellHeight: 110,
+        cellHeight: 130,
         verticalMargin: 10,
         handle: '.widget-header'
       };
@@ -315,13 +315,20 @@ $(function(){ //DOM Ready
       event.preventDefault();
       var title = $('#url').val();
       if(title in widgetsToUrl) {
+        $("html, body").animate({ scrollTop: $(document).height() }, "slow");
         var url = widgetsToUrl[title];
         var gridstack = $(".grid-stack").data('gridstack');
-        gridstack.addWidget(buildWidget(url), 0, 0, 1, 1);
+        gridstack.addWidget(buildWidget(url), 1, 100, 5, 3);
       }
     }
   });
 
+  $( "#url" ).keyup(function( event ) {
+    if ( event.which == 13 ) {
+        $('#url').val('');
+    }
+  });
+
   $.ajax({
     url: '/hicc/v1/dashboard/whoami',
     cache: false

http://git-wip-us.apache.org/repos/asf/chukwa/blob/384e3a13/src/main/web/hicc/js/flot.extend.js
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/js/flot.extend.js b/src/main/web/hicc/js/flot.extend.js
index af05d99..40feb1a 100644
--- a/src/main/web/hicc/js/flot.extend.js
+++ b/src/main/web/hicc/js/flot.extend.js
@@ -105,7 +105,7 @@ function calculateStatis() {
  */
 function showTooltip(x, y, contents) {
   if(x>document.body.clientWidth*.6) {
-    x=x-200;
+    x=x-50;
   }
   if(y>document.body.clientHeight*.7) {
     y=y-40;
@@ -116,7 +116,7 @@ function showTooltip(x, y, contents) {
     top: y + 5,
     left: x + 5,
     'border-radius': '5px',
-    border: '2px solid #aaa',
+    border: '2px solid #496274',
     padding: '2px',
     'color': '#fff',
     'background-color': '#496274',
@@ -154,7 +154,7 @@ options={
  },
  selection: { mode: "xy" },
  grid: {
-   hoverable: false,
+   hoverable: true,
    clickable: true,
    tickColor: "#C0C0C0",
    backgroundColor:"#FFFFFF"
@@ -166,36 +166,21 @@ options={
  * bind the function for the hightlight the point in the chart.
  */
 var previousPoint = null;
-$("#placeholder").bind("plotclick", function (event, pos, item) {
+$("#placeholder").bind("plothover", function (event, pos, item) {
     var leftPad = function(n) {
       n = "" + n;
       return n.length == 1 ? "0" + n : n;
     };
     if (item) {
+      var contents = "<div style='width:14px;height:10px;background-color:"+item.series.color+";overflow:hidden;display:inline-block;'></div>";
       if (previousPoint != item.datapoint) {
         previousPoint = item.datapoint;
         pause = true;
         $("#tooltip").remove();
-        if(xLabels.length==0) {
-          var x = item.datapoint[0],
-            y = item.stackValue.toFixed(2);
-          var dnow=new Date();
-          dnow.setTime(x);
-          var dita;
-          if(Cookies.get("tz")=="") {
-            dita=leftPad(dnow.getFullYear())+"/"+leftPad(dnow.getMonth()+1)+"/"+dnow.getDate()+" "+leftPad(dnow.getHours())+":"+leftPad(dnow.getMinutes())+":"+leftPad(dnow.getSeconds());
-          } else {
-            dita=leftPad(dnow.getUTCFullYear())+"/"+leftPad(dnow.getUTCMonth()+1)+"/"+dnow.getUTCDate()+" "+leftPad(dnow.getUTCHours())+":"+leftPad(dnow.getUTCMinutes())+":"+leftPad(dnow.getUTCSeconds());
-          }
-          showTooltip(item.pageX, item.pageY,
-            item.series.label + ": " + y + "<br>Time: " + dita);
-        } else {
-          var x = item.datapoint[0],
+        var x = item.datapoint[0],
           y = item.stackValue.toFixed(2);
-          xLabel = xLabels[x];
-          showTooltip(item.pageX, item.pageY,
-            item.series.label + ": " + y + "<br>" + xLabel);
-        }
+        showTooltip(item.pageX, item.pageY,
+          contents + " " + y);
       }
     } else {
       $("#tooltip").remove();