chukwa-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ey...@apache.org
Subject svn commit: r773687 - in /hadoop/chukwa/trunk/src: java/org/apache/hadoop/chukwa/hicc/Chart.java web/hicc/css/iframe.css web/hicc/js/flot.extend.js
Date Mon, 11 May 2009 20:51:45 GMT
Author: eyang
Date: Mon May 11 20:51:45 2009
New Revision: 773687

URL: http://svn.apache.org/viewvc?rev=773687&view=rev
Log:
CHUKWA-82.  Added min,max,average to HICC Charting widget. (Terence Kwan via Eric Yang)

Added:
    hadoop/chukwa/trunk/src/web/hicc/css/iframe.css
Modified:
    hadoop/chukwa/trunk/src/java/org/apache/hadoop/chukwa/hicc/Chart.java
    hadoop/chukwa/trunk/src/web/hicc/js/flot.extend.js

Modified: hadoop/chukwa/trunk/src/java/org/apache/hadoop/chukwa/hicc/Chart.java
URL: http://svn.apache.org/viewvc/hadoop/chukwa/trunk/src/java/org/apache/hadoop/chukwa/hicc/Chart.java?rev=773687&r1=773686&r2=773687&view=diff
==============================================================================
--- hadoop/chukwa/trunk/src/java/org/apache/hadoop/chukwa/hicc/Chart.java (original)
+++ hadoop/chukwa/trunk/src/java/org/apache/hadoop/chukwa/hicc/Chart.java Mon May 11 20:51:45
2009
@@ -216,16 +216,23 @@
       output
           .append("<html><link href=\"/hicc/css/default.css\" rel=\"stylesheet\"
type=\"text/css\">\n");
       output
+          .append("<html><link href=\"/hicc/css/iframe.css\" rel=\"stylesheet\"
type=\"text/css\">\n");
+      output
+          .append("<html><link href=\"/hicc/css/flexigrid/flexigrid.css\" rel=\"stylesheet\"
type=\"text/css\">\n");
+      output
           .append("<body><script type=\"text/javascript\" src=\"/hicc/js/jquery-1.2.6.min.js\"></script>\n");
       output
           .append("<script type=\"text/javascript\" src=\"/hicc/js/jquery.flot.pack.js\"></script>\n");
       output
+          .append("<script type=\"text/javascript\" src=\"/hicc/js/flexigrid.pack.js\"></script>\n");
+      output
           .append("<script type=\"text/javascript\" src=\"/hicc/js/excanvas.pack.js\"></script>\n");
       output.append("<div id=\"placeholderTitle\"><center>" + title
           + "</center></div>\n");
       output.append("<div id=\"placeholder\" style=\"width:" + this.width
           + "px;height:" + this.height + "px;\"></div>\n");
       output.append("<center><div id=\"placeholderLegend\"></div></center>\n");
+      output.append("<center><div id=\"statisLegend\" style=\"display:"+(legend?"block":"none")+";\"></div></center>\n");
       output.append("<input type=\"hidden\" id=\"boxId\" value=\"iframe"
           + this.id + "\">\n");
       output
@@ -424,7 +431,8 @@
     }
     output.append(" ];\n");
     if (request != null && xf.getParameter("format") == null) {
-	output.append("$(document).ready(function() { \n");
+	output.append("$(document).ready(function() { \n");	
+	output.append("   calculateStatis();\n");
 	output.append("   wholePeriod();\n");
 	output.append("   $(window).resize(function() { wholePeriod(); });\n");
 	output.append("});\n");

Added: hadoop/chukwa/trunk/src/web/hicc/css/iframe.css
URL: http://svn.apache.org/viewvc/hadoop/chukwa/trunk/src/web/hicc/css/iframe.css?rev=773687&view=auto
==============================================================================
--- hadoop/chukwa/trunk/src/web/hicc/css/iframe.css (added)
+++ hadoop/chukwa/trunk/src/web/hicc/css/iframe.css Mon May 11 20:51:45 2009
@@ -0,0 +1,47 @@
+#statisLegend table {
+	border-collapse: collapse;
+}
+
+#statisLegend th strong {
+	color: #fff;
+}
+
+#statisLegend th {
+        padding-left: 5px;
+        padding-right: 5px;
+	background: #93BC0C;
+	color: #fff;
+	text-align: center;
+	border-left: 1px solid #B6D59A;
+	border-bottom: solid 2px #fff;
+}
+
+#statisLegend tr {
+}
+
+#statisLegend td {
+        padding-left: 5px;
+        padding-right: 5px;
+	border-left: 1px solid #fff;
+	border-bottom: 1px solid #fff;
+}
+
+#statisLegend td.first,th.first {
+	border-left: 0px;
+}
+
+#statisLegend tr.row-a {
+	background: #F8F8F8;
+}
+
+#statisLegend tr.row-b {
+	background: #EFEFEF;		
+}
+
+#statisLegend {
+    font-size: 0.85em;
+}
+
+.small_font {
+    font-size: 0.85em;
+}

Modified: hadoop/chukwa/trunk/src/web/hicc/js/flot.extend.js
URL: http://svn.apache.org/viewvc/hadoop/chukwa/trunk/src/web/hicc/js/flot.extend.js?rev=773687&r1=773686&r2=773687&view=diff
==============================================================================
--- hadoop/chukwa/trunk/src/web/hicc/js/flot.extend.js (original)
+++ hadoop/chukwa/trunk/src/web/hicc/js/flot.extend.js Mon May 11 20:51:45 2009
@@ -1,97 +1,216 @@
 var zoom=false;
+var bound=null;
 
+/*
+ * calculcate the min, max, average of the data set
+ */
+function getStatis(data) {
+  first=true;
+  min=0;
+  max=0;
+  average=0;
+  sum=0;
+  count=0;
+  last=0;
+  for (i=0; i<data.length;i++) {
+    x=data[i][0];
+    y=data[i][1];
+    if (bound!=null) {
+      if ((x >= bound.xmin) && (x <=bound.xmax) &&
+	  (y >= bound.ymin) && (y <=bound.ymax)) {
+	if  (first) {
+	  min=y;
+	  max=y;
+	  first=false;
+	} else {
+	  if (y < min) {
+	    min=y;
+	  }
+	  if (y > max) {
+	    max=y;
+	  }
+	}
+	sum+=y;
+	count+=1;
+	average=sum/count;
+	last=y;
+      }
+    } else {
+      if  (first) {
+	min=y;
+	max=y;
+	first=false;
+      } else {
+	if (y < min) {
+	  min=y;
+	}
+	if (y > max) {
+	  max=y;
+	}
+      }
+      sum+=y;
+      count+=1;
+      average=sum/count;
+      last=y;
+    }
+  }
+  return {min: min, max: max, average: average, sum: sum, count: count, last: last};
+}
+
+/*
+ * format the float number to display the specified precision 
+ */
+function toFixed(value, precision) {
+  var power = Math.pow(10, precision || 0);
+  return String(Math.round(value * power) / power);
+}
+
+/*
+ * create the legend table to display the max, min, average for each data series.
+ */
+function calculateStatis() {
+  var dataTable='';
+  dataTable+='<br/>';
+  dataTable+='<table class="statisTable small_font">';
+  dataTable+='<thead>';
+  dataTable+='<tr><th>Series</th><th>Maximum</th><th>Average</th><th>Minimum</th><th>Last</th></tr>';
 
+  dataTable+='</thead>';
+  for (j = 0; j < _series.length; ++j) {
+    statis = getStatis(_series[j].data);
+    row_class = ((j%2)==0)?'row-a':'row-b';
+    dataTable+='<tr class="'+row_class+'"><td>'+_series[j].label+'</td>';
+    dataTable+='<td align="right">'+toFixed(statis.max,2)+'</td>';
+    dataTable+='<td align="right">'+toFixed(statis.average,2)+'</td>';
+    dataTable+='<td align="right">'+toFixed(statis.min,2)+'</td>';
+    dataTable+='<td align="right">'+toFixed(statis.last,2)+'</td>';
+    dataTable+='</tr>';
+  }
+  dataTable+='</table>';
+  $('#statisLegend').html(dataTable);
+  // $('.statisTable').flexigrid();
+}
+
+/*
+ * setup tooltip
+ */
 function showTooltip(x, y, contents) {
-        if(x>document.body.clientWidth*.6) {
-            x=x-200;
-        }
-        if(y>document.body.clientHeight*.7) {
-            y=y-40;
-        }
-        $('<div id="tooltip">' + contents + '</div>').css( {
-             position: 'absolute',
-             display: 'none',
-             top: y + 5,
-             left: x + 5,
-             border: '2px solid #aaa',
-             padding: '2px',
-             'background-color': '#fff',
+  if(x>document.body.clientWidth*.6) {
+    x=x-200;
+  }
+  if(y>document.body.clientHeight*.7) {
+    y=y-40;
+  }
+  $('<div id="tooltip">' + contents + '</div>').css( {
+    position: 'absolute',
+	display: 'none',
+	top: y + 5,
+	left: x + 5,
+	border: '2px solid #aaa',
+	padding: '2px',
+	'background-color': '#fff',
         }).appendTo("body").fadeIn(200);
 }
 
+/*
+ * calculate the height of the area and set the correct height for the chart, legend and
the statis legend as well.
+ */
 function wholePeriod() {
-        var cw = document.body.clientWidth-30;
-        var ch = height-$("#placeholderTitle").height()-10;
-        document.getElementById('placeholder').style.width=cw+'px';
-        document.getElementById('placeholder').style.height=ch+'px';
-        $.plot($("#placeholder"), _series, _options);
-        setIframeHeight(document.getElementById('boxId').value, height+$("#placeholderTitle").height()+$("#placeholderLegend").height());
+  var cw = document.body.clientWidth-30;
+  var ch = height-$("#placeholderTitle").height()-10;
+  document.getElementById('placeholder').style.width=cw+'px';
+  document.getElementById('placeholder').style.height=ch+'px';
+  $.plot($("#placeholder"), _series, _options);
+  total_height=height+$("#placeholderTitle").height();
+  if (_options.legend.show) {
+    total_height+=$("#placeholderLegend").height();
+    total_height+=$("#statisLegend").height();
+  }
+  setIframeHeight(document.getElementById('boxId').value, total_height);
 };
 
+/*
+ * predefined option of the chart
+ */
 options={
-        points: { show: true },
-        xaxis: {                timeformat: "%y/%O/%D<br/>%H:%M:%S",
-                mode: "time"
-        },
-        selection: { mode: "xy" },
-        grid: {
-                hoverable: false,
-                clickable: true,
-                tickColor: "#C0C0C0",
-                backgroundColor:"#FFFFFF"
-        },
-        legend: { show: false }
+ points: { show: true },
+ xaxis: {                timeformat: "%y/%O/%D<br/>%H:%M:%S",
+			 mode: "time"
+ },
+ selection: { mode: "xy" },
+ grid: {
+  hoverable: false,
+  clickable: true,
+  tickColor: "#C0C0C0",
+  backgroundColor:"#FFFFFF"
+ },
+ legend: { show: false }
 };
 
-        var previousPoint = null;
-	$("#placeholder").bind("plotclick", function (event, pos, item) {
-	    var leftPad = function(n) {
-                n = "" + n;
-	        return n.length == 1 ? "0" + n : n;
-	    };
-            if (item) {
-                if (previousPoint != item.datapoint) {
-                    previousPoint = item.datapoint;
+/*
+ * bind the function for the hightlight the point in the chart.
+ */
+var previousPoint = null;
+$("#placeholder").bind("plotclick", function (event, pos, item) {
+    var leftPad = function(n) {
+      n = "" + n;
+      return n.length == 1 ? "0" + n : n;
+    };
+    if (item) {
+      if (previousPoint != item.datapoint) {
+	previousPoint = item.datapoint;
                
-                    $("#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=leftPad(dnow.getUTCFullYear())+"/"+leftPad(dnow.getUTCMonth()+1)+"/"+dnow.getUTCDate()+"
"+leftPad(dnow.getUTCHours())+":"+leftPad(dnow.getUTCMinutes())+":"+leftPad(dnow.getUTCSeconds());
+	$("#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=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],
-                            y = item.stackValue.toFixed(2);
-                        xLabel = xLabels[x];
-                        showTooltip(item.pageX, item.pageY,
-                                    item.series.label + ": " + y + "<br>" + xLabel);
-                    }
-                 }
-            } else {
-                 $("#tooltip").remove();
-                 previousPoint = null;            
-            }
-         });
-	$("#placeholder").bind("selected", function (event, area) {
-            zoom = true;
-	     extra_options = {};
-	     extra_options.xaxis={ min: area.x1, max: area.x2 };	       
-	     extra_options.yaxis={ min: area.y1, max: area.y2 };
-			plot = $.plot(
-				$("#placeholder"),
-				_series,
-				$.extend(
-					true, 
-					{}, 
-					_options, extra_options
-				)
-			);
-		});
+	  showTooltip(item.pageX, item.pageY,
+		      item.series.label + ": " + y + "<br>Time: " + dita);
+	} else {
+	  var x = item.datapoint[0],
+	    y = item.stackValue.toFixed(2);
+	  xLabel = xLabels[x];
+	  showTooltip(item.pageX, item.pageY,
+		      item.series.label + ": " + y + "<br>" + xLabel);
+	}
+      }
+    } else {
+      $("#tooltip").remove();
+      previousPoint = null;            
+    }
+  });
+
+/*
+ * bind the function for resizing the area inside the chart.
+ */
+$("#placeholder").bind("selected", function (event, area) {
+    zoom = true;
+    extra_options = {};
+    extra_options.xaxis={ min: area.x1, max: area.x2 };	       
+    extra_options.yaxis={ min: area.y1, max: area.y2 };
+    bound = {};
+    bound.xmin=area.x1;
+    bound.xmax=area.x2;
+    bound.ymin=area.y1;
+    bound.ymax=area.y2;
+    calculateStatis();
+    plot = $.plot(
+		  $("#placeholder"),
+		  _series,
+		  $.extend(
+			   true, 
+			   {}, 
+			   _options, extra_options
+			   )
+		  );
+  });
 
-//  addept iframe height to content height
+/*
+ * addept iframe height to content height
+ */
 function getDocHeight(doc) {
   var docHt = 0, sh, oh;
   if (doc.height) docHt = doc.height;
@@ -103,34 +222,40 @@
   return docHt;
 }
 
+/*
+ * set the iframe height to the specified height.
+ */
 function setIframeHeight(ifrm, height) {
   try {
     frame = window.parent.document.getElementById(ifrm);
     innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
     objToResize = (frame.style) ? frame.style: frame;
-     if(height==0) {
-       objToResize.height = innerDoc.body.scrollHeight;
-     } else {
-       objToResize.height = height;
-     }
+    if(height==0) {
+      objToResize.height = innerDoc.body.scrollHeight;
+    } else {
+      objToResize.height = height;
+    }
   } catch(err) {
     window.status = err.message;
   }
 }
 
+/*
+ * refresh the chart widget.
+ */
 function refresh(url, parameters) {
   if(zoom) {
     wholePeriod();
     zoom=false;
   } else {
     if(parameters.indexOf("render=stack")>0) {
-        throw "force iframe refresh";
+      throw "force iframe refresh";
     }
     var dataURL = url+"?"+parameters;
     $.get(dataURL,{format: 'json'}, function(data){
         eval(data);
         wholePeriod();
         document.getElementById('placeholderTitle').innerHTML=chartTitle;
-    });
+      });
   }
 }



Mime
View raw message