From cb2308b2d0ad81c07a91f3c526bdb23939a176a2 Mon Sep 17 00:00:00 2001
From: zarzuelo <noreply@pandorafms.org>
Date: Wed, 7 Mar 2012 15:39:50 +0000
Subject: [PATCH] 2012-03-07  Sergio Martin <sergio.martin@artica.es>

	* include/graphs/functions_flot.php
	include/graphs/flot/pandora.flot.js
	include/graphs/fgraph.php
	include/functions_custom_graphs.php
	godmode/reporting/graph_builder.main.php: Improve the graphs menu adjusting
	the graph menu relatively to the parent layer



git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@5710 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f
---
 pandora_console/ChangeLog                     |  9 +++++
 .../godmode/reporting/graph_builder.main.php  |  6 +--
 .../include/functions_custom_graphs.php       | 26 +++++++++++++
 pandora_console/include/graphs/fgraph.php     |  4 +-
 .../include/graphs/flot/pandora.flot.js       | 39 +++++++++++++++----
 .../include/graphs/functions_flot.php         | 11 ++++--
 6 files changed, 77 insertions(+), 18 deletions(-)

diff --git a/pandora_console/ChangeLog b/pandora_console/ChangeLog
index 0b2a24126f..64c86e086f 100644
--- a/pandora_console/ChangeLog
+++ b/pandora_console/ChangeLog
@@ -1,3 +1,12 @@
+2012-03-07  Sergio Martin <sergio.martin@artica.es>
+
+	* include/graphs/functions_flot.php
+	include/graphs/flot/pandora.flot.js
+	include/graphs/fgraph.php
+	include/functions_custom_graphs.php
+	godmode/reporting/graph_builder.main.php: Improve the graphs menu adjusting
+	the graph menu relatively to the parent layer
+
 2012-03-07 Miguel de Dios  <miguel.dedios@artica.es>
 
 	* include/javascript/jquery.mousewheel.min.js: removed old version this
diff --git a/pandora_console/godmode/reporting/graph_builder.main.php b/pandora_console/godmode/reporting/graph_builder.main.php
index 975fb7fde3..e34d74230d 100644
--- a/pandora_console/godmode/reporting/graph_builder.main.php
+++ b/pandora_console/godmode/reporting/graph_builder.main.php
@@ -125,11 +125,7 @@ echo "<b>".__('Height')."</b></td>";
 echo "<td class='datos2'>";
 echo "<input type='text' name='height' value='$height' size=6></td></tr>";
 
-$periods = array(3600 => "1 ".__('hour'), 7200 => "2 ".__('hours'), 10800 => "3 ".__('hours'),
-					21600 => "6 ".__('hours'), 43200 => "12 ".__('hours'), 86400 => "1 ".__('day'),
-					172800 => "2 ".__('days'), 345600 => "4 ".__('days'), 604800 => __('Last week'),
-					1296000 => "15 ".__('days'), 2592000 => __('Last month'), 5184000 => "2 ".__('months'),
-					15552000 => "6 ".__('months'), 31104000 => __('1 year'), 31104000 => __('1 year'));
+$periods = custom_graphs_get_sec_periods();
 					
 $period_label = $periods[$period];
 
diff --git a/pandora_console/include/functions_custom_graphs.php b/pandora_console/include/functions_custom_graphs.php
index 66953dcb27..186518fdd2 100644
--- a/pandora_console/include/functions_custom_graphs.php
+++ b/pandora_console/include/functions_custom_graphs.php
@@ -137,4 +137,30 @@ function custom_graphs_get_periods () {
 	return $periods;
 }
 
+/**
+ * Get all the possible periods in a custom graph in seconds.
+ *
+ * @return The possible periods in a custom graph in an associative array.
+ */
+function custom_graphs_get_sec_periods () {
+	$periods = array ();
+	
+	$periods[3600] = __('1 hour');
+	$periods[7200] = '2 '.__('hours');
+	$periods[10800] = '3 '.__('hours');
+	$periods[21600] = '6 '.__('hours');
+	$periods[43200] = '12 '.__('hours');
+	$periods[86400] = __('1 day');
+	$periods[172800] = __('2 days');
+	$periods[345600] = __('4 days');
+	$periods[604800] = __('1 week');
+	$periods[1296000] = __('15 daysk');
+	$periods[2592000] = __('1 month');
+	$periods[5184000] = __('2 months');
+	$periods[15552000] = __('6 months');
+	$periods[31104000] = __('1 year');
+	
+	return $periods;
+}
+
 ?>
diff --git a/pandora_console/include/graphs/fgraph.php b/pandora_console/include/graphs/fgraph.php
index 2b81aaa308..acbc87fa63 100755
--- a/pandora_console/include/graphs/fgraph.php
+++ b/pandora_console/include/graphs/fgraph.php
@@ -221,10 +221,10 @@ function threshold_graph($flash_chart, $chart_data, $width, $height, $ttl = 1) {
 function area_graph($flash_chart, $chart_data, $width, $height, $color, $legend,
 	$long_index, $no_data_image, $xaxisname = "", $yaxisname = "", $homeurl="",
 	$water_mark = "", $font = '', $font_size = '', $unit = '', $ttl = 1, $series_type = array(),
-	$chart_extra_data = array(), $yellow_threshold, $red_threshold) {
+	$chart_extra_data = array(), $yellow_threshold = 0, $red_threshold = 0) {
 
 	setup_watermark($water_mark, $water_mark_file, $water_mark_url);
-	
+
 	// ATTENTION: The min height is 101
 	if($height <= 100) {
 		$height = 101;
diff --git a/pandora_console/include/graphs/flot/pandora.flot.js b/pandora_console/include/graphs/flot/pandora.flot.js
index 543bec2d1e..fbea57bc99 100644
--- a/pandora_console/include/graphs/flot/pandora.flot.js
+++ b/pandora_console/include/graphs/flot/pandora.flot.js
@@ -864,8 +864,10 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
 	//~ });
 	
 	if(menu) {
+		var parent_height;
 		$('#menu_overview_'+graph_id).click(function() {
 			$('#overview_'+graph_id).toggle();
+			adjust_menu(graph_id, plot, parent_height);
 		});
 		
 		$('#menu_threshold_'+graph_id).click(function() {
@@ -905,14 +907,12 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
 		
 		// Adjust the menu image on top of the plot
 		$('#menu_overview_'+graph_id)[0].onload = function() {
-			var menu_width = $('#menu_'+graph_id).css('width').split('px')[0];
-			var canvaslimit_right = parseInt(plot.offset().left + plot.width());
-			var canvaslimit_top = parseInt(plot.offset().top - 8);
-			var n_options = parseInt($('#menu_'+graph_id).children().length);
-
-			$('#menu_'+graph_id).css('left',canvaslimit_right-menu_width-20);
-			$('#menu_'+graph_id).css('top',canvaslimit_top-parseInt(this.height));
-			$('#menu_'+graph_id).show();
+			// Add bottom margin in the legend
+			var menu_height = parseInt($('#menu_'+graph_id).css('height').split('px')[0]);
+			var legend_margin_bottom = parseInt($('#legend_'+graph_id).css('margin-bottom').split('px')[0]);
+			$('#legend_'+graph_id).css('margin-bottom', menu_height+legend_margin_bottom+'px');
+			parent_height = parseInt($('#menu_'+graph_id).parent().css('height').split('px')[0]);
+			adjust_menu(graph_id, plot, parent_height);
 		}		
 	}
 	
@@ -921,6 +921,29 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend, colors,
 	}
 }
 
+function adjust_menu(graph_id, plot, parent_height) {
+	if($('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width') != undefined) {
+		left_ticks_width = $('#'+graph_id+' .xAxis .tickLabel').eq(0).css('width').split('px')[0];
+	}
+	else {
+		left_ticks_width = 0;
+	}
+	
+	var parent_height_new = 0;
+
+	var legend_height = parseInt($('#legend_'+graph_id).css('height').split('px')[0]) + parseInt($('#legend_'+graph_id).css('margin-top').split('px')[0]);
+	if($('#overview_'+graph_id).css('display') == 'none') {
+		overview_height = 0;
+	}
+	else {
+		overview_height = parseInt($('#overview_'+graph_id).css('height').split('px')[0]) + parseInt($('#overview_'+graph_id).css('margin-top').split('px')[0]);
+	}
+		
+	$('#menu_'+graph_id).css('top',(-parent_height+legend_height-overview_height-7)+'px');
+	$('#menu_'+graph_id).css('left',plot.width()-(left_ticks_width/2));
+	$('#menu_'+graph_id).show();
+}
+
 function set_watermark(graph_id, plot, watermark_src) {
 		var img = new Image();
 		img.src = watermark_src;
diff --git a/pandora_console/include/graphs/functions_flot.php b/pandora_console/include/graphs/functions_flot.php
index 1a1afd7ffc..f1b1f0fd6d 100644
--- a/pandora_console/include/graphs/functions_flot.php
+++ b/pandora_console/include/graphs/functions_flot.php
@@ -120,8 +120,10 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend, $long_in
 	// Get a unique identifier to graph
 	$graph_id = uniqid('graph_');
 
+	// Parent layer
+	$return = "<div>";
 	// Set some containers to legend, graph, timestamp tooltip, etc.
-	$return = "<p id='legend_$graph_id' style='font-size:".$font_size."pt'></p>";
+	$return .= "<p id='legend_$graph_id' style='font-size:".$font_size."pt'></p>";
 	$return .= "<div id='$graph_id' class='graph' style='width: ".$width."px; height: ".$height."px;'></div>";
 	$return .= "<div id='overview_$graph_id' style='display:none; margin-left:0px; margin-top:20px; width: ".$width."px; height:50px;'></div>";
 	$return .= "<div id='timestamp_$graph_id' style='font-size:".$font_size."pt;display:none; position:absolute; background:#fff; border: solid 1px #aaa; padding: 2px'></div>";
@@ -220,7 +222,7 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend, $long_in
 		}
 		
 		$menu_width = 18 * $nbuttons + 8;
-		$return .= "<div id='menu_$graph_id' style='display:none; text-align:center; width:".$menu_width."px; position:absolute; border: solid 1px #666; border-bottom: 0px; padding: 4px 4px 0px 4px'>
+		$return .= "<div id='menu_$graph_id' style='display:none; text-align:center; width:".$menu_width."px; position:relative; border: solid 1px #666; border-bottom: 0px; padding: 4px 4px 4px 4px'>
 				<a href='javascript:'><img id='menu_cancelzoom_$graph_id' src='".$homeurl."images/zoom_cross.disabled.png' alt='".__('Cancel zoom')."' title='".__('Cancel zoom')."'></a>";
 		if($threshold) {
 			$return .= "<a href='javascript:'><img id='menu_threshold_$graph_id' src='".$homeurl."images/chart_curve_threshold.png' alt='".__('Warning and Critical thresholds')."' title='".__('Warning and Critical thresholds')."'></a>";
@@ -286,7 +288,10 @@ function flot_area_graph($chart_data, $width, $height, $color, $legend, $long_in
 	$return .= "pandoraFlotArea('$graph_id', '$values', '$labels', '$labels_long', '$legend', '$colors', '$type', '$serie_types', $watermark, $width, $max_x, '".$config['homeurl']."', '$unit', $font_size, $menu, '$events', '$event_ids', '$legend_events', '$alerts', '$alert_ids', '$legend_alerts', '$yellow_threshold', '$red_threshold', '$separator', '$separator2');";
 	$return .= "\n//]]>";
 	$return .= "</script>";
-
+	
+	// Parent layer
+	$return .= "</div>";
+	
 	return $return;	
 }