gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'atul-QA_3_5-jqplot' into QA_3_5

Browse Source
This commit is contained in:
Marc Delisle 2012-08-20 12:42:15 -04:00
commit 0fa11e0e67
10 changed files with 867 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

607
js/jqplot/jquery.jqplot.js
View File

File diff suppressed because it is too large Load Diff

3
js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.js
View File

@ -2,7 +2,8 @@
* jqPlot
* Pure JavaScript plotting plugin using jQuery
*
* Version: 1.0.0b2_r1012
* Version: 1.0.2
* Revision: 1108
*
* Copyright (c) 2009-2011 Chris Leonello
* jqPlot is currently available for use in all personal or commercial projects

3
js/jqplot/plugins/jqplot.canvasTextRenderer.js
View File

@ -2,7 +2,8 @@
* jqPlot
* Pure JavaScript plotting plugin using jQuery
*
* Version: 1.0.0b2_r1012
* Version: 1.0.2
* Revision: 1108
*
* Copyright (c) 2009-2011 Chris Leonello
* jqPlot is currently available for use in all personal or commercial projects

33
js/jqplot/plugins/jqplot.cursor.js
View File

@ -2,7 +2,8 @@
* jqPlot
* Pure JavaScript plotting plugin using jQuery
*
* Version: 1.0.0b2_r1012
* Version: 1.0.2
* Revision: 1108
*
* Copyright (c) 2009-2011 Chris Leonello
* jqPlot is currently available for use in all personal or commercial projects
@ -480,11 +481,14 @@
s += '<br />';
}
if (c.useAxesFormatters) {
var xf = plot.axes[g[0]]._ticks[0].formatter;
var yf = plot.axes[g[1]]._ticks[0].formatter;
var xfstr = plot.axes[g[0]]._ticks[0].formatString;
var yfstr = plot.axes[g[1]]._ticks[0].formatString;
s += xf(xfstr, datapos[g[0]]) + ', '+ yf(yfstr, datapos[g[1]]);
for (var j=0; j<g.length; j++) {
if (j) {
s += ', ';
}
var af = plot.axes[g[j]]._ticks[0].formatter;
var afstr = plot.axes[g[j]]._ticks[0].formatString;
s += af(afstr, datapos[g[j]]);
}
}
else {
s += $.jqplot.sprintf(c.tooltipFormatString, datapos[g[0]], datapos[g[1]]);
@ -752,6 +756,7 @@
if (c.show) {
$(ev.target).css('cursor', c.previousCursor);
if (c.showTooltip && !(c._zoom.zooming && c.showTooltipOutsideZoom && !c.constrainOutsideZoom)) {
c._tooltipElem.empty();
c._tooltipElem.hide();
}
if (c.zoom) {
@ -845,6 +850,7 @@
var c = plot.plugins.cursor;
// don't do anything if not on grid.
if (c.show && c.zoom && c._zoom.started && !c.zoomTarget) {
ev.preventDefault();
var ctx = c.zoomCanvas._ctx;
var positions = getEventPosition(ev);
var gridpos = positions.gridPos;
@ -886,7 +892,11 @@
function handleMouseDown(ev, gridpos, datapos, neighbor, plot) {
var c = plot.plugins.cursor;
$(document).one('mouseup.jqplot_cursor', {plot:plot}, handleMouseUp);
if(plot.plugins.mobile){
$(document).one('vmouseup.jqplot_cursor', {plot:plot}, handleMouseUp);
} else {
$(document).one('mouseup.jqplot_cursor', {plot:plot}, handleMouseUp);
}
var axes = plot.axes;
if (document.onselectstart != undefined) {
c._oldHandlers.onselectstart = document.onselectstart;
@ -920,7 +930,12 @@
// get zoom starting position.
c._zoom.axes.start[ax] = datapos[ax];
}
$(document).bind('mousemove.jqplotCursor', {plot:plot}, handleZoomMove);
if(plot.plugins.mobile){
$(document).bind('vmousemove.jqplotCursor', {plot:plot}, handleZoomMove);
} else {
$(document).bind('mousemove.jqplotCursor', {plot:plot}, handleZoomMove);
}
}
}
@ -1090,4 +1105,4 @@
return this._elem;
};
})(jQuery);
})(jQuery);

74
js/jqplot/plugins/jqplot.dateAxisRenderer.js
View File

@ -2,7 +2,8 @@
* jqPlot
* Pure JavaScript plotting plugin using jQuery
*
* Version: 1.0.0b2_r1012
* Version: 1.0.2
* Revision: 1108
*
* Copyright (c) 2009-2011 Chris Leonello
* jqPlot is currently available for use in all personal or commercial projects
@ -334,6 +335,28 @@
var threshold = 30;
var insetMult = 1;
var daTickInterval = null;
// if user specified a tick interval, convert to usable.
if (this.tickInterval != null)
{
// if interval is a number or can be converted to one, use it.
// Assume it is in SECONDS!!!
if (Number(this.tickInterval)) {
daTickInterval = [Number(this.tickInterval), 'seconds'];
}
// else, parse out something we can build from.
else if (typeof this.tickInterval == "string") {
var parts = this.tickInterval.split(' ');
if (parts.length == 1) {
daTickInterval = [1, parts[0]];
}
else if (parts.length == 2) {
daTickInterval = [parts[0], parts[1]];
}
}
}
var tickInterval = this.tickInterval;
// if we already have ticks, use them.
@ -400,9 +423,43 @@
// We don't have any ticks yet, let's make some!
////////
// special case when there is only one point, make three tick marks to center the point
else if (this.min == null && this.max == null && db.min == db.max)
{
var onePointOpts = $.extend(true, {}, this.tickOptions, {name: this.name, value: null});
var delta = 300000;
this.min = db.min - delta;
this.max = db.max + delta;
this.numberTicks = 3;
for(var i=this.min;i<=this.max;i+= delta)
{
onePointOpts.value = i;
var t = new this.tickRenderer(onePointOpts);
if (this._overrideFormatString && this._autoFormatString != '') {
t.formatString = this._autoFormatString;
}
t.showLabel = false;
t.showMark = false;
this._ticks.push(t);
}
if(this.showTicks) {
this._ticks[1].showLabel = true;
}
if(this.showTickMarks) {
this._ticks[1].showTickMarks = true;
}
}
// if user specified min and max are null, we set those to make best ticks.
else if (this.min == null && this.max == null) {
var opts = $.extend(true, {}, this.tickOptions, {name: this.name, value: null});
// want to find a nice interval
var nttarget,
titarget;
@ -429,7 +486,7 @@
// tickInterval will be used before numberTicks, that is if
// both are specified, numberTicks will be ignored.
else if (this.tickInterval) {
titarget = this.tickInterval;
titarget = new $.jsDate(0).add(daTickInterval[0], daTickInterval[1]).getTime();
}
// if numberTicks specified, try to honor it.
@ -445,9 +502,10 @@
var tempti = ret[0];
this._autoFormatString = ret[1];
min = Math.floor(min/tempti) * tempti;
//min = Math.floor(min/tempti) * tempti;
min = new $.jsDate(min);
min = min.getTime() + min.getUtcOffset();
//min = min.getTime() + min.getUtcOffset();
min = Math.floor((min.getTime() - min.getUtcOffset())/tempti) * tempti + min.getUtcOffset();
nttarget = Math.ceil((max - min) / tempti) + 1;
this.min = min;
@ -605,7 +663,7 @@
this.tickInterval = null;
}
// if user specified a tick interval, convert to usable.
/* // if user specified a tick interval, convert to usable.
if (this.tickInterval != null)
{
// if interval is a number or can be converted to one, use it.
@ -623,8 +681,12 @@
this.daTickInterval = [parts[0], parts[1]];
}
}
}
}*/
if (this.tickInterval != null && daTickInterval != null) {
this.daTickInterval = daTickInterval;
}
// if min and max are same, space them out a bit
if (min == max) {
var adj = 24*60*60*500; // 1/2 day

13
js/jqplot/plugins/jqplot.highlighter.js
View File

@ -2,7 +2,8 @@
* jqPlot
* Pure JavaScript plotting plugin using jQuery
*
* Version: 1.0.0b2_r1012
* Version: 1.0.2
* Revision: 1108
*
* Copyright (c) 2009-2011 Chris Leonello
* jqPlot is currently available for use in all personal or commercial projects
@ -400,6 +401,9 @@
var c = plot.plugins.cursor;
if (hl.show) {
if (neighbor == null && hl.isHighlighting) {
var evt = jQuery.Event('jqplotHighlighterUnhighlight');
plot.target.trigger(evt);
var ctx = hl.highlightCanvas._ctx;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
if (hl.fadeTooltip) {
@ -416,6 +420,13 @@
ctx = null;
}
else if (neighbor != null && plot.series[neighbor.seriesIndex].showHighlight && !hl.isHighlighting) {
var evt = jQuery.Event('jqplotHighlighterHighlight');
evt.which = ev.which;
evt.pageX = ev.pageX;
evt.pageY = ev.pageY;
var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data, plot];
plot.target.trigger(evt, ins);
hl.isHighlighting = true;
hl.currentNeighbor = neighbor;
if (hl.showMarker) {

7
js/jqplot/plugins/jqplot.pieRenderer.js
View File

@ -2,7 +2,8 @@
* jqPlot
* Pure JavaScript plotting plugin using jQuery
*
* Version: 1.0.0b2_r1012
* Version: 1.0.2
* Revision: 1108
*
* Copyright (c) 2009-2011 Chris Leonello
* jqPlot is currently available for use in all personal or commercial projects
@ -800,6 +801,7 @@
plot.target.trigger(evt1, ins);
if (plot.series[ins[0]].highlightMouseOver && !(ins[0] == plot.plugins.pieRenderer.highlightedSeriesIndex && ins[1] == plot.series[ins[0]]._highlightedPoint)) {
var evt = jQuery.Event('jqplotDataHighlight');
evt.which = ev.which;
evt.pageX = ev.pageX;
evt.pageY = ev.pageY;
plot.target.trigger(evt, ins);
@ -816,6 +818,7 @@
var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
if (plot.series[ins[0]].highlightMouseDown && !(ins[0] == plot.plugins.pieRenderer.highlightedSeriesIndex && ins[1] == plot.series[ins[0]]._highlightedPoint)) {
var evt = jQuery.Event('jqplotDataHighlight');
evt.which = ev.which;
evt.pageX = ev.pageX;
evt.pageY = ev.pageY;
plot.target.trigger(evt, ins);
@ -838,6 +841,7 @@
if (neighbor) {
var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
var evt = jQuery.Event('jqplotDataClick');
evt.which = ev.which;
evt.pageX = ev.pageX;
evt.pageY = ev.pageY;
plot.target.trigger(evt, ins);
@ -852,6 +856,7 @@
unhighlight(plot);
}
var evt = jQuery.Event('jqplotDataRightClick');
evt.which = ev.which;
evt.pageX = ev.pageX;
evt.pageY = ev.pageY;
plot.target.trigger(evt, ins);

280
js/server_status.js
View File

@ -119,6 +119,8 @@ $(function() {
var tabStatus = new Object();
// Holds the current chart instances for each tab
var tabChart = new Object();
// Holds current live charts' timeouts
var chart_replot_timers = new Object();
/*** Table sort tooltip ***/
PMA_createqTip($('table.sortable thead th'), PMA_messages['strSortHint']);
@ -146,7 +148,13 @@ $(function() {
if (!$(ui.tab.hash).data('init-done')) {
initTab($(ui.tab.hash), null);
}
// Replot on tab switching
if (ui.tab.hash == '#statustabs_traffic' && tabChart['statustabs_traffic'] != null) {
recursiveTimer($('#statustabs_traffic'), "traffic");
}
else if (ui.tab.hash == '#statustabs_queries' && tabChart['statustabs_queries'] != null) {
recursiveTimer($('#statustabs_queries'), "queries");
}
// Load Server status monitor
if (ui.tab.hash == '#statustabs_charting' && ! monitorLoaded) {
$('div#statustabs_charting').append( //PMA_messages['strLoadingMonitor'] + ' ' +
@ -188,9 +196,21 @@ $(function() {
});
// Handles refresh rate changing
$('.buttonlinks select').change(function() {
var chart = tabChart[$(this).parents('div.ui-tabs-panel').attr('id')];
$('.buttonlinks .refreshRate').change(function() {
var $tab = $(this).parents('div.ui-tabs-panel');
clearTimeout(chart_replot_timers[$tab.attr('id')]);
var tabstat = tabStatus[$tab.attr('id')];
if(tabstat == 'livequeries') {
recursiveTimer($tab, 'queries');
} else if(tabstat == 'livetraffic') {
recursiveTimer($tab, 'traffic');
} else if(tabstat == 'liveconnections') {
recursiveTimer($tab, 'proc');
}
var chart = tabChart[$(this).parents('div.ui-tabs-panel').attr('id')];
// Clear current timeout and set timeout with the new refresh rate
clearTimeout(chart_activeTimeouts[chart.options.chart.renderTo]);
if (chart.options.realtime.postRequest) {
@ -233,6 +253,11 @@ $(function() {
/** Realtime charting of variables **/
// variables to hold previous y data value to calculate difference
var previous_y_line1 = new Object();
var previous_y_line2 = new Object();
var series = new Object();
// Live traffic charting
$('.buttonlinks a.livetrafficLink').click(function() {
// ui-tabs-panel class is added by the jquery tabs feature
@ -240,34 +265,11 @@ $(function() {
var tabstat = tabStatus[$tab.attr('id')];
if (tabstat == 'static' || tabstat == 'liveconnections') {
var settings = {
series: [
{ name: PMA_messages['strChartKBSent'], data: [] },
{ name: PMA_messages['strChartKBReceived'], data: [] }
],
title: { text: PMA_messages['strChartServerTraffic'] },
realtime: { url: 'server_status.php?' + url_query,
type: 'traffic',
callback: function(chartObj, curVal, lastVal, numLoadedPoints) {
if (lastVal == null) {
return;
}
chartObj.series[0].addPoint(
{ x: curVal.x, y: (curVal.y_sent - lastVal.y_sent) / 1024 },
false,
numLoadedPoints >= chartObj.options.realtime.numMaxPoints
);
chartObj.series[1].addPoint(
{ x: curVal.x, y: (curVal.y_received - lastVal.y_received) / 1024 },
true,
numLoadedPoints >= chartObj.options.realtime.numMaxPoints
);
},
error: function() { serverResponseError(); }
}
}
setupLiveChart($tab, this, settings);
setupLiveChart($tab, this, getSettings('traffic'));
var set_previous = getCurrentDataSet($tab, 'traffic');
tabChart[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('traffic'));
recursiveTimer($tab, 'traffic');
if (tabstat == 'liveconnections') {
$tab.find('.buttonlinks a.liveconnectionsLink').html(PMA_messages['strLiveConnChart']);
}
@ -286,34 +288,11 @@ $(function() {
var tabstat = tabStatus[$tab.attr('id')];
if (tabstat == 'static' || tabstat == 'livetraffic') {
var settings = {
series: [
{ name: PMA_messages['strChartConnections'], data: [] },
{ name: PMA_messages['strChartProcesses'], data: [] }
],
title: { text: PMA_messages['strChartConnectionsTitle'] },
realtime: { url: 'server_status.php?' + url_query,
type: 'proc',
callback: function(chartObj, curVal, lastVal, numLoadedPoints) {
if (lastVal == null) {
return;
}
chartObj.series[0].addPoint(
{ x: curVal.x, y: curVal.y_conn - lastVal.y_conn },
false,
numLoadedPoints >= chartObj.options.realtime.numMaxPoints
);
chartObj.series[1].addPoint(
{ x: curVal.x, y: curVal.y_proc },
true,
numLoadedPoints >= chartObj.options.realtime.numMaxPoints
);
},
error: function() { serverResponseError(); }
}
};
setupLiveChart($tab, this, settings);
setupLiveChart($tab, this, getSettings('proc'));
var set_previous = getCurrentDataSet($tab, 'proc');
tabChart[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[[0,0]],[[0,0]]], getSettings('proc'));
recursiveTimer($tab, 'proc');
if (tabstat == 'livetraffic') {
$tab.find('.buttonlinks a.livetrafficLink').html(PMA_messages['strLiveTrafficChart']);
}
@ -329,45 +308,162 @@ $(function() {
// Live query statistics
$('.buttonlinks a.livequeriesLink').click(function() {
var $tab = $(this).parents('div.ui-tabs-panel');
var settings = null;
if (tabStatus[$tab.attr('id')] == 'static') {
settings = {
series: [ { name: PMA_messages['strChartIssuedQueries'], data: [] } ],
title: { text: PMA_messages['strChartIssuedQueriesTitle'] },
tooltip: { formatter: function() { return this.point.name; } },
realtime: { url: 'server_status.php?' + url_query,
type: 'queries',
callback: function(chartObj, curVal, lastVal, numLoadedPoints) {
if (lastVal == null) { return; }
chartObj.series[0].addPoint({
x: curVal.x,
y: curVal.y - lastVal.y,
name: sortedQueriesPointInfo(curVal, lastVal)
},
true,
numLoadedPoints >= chartObj.options.realtime.numMaxPoints
);
},
error: function() { serverResponseError(); }
}
};
setupLiveChart($tab, this, getSettings('queries'));
var set_previous = getCurrentDataSet($tab, 'queries');
tabChart[$tab.attr('id')] = $.jqplot($tab.attr('id') + '_chart_cnt', [[0,0]], getSettings('queries'));
recursiveTimer($tab, 'queries');
tabStatus[$tab.attr('id')] = 'livequeries';
} else {
$(this).html(PMA_messages['strLiveQueryChart']);
setupLiveChart($tab, this, null);
}
setupLiveChart($tab, this, settings);
tabStatus[$tab.attr('id')] = 'livequeries';
return false;
});
function recursiveTimer($tab, type) {
replotLiveChart($tab, type);
chart_replot_timers[$tab.attr('id')] = setTimeout(function() {
recursiveTimer($tab, type) }, ($('.refreshRate :selected', $tab).val() * 1000));
}
function getCurrentDataSet($tab, type) {
var ret = null;
var line1 = null;
var line2 = null;
var retval = null;
$.ajax({
async: false,
url: 'server_status.php',
type: 'post',
data: {
'token' : window.parent.token,
'ajax_request' : true,
'chart_data' : true,
'type' : type
},
dataType: 'json',
success: function(data) {
ret = data;
}
});
// get data based on chart type
if(type == 'proc') {
line1 = [ret.x, ret.y_conn - previous_y_line1[$tab.attr('id')]];
line2 = [ret.x, ret.y_proc];
previous_y_line1[$tab.attr('id')] = ret.y_conn;
}
else if(type == 'queries') {
line1 = [ret.x, ret.y-previous_y_line1[$tab.attr('id')]];
previous_y_line1[$tab.attr('id')] = ret.y;
}
else if(type == 'traffic') {
ret.y_sent = ret.y_sent/1024;
ret.y_received = ret.y_received/1024;
line1 = [ret.x, ret.y_sent - previous_y_line1[$tab.attr('id')]];
line2 = [ret.x, ret.y_received - previous_y_line2[$tab.attr('id')]];
previous_y_line1[$tab.attr('id')] = ret.y_sent;
previous_y_line2[$tab.attr('id')] = ret.y_received;
}
retval = [line1, line2];
return retval;
}
function getSettings(type) {
var settings = {
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H:%M:%S'
}
},
yaxis: {
autoscale:true,
label: PMA_messages['strTotalCount'],
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
}
},
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
legend: {
show: true,
location: 's', // compass direction, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // pixel offset of the legend box from the x (or x2) axis.
yoffset: 12, // pixel offset of the legend box from the y (or y2) axis.
}
};
var title_message;
var x_legend = new Array();
if(type == 'proc') {
title_message = PMA_messages['strChartConnectionsTitle'];
x_legend[0] = PMA_messages['strChartConnections'];
x_legend[1] = PMA_messages['strChartProcesses'];
settings.series = [ {label: x_legend[0]}, {label: x_legend[1]} ];
}
else if(type == 'queries') {
title_message = PMA_messages['strChartIssuedQueriesTitle'];
x_legend[0] = PMA_messages['strChartIssuedQueries'];
settings.series = [ {label: x_legend[0]} ];
}
else if(type == 'traffic') {
title_message = PMA_messages['strChartServerTraffic'];
x_legend[0] = PMA_messages['strChartKBSent'];
x_legend[1] = PMA_messages['strChartKBReceived'];
settings.series = [ {label: x_legend[0]}, {label: x_legend[1]} ];
}
settings.title = title_message;
return settings;
}
function replotLiveChart($tab, type) {
var data_set = getCurrentDataSet($tab, type);
if(type == 'proc' || type == 'traffic') {
series[$tab.attr('id')][0].push(data_set[0]);
series[$tab.attr('id')][1].push(data_set[1]);
// update data set
tabChart[$tab.attr('id')].series[0].data = series[$tab.attr('id')][0];
tabChart[$tab.attr('id')].series[1].data = series[$tab.attr('id')][1];
}
else if(type == 'queries') {
// there is just one line to be plotted
series[$tab.attr('id')][0].push(data_set[0]);
// update data set
tabChart[$tab.attr('id')].series[0].data = series[$tab.attr('id')][0];
}
tabChart[$tab.attr('id')].resetAxesScale();
var current_time = new Date().getTime();
var data_points = $('.dataPointsNumber :selected', $tab).val();
var refresh_rate = $('.refreshRate :selected', $tab).val() * 1000;
// Min X would be decided based on refresh rate and number of data points
var minX = current_time - (refresh_rate * data_points);
var interval = (((current_time - minX)/data_points) / 1000);
interval = (data_points > 20) ? (((current_time - minX)/20) / 1000) : interval;
// update chart options
tabChart[$tab.attr('id')]['axes']['xaxis']['max'] = current_time;
tabChart[$tab.attr('id')]['axes']['xaxis']['min'] = minX;
tabChart[$tab.attr('id')]['axes']['xaxis']['tickInterval'] = interval + " seconds";
// replot
tabChart[$tab.attr('id')].replot();
}
function setupLiveChart($tab, link, settings) {
if (settings != null) {
// Loading a chart with existing chart => remove old chart first
if (tabStatus[$tab.attr('id')] != 'static') {
clearTimeout(chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"]);
chart_activeTimeouts[$tab.attr('id') + "_chart_cnt"] = null;
tabChart[$tab.attr('id')].destroy();
delete tabChart[$tab.attr('id')];
// Also reset the select list
$tab.find('.buttonlinks select').get(0).selectedIndex = 2;
}
@ -375,9 +471,11 @@ $(function() {
if (! settings.chart) settings.chart = {};
settings.chart.renderTo = $tab.attr('id') + "_chart_cnt";
$tab.find('.tabInnerContent')
.hide()
.after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
if($('#' + $tab.attr('id') + '_chart_cnt').length == 0) {
$tab.find('.tabInnerContent')
.hide()
.after('<div class="liveChart" id="' + $tab.attr('id') + '_chart_cnt"></div>');
}
tabChart[$tab.attr('id')] = PMA_createChart(settings);
$(link).html(PMA_messages['strStaticData']);
$tab.find('.buttonlinks a.tabRefresh').hide();
@ -388,11 +486,17 @@ $(function() {
$tab.find('.tabInnerContent').show();
$tab.find('div#' + $tab.attr('id') + '_chart_cnt').remove();
tabStatus[$tab.attr('id')] = 'static';
tabChart[$tab.attr('id')].destroy();
delete tabChart[$tab.attr('id')];
$tab.find('.buttonlinks a.tabRefresh').show();
$tab.find('.buttonlinks select').get(0).selectedIndex = 2;
$tab.find('.buttonlinks .refreshList').hide();
}
clearTimeout(chart_replot_timers[$tab.attr('id')]);
previous_y_line1[$tab.attr('id')] = 0;
previous_y_line2[$tab.attr('id')] = 0;
series[$tab.attr('id')] = new Array();
series[$tab.attr('id')][0] = new Array();
series[$tab.attr('id')][1] = new Array();
}
/* 3 Filtering functions */

39
js/server_status_monitor.js
View File

@ -1074,6 +1074,27 @@ $(function() {
$.extend(true, settings, chartObj.settings);
}
var settings1 = {
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H:%M:%S'
}
},
yaxis: {
autoscale:true,
label: PMA_messages['strTotalCount'],
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
}
},
seriesDefaults: {
rendererOptions: {
smooth: true
}
}
};
if ($('#' + settings.chart.renderTo).length == 0) {
var numCharts = $('table#chartGrid .monitorChart').length;
@ -1084,7 +1105,8 @@ $(function() {
$('table#chartGrid tr:last').append('<td><div class="ui-state-default monitorChart" id="' + settings.chart.renderTo + '"></div></td>');
}
chartObj.chart = PMA_createChart(settings);
//chartObj.chart = PMA_createChart(settings);
chartObj.chart = $.jqplot(settings.chart.renderTo, [[0,0]], settings1);
chartObj.numPoints = 0;
if (initialize != true) {
@ -1217,8 +1239,7 @@ $(function() {
runtime.xmax += diff;
}
elem.chart.xAxis[0].setExtremes(runtime.xmin, runtime.xmax, false);
//elem.chart.xAxis[0].setExtremes(runtime.xmin, runtime.xmax, false);
/* Calculate y value */
// If transform function given, use it
@ -1249,19 +1270,25 @@ $(function() {
// Set y value, if defined
if (value != undefined) {
elem.chart.series[j].addPoint(
/*elem.chart.series[j].addPoint(
{ x: chartData.x, y: value },
false,
elem.numPoints >= runtime.gridMaxPoints
);
);*/
elem.chart.series[0].data.push([chartData.x, value]);
}
}
// update chart options
var interval = (((runtime.xmax - runtime.xmin)/runtime.gridMaxPoints) / 1000);
elem.chart['axes']['xaxis']['max'] = runtime.xmax;
elem.chart['axes']['xaxis']['min'] = runtime.xmin;
elem.chart['axes']['xaxis']['tickInterval'] = interval + " seconds";
i++;
runtime.charts[orderKey].numPoints++;
if (runtime.redrawCharts) {
elem.chart.redraw();
elem.chart.replot();
}
});

31
server_status.php
View File

@ -433,6 +433,12 @@ $GLOBALS['js_include'][] = 'canvg/canvg.js';
// for profiling chart
$GLOBALS['js_include'][] = 'jqplot/jquery.jqplot.js';
$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.pieRenderer.js';
$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.canvasTextRenderer.js';
$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.canvasAxisLabelRenderer.js';
$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.dateAxisRenderer.js';
$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.highlighter.js';
$GLOBALS['js_include'][] = 'jqplot/plugins/jqplot.cursor.js';
$GLOBALS['js_include'][] = 'date.js';
/**
* flush status variables if requested
@ -797,6 +803,10 @@ echo __('Runtime Information');
<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
<?php echo __('Refresh'); ?>
</a>
<span class="refreshList" style="display:none;">
<label for="id_trafficChartDataPointsList"><?php echo __('Number of Data Points: '); ?></label>
<?php echo getDataPointsNumberList('trafficChartDataPoints'); ?>
</span>
<span class="refreshList" style="display:none;">
<label for="id_trafficChartRefresh"><?php echo __('Refresh rate: '); ?></label>
<?php refreshList('trafficChartRefresh'); ?>
@ -819,6 +829,10 @@ echo __('Runtime Information');
<img src="<?php echo $GLOBALS['pmaThemeImage'];?>ajax_clock_small.gif" alt="ajax clock" style="display: none;" />
<?php echo __('Refresh'); ?>
</a>
<span class="refreshList" style="display:none;">
<label for="id_queryChartDataPointsList"><?php echo __('Number of Data Points: '); ?></label>
<?php echo getDataPointsNumberList('queryChartDataPoints'); ?>
</span>
<span class="refreshList" style="display:none;">
<label for="id_queryChartRefresh"><?php echo __('Refresh rate: '); ?></label>
<?php refreshList('queryChartRefresh'); ?>
@ -1771,7 +1785,7 @@ function printMonitor()
function refreshList($name, $defaultRate=5, $refreshRates=Array(1, 2, 5, 10, 20, 40, 60, 120, 300, 600))
{
?>
<select name="<?php echo $name; ?>" id="id_<?php echo $name; ?>">
<select name="<?php echo $name; ?>" id="id_<?php echo $name; ?>" class="refreshRate">
<?php
foreach ($refreshRates as $rate) {
$selected = ($rate == $defaultRate)?' selected="selected"':'';
@ -1787,6 +1801,21 @@ function refreshList($name, $defaultRate=5, $refreshRates=Array(1, 2, 5, 10, 20,
<?php
}
/* Builds a <select> list for number of data points to be displayed */
function getDataPointsNumberList($name, $defaultValue=12, $values=Array(8, 10, 12, 15, 20, 25, 30, 40))
{
$html_output = '<select name="' . $name . '" id="id_' . $name . '" class="dataPointsNumber">';
foreach ($values as $number) {
$selected = ($number == $defaultValue)?' selected="selected"':'';
$html_output .= '<option value="' . $number . '"' . $selected . '>'
. sprintf(_ngettext('%d second', '%d points', $number), $number)
. '</option>';
}
$html_output .= '</select>';
return $html_output;
}
/**
* cleanup of some deprecated values
*