diff options
author | Scott Ullrich <sullrich@sullrich-MacBookPro.local> | 2009-03-08 18:04:22 -0400 |
---|---|---|
committer | Scott Ullrich <sullrich@sullrich-MacBookPro.local> | 2009-03-08 18:05:55 -0400 |
commit | 7a2154f63719495879401ee55e80f8f4e11ef480 (patch) | |
tree | 76d90d3da9b0fae28c0e2375145464cefd790325 /usr/local/www/widgets | |
parent | 21f32cf4bbb928c24db2321b1936da085abe665d (diff) | |
download | pfsense-7a2154f63719495879401ee55e80f8f4e11ef480.zip pfsense-7a2154f63719495879401ee55e80f8f4e11ef480.tar.gz |
Replace SVG graph with Graphlink Ajax graph that used to be in
HEAD before the Dashboard import.
Diffstat (limited to 'usr/local/www/widgets')
-rw-r--r-- | usr/local/www/widgets/javascript/cpu_graphs.js | 247 | ||||
-rw-r--r-- | usr/local/www/widgets/widgets/cpu_graphs.widget.php | 38 |
2 files changed, 282 insertions, 3 deletions
diff --git a/usr/local/www/widgets/javascript/cpu_graphs.js b/usr/local/www/widgets/javascript/cpu_graphs.js new file mode 100644 index 0000000..0382d3f --- /dev/null +++ b/usr/local/www/widgets/javascript/cpu_graphs.js @@ -0,0 +1,247 @@ +/****************************************************************************** + $Id: graphlink.js,v 1.1 2006/12/21 17:10:25 dberlin Exp $ + + This file is part of the GraphLink software. + GraphLink is distributed under the MIT License. + Copyright (C) 2005-2006 Max Khitrov <max@mxsoft.org> + ******************************************************************************/ + +/***** Global data ************************************************************/ + +var gl_graphCount = 0; // Number of graphs on the current page + +/***** Constants **************************************************************/ + +var GL_START = 0; +var GL_END = 1; +var GL_STATIC = 0; +var GL_DYNAMIC = 1; + +/***** Public functions *******************************************************/ + +/** + * Creates a graph and returns the graph data structure which can later be + * manipulated using the other graph functions. + * + * element_id - DOM element id (should be a DIV) that will contain the graph. + * width - The width of the graph in pixels. + * height - Height of the graph in pixels. + * bar_width - Width of each bar on the graph. This number should divide width + * evenly, or else width will be adjusted to meet this requirement. + * General formula to keep in mind: + * Smaller bar width = more bars = higher CPU usage on client-side. + * + * Returns graph data structure on success, false on error. + */ +function GraphInitialize(element_id, width, height, bar_width) { + // Find the page element which will contain the graph + var owner; + if((owner = $(element_id)) == null) { + alert("GraphLink Error: Element ID '" + element_id + "' not found."); + return false; + } + + // Make sure width is divisible by bar_width + if(width / bar_width != Math.floor(width / bar_width)) + width = Math.floor(width / bar_width) * bar_width; + + var bar_count = width / bar_width; + + // Create the graph data structure + var graph = new Array(); + graph['id'] = gl_graphCount; // ID used to separate elements of one graph from those of another + graph['width'] = width; // Graph width + graph['height'] = height; // Graph height + graph['bar_count'] = bar_count; // Number of bars on the graph + graph['scale_type'] = GL_STATIC; // How the graph is scaled + graph['scale'] = 1; // Multiplier for the bar height + graph['max'] = 0; // Largest value currently on the graph + graph['vmax'] = height; // Virtual graph maximum + graph['spans'] = new Array(bar_count); // References to all the spans for each graph + graph['vals'] = new Array(bar_count); // The height of each bar on the graph, actually it's (graph height - bar height) + gl_graphCount++; + + // Build the graph (x)html + var graph_html = ''; + graph_html += '<div id="GraphLinkData' + graph['id'] + '" class="GraphLinkData">'; + + for(var i = 0; i < bar_count; i++) { + graph['vals'][i] = height; + graph_html += '<span id="GraphLinkBar' + graph['id'] + '_' + i + '" class="GraphLinkBar"></span>'; + } + + graph_html += '</div>'; + owner.innerHTML = graph_html; + graph['element_id'] = $('GraphLinkData' + graph['id']); + + for(i = 0; i < bar_count; i++) { + graph['spans'][i] = $('GraphLinkBar' + graph['id'] + + '_' + i); + graph['spans'][i].style.width = bar_width + 'px'; + graph['spans'][i].style.marginTop = height + 'px'; + } + + return graph; +} + +/** + * Adds a new value to a graph. + * + * graph - Graph object to which to add the new value. + * value - Value to add. + * where - (optional) GL_START (0) or GL_END (1), depending on where you want + * the new value to appear. GL_START will add the value on the left + * of the graph, GL_END will add it on the right (default). + */ +function GraphValue(graph, value, where) { + if(typeof(where) == 'undefined') + where = GL_END; + + var rescale = false; + var lost = 0; + + if(value < 0) + value = 0; + + if(graph['scale_type'] == GL_DYNAMIC && value > graph['max']) + rescale = true; + + if(graph['scale_type'] == GL_STATIC) { + if(value > graph['vmax']) + value = graph['vmax']; + value = Math.round(value * graph['scale']); + } + + if(where == GL_START) { + graph['vals'].unshift(graph['height'] - value); + lost = graph['vals'].pop(); + } + else { + graph['vals'].push(graph['height'] - value); + lost = graph['vals'].shift(); + } + + if(graph['scale_type'] == GL_DYNAMIC && (graph['height'] - lost) == graph['max']) + rescale = true; + + if(rescale) + GraphAdjustScale(graph) + + GraphDraw(graph); +} + +/** + * Sets a virtual maximum for the graph allowing you to have non-scaled graphs + * that can show a value greater then the graph height. This function will + * automatically set the graph to a static scale mode, meaning that no values + * above the maximum will be permitted. If you need to have a graph with no + * pre-defined maximum, make it dynamic. Also note that if you set a vmax on a + * graph that has data larger than vmax, that data will be reduced. + * + * graph - Graph object for which to set virtual max. + * vmax - The virtual maximum value for the graph. + */ +function GraphSetVMax(graph, vmax) { + graph['scale_type'] = GL_STATIC; + graph['vmax'] = vmax; + + GraphAdjustScale(graph); + GraphDraw(graph); +} + +/** + * This function instructs the graph to be scaled according to what the maximum + * value is. That value is used as the graph maximum and is reevaluated whenever + * a new value is added, or the current maximum is removed. Dynamic scaling is a + * good way of showing data for which you don't know what the maximum will be, + * but it also is a bit more resource-intensive then statically scaled graphs. + * + * graph - Graph object for which to enable dynamic scaling. + */ +function GraphDynamicScale(graph) { + graph['scale_type'] = GL_DYNAMIC; + + GraphAdjustScale(graph); + GraphDraw(graph); +} + +/***** Private functions ******************************************************/ + +/** + * Checks if the current scale of the graph is still valid, or needs to be + * adjusted. + * + * graph - Graph object for which to check the scale. + */ +function GraphAdjustScale(graph) { + var limit = graph['bar_count']; + var new_max = 0; + var new_scale = 0; + var val = 0; + + if(graph['scale_type'] == GL_STATIC) { + new_max = graph['vmax']; + new_scale = graph['height'] / new_max; + + if(new_scale == graph['scale']) + return; + } + + for(var i = 0; i < limit; i++) { + if(graph['scale_type'] == GL_STATIC) { + val = (graph['height'] - graph['vals'][i]) * graph['scale']; + val = val * new_scale; + + if(val > new_max) + val = new_max; + + graph['vals'][i] = graph['height'] - Math.round(val * new_scale); + + } + else if((graph['height'] - graph['vals'][i]) > new_max) { + new_max = graph['height'] - graph['vals'][i]; + } + } + + + if(graph['scale_type'] == GL_STATIC) { + graph['scale'] = new_scale; + } + else { + if(new_max == 0) + graph['scale'] = 1; + else + graph['scale'] = graph['height'] / new_max; + + graph['max'] = new_max; + } +} + +/** + * Redraws the graph on the screen. + * + * graph - Graph object which needs to be re-drawn. + */ +function GraphDraw(graph) { + var count = graph['bar_count']; + + if(graph['scale_type'] == GL_STATIC) + var getMargin = function(i) { + return graph['vals'][i] + 'px'; + } + else + var getMargin = function(i) { + var h = graph['height']; + var s = graph['scale']; + var v = graph['vals'][i]; + return (h - Math.round((h - v) * s)) + 'px'; + } + + Element.hide(graph['spans'][count - 1]); + + for(var i = 0; i < count; i++) + graph['spans'][i].style.marginTop = getMargin(i); + + Effect.Appear(graph['spans'][count - 1], { duration: 0.5 }); +} + diff --git a/usr/local/www/widgets/widgets/cpu_graphs.widget.php b/usr/local/www/widgets/widgets/cpu_graphs.widget.php index f9dcfca..8e9004f 100644 --- a/usr/local/www/widgets/widgets/cpu_graphs.widget.php +++ b/usr/local/www/widgets/widgets/cpu_graphs.widget.php @@ -35,7 +35,39 @@ require_once("guiconfig.inc"); require_once("pfsense-utils.inc"); require_once("functions.inc"); ?> +<link href="/themes/nervecenter/graphlink.css" rel="stylesheet" type="text/css" /> +<script src="/widgets/javascript/cpu_graphs.js" type="text/javascript"></script> +<script type="text/javascript"> + /* initialize the graph */ + // --- Global Data --- // + var graphs; // An array that stores all created graphs + var graph_dir; // The direction in which each graph moves + var last_val; // An array of values for each graph + var last_val_span; // References to Last Value span tags for each graph + var pause; // Controls execution + + var ajaxStarted = false; + + /** + * Launches the GraphLink demo. It initializes the graph along with the ajax + * engine and starts the main execution loop. + */ + graph = new Array(); + graph_dir = new Array(); + last_val = new Array(); + last_val_span = new Array(); +</script> +<div class="GraphLink" id="GraphOutput"></div> +<script language="javascript" type="text/javascript"> + + // Graph 1 + graph[0] = GraphInitialize('GraphOutput', 200, 50, 2); + graph_dir[0] = GL_END; + last_val[0] = Math.floor(Math.random() * 50); + last_val_span[0] = document.getElementById('LastValue0'); + + //GraphSetVMax(graph[0], 100); + //GraphDynamicScale(graph[0]); + +</script> -<div style="float:left;width:49%"> -<embed id="graph" src="graph_cpu.php" type="image/svg+xml" width="356" height="150" pluginspage="http://www.adobe.com/svg/viewer/install/auto" /> -</div>
\ No newline at end of file |