You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@chukwa.apache.org by ey...@apache.org on 2009/05/11 22:51:45 UTC
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
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;
- });
+ });
}
}